AMP Nasıl Uygulanır (Gerçekten Yapmanız Gerekiyorsa): Hızlandırılmış Mobil Sayfalara Hızlı Başlangıç ​​Kılavuzu

Hem arama yapanlar hem de arama motorları, web sayfalarının yıldırım hızında olmasını ister. Bu nedenle, sayfa hızının Google'ın arama algoritmasında bir sıralama faktörü olması şaşırtıcı değil.

Birden fazla araştırma, sayfa yükleme süresinin bir sitenin alt satırını büyük ölçüde etkilediğini göstermiştir: dönüşüm ve gelir.

Hızlandırılmış Mobil Sayfaları (AMP) kullanmak, mobil cihaz kullanan kişiler için web sayfalarınızı hızlandırmanın bir yoludur.

AMP ek avantajlar sunabilir: Google aramada AMP atlıkarıncasında görünme ve arama yapanlara daha iyi bir deneyim sunma.

AMP Siteniz İçin Uygun mu?

Başlangıçta, AMP çözümü medya siteleri için tasarlanmıştı. Google, haberlerin arama sonuçlarından neredeyse anında çıkmasına yardımcı olmak istedi.

Zamanla, AMP diğer site türlerine, özellikle de reklamcılara, reklam teknolojisi platformlarına ve e-ticaret sitelerine ve yayıncılara yayıldı.

Bugün, bazı web siteleri AMP'yi uygulamaktan fayda sağlıyor. Perakendeciler ve diğerleri, açılış sayfalarını hızlı bir şekilde sunmak için AMP'yi kullanır. Ve bu formattaki reklamların görülme şansı daha yüksektir.

Web sayfalarınızı daha hızlı hale getirmenin bir yolunu arıyorsanız, AMP sizin için doğru olabilir .

Zaten yeterince hızlı ve duyarlı olan web sayfaları için AMP'ye hiç ihtiyacınız yok. Google'dan Gary Illyes bunu herkese açık bir şekilde söyledi. Ve nedenini bu video klipte açıklıyorum.

AMP'yi uygulamanın alternatifleri nelerdir?

• İçerik Dağıtım Ağı . CDN'ler, bir sitedeki en ağır kaynak dosyalarını son kullanıcıya yaklaştırarak çalışır. Daha az seyahat mesafesi daha hızlı teslimat anlamına gelir, bu nedenle sayfalarınız bir mobil cihazda daha hızlı görüntülenir.
• Tamamen uygulanmış HTTP/2 . HTTP/2 protokolü, web üzerinde veri aktarımını hızlandırır. Dolayısıyla, pazarınız 4G veya 5G internet hızlarına sahipse ve web siteniz HTTP/2 etkinse, muhtemelen AMP'ye hiç ihtiyacınız yoktur.
• Aşamalı Web Uygulamaları teknolojisi . PWA'lar web sitenizin yerel bir mobil uygulama gibi davranmasını sağlayabilir. Bunlar hakkında daha önce yazdık (bkz. Aşamalı Web Uygulaması Nedir).

İşte bu HTTP/2 ifadesini gösteren bir hikaye.

Bir ABD şirketi olan danışmanlık müşterilerimizden biri, birkaç bin web sayfasını AMP'ye dönüştürdü. Dört personel, projeyi tamamlamak için beş hafta çalıştı.

Sonuç? AMP sayfaları, mobil arama yapanlara biraz daha hızlı görüntülendi. Ancak web sitesinin sıralaması ve trafiği etkilenmedi. Geriye dönüp bakıldığında, zamanları ve emekleri yeni içerik oluşturmak için daha iyi harcanabilirdi.

AMP çözümü, düşük ağ hızlarına sahip ülkelerde/bölgelerde en mantıklı olanıdır. Örneğin, Bruce Clay Hindistan ofisimiz, oradaki bazı müşteriler için AMP'nin uygulanmasına yardımcı oldu ve iyi sonuçlar verdi.

AMP'nin sizin için doğru olduğuna inanıyorsanız ve başlamaya hazırsanız, temel ilk adımları özetleyeceğim.

Hızlandırılmış Mobil Sayfalar Nasıl Uygulanır?

Hızlandırılmış Mobil Sayfaları web siteniz için uygulamak ve sonuçları izlemek için üç temel adım vardır:

1. AMP sayfası şablonunu oluşturun.
2. AMP sayfalarını açın.
3. Analitik ile takip edin.

Aşağıda her adıma ayrıntılı olarak bakacağız ve ayrıca daha fazla bilgi için AMP belgelerine bağlantı vereceğim.

Sitenizin hangi bölümlerinin AMP'lenmesi gerektiğine karar verdikten sonra, AMP sayfaları oluşturma, yayınlama ve izlemeyle ilgili temel adımları burada bulabilirsiniz.

1. AMP Sayfa Şablonunu Oluşturun

AMP'yi uygulamanın ilk adımı bir web sayfası şablonu oluşturmaktır.

AMP, birçok farklı yayın platformuyla entegre olur. Listeyi AMP'nin Hızlı Başlangıç ​​kılavuzunda görüntüleyebilir ve daha fazla ayrıntı almak için içerik yönetim sisteminizi seçebilirsiniz.

AMP şablonlarını sıfırdan oluşturabilirsiniz. Veya mevcut HTML sayfalarını AMP formatına dönüştürebilirsiniz. Belgeler, tüm seçenekler hakkında bilgi verir.

AMP şablonu oluşturmaya yönelik işaretçiler:

• AMP için bir sayfa şablonu oluştururken AMP özelliklerini karşıladığından emin olun. AMP spesifikasyonları sayfasında HTML formatı ve daha fazlası hakkında rehberlik bulabilirsiniz.
• Sayfayı şekillendirirken, emrinizde JavaScript olmayacak. Düzenin iyi görünmesi için ihtiyaç duyduğunuz kadar özel <amp*> etiketi ekleyin. Buna duyarlı görseller, video ve ses kullanımı dahildir (ayrıntılar için AMP değişimlerine bakın).
• Basit tutun. Sonuçta, AMP'nin amacı temiz, sadeleştirilmiş bir web sayfasına sahip olmaktır.
• Her sayfada alanınıza bir tür gezinme ekleyin. Bir logo, resim veya metinden bağlantı oluşturabilirsiniz. AMP sayfaları bir Google önbelleğinden sunulduğundan, arama yapanlara bir bağlantı vermek, onları web sitenizde tutmaya çalışmak için çok önemlidir.
• Reklamları web sayfalarınızda tutmanız gerekiyorsa, bunları taşımanız gerekir. amp-ad bileşenini kullanın. <amp-ad> kullanamıyorsanız, AMP şablonlarınıza reklam eklemeyin. (AMP'deki reklamlar hakkında daha fazla bilgiyi buradan okuyabilirsiniz.)
• Son olarak, AMP sayfasını doğrulayın. Yalnızca bir hata veya uyarı, sayfayı AMP önbelleğinden uzak tutacaktır. Bu nedenle doğrulama çok önemli bir adımdır. Yaygın doğrulama hataları için bu sayfaya göz atın.

AMP Projesi tarafından hazırlanan bu video, sayfaların nasıl doğrulanacağını açıklar:

2. AMP Sayfalarını Açın

Önce AMP'de web sitenizdeki bir veya iki tür sayfayı test etme fikrini seviyorum. İdeal olarak, Google'ın mobil arama sonuçlarında AMP sürümünü sunup sunmadığını görebilmeniz için sıralanan bazı sayfalar ekleyin.

Sitenizin tarama hızına bağlı olarak, Google'ın sayfanın AMP sürümünü bulması, kontrol etmesi ve dizine eklemesi birkaç gün sürebilir.

Kullanıma sunmanın en az bir ay çalışmasına izin verin (yapabiliyorsanız daha uzun süre). Sayfalarınız trafik aldığı sürece, AMP'nin site genelinde kullanıma sunulmasının buna değdiğinden emin olmak için yeterli veri oluşturacaksınız.

3. Analytics ile Takip Edin

AMP sayfalarınızın performansını izlemek isteyeceksiniz. AMP analizi, normal Google Analytics'ten farklı olacağından, nasıl çalıştığını anlamak için bu kılavuzu okuyun.

Sayfaları şirket içi veya üçüncü taraf analizleri aracılığıyla takip edebilirsiniz. Birçok analitik satıcısı, amp-analitik için yerleşik yapılandırmalara sahiptir.

Basit izleme için amp-pixel'i ve diğer her şey için amp-analitiği kullanabilirsiniz.

İzlemeyi kurarken teknik öneriler:

• Nelerin kaydedilmesi gerektiğini tanımlamak için kurallı URL'yi ve diğer değişkenleri kullandığınızdan emin olun. Bu, AMP nedeniyle meydana gelen trafik artışlarını veya düşüşlerini anlamak için gereklidir.
• Standart URL'ye "type=amp" veya benzeri bir sorgu dizesi parametresi eklemek için amp-analytics'te extraUrlParams özniteliğini kullanın. Bu, analitikte AMP sayfalarını normal web sayfalarından ayırt etmeyi veya gerekirse özel bir segment oluşturmayı kolaylaştıracaktır. Bu şekilde, AMP lansmanından önceki ve sonraki sayfalardaki toplam trafiği karşılaştırabilirsiniz.

Yan Not: Hızlandırılmış Mobil Sayfalar Nasıl Çalışır?

AMP sayfalarının nasıl anında yükleniyor gibi görünebileceğini merak ediyorsanız, bunun nedeni, normal bir web sayfasından farklı şekilde optimize edilmiş olmalarıdır.

Aşağıda, bir tarayıcının bir sayfayı görüntülemek için yapması gereken iş miktarını azaltmak için AMP'nin yaptığı optimizasyonları özetledim. (AMP Projesi sitesindeki tam listeye bakın.)

AMP işleminin yapabilecekleri şunlardır:

• Yalnızca eşzamansız JavaScript yürütün – Büyük dosyaların yüklenmesini beklemez.
• Kaynakları (resimler, reklamlar ve iframe'ler gibi) statik olarak boyutlandırın – Tarayıcı, sayfanın nasıl düzenleneceğini en baştan tam olarak bilir.
• Uzantıların oluşturmayı engellemesine izin vermeyin – Gelen uzantılar olsa bile sayfanın beklemesi gerekmez.
• Üçüncü taraf JavaScript'i kritik yolun dışında tutun – Reklamlar gibi şeyler korumalı alanlı iframe'lerle sınırlıdır.
• Yalnızca satır içi CSS'ye izin ver – Şişirilmiş CSS dosyaları sayfayı geciktirmez.
• Yazı tipleri indirilmeye başlayana kadar HTTP isteği yok – Yazı tiplerini verimli tutar.
• Stil yeniden hesaplamalarını en aza indirin – Tüm DOM okumaları, sayfanın mizanpajını yapmak için ön tarafta gerçekleşir.
• Yalnızca GPU hızlandırmalı animasyonları çalıştırın - Grafik işleme birimi, görsel animasyonları (dönüşüm ve opaklık) işleyerek CPU üzerindeki yükü azaltır.
• Kaynak yüklemeye öncelik verin - En önemli kaynaklar (ekranın üst kısmında) önce indirilir.
• Sayfaları önceden oluşturulmuş içerik aracılığıyla yükleyin – Ekranın üst kısmındaki içerik, bir kullanıcı seçmeden önce bile mevcut olabilir, böylece tıklandığında anında görünür.

Bu video, AMP'nin web sayfalarını nasıl hızlandırdığını açıklar:

Sonuç Düşünceleri

AMP, web sayfalarınızı hızlandırmanın ve mobil kullanıcılara daha iyi bir deneyim sunmanın bir yoludur.

Web sayfalarınızı güçlendirmeye hazırsanız, başlamak için bu makaledeki temel adımları ve AMP belgelerini izleyin. Hatta Google'ın AMP Roadshow atölyelerinden birine katılabilirsiniz (dünya çapındaki programa buradan bakın).

Ancak çoğu site için tavsiyem şudur: yeniden düşünün.

İşletmeniz için kritik olmadığı sürece lütfen AMP'yi uygulamayın.

Web sayfalarınızı farklı bir biçime dönüştürmek için harcadığınız zaman, tüm kullanıcılarınıza hizmet edecek iyi içerik oluşturmak için daha iyi harcanabilir.

Mobil optimizasyon uygulamaları hakkında daha fazla bilgi edinmek istiyorsanız, size sunulan bu mobil SEO hizmetlerine bir göz atmayı unutmayın!

Sizi bu gönderiyi paylaşmaya davet ediyorum. Gelecekteki yeni gönderilerin gelen kutunuza ücretsiz olarak gönderilmesi için lütfen blogumuza abone olun.