Haber siteleri, Core Web Vitals konusunda en zorlanan site türü. Bunun nedeni kötü yazılmış olmaları değil; reklam yükü, sürekli değişen anasayfa ve ağır görsel kullanımı bu metrikleri doğal olarak zorluyor. Yine de eşikleri geçmek mümkün.

Üç Metrik, Kısaca

  • LCP (Largest Contentful Paint) — En büyük içerik öğesinin ekrana gelme süresi. Hedef: 2,5 saniyenin altı.
  • INP (Interaction to Next Paint) — Kullanıcı bir şeye dokunduğunda sayfanın yanıt verme süresi. Hedef: 200 ms’nin altı.
  • CLS (Cumulative Layout Shift) — Sayfanın yüklenirken oynaması. Hedef: 0,1’in altı.

1. Manşet Görselinin Geç Yüklenmesi

Neredeyse her sitede LCP öğesi manşet görselidir ve neredeyse her sitede bu görsele loading="lazy" eklenmiştir. Ekranın en üstündeki görsele tembel yükleme uygulamak, LCP’yi doğrudan bir saniye geciktirir. Manşet görselinde loading="eager" ve fetchpriority="high" kullanın; tembel yüklemeyi kıvrımın altındaki görsellere bırakın.

2. Reklam Alanlarının Yer Kaplamaması

Reklam betiği yüklenene kadar boş kalan alan, betik gelince aniden açılır ve altındaki her şeyi aşağı iter. CLS puanının en büyük kaynağı budur. Çözüm basit: her reklam kabına min-height verin. Reklam gelmese bile o boşluk korunur, sayfa oynamaz.

3. Web Yazı Tiplerinin Metni Geciktirmesi

font-display tanımlanmadığında tarayıcı, yazı tipi inene kadar metni gizler. Okur boş bir sayfaya bakar. font-display: swap ekleyin ve yedek yazı tipi yığınını gerçekçi seçin; böylece metin hemen görünür.

4. Üçüncü Taraf Betiklerinin Ana İş Parçacığını Kilitlemesi

Analitik, ısı haritası, sosyal medya gömüleri, yorum sistemi, reklam yöneticisi… Her biri tek başına masum görünür, toplamı INP’yi bitirir. Yapılacaklar:

  • Gerçekten gerekli olmayanları kaldırın. Çoğu sitede üç farklı analitik aracı bulunuyor.
  • Kalanları async ya da defer ile yükleyin.
  • Sosyal gömüleri tıklanana kadar yalnızca kapak görseli olarak gösterin.

5. Otomatik Kayan Manşet

Kendiliğinden dönen slaytlar hem düzen kaymasına yol açar hem de sürekli yeniden çizim yapar. Ölçümlerimizde otomatik kaydırmayı kapatmak tek başına CLS’i yarıya indirebiliyor. Kullanıcı isterse kaydırsın.

6. Görsellerin Modern Formatta Olmaması

2 MB’lık bir JPEG, WebP olarak 250 KB’a inebiliyor. Bunu elle yapmaya çalışmayın; yükleme anında otomatik dönüştüren bir işlem hattı kurun ve srcset ile cihaza uygun boyutu sunun.

Ölçerken dikkat: Lighthouse laboratuvar testidir, Search Console’daki veri ise gerçek kullanıcılardan gelir. Kararlarınızı gerçek kullanıcı verisine göre verin; Lighthouse yalnızca neyi düzelteceğinizi bulmak için iyidir.

Sık Sorulanlar

Lighthouse mu, Search Console mu?
Kararlarınızı Search Console’daki gerçek kullanıcı verisine göre verin. Lighthouse laboratuvar testidir; yalnızca neyi düzelteceğinizi bulmak için iyidir.
Manşet görseline lazy loading koymalı mıyım?
Hayır. Ekranın en üstündeki görsele tembel yükleme uygulamak LCP’yi doğrudan bir saniye geciktirir. Orada eager ve fetchpriority=high kullanın.
Reklamlar CLS’i neden bozuyor?
Betik yüklenene kadar boş kalan alan, reklam gelince aniden açılıp altındaki her şeyi iter. Her reklam kabına min-height vermek bunu çözer.