AMP Sayfalarında Core Web Vitals LCP Optimizasyonu

AMP core web vitals lcp optimizasyonu, bir mobil cihazın ilk görünüm alanında (viewport) render edilen en büyük görsel veya metin bloğuna odaklanılmasını gerektirir. Geliştiriciler bunu, AMP çalışma zamanının verimli bir şekilde yüklenmesini sağlayarak ve data-hero özniteliğini kullanarak belirli ana öğelere öncelik vererek başarırlar. Google, AMP sayfalarını diğer tüm indekslenen içerikler gibi ele aldığından, 2,5 saniyelik eşiği karşılamak, sağlıklı ve hızlı bir kullanıcı deneyimini sürdürmek için temel bir gereklilik olmaya devam etmektedir.

AMP bağlamında LCP nedir?

En Büyük İçerikli Boyama (Largest Contentful Paint – LCP), bir sayfanın ana içeriğinin kullanıcı için görünür hale gelmesinin ne kadar sürdüğünü ölçer. Çoğu AMP sayfasında LCP öğesi genellikle öne çıkan bir görsel, büyük bir başlık veya bir video posteridir. Çerçeve hız için tasarlanmış olsa bile, yavaş bir sunucu veya optimize edilmemiş varlıklar LCP’yi önerilen 2,5 saniyenin üzerine çıkarabilir.

AMP Sayfalarında Core Web Vitals LCP Optimizasyonu

Google, bir sayfanın algılanan yüklenme hızını ölçmek için bu metriği kullanır. Ana içeriğin görünmesi çok uzun sürerse, kullanıcılar genellikle tam olarak yüklenmeden önce siteden ayrılırlar. AMP için bu metrik özellikle hayati önem taşır çünkü çerçeve yüksek hızlı bir çözüm olarak pazarlanmaktadır. LCP hedefine ulaşamamak, teknolojiyi kullanmanın faydalarını baştan ortadan kaldırabilir.

Google Search, AMP sayfalarını diğer web sayfaları gibi indeksler ve sayfanın oluşturulmasında kullanılan teknolojiden bağımsız olarak tüm sayfalara aynı standardı uygular.

Google Search Central

Google, AMP üzerinde Core Web Vitals’ı nasıl ölçer?

Google, AMP sayfalarınızın performansını belirlemek için Chrome Kullanıcı Deneyimi Raporu’ndan (CrUX) veri toplar. Bu veriler, sitenizi çeşitli ağ koşullarında ziyaret eden gerçek kullanıcılardan gelir. AMP sayfanız Google AMP Cache’ten sunuluyorsa, önbellek önceden oluşturma (pre-rendering) ve küresel içerik dağıtım ağları kullandığı için performans genellikle daha iyidir.

AMP Sayfalarında Core Web Vitals LCP Optimizasyonu — 2

Ancak kullanıcı AMP sayfasına doğrudan orijinal sunucunuzdan (origin server) erişirse, hız tamamen barındırma ve sunucu yapılandırmanıza bağlıdır. Google, tüm sayfa yüklemelerinin 75. yüzdelik dilimine (percentile) bakar. Bu, ziyaretçilerinizin %75’i 2,5 saniyenin altında bir LCP deneyimliyorsa, sayfanızın değerlendirmeyi geçtiği anlamına gelir.

Bazı AMP sayfaları neden hâlâ LCP hedeflerini tutturamıyor?

Yaygın bir yanlış anlama, AMP çerçevesini kullanmanın otomatik olarak başarılı bir LCP skoru garanti ettiğidir. Bu her zaman doğru değildir. Birkaç faktör en büyük içerik öğesinin oluşturulmasını geciktirebilir. Örneğin, LCP öğesi optimize edilmemiş bir görselse, tarayıcı gösterebilmeden önce tam dosyanın indirilmesini beklemek zorundadır.

Bir diğer sorun da AMP çalışma zamanının kendisinin neden olduğu gecikmedir. Çalışma zamanı, belirli öğeleri göstermeden önce sayfanın düzenini (layout) yüklemeli ve hesaplamalıdır. Head bölümünde çok sayıda eklenti veya üçüncü taraf komut dosyası varsa, çalışma zamanının başlatılması daha uzun sürebilir, bu da LCP zamanlamasını geciktirir.

  • Orijinal sunucudan yavaş sunucu yanıt süreleri (TTFB).
  • Oluşturmayı engelleyen (render-blocking) özel CSS veya büyük yazı tipi dosyaları.
  • Görsellerde eksik olan genişlik ve yükseklik nitelikleri, düzenin yeniden hesaplanmasına yol açar.
  • data-hero özniteliği ile önceliklendirilmemiş görseller.
  • Ekranın üst kısmında (above the fold) çok fazla AMP bileşeni (karuseller veya sosyal medya yerleştirmeleri gibi).

AMP’de görsel yüklenmesini nasıl iyileştirebilirsiniz?

Görseller yavaş LCP’nin en sık görülen nedenidir. Bunu düzeltmek için sayfanın birincil görselinde data-hero özniteliğini kullanmalısınız. Bu öznitelik, AMP çalışma zamanına ve AMP Cache’e, çalışma zamanı düzen hesaplamalarını tamamen bitirmesini bile beklemeden o görseli mümkün olan en kısa sürede indirmeye başlamasını söyler.

Ek olarak, tüm amp-img öğeleri için srcset özniteliğini kullanmalısınız. Bu, tarayıcının kullanıcının ekran çözünürlüğüne bağlı olarak en uygun görsel boyutunu seçmesini sağlar. Daha küçük bir ekranın 2000 piksel genişliğinde bir görselə ihtiyacı yoktur. Daha küçük bir sürüm sunarak bayt boyutunu azaltır ve LCP’yi hızlandırırsınız.

Kullanıcılar, mümkün olan yerlerde, ilgili kanonik sayfalarındakilerle aynı içeriği deneyimleyebilmeli ve aynı eylemleri AMP sayfalarında da gerçekleştirebilmelidir.

Google Search Central

AMP Optimizer’ın rolü

AMP Optimizer, AMP HTML’niz üzerinde sunucu tarafında optimizasyonlar gerçekleştiren bir araçtır. LCP’yi hızlandırmak için gereken manuel görevlerin çoğunu otomatikleştirebilir. Örneğin, AMP düzenini sunucuda önceden oluşturabilir (pre-render), bu da tarayıcının AMP çalışma zamanının başlamasını bekleme ihtiyacını ortadan kaldırır. Bu teknik LCP’yi birkaç yüz milisaniye azaltabilir.

Optimizatör kullandığınızda, aynı zamanda görsellerinizi dönüştürür ve belgenizin head kısmındaki öğeleri yeniden sıralar. Bu, en kritik kaynakların önce yüklenmesini sağlar. Birçok modern içerik yönetim sistemi, pazarlamacarların yüksek performansı korumasını kolaylaştıran AMP Optimizer’ı otomatik olarak içeren eklentilere sahiptir.

Alien Road, amp core web vitals lcp’yi nasıl uygular?

Alien Road, AMP performansını Google Search Console Core Web Vitals raporunun ayrıntılı bir denetimiyle başlayarak yönetir. Hangi URL’lerin LCP eşiğini geçemediğini belirler ve gecikmeden sorumlu olan spesifik öğeyi saptar. Tipik bir hesapta bu genellikle bir blog yazısındaki öne çıkan görsel veya bir e-ticaret sayfasındaki ürün ana görselidir.

Süreçimiz birkaç spesifik adım içerir. İlk olarak, şablon CSS’in ilk oluşturmayı engellemediğinden emin olmak için sunucu tarafında AMP Optimizer uyguluyoruz. İkinci olarak, data-hero özniteliğini birincil görsel öğeye uyguluyoruz. Örneğin, ev eşyaları satan bir Shopify mağazasında, ana ürün çekiminin öncelikli yükleme için işaretlenmesini sağlıyoruz. Ayrıca TTFB’yi (İlk Bayta Kadar Süre) izliyoruz çünkü sunucu yavaşsa hiçbir frontend optimizasyonu LCP’yi düzeltemez.

Uygulamadan sonra, değişiklikleri doğrulamak için PageSpeed Insights API’sini kullanıyoruz. 28 günlük bir süre boyunca saha verilerinde tutarlı bir iyileştirme eğilimi arıyoruz. Bu veriye dayalı yaklaşım, müşterilere mobil hızlarının genel arama görünürlüklerini nasıl etkilediği konusunda net raporlar sunmamızı sağlar.

LCP’yi iyileştirmek için AMP’yi kaldırmalı mısınız?

Bazı geliştiriciler istedikleri hız hedeflerine ulaşamazlarsa AMP’yi kaldırmayı düşünürler. Bu bir seçenek olsa da, arama sıralamalarını kaybetmemek için dikkatli bir şekilde yönetilmelidir. AMP’den vazgeçmeye karar verirseniz, AMP olmayan sayfalarınızın da aynı derecede hızlı olmasını ve tüm web standardı yönergelerine uymasını sağlamalısınız.

Google’a göre AMP içeriğini kaldırmak için üç seçeneğiniz vardır. Bir sayfanın tüm sürümlerini kaldırabilir, kanonik AMP olmayan sayfayı korurken yalnızca AMP sürümünü kaldırabilir veya kaldırma işlemini yönetmek için bir CMS kullanabilirsiniz. AMP sayfası kanonik olanıysa, 404 hatalarını önlemek için yeni bir AMP olmayan kanonik sayfa kurmalı ve eski URL’yi doğru şekilde yönlendirmelisiniz.

  • CMS’inizin otomatik AMP optimizasyonunu destekleyip desteklemediğini kontrol edin.
  • En çok ziyaret edilen ilk 10 sayfanız için LCP öğesini belirleyin.
  • Önbelleğe alınmış ve alınmamış sayfa hızları arasındaki farkı test edin.
  • Yapılandırılmış verilerin AMP ve AMP olmayan sürümler arasında tutarlı olduğunu doğrulayın.
  • Search Console’daki Core Web Vitals raporunu haftalık olarak izleyin.

Bu hafta nereden başlamalı

Google Search Console hesabınızı açarak başlayın ve Core Web Vitals bölümüne gidin. Raporu yalnızca mobil URL’leri gösterecek şekilde filtreleyin ve ‘LCP sorunu: 2.5 saniyeden uzun’ uyarısını arayın. Bu gecikmeden etkilenen belirli URL gruplarını görmek için rapora tıklayın.

Listeye sahip olduğunuzda, örnek bir URL seçin ve bunu PageSpeed Insights aracından geçirin. ‘Tanı’ bölümünde LCP öğesini belirleyin. Eğer bir görselse, data-hero özelliğine sahip olup olmadığını kontrol edin. Eğer bir metin bloğuysa, yazı tipi yükleme gecikmelerini kontrol edin. En popüler sayfalarınızda bu küçük ayarlamaları yapmak, genel site performansınızda ve kullanıcı tutma oranınızda önemli bir iyileşmeyle sonuçlanabilir.

Paylaş