LCP Nasıl Düşürülür? Sayfa Hızı Görevleri

Sayfa hızı raporlarında en sık karşılaşılan soru şudur: LCP nasıl düşürülür ve önce hangi sayfadan başlamalı? PageSpeed bir sayıyı kırmızı gösterdiğinde neyin değişmesi gerektiğini söylemek kolay değildir; öneriler genel kalır, hangi sayfada hangi dosyanın sorun çıkardığı belirsizleşir. Bu yazıda LCP'nin ne olduğunu, onu yükselten en yaygın nedenleri ve Otopilot'un Site kodu görevleri → Hız (LCP, CLS) sekmesinin bu işi nasıl sayfa sayfa göreve çevirdiğini anlatıyoruz.

Kısa cevap: LCP'yi düşürmek için ilk ekrandaki en büyük öğenin daha erken indirilip çizilmesini sağlarsınız. Sunucu daha çabuk yanıt vermeli, çizimi engelleyen dosyalar azalmalı, ana görsel küçük ve öncelikli gelmelidir.

LCP nedir ve neden önemlidir?

LCP (Largest Contentful Paint), sayfa açıldığında ekranda görünen en büyük içerik öğesinin ne kadar sürede çizildiğini ölçer. Bu öğe çoğu zaman bir kapak görseli, ürün fotoğrafı ya da büyük bir başlık metnidir. Ziyaretçi açısından LCP, "sayfa geldi" hissinin ne zaman oluştuğunu anlatır.

LCP, Google'ın Core Web Vitals olarak seçtiği üç metrikten biridir. Diğer ikisi CLS (yükleme sırasında öğelerin ne kadar kaydığı) ve INP (tıklama ve dokunmalara sayfanın ne kadar çabuk görsel yanıt verdiği) değerleridir. Google, Search Central'daki Core Web Vitals belgesinde bu metriklerin sayfa deneyimi değerlendirmesinde kullanıldığını söyler; ama iyi bir hız puanının tek başına üst sıra getirmediğini, alakalı ve faydalı içeriğin önde geldiğini de ekler.

Bu yüzden hız işini bir sıralama hilesi olarak değil, ziyaretçinin sayfayı terk etmeden okuyabilmesi için yapılan bir bakım olarak görmek daha doğrudur.

Eşikler web.dev kaynaklarında tanımlıdır ve Otopilot da aynı değerleri kullanır:

LCP nasıl düşürülür? En yaygın dört neden

web.dev'deki LCP optimizasyonu rehberi LCP süresini dört parçaya ayırır: sunucunun ilk baytı gönderme süresi, LCP kaynağının indirilmeye başlanmasına kadar geçen gecikme, kaynağın indirilme süresi ve indirildikten sonra çizilene kadar geçen süre. LCP'yi düşürmek, bu dört parçadan en uzun olanı kısaltmak demektir.

Pratikte sorun çoğu zaman şu başlıklardan birine çıkar:

• Yavaş sunucu yanıtı. Sayfa önbelleği olmayan bir WordPress sitesi her istekte veritabanına gider; ilk bayt geç gelince her şey gecikir. Tam sayfa önbelleği ya da CDN bu süreyi kısaltır.
• Çizimi engelleyen CSS ve betikler. Baş bölümdeki stil dosyaları ve defer ya da async almamış betikler indirilip işlenene kadar tarayıcı sayfayı çizmez.
• Geç keşfedilen ana görsel. Kapak görseli CSS arka planı olarak ya da JavaScript ile ekleniyorsa tarayıcı onu geç fark eder. İlk ekrandaki görsele yanlışlıkla loading="lazy" verilmesi de aynı etkiyi yapar.
• Ağır görsel ve sayfa. Ekrana göre fazla büyük, eski biçimde (JPEG, PNG) sunulan görseller ve sıkıştırılmamış metin dosyaları indirme süresini uzatır.

Bu nedenlerin hangisinin sizin sayfanızda geçerli olduğunu bilmeden yapılan iyileştirmeler çoğu zaman boşa gider. Bir sayfada sorun sunucudadır, diğerinde kapak görselindedir. Hız sekmesinin asıl işi bu ayrımı yapmaktır.

Otopilot'ta Hız (LCP, CLS) sekmesi nasıl çalışır?

Panelde üst menüdeki Site kodu görevleri bölümünü açtığınızda Geliştirici kartları, Hız (LCP, CLS), Şablon, Güvenlik başlıkları ve Yayın betikleri sekmelerini görürsünüz. Hız sekmesi, son taramada yapılan PageSpeed ölçümünü kullanır.

Ölçüm mobil strateji için yapılır. Her ölçülen sayfada LCP, CLS ve INP değerlerine bakılır. Üçünün de iyi aralıkta olduğu sayfalar listeye girmez; ekranda yalnızca kaç sayfanın iyi aralıkta olduğu yazar. En az bir metriği iyileştirilmeli ya da zayıf olan sayfalar ise listelenir.

Değerin kaynağı da ayrıca belirtilir. Sayfa için saha verisi varsa, yani gerçek Chrome kullanıcılarından toplanmış bir ölçüm bulunuyorsa o gösterilir; yoksa PageSpeed'in laboratuvar ölçümü kullanılır. Her değerin yanında "saha" ya da "laboratuvar" etiketi bulunur. INP yalnız saha verisinde bulunur; laboratuvar ölçümü INP üretmez. Bu ayrımın neden önemli olduğunu site hızı aracı rehberimizde ayrıntılı anlattık.

Liste en kötü durumdan başlar: önce zayıf notlu sayfalar gelir, aynı notta olanlar arasında LCP'si en yüksek olan üste çıkar. Her satırda şunlar bulunur:

• Sayfanın adresi.
• LCP, CLS ve INP değerleri; her biri İyi, İyileştirilmeli ya da Zayıf rengiyle.
• Varsa PageSpeed performans puanı.
• Ne yapmalı? başlığı altında o sayfaya özel öneriler.

Ekranın altında eşikler yazar, böylece rengin neden değiştiğini tahmin etmek zorunda kalmazsınız.

Öneriler nereden geliyor?

Öneriler genel bir kontrol listesinden kopyalanmaz. Her sayfanın önerisi, aynı taramada o sayfada bulunan bulgulardan çıkar. Sayfaya özel yedi bulgu türü vardır; site geneli bulgular ise ekranın üstünde ayrı bir kutuda, "Tüm siteyi etkileyen hız bulguları" başlığıyla gösterilir.

Burada önemli bir eşleştirme kuralı vardır. Bir bulgu yalnız o sayfada kötü olan metrikle ilgiliyse öneri olarak gösterilir. Örneğin bir sayfanın yalnız CLS değeri kötüyse, aynı sayfada defer'siz betik bulunsa bile LCP önerisi öne çıkmaz; çünkü o sayfada asıl sorun kayma.

Peki sayfada kötü metriğe bağlanan hiçbir bulgu yoksa ne olur? Bu durumda o metriğe özel genel bir öneri yazılır. LCP için ana görselin preload ve fetchpriority="high" ile önceden yüklenmesi, boyutunun ekrana göre küçültülmesi ve sunucu yanıtının önbellekle hızlandırılması önerilir. CLS için görsel ve videolara width ve height (ya da aspect-ratio) verilmesi, reklam ve gömülü alanlara önceden yer ayrılması, web fontlarında font-display: swap ile benzer bir yedek font kullanılması önerilir. INP için tıklamadan sonra çalışan uzun JavaScript görevlerinin bölünmesi ve üçüncü taraf betiklerin azaltılması önerilir.

Bilinçli bir tercih olarak sayfa yanıt süresi tek başına hız görevi sayılmaz. Tarayıcıda JavaScript'in çizim süresi sunucu yanıtıyla karıştırılmasın diye listede yalnız PageSpeed'in ölçtüğü LCP, CLS ve INP değerleri gösterilir.

Ölçüm yoksa ekran ne söyler?

Hız sekmesi boş kaldığında bunun nedeni de yazılır. Boş bir liste "her şey yolunda" anlamına gelmez; çoğu zaman ölçüm yapılmamıştır. Karşılaşabileceğiniz durumlar şunlardır:

• Projede henüz tamamlanmış tarama yoktur.
• Sayfa hızı ölçümü (PageSpeed) bu kurulumda yapılandırılmamıştır.
• Ölçüm bir sonraki taramada yapılacaktır.
• Günlük ölçüm bütçesi ya da PageSpeed kotası dolmuştur; bir sonraki taramada yeniden denenir.
• Planınız sayfa hızı ölçümü içermiyordur.
• Sağlayıcılar yönetici tarafından geçici olarak duraklatılmıştır.
• Ölçülecek uygun sayfa bulunamamıştır ya da son ölçüm hatayla bitmiştir.

Bu açıklamalar sayesinde "hız sorunum yok" ile "hız ölçülmedi" arasındaki farkı ilk bakışta görürsünüz.

Ölçülen bütün sayfalar iyi aralıktaysa ekran bunu da açıkça yazar ve kaç sayfanın ölçüldüğünü belirtir.

LCP ve CLS düzeltmelerini kim yapar?

Hız düzeltmelerinin büyük kısmı bir kanal üzerinden otomatik uygulanamaz. Sunucu sıkıştırması, önbellek başlıkları, tema dosyalarındaki betik sırası ya da görsel biçimi sitenin barındırmasına ve koduna bağlıdır. Bu yüzden Hız sekmesi bir düzeltme listesi değil, bir görev listesidir.

Önerileri geliştiricinize olduğu gibi iletebilirsiniz; her satır hangi sayfada neyin değişmesi gerektiğini söyler. Geliştiriciniz yoksa listenin altındaki Bizim yapmamızı ister misiniz? düğmesiyle tek bir hizmet talebi açabilirsiniz. Talep, listedeki tüm sayfaları kapsayan "Sayfa hızı iyileştirme" görevi olarak açılır ve hesabınızdaki Taleplerim ekranından takip edilir. Hizmet bedeli tanımlıysa düğmenin yanında yazar; sabit fiyatı olmayan işlerde talebiniz incelenip panelden teklif gönderilir.

Kod gerektiren diğer işlerin nasıl kart haline geldiğini SEO geliştirici görevleri yazımızda anlattık. Sunucu tarafında güvenlik başlıkları eklemek de çoğu zaman aynı yapılandırma dosyasına dokunduğu için hız işiyle birlikte ele alınabilir; ayrıntılar HTTP güvenlik başlıkları yazımızda.

Bir düzeltmeden sonra sonucu görmek için bir sonraki taramayı beklemeniz gerekir. Tarama yeni ölçümü getirir; iyi aralığa geçen sayfa listeden düşer. Saha verisinin ise gerçek ziyaretçilerden son 28 gün boyunca toplanan ölçümlerden oluştuğunu unutmayın; laboratuvar ölçümü hemen değişse bile saha değeri daha yavaş güncellenir.

Tek bir sayfayı üyeliksiz denemek isterseniz site hızı aracını kullanabilirsiniz. Sitenin tamamını tarayan denetimin kapsamı ise site denetimi özellik sayfasında anlatılıyor.

Sık sorulan sorular

LCP değerim laboratuvarda iyi, sahada kötü. Hangisine bakmalıyım?

Saha verisi gerçek ziyaretçilerin yaşadığı süredir; mümkünse ona bakın. Otopilot da saha verisi varsa onu gösterir. Laboratuvar ölçümü tek bir cihaz ve bağlantı benzetimiyle yapılır, sorunları yeniden üretmek için kullanışlıdır ama ziyaretçilerin tamamını temsil etmez.

Ana görsele loading="lazy" vermek LCP'yi neden kötüleştirir?

Lazy yükleme, tarayıcıya görseli görünür alana yaklaşana kadar ertelemesini söyler. İlk ekrandaki ana görsel zaten görünür olduğu için bu erteleme yalnız gecikme ekler. Ana görselde lazy kullanmayın, fetchpriority="high" verin.

Hız sekmesi neden yalnız mobil ölçümü kullanıyor?

Google sayfaları öncelikle mobil sürümüyle değerlendirir ve mobil cihazlarda işlemci ile bağlantı daha sınırlıdır. Mobilde iyi aralığa çekilen bir sayfa masaüstünde de çoğunlukla iyi sonuç verir.

Sayfam listede ama önerisi genel kalmış. Neden?

O sayfada kötü metriğe bağlanan bir tarama bulgusu çıkmamış demektir. Bu durumda metriğe özel genel öneri yazılır. Sorunu bulmak için PageSpeed raporundaki LCP öğesine ve ağ şelalesine bakmak gerekir.

INP değeri neden bazı sayfalarda boş görünüyor?

INP yalnız gerçek kullanıcı verisinden gelir. Yeterli ziyareti olmayan sayfalarda saha verisi bulunmadığı için INP gösterilmez.

Kaynaklar

• web.dev: Largest Contentful Paint (LCP)
• web.dev: LCP optimizasyonu
• web.dev: Cumulative Layout Shift (CLS)
• web.dev: Interaction to Next Paint (INP)
• Google Search Central: Core Web Vitals ve Google arama sonuçları
• Google: PageSpeed Insights hakkında