WordPress AMP sürümünde LCP'yi 2.5s altına çekmek için denenmiş taktikler neler?

Question

Son güncellemeden sonra mobil LCP değerim bir türlü yeşile dönmüyor, özellikle AMP sayfalarda. Cloudflare'ı da devreye soktum, resimleri optimize ettim ama nafile. Deneyimleyen veya kesin çözüm bulan var mı acaba?

Answer 1

Merhaba Değerli WordPress Uzmanı Dostum,

LCP (Largest Contentful Paint) değerinin, özellikle AMP sayfalarında bir türlü yeşile dönmemesi, inanın ki sadece sizin değil, benim de yıllardır birçok projede karşılaştığım ve üzerinde kafa yorduğum bir konu. Cloudflare'ı devreye sokmak, resimleri optimize etmek harika başlangıçlar; ancak bazen LCP'nin peşini bırakmaması, işin daha derinlerine inmemiz gerektiğini gösterir. Bu makalede, deneyimlerimden süzülmüş, gerçekten işe yarayan ve LCP'yi 2.5 saniyenin altına çekmek için denenmiş taktikleri sizinle paylaşacağım. Gelin, bu sorunu birlikte aşalım!

LCP ve AMP İlişkisini Yeniden Anlamak

Öncelikle LCP'nin ne olduğunu, teknik terimlerden uzak bir şekilde hatırlayalım: LCP, web sayfanızın en büyük içerikli öğesinin (bir resim, bir başlık, bir video posteri vb.) ekranda görünmesinin ne kadar sürdüğünü gösteren bir değerdir. Kullanıcı sayfanıza geldiğinde ilk gördüğü, "işte sayfa yüklendi" hissini veren o ana elementin hızıdır aslında.

AMP (Accelerated Mobile Pages) normalde hızlı yüklenmek için tasarlanmıştır, değil mi? Ama bu, sihirli bir değnek sallamak gibi değildir. AMP, belirli kurallar ve kısıtlamalar getirerek hızı garanti etmeye çalışır. Ancak WordPress gibi dinamik bir sistemde, eklentiler, temalar ve yanlış yapılandırmalar nedeniyle AMP'nin bu potansiyelini tam olarak kullanamayabiliriz. Özellikle Google'ın Core Web Vitals güncellemeleri sonrası, LCP kriterleri daha da sıkılaştı ve detaylar önem kazandı.

Siz zaten Cloudflare ve görsel optimizasyonu yapmışsınız, bu çok iyi. Ama LCP genellikle sayfa yapısının ve kritik render yolunun optimize edilmemesinden kaynaklanır. Şimdi adım adım neler yapabiliriz, onlara bakalım.

1. AMP Eklentinizi Kılcal Damarlarına Kadar İnceleyin: Doğru Yapılandırma Hayati Önemde

WordPress'te AMP kurmak için genellikle bir eklenti kullanırız. Ancak bu eklentinin doğru yapılandırılması, LCP için altın kuraldır.

• Resmi AMP Eklentisi mi, Başka Bir Eklenti mi? Eğer henüz resmi AMP eklentisini kullanmıyorsanız, tercihen The Official AMP Plugin kullanmanızı şiddetle tavsiye ederim. Diğer eklentiler bazen AMP standartlarına tam uymayabilir veya ek yük getirebilir.

• Mod Seçimi: Resmi eklentide üç mod bulunur: Standart, Geçişli (Transitional) ve Okuyucu (Reader).
  Standart Mod: En ideali, çünkü ana sitenizle AMP sürümünüz aynıdır ve en iyi kontrolü sağlar. Ancak bu mod, temanızın ve eklentilerinizin AMP uyumlu olmasını gerektirir, ki bu da genellikle ek çalışma demektir.
  Geçişli Mod: Biraz daha esnek ama yine de AMP uyumluluğu ister.
  Okuyucu Modu: En basit olanıdır, sayfanızın çok temel bir AMP sürümünü oluşturur. Ancak bu modda tasarım ve işlevsellikten ödün verebilirsiniz.
  Deneyimimle sabit: LCP için en iyi kontrolü Standart mod sağlar, ancak başlangıçta biraz daha fazla çaba gerektirir. Eğer siteniz çok kompleks değilse, Standart modda AMP uyumlu bir tema ve eklenti kombinasyonu arayışına girin. Yoksa, Geçişli modda AMP hatalarını tek tek temizlemek zorundasınız.

• AMP Validasyon Hataları: Eklentinin ayarlarında "Validation" (Doğrulama) kısmına mutlaka bakın. Herhangi bir validasyon hatası varsa, LCP'nizi düşürüyor olma ihtimali çok yüksektir. Bu hataları tek tek ele alıp düzeltin. Genellikle uyumsuz CSS veya JavaScript kodlarından kaynaklanırlar.

2. Kritik CSS: "Sayfanın Üst Kısmını Hızlandır" Felsefesi

AMP'nin en büyük kısıtlamalarından biri, CSS'in tek bir <style amp-custom> etiketi içinde ve maksimum 75KB boyutunda olmasıdır. Bu, çoğu WordPress temasının veya eklentisinin getirdiği tonlarca CSS'in AMP'de doğrudan kullanılamayacağı anlamına gelir.

• Kritik CSS Ne Demek? Bir kullanıcı sayfanızı açtığında, ekranın hemen görünen kısmını (fold üstü) şekillendiren en temel stil kodlarına "kritik CSS" deriz.
• Neden Önemli? Eğer bu kritik CSS, sayfa yüklenmeden önce hazır değilse, kullanıcı kısa bir süre "içeriksiz" veya "şekilsiz" bir sayfa görür. Bu da LCP değerini artırır.
• Çözüm: AMP eklentileri genellikle kritik CSS'i otomatik olarak ayıklama ve inline etme özelliği sunar. Bu özelliği mutlaka etkinleştirin. Eğer eklentinizde böyle bir seçenek yoksa, manuel olarak veya harici bir araç (örneğin https://www.sitelocity.com/critical-path-css-generator gibi) ile kritik CSS'inizi oluşturup AMP sayfanıza entegre etmeniz gerekebilir. Bu, AMP'nin 75KB CSS limitini aşmamanızı da sağlar.
• Tecrübemden bir not: Birçok LCP sorununda, temanın veya bir eklentinin getirdiği büyük CSS dosyalarının AMP'ye doğru şekilde optimize edilememesi yatar. Kritik CSS'i doğru uygulamak, LCP'yi birkaç saniye bile düşürebilir.

3. Gereksiz JavaScript ve Stil Kodlarından Kurtulun: AMP'nin Saf Hali

AMP'nin en katı kurallarından biri, neredeyse tüm harici JavaScript'i yasaklamasıdır. Sadece AMP'nin kendi bileşenlerine (amp-carousel, amp-youtube vb.) izin verilir.

• Eklenti Temizliği: WordPress sitenizde çok sayıda eklenti kullanmak bir yerden sonra kaçınılmaz hale gelebilir. Ancak bu eklentilerin her biri kendi JS ve CSS dosyalarını getirir. AMP sayfalarınızda gereksiz eklentileri pasif hale getirin veya sadece gerekli olanların AMP'ye yüklenmesini sağlayın. Bazı eklentiler (örneğin bazı analiz araçları, sosyal medya paylaşım butonları), AMP için özel kodlar sunar. Bunları kullanın.
• AMP Uyumsuz JavaScript: Temanızın veya eklentilerinizin getirdiği AMP uyumsuz JavaScript kodlarını tespit edip kaldırın. Google Search Console'daki AMP raporları bu konuda size yol gösterecektir.
• WordPress Fonksiyonları: Eğer biraz kod bilginiz varsa, wp_dequeue_script() ve wp_dequeue_style() gibi WordPress fonksiyonlarını kullanarak belirli eklentilerin veya temanın CSS/JS dosyalarını AMP sayfalarında yüklemesini engelleyebilirsiniz. Bu, AMP'nin temiz kalmasını sağlar.

4. LCP Elementini Tespit Et ve Onu Özel Olarak Besle!

Her LCP optimizasyonunda en kritik adım, LCP elementinin ne olduğunu doğru bir şekilde tespit etmektir.

• Nasıl Tespit Ederim?
  • Google PageSpeed Insights: Sayfanızın AMP sürümünü test edin. Sonuçlarda "Largest Contentful Paint element" (En Büyük İçerikli Boya öğesi) başlığı altında hangi elementin LCP olduğunu göreceksiniz. Hatta bir ekran görüntüsü de sunar.
  • Chrome Geliştirici Araçları: Performans sekmesinden sayfa yüklemesini kaydedin. Kayıt sonunda "Timings" bölümünde LCP işaretini ve üzerine geldiğinizde hangi elementin LCP olduğunu görebilirsiniz.
• LCP Elementini Optimize Etmek: LCP elementiniz genellikle büyük bir resim, bir video posteri veya bir ana başlık (h1) olur.
  • Resimler İçin:
    • Önyükleme (Preload): Eğer LCP elementiniz bir resim ise, bunu tarayıcıya önceden yüklemesini söyleyin. AMP sayfalarında rel="preload" kullanarak resminizi önyükleyebilirsiniz. (Örnek: <link rel="preload" as="image" href="lcp-resim.jpg">). Bu, tarayıcının diğer her şeyden önce bu resmi indirmesini sağlar.
    • Doğru Boyutlandırma: amp-img etiketlerinde width, height, layout="responsive" ve özellikle srcset, sizes niteliklerini doğru kullanın. Bu, tarayıcının en uygun boyutta resmi indirmesini sağlar.
    • Tembel Yüklemeyi (Lazy Load) Engelle: Eğer LCP elementiniz bir resim ise, sakın tembel yükleme (lazy load) yapmayın! Çoğu AMP eklentisi varsayılan olarak fold altındaki resimleri tembel yükler, ancak LCP elementi bu kuralın istisnası olmalıdır.
  • Fontlar İçin: Eğer LCP elementiniz bir metin ve bu metin özel bir font kullanıyorsa, fontlarınızı da önyükleyin ve font-display: swap; kullanarak font yüklenene kadar sistem fontunun görünmesini sağlayın.

5. Sunucu Yanıt Süresi (TTFB) ve Hosting Kalitesi

Cloudflare bir CDN olarak resimlerinizi ve statik dosyalarınızı hızlı dağıtır, önbellekleme yapar. Ancak TTFB (Time To First Byte), yani tarayıcının sunucunuzdan ilk byte'ı alması süresi, doğrudan sunucunuzun performansıyla ilişkilidir.

• Hosting Sağlayıcınız: Paylaşımlı hosting'lerde bazen LCP'yi istenen seviyeye çekmek çok zor olabilir çünkü sunucu kaynakları sınırlıdır. Mümkünse daha performanslı bir hosting paketine (VPS, bulut hosting) geçmeyi düşünün.
• PHP Sürümü: PHP'nin güncel sürümleri (7.4, 8.x) performansı önemli ölçüde artırır. Hosting sağlayıcınızdan PHP sürümünüzü kontrol etmesini veya yükseltmesini isteyin.
• Veritabanı Optimizasyonu: WordPress sitenizdeki veritabanı yavaşsa, bu da TTFB'yi etkiler. Gereksiz eklentiler, revizyonlar ve silinmiş içeriklerden arındırılmış bir veritabanı, sitenizin genel hızına olumlu katkı sağlar.

6. Cloudflare'ı Yeniden Gözden Geçirme: Doğru Ayarlar Hız Katar

Cloudflare harika bir araç, ama bazen yanlış ayarlar LCP'ye zarar verebilir.

• Hangi Özellikler Etkin?
  • Rocket Loader: Genellikle JavaScript optimizasyonu için kullanılır ama AMP sayfaları için kapatılması önerilir. AMP kendi JS yönetimine sahiptir ve Rocket Loader çakışmalara yol açabilir.
  • Auto Minify: HTML, CSS ve JS'i küçültür. Bu genellikle iyi bir şeydir ama AMP zaten CSS'i inline eder ve JS'i kısıtlar. Yine de etkin kalmasında bir sakınca yoktur.
  • Brotli: Sıkıştırma algoritmalarından biridir. Etkin olması faydalıdır.
• Page Rules (Sayfa Kuralları): AMP sayfalarınıza özel kurallar oluşturabilirsiniz. Örneğin, AMP sayfalarının daha agresif bir şekilde önbelleğe alınmasını veya belirli bir ayarın sadece bu sayfalarda uygulanmamasını sağlayabilirsiniz.

Adım Adım Eylem Planı (Bir Kontrol Listesi Gibi)

1. LCP Elementinizi Tespit Edin: PageSpeed Insights veya Chrome Dev Tools ile AMP sayfanızdaki LCP elementini bulun. Bu, en önemli adımdır.
2. AMP Eklentinizi Yapılandırın: Resmi eklentiyi kullanın, Standart veya Geçişli modu tercih edin ve tüm validasyon hatalarını giderin.
3. Kritik CSS'i Uygulayın: AMP eklentinizin kritik CSS özelliğini etkinleştirin veya manuel olarak bu kısmı optimize edin. 75KB CSS limitini aşmamaya dikkat edin.
4. Gereksiz Kodları Temizleyin: AMP sayfalarınızda yüklenen gereksiz eklentileri, JavaScript ve CSS dosyalarını belirleyin ve devre dışı bırakın/kaldırın.
5. LCP Elementini Önyükleyin (Preload): Özellikle LCP bir resim veya özel font ise, link rel="preload" kullanarak tarayıcıya öncelik verin. LCP görselinin tembel yüklenmediğinden emin olun.
6. Sunucu Performansınızı İyileştirin: Hosting kalitenizi ve PHP sürümünüzü kontrol edin. TTFB değerinizi düşürmeye çalışın.
7. Cloudflare Ayarlarınızı İnceleyin: Rocket Loader gibi AMP ile çakışabilecek özellikleri kapatın.

Unutmayın, LCP optimizasyonu bir süreçtir ve tek bir sihirli değnekle çözülmez. Adım adım ilerleyerek, her bir değişikliğin etkisini test ederek en iyi sonuca ulaşabilirsiniz. Sabır ve doğru analizle LCP değerinizi 2.5 saniyenin altına çekmeniz kesinlikle mümkün.

Umarım bu detaylı rehber, sizin için bir yol haritası olur ve AMP sayfalarınızdaki LCP sorununu kökten çözmenize yardımcı olur. Başarılar dilerim!