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:

1. Demoyu bir mobil cihazda veya bir mobil simülatörde, örn. Chrome DevTools'un Mobil Cihaz Simülatörü.
2. 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:

1. 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)
2. AMP JS: sayfa yükleme süresini azaltmak için en iyi uygulamaları zorlar
3. 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. > etiket ekler AMP JS kütüphanesi.

Sadece sahip olabilirsin bir gömülü stil sayfası ve ayrıca birçok izin verilmeyen stil kuralları, örneğin kullanamazsınız !önemli niteleyici, @ithalat kural ve sözde sınıfları.

AMP sayfalarınız için CSS yazmaya başlamadan önce stil sayfası kısıtlamalarını kontrol etmeyi unutmayın.

AMP stil kuralları hakkında bilmek önemli olan başka bir şey var: siz istediğiniz düzeni kullanamazsınız - tarayıcıya izin vermek için AMP'nin ilkelerinden biridir. Her bir elementin alanını hesaplamak sayfada önceden.

Desteklenen ve desteklenmeyen düzenlere bir göz atın.

AMP JS

AMP belgeleri içerebilir ne yazar tarafından yazılmış ne de üçüncü taraf JavaScripts, ancak bu, Hızlandırılmış Mobil Sayfaların JavaScript kullanmadığı anlamına gelmez. AMP'nin JavaScript kitaplığı (AMP çalışma zamanı), AMP sayfalarını hızlı bir şekilde yüklemek ve oluşturmaktan sorumludur. En iyi performans uygulamalarını uygulamak.

AMP Bileşenleri

AMP Bileşenleri AMP çalışma zamanı tarafından tanımlandı. Onlar yukarıda bahsedilen AMP’ye özgü HTML etiketleri normal muadilleri yerine kullanmanız gerekir. onun yerine etiket.

Her AMP Bileşeni bir belirli dış kaynak (görüntü, video, gömme vb.). Dış kaynaklar web sitelerini yavaşlatmaya eğilimlidir. Bu çözümün temel amacı; dış kaynakların yüklenmesini yönetmek Makul bir şekilde onları çalıştırarak sanal alanların içinde.

AMP size sağlar 2 çeşit Bileşen:

1. Dahili Bileşenler: her AMP belgesinde her zaman kullanılabilirler, AMP çalışma zamanına dahil edilmiş. Şu anda beş tanesi var:
   1. reklam göstermek için
   2. Görüntüler için yerine kullanılır. etiket
   3. pikselleri izlemek için (sayfa görünümlerini saymak için kullanılır)
   4. doğrudan HTML5 video dosyası embedleri için etiket
   5. gömülü elemanlar için (yerine kullanılabilir bazı durumlarda)
2. Genişletilmiş Bileşenler: Ek bileşenler gerekir açıkça onları dahil et AMP belgenize ekleyin. Gibi birçok yararlı olanları vardır ve , tam listeye bakın. Birçoğu üçüncü taraf servislerinden içerik katıştırma, Twitter veya Instagram gibi.

Harici olarak yüklenen tüm kaynakların (örneğin ve bilinen bir şey olmalı ve nitelik Tarayıcıyı etkinleştirmek için mizanpajı önceden hesaplamak.

AMP CDN

AMP CDN temelde bir önbellek, denilen Google AMP Önbelleği. Geçerli AMP belgelerini alır, önbelleğe alır ve yükler. AMP CDN’nin dahili doğrulama sistemi.

Buna değer AMP sayfalarınızı test etme güvenle gitmeleri için çevrimiçi olmalarına izin vermeden önce doğrulayıcıyı geçmek. Bunu birçok farklı şekilde yapabilirsiniz.

AMP CDN'nin mümkün olan en iyi performansı elde etmek için HTTP / 2 protokolünü kullandığını bilmek güzel.

AMP Araçları

Hızlandırılmış Mobil Sayfaları uygulamanıza yardım edebilecek harika araçlar var, bazılarına bir göz atalım.

Google, web yöneticilerine kullanışlı bir uygulama sağlar. AMP durum raporu aracı bu, başarılı bir şekilde dizine alınmış AMP sayfalarının ve AMP ile ilgili hataların sayısını gösterir..

Lullabot en AMP PHP Kütüphanesi HTML sayfalarınızı AMP HTML’ye dönüştürmenize olanak tanır ve ayrıca herhangi bir HTML belgesinin AMP standartlarına uygunluğunu rapor eder.

AMP'yi WordPress sitenizde kullanmak istiyorsanız, Yoast'ın AMP için WordPress'i nasıl ayarlayacağı ve AMP'nin Yoast SEO eklentisi ile nasıl çalıştığı hakkındaki öğreticiyi okuyun..

Ayrıca Automattic’lere göz atabilirsiniz. AMP eklentisi Bu, WordPress sitenizde Hızlandırılmış Mobil Sayfaları etkinleştirmenize olanak sağlar.

Diğer Hususlar

Hala ikna olmadıysanız, videoya bir hızlı hız testi altında.

Nuzzel'in kurucusu Jonathan Abrams, New York Times gibi mobil olarak optimize edilmiş sitelerin bile daha hızlı yüklendiğini iddia ettiğinden daha iyi iddialarda bulunuyor. - ortalama sayfayı yüklemek için üç saniye almak yerine, sayfa yüklenir. yarım saniyeden az Google’ın Hızlandırılmış Mobil Sayfaları etkinleştirildiğinde.

Verge’de Google AMP’nin rekabeti ve Facebook Anlık Makaleleri ile ilgili ilginç bir makaleyi de okuyabilirsiniz. Hala "sorun nedir?" İçin bir cevap arıyorsanız, AMP’nin 2000’den önce bir internet zamanına dönmemizden korktuğunu ve gerçekten açık bir standart olup olmadığını sorduğunu belirten Yoast’ın gönderisine bakın..

.