Cuma , 14 Aralık 2018
Ana sayfa » Google » Page speed insights rehberi

Page speed insights rehberi

1 Puan2 Puan3 Puan4 Puan5 Puan 3 Kişi oy verdi Ortalama puan: 5,00.
Loading...

Google Product Forumda yayınlanan bu makale Google Ekibinden Fatih ÖZKÖSEMEN tarafından oluşturulmuştur.

Bilindiği üzere geçtiğimiz günlerde google Page Speed Insights (PSI) aracında bazı geliştirmeler yaptı. İlgili duyuruya Türkçe Webmaster Bloğu üzerinden ulaşabilirsiniz. Özetlemek gerekirse, daha önceden sayfa hızı optimizasyonu ile ilgili verdiğimiz teorik tavsiyelere ek olarak incelediğiniz sayfanın Chrome tarayıcı kullanan gerçek kullanıcılar tarafından ne kadar hızlı deneyimlendiği bilgisini de göstermeye başladık. Yani teorik bilgilere, gerçek dünya kullanıcı verisini de ekledik.

Bu yeni bilgiler ile ilgili sizlerden oldukça olumlu geri bildirimler almaktayız. Bununla birlikte gelen sorular üzerine, mevcut dokümantasyonumuza ilave olarak verdiğimiz metriklerin nasıl hesaplandığını Türkçe olarak biraz daha açıklama ihtiyacı hissettim. Bu nedenle aşağıda gerçek bir örnek üzerinden sizlere konuyu özetlemek istiyorum.

Unutmayın burada sadece turkiye.gov.tr “sayfasını” test ediyorum, sitenin tümünü değil. PSI aracına bu siteye ait farklı bir URL girerseniz, büyük ihtimalle farklı bir sonuç alırsınız. Sayfa/site hızı konusu oldukça karıştırılıyor, aman buna dikkat.

Rapordaki veriler hem mobil hem de masaüstü (desktop) için mevcut. Burada sadece mobil üzerinden geçeceğim, aynı prensipler haliyle desktop için de geçerli. Şimdi ilgili raporu bölümler halinde inceleyelim:

1- Speed (Hız):

Bu sayfanın mobil üzerinde gerçek kullanıcılar tarafından deneyimlenen hızı Ortalama (Average) olarak görünüyor. Peki bu ne demek ve nasıl hesaplanıyor? Bunu hesaplarken iki metriğe bakıyoruz. First Contentful Paint (FCP) ve DOM Content Loaded (DCL).

  • FCP: Sayfa DOM’u içerisinde bulunan ilk içerik parçasının yüklenme anına kadar geçen süre. Bu bir yazı, resim, SVG veya herhangi bir <canvas> elementi de olabilir. Yani kullanıcının ilk içerik parçacığını görme anına kadar geçen süre.

  • DCL: Sayfaya ait DOM’un tamamen yüklenmesine kadar geçen süre demektir. Yani görüntülenmesi gereken HTML içerik artık kullanıcı için hazır. Unutmayın, bu sayfa tamamen yüklendi anlamına gelmiyor. Eğer sayfa, kullanıcı tarafından görünen html oluşumunu etkilemeyen bazı harici kaynaklar barındırıyorsa, mesela analytics amaçlı js kodları vs. gibi, bunlar paralelde yüklenmeye devam edebilir.

Bunuda okumalısın !  Search Console İş İlanları durum raporu

Burada verilen FCP ve DCL değerleri, bu sayfayı ziyaret eden kullanıcıların gerçekte yaşadığı değerlerin medyan (median) ortalamasını göstermektedir. Yani bu örnekte medyan FCP = 1.6s ve medyan DCL = 1.4s. Bu demek oluyor ki bazı kullanıcılar sayfayı bundan daha hızlı veya yavaş şekilde denyimlemiş olabilir ama biz burada size medyan ortalamasını gösteriyoruz.

Peki FCP veya DCL rakamının kırmızı/sarı/yeşil olması nasıl belirleniyor? Gördüğümüz tüm sayfaların (sadece sizin sitenize ait değil, tüm web üzerinde) medyan FCP veya DCL değerlerine bakıyoruz ve bunları 3 gruba bölüyoruz.

  • Yeşil: İlgili metriğin en hızlı 1/3’lük dilimde olduğunu gösteriyor.

  • Sarı: İlgili metriğin en hızlı ikinci 1/3’lük diliminde olduğunu gösteriyor. Yani ortadaki grup.

  • Kırmızı: İlgili metriğin en yavaş 1/3’lük dilimde olduğunu gösteriyor. Yani en dipteki grup.

Evet, FCP ve DCL metriklerinin bireysel olarak nasıl renklendirildiğini anladık. Peki orada sarı olarak belirtilen Average (Ortalama) ibaresi nasıl gösteriliyor? Bunun için de FCP ve DCL kombinasyonuna bakıyoruz. Basitçe anlatmak gerekirse

  • Fast (Hızlı): Eğer “her iki” metrik de yeşil, yani hızlı ise.

  • Slow (Yavaş): Eğer “herhangi bir” metrik kırmızı, yani yavaş ise.

  • Ortalama (Average): Bu iki ihtimal dışında kalan her şey.

Not: Bazı sayfalar için Speed (hız) bilgisi aşağıdaki şekilde Unavailable (mevcut değil) olarak görüntülenemeyebilir.

Bunun temel sebebi ilgili sayfanın yeterince trafiğe sahip olmamasıdır. Tekrar hatırlatmak gerekirse, gerçek dünya hız bilgileri, Chrome Kullanıcı Deneyimi raporundan gelmektedir. Bu rapor için aşağıdaki kısıtlar bulunmaktadır:

  • İlgili sayfa Googlebot tarafından taranabilir olmalıdır.

  • Sayfa belirli bir popülerliğe yani kullanıcı trafiğine ulaşmış olmalıdır. Burada belirli bir rakam yok. Genelde yeni siteler için bu verinin oluşması, kullanıcı trafiğine de bağlı olarak zaman alacaktır.

  • Siteyi ziyaret eden kullanıcıların Chrome veri paylaşımını aktif etmiş olmaları gerekmektedir.

  • Siteyi ziyaret eden kullanıcıların, tarama geçmişlerini bir parola (passphrase) ile şifrelememiş olmaları gerekmektedir.

Bunuda okumalısın !  Search Console Dizin Kapsamı Raporu

Yazı İçindekiler

2- Optimization (Optimizasyon):

Bu bölüm zaten raporun eski halinde de bulunuyordu. Burada hiçbir değişiklik yok o nedenle detayına fazla girmeden özetleyeceğim. Sektör tarafından genel geçer bir şekilde kabul gören, sayfa hızını arttırmaya yönelik belli başlı teknikler bulunmakta. Bu 9 tekniğin listesine şu sayfadan ulaşabilirsiniz. 100 üzerinden verilen bu skor, ilgili sayfanın bu tekniklerin ne kadarını barındırdığına göre hesaplanıyor ve bir sitenin iyi performans gösterme ihtimalini belirtiyor.

Unutmayın bu teorik bir rakam. Yani burada belirtilen tekniklerin tümünü barındıran bir sayfa yavaş olabileceği gibi, bazılarını barındırmayan bir sayfa da hızlı olabilir. O nedenle bu optimizasyon verisini, hız verisi ile birlikte okumak en sağlıklısı olacaktır. Bu rakamın rengi de yine üç kategoride/renkte veriliyor:

  • Good (İyi): >= 80

  • Medium (Ortalama): >= 60 ve <79

  • Low (Düşük): <60

3- Page Load Distributions (Sayfa Yüklenme Dağılımı)

Bu bölümde ise FCP ve DCL datalarının dağılımına, ilgili sayfa özelinde detaylı bir bakış imkanı sunuluyor. Yani bu sayfayı ziyaret eden kullanıcıların ne kadarı hızlı/ortalama/yavaş bir deneyim yaşadı. Dikkat edin bu tüm web içerisinde, sayfanızın nerede olduğunu gösteren bir karşılaştırma değil. Sizin bu sayfanızı ziyaret eden tüm kullanıcıların yaşadığı deneyimin bir gruplandırması.

Yukarıdaki grafiği yorumlamadan önce, her renk ne anlama geliyor buna bakalım. “Tüm web için” sayfa yüklenme hızlarına baktığımızda, az önce de bahsettiğim gibi bunları 3 eşit parçaya bölüyoruz ve ilgili dilimleri hızlı, ortalama ve yavaş olarak grupluyoruz. Bu veriler haftalık olarak güncelleniyor ve geriye dönük 30 günlük bir aralığı gösteriyorlar. Ben bu analizi 24 Ocak 2018 günü yaptığımda FCP ve DCL için belirlenen eşik değerleri aşağıdaki gibiydi. Muhtemelen zaman içerisinde bu rakamlar değişecektir. Örnek vermesi için bu güne ait değerler:

  • FCP için 1/3’lük dilimlerin eşik değerleri. 1.6s ve 3.0s. Yani FCP 1.6’dan az ise yeşil, 1.6 ve 3.0 arasında ise sarı, 3’den büyük ise kırmızı olarak gösteriliyor.

  • DCL için 1/3’lük dilimlerin eşik değerleri. 2.1s ve 4.2s. Yani DCL 2.1’den az ise yeşil, 2.1 ve 4.2 arasında ise sarı, 4.2’den büyük ise kırmızı olarak gösteriliyor.

Bunuda okumalısın !  Search Console İş İlanları durum raporu

Bu bilgiye göre yukarıdaki grafiğini yorumlarsak, diyelim bu sayfayı 100 kullanıcı ziyaret etti:

  • Bunların 50’si için FCP değeri 1.6s’den küçük, 28’i için 1,6s ve 3.0s arasında, 22’si için 3.0s’den büyük olarak gerçekleşti.

  • Yine bunların 65’i için DCL değeri 2.1s’den küçük, 26’sı için 2.1s ve 4.2s arasında, 9’u için 4.2s’den büyük olarak gerçekleşti.

4- Page Stats (Sayfa İstatistikleri)

Bu bölüm, render-blocking resources (oluşturma engelleyici kaynaklar) olarak bilinen kaynakları yükleyebilmek için tarayıcının kaç round trip (git gel) yaptığını, bunu yaparken ne kadar data indirdiğini ve bu rakamların tüm web üzerinde gözlemlediğimiz medyan ortalamalarına göre durumunu belirtiyor.

5- Optimization Suggestions (Optimizasyon Tavsiyeleri)

Bu kısım, optimizasyon bölümünde 100 üzerinden verilen skoru daha da iyileştirmek için çeşitli tavsiyeler içeriyor.

6- Optimizations Already Present (Sayfada Bulunan Optimizasyonlar)

Burası optimizasyon bölümünde 100 üzerinden verilen skoru hesaplarken, ilgili sayfada hali hazırda bulunan optimizasyon tekniklerini özetliyor.

Umarım bu bilgiler ile raporu daha kolay yorumlayabilirsiniz. Eklemek veya sormak istedikleriniz için aşağıdaki yorum alanını kullanabilirsiniz.

Teknotrik Notu : Google ın site hızı analiz aracı Page Spede Insight ın artık Chrome verilerine göre sonuçları sunmaktadır. Yani bundan sonra hız sorgulaması yaparken google page speed insight aracının önerileri google chrome tarayıcısından gelen gerçek kullanıcı deneyiminden oluşmaktadır.

BU YAZILARI DA MUTLAKA OKUYUN -----------------------------------------------------

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir