Hızlandırılmış Mobil Sayfalar İçin Başlangıç Kılavuzu (AMP)
Hızlandırılmış Mobil Sayfalar Google’ın, mobil web’in en büyük sorununu çözmeyi amaçlayan girişimidir. - hız. Büyük bir özenle tasarladığımız müthiş kullanıcı deneyimleri mobil cihazlarda acı çekiyor.
Yavaşlık sadece bir UX problemi değil, aynı zamanda dönüşüm oranlarını azaltır, ve erişilebilirliği zarar daha yavaş internet bağlantısı olan kullanıcıları hariç tutarak. AMP yayıncılara izin vermek amacıyla başlatılan bir takım çalışmasıdır. bir kez mobil olarak optimize edilmiş içerik oluşturun ve her yere anında yüklenmesini sağlayın
.
Piyasaya sürüldüğünden beri BBC, The Economist, Guardian News ve Financial Times gibi birçok yayıncı girişimi uyguladı. Bu nedenle AMP'nin mobilde rekabet edebilmek isteyen herkes için düşünmeye değer bir yenilik olduğunu güvenle söyleyebiliriz. ağ.
AMP Uygulamada
Ayrıntılara dalmadan önce, işte AMP demosu, Böylece yapabilirsiniz eylemde görmek. Demoya bu linkten erişilebilir..
AMP'yi çalışırken görmek için iki şey yapmanız gerekir:
- Demoyu bir mobil cihazda veya bir mobil simülatörde, örn. Chrome DevTools'un Mobil Cihaz Simülatörü.
- Arama çubuğunu arama çubuğunda çalıştırın. Google AMP şu anda ağırlıklı olarak haber sitesiyle çalıştığından, en iyi seçenek taze bir haber öyküsüdür.
Aşağıdaki ekran görüntüsünde, arama terimini kullandığımda ne aldığımı görebilirsiniz rio olimpiyatları
.
Gördüğünüz gibi, AMP sayfaları olarak görünür. Google Rich Kartları, bir mobil olarak optimize edilmiş görüntü atlıkarınca, Google’ın Mayıs 2016’da yayınladığı.
Google’ın AMP sayfalarını diğer mobil olarak optimize edilmiş sayfalardan nasıl farklılaştırdığına dikkat edin 2 farklı etiket kullanarak: AMP ve Mobil uyumlu. Bir AMP web sayfasının nasıl göründüğünü ve mobilde ne kadar hızlı çalıştığını görmek için sonuçlardan bazılarına tıklamakta fayda var.
Teknik arka plan
AMP bir web standardı mevcut web teknolojilerine dayanıyor ve statik içeriğe odaklanıyor. Var 3 farklı parça:
- AMP HTML: ile değiştirilmiş HTML (1) belirli düzenli HTML / CSS özelliklerinin kısıtlanması ve (2) yeni özel etiketlerin tanıtımı (Bileşenler)
- AMP JS: sayfa yükleme süresini azaltmak için en iyi uygulamaları zorlar
- AMP CDN: Sitenizi daha da optimize eden yerleşik bir doğrulama sistemine sahip bir önbellek
AMP sayfalarının teknik geçmişi hakkında daha fazla bilgi edinmek istiyorsanız, Google’ın Paul Bakaus’un verdiği bir videoyu izleyin. tanıtım konuşması AMP'de.
Daha derine dalmak istiyorsanız, AMP'nin mobil performansı artırmak için hangi optimizasyon tekniklerini kullandığını da anlamaya değer. Aşağıdaki videoda AMP Engineering’in lideri Malte Ubl AMP anatomisi detayda.
AMP HTML
Hızlandırılmış Mobil Sayfalar normal HTML sayfaları bu ihtiyacı bir takım kuralları takip et sayfaların daha hızlı yüklenmesini ve güvenilir performansla oluşturulmasını sağlamak için.
Bilmeniz gereken en önemli şeylere bir göz atalım. Ayrıca tam AMP HTML spesifikasyonuna da bakabilirsiniz..
Ayrı bir AMP Sayfası İsterseniz Karar Verin
Aynı statik içerik sayfası için 2 ayrı versiyon - biri AMP, biri de AMP olmayan sürüm için. Ayrıca sahip olmayı da seçebilirsiniz sadece bir versiyon - AMP sayfasını kullanın ve her yerde kullanın. ilişkin tarayıcı desteği, AMP’nin Github sayfası şöyle iddia ediyor:
Tarayıcı desteği konusunda hala endişeleniyorsanız, Google’ın Paul Irish'in Stackoverflow’taki yayınına göz atın.
İki sayfaya sahip olmak istiyorsanız (AMP ve AMP olmayan) her birine bağlantı amacıyla arama motorlarının varlığı hakkında bilgi vermek iki versiyonları.
Aşağıdaki kodu AMP olmayan sayfanın bölümü:
Ayrıca aşağıdaki satırı da AMP sayfasının bölümü:
Yalnızca bir AMP sayfanız varsa, yine de aşağıdaki şekilde kendisinden bağla:
Başlangıç Kazanı
AMP Projesi farklı sunuyor başlangıç kazan plakaları başlamak için kullanabilirsiniz. Aşağıdaki en basit AMP HTML kazanına bir göz atın:
Selam Dünya!
Kombinin normal HTML sayfasını kullanarak normal HTML sayfasına bağlandığını görebilirsiniz. etiket.
>