AFAIK

PageSpeed Insights Nedir?

Güncelleme:
Google tarafından geliştirilen PageSpeed Insights (PSI), web sitelerinin hızının ölçümlenebilmesi ve edinilen değerlere göre optimize edilebilmelerini sağlamak amacıyla kullanılan ücretiz bir analiz uygulamasıdır. Google Web ...
GÖRSEL
Google tarafından geliştirilen PageSpeed Insights (PSI), web sitelerinin hızının ölçümlenebilmesi ve edinilen değerlere göre optimize edilebilmelerini sağlamak amacıyla kullanılan ücretiz bir analiz uygulamasıdır. 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 (Chrome User Experience Report / 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.

PageSpeed Insights

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.Render-tree Construction

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.
Ceyhun Enki Aksan

Kullanıcı Davranışları Analizi (User Behavior Analysis) ve Kullanıcı Deneyim Tasarımı (UX Design) üzerine çalışmalar yürütmekte, bu süreçte edindiğim teknik ve pratik bilgileri fayda sağlamak motivasyonuyla (afaik / as far as i know) paylaşmaktayım.

HABERDAR OL

Yeni eklenen projeler, eğitimler, içerikler ve yayınlanan videolar e-posta adresine gelsin.