Bildiğiniz üzere Google için artık en önemli kriter hız.
Peki bunu nasıl sağlayacağız. “hızlı” hale getirmekten bahsettiğimiz olgular neler.
“Bu yazım da beta sürümdeki lighthouse 6 da bize sunulan 6 metriğin skorlarını sadece hangi maddeler üzerinden arttırabileceğimizi yazacağım. Maddelerin açıklamaları şimdilik yer vermeyeceğim.”
Google ilk önce aşağıdaki önemli sorulara cevap vermemizi ister.
- Gezinim gerçekleşiyor mu?
Gezinme başarıyla başlatıldı mı? Sunucu yanıt verdi mi?
- Gezinim yararlı mı?
Kullanıcıların etkileşime girebileceği yeterli içerik oluşturuldu mu?
- Gezinim kullanılabilir mi?
Kullanıcılar sayfa ile etkileşime girebilir mi?
- Kullanıcı Deneyimi?
Etkileşimler doğal mı, gecikme var mı?
Biz Nasıl Ölçeceğiz ?
Google bu değerleri ölçmemiz için hem pagespeed insight üzerinden hem de beta olan lighthouse 6 üzerinden metrikler sunuyor. Bunlar ise;
- First Contentful Paint (FCP)
- Largest Contentful Paint (LCP)
- First Input Delay (FID)
- Time To Interactive (TTI)
- Total Blocking Time (TBT)
- Cumulative Layout Shift (CLS)
First Contentful Paint (FCP)
Kısaca sayfanın yüklenmeye başlamasından sayfa içeriğinin herhangi bir bölümünün ekranda görüntülenmesine kadar geçen süreyi ölçer.
FCP Lighthouse 5 de %20‘lik bir ağırlığa sahipken Lighthouse 6 ile %15‘e inmiştir.
FCP zamanlaması olarak 0-2 saniye aralığında olursa yeşil, 2-4 saniye aralığında olursa turuncu, 4 saniye üzerinde olursa da kırmızı renk olarak gösteriyor.
Nasıl Yükseltiriz?
Google’ın FCP hesaplamasında kullandığı rehber maddeleri;
- “Render-blocking” sağlayan kaynaklarını ortadan kaldırın
- CSS’yi küçültün
- Kullanılmayan CSS’yi kaldırın
- Preconnect veya dns-prefetch kullanılması
- Sunucu yanıt sürelerini azaltın (TTFB)
- Birden çok sayfa yönlendirmesinden kaçının
- Preload istekleri
- Ağ yüklerinden kaçının
- Statik varlıkları önbellek ile verilmesi
- Aşırı DOM boyutundan kaçının
- Kritik istekleri en aza indirin
- Web font yükleme sırasında metnin görünür kalmasını sağlayın
- İstek sayılarını düşük ve aktarım boyutlarını küçük tutun
Largest Contentful Paint (LCP)
Lighthouse 6 ile hayatımıza girecek olan LCP kısaca, ekranda görünen en büyük içerik öğesinin oluşturma süresini bildirir.
LCP Lighthouse 5 de yokken Lighthouse 6 ile %25 olarak gelmiştir.
Google arama sayfası için ise;
Google’a göre en iyi LCP değerleri 2.5 saniye içerisinde gerçekleşmesi gerekmektedir.
En önemli kullandığı rehber maddeleri;
- Sunucu yanıt süresi
- CSS engelleme süresi
- Varlık / alt kaynak yükleme süresi
Ayrıca optimize etmek için kullandığı diğer rehber maddeleri;
- “Critical Rendering Path” optimize edilmesi
- CSS’nizi optimize edilmesi
- Resimlerinizi optimize edilmesi
- Web Yazı Tiplerini optimize edilmesi
- JavaScript’inizi optimize edin
First Input Delay (FID)
FID kısaca, kullanıcının sitenizle ilk etkileşimde bulunduğu zamanı (yani bir bağlantıyı tıkladığında, bir düğmeye dokunduğunda veya özel, JavaScript destekli bir kontrol kullandığında) tarayıcının bu etkileşime yanıt verebileceği süreyi ölçer.
FID Lighthouse 5 de %27 iken, Lighthouse 6 ile %15‘e inmiştir.
Google’ın FID hesaplamasında kullandığı rehber maddeleri;
- Üçüncü part kodları azaltın
- JavaScript yükünü azaltın
- İstek sayılarını azaltın ve aktarım boyutlarını küçük tutun
Time To Interactive (TTI)
TTI kısaca; sayfanın yüklenmeye başlamasından ana alt kaynaklarının yüklenmesine kadar geçen süreyi ölçmesi ve kullanıcı girişine hızlı bir şekilde güvenilir bir şekilde yanıt vermesidir.
TTI Lighthouse 5 de %33‘lük bir ağırlığa sahipken Lighthouse 6 ile %15‘e inmiştir.
Google’a göre iyi bir kullanıcı deneyimi sağlamak için, ortalama TTI 5 saniyeden az olmalıdır.
Google’ın TTI hesaplamasında kullandığı rehber maddeleri;
- JavaScript’i küçültün
- Preconnect veya dns-prefetch kullanılması
- Preload kullanımı
- Üçüncü part kodları azaltın
- Kritik istekleri en aza indirin
- İstek sayılarını düşük ve aktarım boyutlarını küçük tutun
Total Blocking Time (TBT)
TBT kısaca; main thread bloklandığında FCP ve TTI arasındaki zamanı ölçer.
TBT Lighthouse 5 de yokken Lighthouse 6 ile %25 olmuştur.
Google’a göre iyi bir kullanıcı deneyimi sağlamak için, ortalama TTI 300 milisaniyeden az olmalıdır.
Google’ın TBT hesaplamasında kullandığı rehber maddeleri;
- Üçüncü part kodları azaltın
- JavaScript yükünü azaltın
- İstek sayılarını azaltın ve aktarım boyutlarını küçük tutun
Cumulative Layout Shift (CLS)
Yeni metriklerden biri olan CLS kısaca; sayfanın yüklenmeye başlaması ile yaşam döngüsü sırasında aniden gerçekleşen her beklenmedik düzen kaymasının toplamını ölçer.
Bu metrik aslında sitede herhangi bir tuşa basacakken bir anda yüklenilmemesinden kaynaklı yeni gelen tuştur.
Yukarıdaki grafikte çerçevenin en altında yazı, beni tıkla tuşunun geç yüklenmesinden kaynaklı yüksekliği %25 kayar.
CLS Lighthouse 5 de yokken Lighthouse 6 ile %5 olmuştur.
Google’ın CLS hesaplamasında kullandığı rehber maddeleri;
- Resimlere ve videoların boyutlandırılma eklenmesi
- Kullanıcı etkileşimi dışında above the fold alanına sonradan içerik yüklenmemesi