2020 yılının Mayıs ayında Google tarafından duyurulan Core Web Vitals bir algoritma güncellemesi olarak tanıtıldı. Ölçümler Google sıralamasının algoritmasına ise 2021 Haziran ayından günümüze kadar belirtilen şekilde dahil edilmeye devam ediyor. Kullanıcı deneyimini iyileştirmeyi hedefleyen bu algoritma güncellemesi web sitelerin sıralamalarda daha yukarılara taşınmasını sağlarken kullanıcı deneyimi düşük olan siteleri aşağı çeken bir sisteme sahip. Peki, Core Web Vitals nasıl optimize edilir?
Core Web Vitals Optimize Etme
Core Web Vitals optimizasyonu için ana adımlar;
- LCP optimizasyonu
- FID optimizasyonu
- CLS optimizasyonu şeklide ilerlemektedir.
Her bir optimizasyonun nasıl yapılacağını detaylarıyla birlikte sırasıyla sizlerle paylaşalım.
LCP Optimizasyonu
LCP değerini optimize etmek, en büyük içerik ögesinin yüklenmesi için gerekli süreyi minimalize etmek anlamına gelmektedir. Google bu optimizasyonu için şu soruların yanıtına göre işlem önerilerinde bulunur:
- Konumunuz kullanıcıya yakın bir lokasyonda mı yer alıyor?
- Sunucu yanıt süresini iyileştirebilir misiniz? Sunucunuz son teknolojik gelişmelere uygun mu veya performansını iyileştirmek mümkün mü?
- HTML sayfalarını önbelleğe alabiliyor musunuz?
- CSS, JS, görseller vb. durağan içeriklerin önbellekleme ayrıntıları doğru veriliyor mu?
- 3. taraf komut dosyalarının alan adlarını preconnect edebilir misiniz?
- Dosya boyutlarını küçülterek daha hafif hale gelmelerini sağlayabilir misiniz?
- Kaynak yükleme süresini arttırabilir misiniz?
- CSS ve JavaScript’in doğrudan sayfa yüklemesi adına önemsiz olan dosyalarını geç yüklenebilir hale getirebilir misiniz? (Sayfanın en altına ekleyerek veya async, defer kullanmak bu çözüm için örneklerdir)
FID Optimizasyonu
FID optimizasyonunu yapmak web sitesindeki kullanıcı girdisine verilen tepki esnasında geçen zamanı en aza indirmek anlamına gelmektedir. Google tarafından bu optimizasyon işlemi için önerilen uygulamalar şu şekilde belirtilebilir:
- Kod bölme kullanmak
- JavaScript işlevlerinin çalışma süresini kısaltmak
- Üçüncü taraf komut dosyaları arasından çok önemli olmayanları defer veya async kullanılarak taşımak
- 50 milisaniyenin üzerindeki her şey uzun olarak kabul edilip bu sürenin altına inmeyi hedeflemek.
CLS Optimizasyonu
Web sitelerin sayfa yüklenmesi kararlığını ölçeklendiren bir birim olan CLS’yi kontrol etmenin en iyi yollarından biri Chrome DevTools kullanmaktır. CrUX’tan gelen veriler CLS optimizasyonu sürecinde kullanılmalıdır. Google’ın bu işlem için önerilerini şu şekilde sıralayalım:
- Sayfanın üst taraflarına dinamik içerik eklenmemelidir.
- Reklamlar, iframeler ve görsellerin boyut bilgisi daima eklenmelidir.
- DOM güncellemesi yaparken öncesinde ağ yanıtını bekleyen JavaScript eylemlerinden uzak durulmalıdır.
- Yazı tipini webte gömerken FOIT/FOUT etkilerini önlemek adına font-display CSS talimatı ile takas belirtimi eklenmelidir.
