Core Web Vitals skorlarını düzeltmek sadece görsel sıkıştırmaktan ibaret değildir. Pek çok geliştirici bu 5 gizli hatayı yapar ve PageSpeed Insights'ta kırmızı kalmaya devam eder.
Hata 1: Öne Çıkan Görsellere "Lazy Load" Uygulamak
Ekranın üst kısmında kalan (above-the-fold) görselleri lazy-load ile ertelediğinizde LCP skorunuz kötüleşir. Tarayıcı, bu görselın yüklemesini kasıtlı olarak erteler.
Çözüm: Hero görseli ve fold üstündeki tüm görsellerde lazy-load özelliğini kaldırın:
<img src="hero.webp" fetchpriority="high" loading="eager" />
Hata 2: Görsel ve Iframe Öğelerine Boyut Tanımlamamak
CSS içerisinde sadece width: 100%; height: auto; bırakıldığında içerikler aniden aşağı kayar ve CLS hatası oluşur. Tarayıcı görsel boyutunu önceden bilmez.
Çözüm: HTML etiketinin kendisine orijinal width ve height değerlerini mutlaka atayın. Aspect-ratio CSS özelliğini kullanın.
Hata 3: Web Fontlarının Yükleme Stratejisini Atlamak
Yazı tipi yüklenene kadar sayfalar aniden boyut değiştirip kayar (FOUT/FOIT). Bu hem CLS'i etkiler hem de kullanıcı deneyimini bozar.
Çözüm: CSS @font-face kurallarınıza mutlaka font-display: swap; özelliğini ekleyin. Google Fonts kullanıyorsanız &display=swap parametresini URL'e ekleyin.
Hata 4: Üçüncü Taraf Scriptleri Ana İş Parçacığında Çalıştırmak
Google Analytics, Facebook Pixel veya canlı destek chatbot scriptlerini <head> içinde doğrudan eklemek tarayıcının ana iş parçacığını kilitler. INP ve LCP'yi olumsuz etkiler.
Çözüm: Tüm üçüncü taraf scriptleri async veya defer ile yükleyin. Kritik olmayan scriptleri sayfa yükü tamamlandıktan sonra ekleyin.
Hata 5: Dinamik Reklam Alanları İçin Yer Ayırmamak
Reklamın yükleneceği kapsayıcı elemana CSS ile minimum bir yükseklik (min-height) tanımlamadan bırakmak, reklam yüklendiğinde ciddi CLS'e neden olur.
Çözüm: Her reklam alanı için standart boyutları CSS'e yazın. Banner alanları için min-height: 90px gibi bir değer belirlemeniz layout shift'i önler.
Hızlı Kontrol Listesi
| Kontrol Maddesi | Etkilenen Metrik | Öncelik |
|---|---|---|
| Hero görseli fetchpriority="high" var mı? | LCP | Kritik |
| Tüm img/video/iframe boyutları tanımlı mı? | CLS | Kritik |
| font-display: swap kullanılıyor mu? | CLS | Yüksek |
| 3. taraf scriptler async/defer ile mi eklendi? | INP, LCP | Yüksek |
| Reklam alanları CSS ile rezerve edildi mi? | CLS | Orta |
Sitenizin Core Web Vitals skorlarını yeşile döndürmek için teknik destek almak ister misiniz? İletişime geçin.