sysuser
PREMİUM
- Katılım
- 9 Kas 2025
- Mesajlar
- 174
- Tepki puanı
- 4
- Cinsiyet
- Kadın
Siteniz masaüstünde uçuyor ama Google PageSpeed Insights'a girdiğinizde o kırmızı "LCP sorunu: 2.5 saniyeden uzun" uyarısını görüp moraliniz mi bozuluyor? Hepimiz o yollardan geçtik. Modern webde hız sadece bir lüks değil, Google sıralamaları için bir zorunluluk. "Eklenti kurdum ama düzelmedi" diyenler için işin mutfağına iniyoruz.
LCP (Largest Contentful Paint) değerini yeşile döndürecek ve sitenizi vites artırmaya zorlayacak adımlar şunlar:
* Görseli "Preload" Edin: LCP öğesi genellikle ana sayfanızdaki "featured image" veya slider'dır. Bu görselin en başta yüklenmesi için <head> kısmına şu kodu ekleyin (veya bir optimizasyon eklentisiyle bunu otomatize edin):
* Lazy Load'u Akıllıca Kullanın: Her şeyi lazy load (geç yükleme) yapmak bir hatadır! Ekranın üst kısmında kalan (above-the-fold) ilk 1-2 görseli lazy load dışı bırakın. Aksi takdirde tarayıcı bu görselleri yüklemek için bekler ve LCP süreniz uzar.
* Kritik CSS (Critical CSS) Oluşturun: Sayfanın sadece görünen kısmına ait CSS kodlarını satır içine (inline) alın. Bu, tarayıcının tüm CSS dosyasını indirmesini beklemeden sayfayı boyamasını sağlar.
* WebP Formatına Geçiş Yapın: Standart JPEG veya PNG devri kapandı. Görsellerinizi WebP veya Avif formatına dönüştürerek kalite kaybı yaşamadan dosya boyutlarını %70'e kadar düşürün.
* Font-Display: Swap Ayarı: Yazı tipleriniz yüklenene kadar sistem yazı tipinin görünmesini sağlayın. CSS dosyanızda font tanımlarına font-display: swap; satırını eklemeyi unutmayın.
LCP (Largest Contentful Paint) değerini yeşile döndürecek ve sitenizi vites artırmaya zorlayacak adımlar şunlar:
* Görseli "Preload" Edin: LCP öğesi genellikle ana sayfanızdaki "featured image" veya slider'dır. Bu görselin en başta yüklenmesi için <head> kısmına şu kodu ekleyin (veya bir optimizasyon eklentisiyle bunu otomatize edin):
* Lazy Load'u Akıllıca Kullanın: Her şeyi lazy load (geç yükleme) yapmak bir hatadır! Ekranın üst kısmında kalan (above-the-fold) ilk 1-2 görseli lazy load dışı bırakın. Aksi takdirde tarayıcı bu görselleri yüklemek için bekler ve LCP süreniz uzar.
* Kritik CSS (Critical CSS) Oluşturun: Sayfanın sadece görünen kısmına ait CSS kodlarını satır içine (inline) alın. Bu, tarayıcının tüm CSS dosyasını indirmesini beklemeden sayfayı boyamasını sağlar.
* WebP Formatına Geçiş Yapın: Standart JPEG veya PNG devri kapandı. Görsellerinizi WebP veya Avif formatına dönüştürerek kalite kaybı yaşamadan dosya boyutlarını %70'e kadar düşürün.
* Font-Display: Swap Ayarı: Yazı tipleriniz yüklenene kadar sistem yazı tipinin görünmesini sağlayın. CSS dosyanızda font tanımlarına font-display: swap; satırını eklemeyi unutmayın.