10. 10
Core Web Vitals & Page Experience
Bu metrikler ne kadar önemli?
/gknercn
Kaynak: https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html
21. 21
Largest Contentful Paint
Faktörler:
/gknercn
• Sunucunuzun Yavaş Yanıt Vermesi
• Oluşturmayı Engelleyen Javascript vs CSS
Dosyaları
• Yavaş Yüklenen Kaynaklar
• Kullanıcı Taraflı Oluşturma (Client Side
Rendering)
22. 22
Largest Contentful Paint
Sunucunuzun Yavaş Yanıt Vermesi
/gknercn
• Sunucuyu Optimize Etmek (Kod – Sunucu)
• CDN Kullanımı
• Kaynakları Önbellekleme (Cache)
• HTML Yanıtlarını Önbellekleme (Sunucu Taraflı)
• Önemli Kaynakları Ön Yükleme
23. 23
LCP – Sunucunun Yavaş Yanıt Vermesi
Sunucuyu Optimize Etmek (Kod – Sunucu)
/gknercn
24. 24
LCP – Sunucunun Yavaş Yanıt Vermesi
CDN Kullanımı (Content Delivery Network)
/gknercn
25. 25
LCP – Sunucunun Yavaş Yanıt Vermesi
Kaynakları Önbellekleme (Cache)
/gknercn
26. 26
LCP – Sunucunun Yavaş Yanıt Vermesi
HTML Yanıtlarını Önbellekleme
/gknercn
27. 27
LCP – Sunucunun Yavaş Yanıt Vermesi
Önemli Kaynaklara Ön Bağlantı Kurmak #1
/gknercn
28. 28
LCP – Sunucunun Yavaş Yanıt Vermesi
Önemli Kaynaklara Ön Bağlantı Kurmak #2
/gknercn
29. 29
Largest Contentful Paint
Oluşturmayı Engelleyen JS ve CSS Kaynakları
/gknercn
• CSS ve JS Dosyalarının Sıkıştırılması
• Critical Path CSS Kullanımı
• Defer ve Async etiketlerinin Kullanımı
30. 30
LCP – Oluşturmayı Engelleyen JS vs CSS
JS ve CSS Dosyalarının Sıkıştırılması (Minify)
/gknercn
33. 33
Largest Contentful Paint
Yavaş Yüklenen Kaynaklar
/gknercn
• Görsellerin Optimize Edilmesi
• Önemli Kaynakların Ön Yüklenmesi
• Gzip Gibi Metin Sıkıştırma Algoritmalarını Kullanma
34. 34
LCP – Görsellerin Optimize Edilmesi
Öneriler
/gknercn
• Görselleri sayfanın en üstünde kullanmayın.
• Alakasız görselleri kaldırın.
• CDN Kullanımı
• Yeni Nesil Görsel Formatlarını Kullanın.
• Responsive görseller kullanın (Yeniden
Boyutlandırmayın)
41. 41
First Input Delay
Javascript Yürütme Süresi
/gknercn
• setTimeout veya setInterval kullanmayın.
• Web Workers kullanın.
• Javascript ile toplu HTML düzenlemeleri yapmaktan
kaçının.
45. 45
Cumulative Layout Shift
Faktörler:
/gknercn
• Yanlış Boyutlandırılmış Görseller
• Boyutları Olmayan Reklam ve Iframe Alanları
• Font Entegrasyonu & Değişimleri
• Dinamik Entegre Edilen İçerik