Güncellemenin 3 Kahramanı: CLS - LCP - FID
Bu rehberin tahmini okuma süresi 5 dakikadır.
Basit ve etkili adımları tamamladığınızda ise kazancınız: xxx₺
Başka bir yerde bulamayacağınız anlatımla, işe yarayan çözümler.
GÜNÜN SONUNDA KAZANAN SİZ OLUN
Bu rehber sayesinde sizden istenen gereklilikleri kolaylıkla tamamladınız.
Google tarafından çabanız takdir edildi. Tam puan aldınız.
Ziyaretçileriniz ve Google memnun. Mutlusunuz.
Üstelik çok kolay. Nasıl mı?
SAHNE ARKASI
Öncelikle bir site açılmadan önce arkada dönen dolapları bilmeniz gerekiyor.
Tarayıcı HTML'i ayrıştırır. DOM ağacı oluşturulur. Ve ardından sayfa oluşur.
DOM güncellenmeden, ağ yanıtı bekleyen işlemler süreci yavaşlatır.
CLS
Kullanıcı etkileşim kurmadığında meydana gelen tasarımsal değişiklikleri kapsar.
Dolayısıyla etkileşim tetiklenmediği sürece yeni şeyler sunmaktan kaçının.
Scroll ve mouse hareketleri etkileşimden sayılır. Ancak zamana duyarlılık -set time- değil.
SERİ SERİ ÇÖZÜMLER
1- Kritik CSS gözden geçirin.
• Önce kritik CSS yüklenmeli.
• Sonra diğer sınıflar eş zamansız yüklenmeli.
• Head kısmında kritik olmayan CSS eklemekten kaçınılmalıdır.
2- Ek CSS kodların etkisini gözlemleyin.
• Konum (margin,padding) ve boyut (width,height) özelleştirmelerine dikkat edin.
3- Resim, reklam ve frame boyutlarını belirtin.
• İlgili divlere width ve height niteliği belirleyin.
5- Lazyload ve animasyonları kontrol edin.
• Tasarımı bozuyorsa CSS çözümlerine başvurun.
6- Yer tutucu (placeholder) yada yedek (fallback) kullanın.
• Bir öğe yüklenene kadar konumu ve boyutu belirli olan önizlemeler sunun.
7- İlk paragraf yada sayfanın en üstünde reklam olmamasına özen gösterin.
• Reklamlar DOM oluşturulurken tasarımı şaşırtabilir.
• Reklamların açılması üst kısmın oluşmasına yetişemez.
• Dolayısıyla en üstlerde olması -eğer yer tutucu da yoksa- kaymalar yaratabilir.
8- FOIT iyileştirmek için lokal font kullanın. Preload uygulayın.
• Font render sırasındaki dönüşüm tasarımı olumsuz etkilememeli.
9- JS ve CSS sıkıştırmalarınızın etkisini gözlemleyin.
• Sıkıştırmalar tasarımı bozabilir. Bu durumda kapat-aç yaparak kontrol edin.
LCP
Sayfanın üst kısmındaki öğelerle -above the fold- ilgilidir.
Yavaş sunucu yanıt süresi. Oluşturmayı engelleyen kaynaklar.
Yavaş kaynak yükleme süresi başlıca sebepleri arasındadır.
TTFB: Tarayıcının ilk baytı alma süresi kısaltılarak, LCP geliştirilir.
200ms altında olmalı. bkz: page caching.
SERİ SERİ ÇÖZÜMLER
1- Oluşturmayı engelleyen kaynaklar için:
• JS geciktirme methodu uygulayın.
! Tüm geciktirmelerin güvenli olmayacağını unutma.
• Kullanılmayan JS kaldırın.
- JS dosyalarını gerektiğinde yükleyin.
- Ekranın üst kısmına ait değilse, ve özel bir nedeni yoksa orada bulunmasın.
-Kodlarının içinde bulunup kullanılmayanları kaldır. -DİKKAT İLERİ DÜZEY
FID
Kullanıcı etkileşimi sonrası gecikmeyi ölçer. Örn: tıklama.
SERİ SERİ ÇÖZÜMLER
• CDN Kullanımı
- Statik varlıkları verimli bir şekilde önbellekleyin.
Etkileşim gerçekleştiğinde gecikme minimuma inmiş olur.
• Sunucu Önbelleği
- Redis gibi çözümlerle verileri RAM üzerine yazdırın.
- Bu size hızlıca okuma-yazma gibi çözümler sunar.
Hayal ettiğiniz tüm başarıların gerçekleşmesi ümidiyle...
Umarım faydalı olur.
