PageSpeed Insights Nedir?

Google Web crawler’ları ile tarama işlemi gerekleştirilir. URI taraması sonrasında, edinilen bilgiler ve kontrollerin neticesinde mobil ve masaüstü erişim değerleri bir puanlama (performance score) üzerinden aktarılır. Sunulan değerler URL-level kullanıcı deneyimi metrikleri olarak ifade edilebilir. Bu sayede, geliştiriciler web sitesinin / uygulamasının Google tarafından öne çıkarılan eksikliklerinin görülebilmesi ve düzenlenebilmesi amaçlanmaktadır. Lighthouse tarafından analiz edilen laboratuvar verilerine dayanmaktadır.

PageSpeed Insights Scoring

PageSpeed Insights‘ın Google Chrome verilerini kullanmaya başlamasıyla birlikte kullanıcıların web sitesi / uygulamasındaki hızın yanı sıra ve kullanıcı deneyimi sorunlarını güncel olarak görebilmeleri, bu sorunlara karşı geliştirmeler yapabilmeleri pratik hale getirilmiştir.

PageSpeed Insights’ın sahip olduğu ve raporlama aşamasında (CrUX¹) aktardığı hız skoru hesaplayıcı ile analiz edilen sayfalar ayrı bir şekilde değerlendirilebilir ve Hızlı (Fast / 90–100), Orta (Average / 50–89) veya Yavaş (Slow / 0–49) olarak derecelendirilebilirler. Bu ayrım FCP (First Contentful Paint) ve DCL (DOMContentLoaded) olarak belirlenen iki ana ölçümün ortalamasına göre oluşturulmaktadır.

Search Engine Optimization (SEO) çalışmaları sürecinde gerçekleştirilecek optimizasyon işlemleri için yol haritası olarak Optimizasyon Önerileri değerlendirilebilir.

PageSpeed Insights Kullanımı

Google tarafından sunulan PageSpeed Insights² sayfası web sitenizin / sayfalarınızın analizi için kullanabilirsiniz. URI ile ilgili bilgilerin aktarılmasının ardından aşağıdaki bilgileri görüntüleyebiliriz.

Lab Verileri
- İlk Zengin İçerikli Boya (First Contentful Paint / FCP), ilk metnin ve resmin boyandığı zamanı işaret eder.
- İlk Anlamlı Boya (First Meaningful Paint / FMT), sayfanın ana içeriğinin ne zaman görünür olduğunu gösterir.
- Hız İndeksi (Speed Index), bir sayfa içeriğinin görsel olarak ne kadar hızlı doldurulabildiğini ifade eder.
- İlk CPU Boşta (First CPU Idle), ana iş parçacığının girişi işlemek için yeterli olduğu ilk andır.
- Etkileşim Süreci (Time to Interactive / TTI), sayfanın tam olarak etkileşim kurulabilir hale geldiği noktadır.
- Maksimum Olası İlk Giriş Gecikmesi (Max Potential First Input Delay), ssayfa yüklemesinin en yoğun olduğu 5 saniyelik zaman aralığında, sayfanın kullanıcı girişine kaç milisaniye içinde yanıt verebileceğini ifade eder. Verilen değer tahminidir.

Yukarıda yer alan maddelerde yer alan, öne çıkan bazı ifadelere ayrıca değinmek istiyorum.

First Contentful Paint (FCP)

Paint Timing³ API 2 metriği tanımlar; first paint (FP) ve first contentful paint (FCP). Bu metrikler, internet tarayıcısının ekrandaki görüntüyü oluşturan pixelleri oluşturduğu süreci belirtir. Bu süreç ziyaretçinin görüntülemeye çalıştığı sayfaya dair “ne oluyor?” sorusunun cevabını alabilmesi için önemlidir. Bu metrikler arasındaki en önemli ayrım ise, first paint’in tarayıcının gezinme işleminden önceki ekranda, görsel olarak farklı bir şey oluşturduğu noktayı işaret etmesidir. First contentful paint ise tarayıcının DOM‘dan ilk içerik parçasını oluşturduğu (render), metin, resim, svg veya hatta bir <canvas> öğesini işaret eder.

First Meaningful Paint (FMT)

First meaningful paint (FMP), ziyaretçinin sayfanın “kullanışlı” olup olmadığını yorumladığı süreçtir. Örneğin, Youtube sitesini ele aldığımızda, ziyaretçinin amacı video alanının ortaya çıkmasıdır. Dolayısıyla video penceresi en önemli alanlardan biridir ve “hero element” olarak ifade edilebilir. Twitter’da muhtemelen bildirim rozetleri ve ilk tweet “hero element” olarak nitelendirilebilirken bir hava durumu uygulamasında, belirtilen konuma dair hava tahminidir.

DOM Content Loaded (DOMContentLoaded / DCL)

DOMContentLoaded, HTML dosyasının ne kadar sürede tamamen yüklenebildiğini ve oluşturulabildiğini ifade eder. DCL süresi ne kadar uzun olursa ziyaretçi o derece siteden ayrılma isteği gösterecektir, bu da daha düşük Hemen Çıkma Oranı anlamına gelir.

PageSpeed Insights tarafından sunulan diğer alanlar ise Fırsatlar, Teşhis ve Başarılı Denetimler’den oluşur.

Fırsatlar başlığı altında, taranan sayfanın yüklenmesini hızlandırabilecek öneriler yer alır.

Sayfanın oluşturulmasını engelleyen kaynakları (CSS, JS) ortadan kaldırmak
Resimleri sıkıştırmak, yeni nesil biçimlerde yayınlamak
Birden çok sayfa yönlendirmesini önlemek
Kullanılmayan CSS’yi kaldırmak
Önbellekleme kullanmak
HTML dosyalarını küçültmek / sıkıştırmak. Bu aşama DOM yapısının sadeleştirilmesini ve gereksiz etiketlerin, içeriklerin temizlenmesini ifade eder.
JS ve CSS kodlarını küçültmek ve gereksiz kodlardan kurtulmak
Sunucu yanıt süresini kısaltmak
CDN kullanmak

Teşhis başlığı uygulamanın performansına dair potansiyel kazancı sunar.

Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlamak
Ana iş parçacığı çalışmasını en aza indirmek
Statik öğeleri verimli bir önbellek politikasıyla yayınlamak
JavaScript yürütme süresini azaltmak
Kritik isteklerin derinliğini (critical request chains⁴) en aza indirmek. Bu ifade ile site içi veya site dışı bağlantılarla edinilen kaynakların sayısı ve yol uzunluğu değerlendirir.
Sayfaya dışarıdan (farklı URI) eklenen kaynaklar (font, görsel, js, css vb.) için gerçekleştirilen istek ve transferin boyutunu azaltmak. Performance Budgets⁵ olarak ifade edilen bu aşama isteğin yapılması ve cevaplanması süreçlerinden de etkilenir. Bu nedenle DNS fetching işlemleri tercih edilebilmektedir.

Başarılı Denetimler ise uygun durumlardan ve kazanç sağlayacak kritik olmayan uyarılardan oluşur.

Özetle

PageSpeed Insights ile sayfaları ve toplamda sitenin ortalama performansını çok kısa sürelerde analiz edebilir ve edinilen bilgiler ışığında sayfaların daha hızlı ve etkili bir şekilde çalışabilmesi / görüntülenebilmesi için neler yapılması gerektiği hakkında fikir sahibi olabilirsiniz. Aşağıda bu yazı için de kaynak görevi görmüş bazı bağlantılar iletiyorum.