Site Hızı Metriklerimizin Skorlarını Arttırmak

Eki 4, 2020 - 23:59

497 0

Site Hızı Metriklerimizin Skorlarını Arttırmak

web-tasarim

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 bizlere sunulmakta olan 6 metriğin skorlarını yalnızca hangi maddeler üstünden arttırabileceğimizi yazacağım. Maddelerin açıklamaları şimdilik yer vermeyeceğim."
Google ilk önce aşağıda belirtilen önemli sorulara cevap vermemizi ister.

Gezinim gerçekleşiyor mu?
Gezinme başarı ile başlatıldı mı? Sunucu yanıt verdi mi?

Gezinim faydalı 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 üstünden hem de beta olan lighthouse 6 üstünden 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 üstünde olursa da kırmızı renk olarak gösteriyor.

Nasıl Yükseltiriz?

Google'ın FCP hesaplamasında kullanmış olduğu rehber maddeleri;

"Render-blocking" sağlamayı başaran kaynaklarını ortadan kaldırın
CSS'yi küçültün
Kullanılmayan CSS'yi kaldırın
Preconnect ya da 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 esnası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 gerekiyor.

En önemli kullanmış olduğu rehber maddeleri;

Sunucu yanıt süresi
CSS önleme süresi
Varlık / alt kaynak yükleme süresi

Ayrıca optimize etmek için kullanmış olduğu 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 ya da özel, JavaScript destekli bir kontrol kullanmış olduğunda) 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 kullanmış olduğu 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 en temel alt kaynaklarının yüklenmesine kadar geçen süreyi ölçmesi ve kullanıcı girişine hızlı bir biçimde güvenilir bir biçimde 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ı bilgi birikimi sağlamak amacıyla, ortalama TTI 5 saniyeden az olmalıdır.

Google'ın TTI hesaplamasında kullanmış olduğu rehber maddeleri;

JavaScript'i küçültün
Preconnect ya da 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ı bilgi birikimi sağlamak amacıyla, ortalama TTI 300 milisaniyeden az olmalıdır.

Google'ın TBT hesaplamasında kullanmış olduğu 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 bir tanesi 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 esası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.