Dolayısıyla bu alanda denemeler yaparak sitenizi test etmeniz ve sitenizin hızını yukseltmeniz onemli. Ancak doğru olcumleme yapmadığınız zaman veya farklı aracları kullandığınızda aynı sayfalarınız icin farklı sonuclar aldığınız zaman işler karışıyor. Vol.1 yazısında bilinen test araclarından bahsetmiştik, ancak bu araclar tek bir sayfa URL ’inde size sonucları gosteriyor. Şu an icin tum sitenizi tarayarak olcum yapabileceğiniz, hız skorunuzun hangi sayfalarda duşuk olduğunu doğrudan gorebileceğiniz bir arac yok maalesef. Bu yazımızda daha cok coklu sayfalarda olcumleme, rakiplerle kıyaslama ve takip uzerinde duracağız. Her ne kadar optimizasyon tum siteye uygulanan bir surec olsa da hız testi yaptığımız bir cok sitede gozden kacabilen onemli sayfaların olduğunu ve bunları tespit edip optimizasyon yapmanın gerekli olduğunu fark ettik.
İkinci bolumde Chrome UX raporu altında hazırladığımız rakip kıyaslamalı dashboard orneğini de kopyalayarak kullanabilirsiniz.
En cok kullandığımız Google Analytics aracı ile başlayalım.
Google Analytics Site Speed Sekmesi Google Analytics ’te site speed sekmesine hepimiz girip bakmışızdır. Ozellikle ortalama sayfa yuklenme suresi gibi onemli bir metriği bize sunuyor. Konuya derinlemesine girmeden once şu uyarıyı yapmak yerinde olacaktır: Aldanmayın!
Google Analytics, site hızı sekmesinde biraz acımasız davranıyor. Verdiği ortalama yuklenme suresi sampling (ornekleme) yaparak oluşturduğu bir değer ve bu sampling değeri genelde cok duşuk oluyor.
Ornek verecek olursak, diyelim ki bir sayfanızın 1000 sayfa goruntulemesi (pageview) var. Google Analytics o sayfanızın ortalama yuklenme suresini yalnızca 4-5 ornekten alarak ortalama değeri veriyor. Support.google sitesinde de default olarak bu değerin maksimum %1 olacak şekilde ayarlanmış olduğunu belirtiyor Google.
Peki ben sampling sayımı nasıl gorebiliyorum diye sorduğunuzu duyar gibiyim. Bunun icin site speed altında bulunan page timings kısmına girin. Tablo gosterimleri seceneklerinden en baştaki ikona tıklayın.
Ve explorer altında technical gorunumu secin.
Şu anda her sayfanız icin ortalama sayfa yuklenme suresinin yanında sayfa ornekleme sayısını da goruyor olacaksınız.
Yukarıdaki ornekte de gorduğunuz gibi 702 sayfa gosterimi olan bir sayfadan yalnızca 2 ornek alarak sonuc vermekte. Gercekten o sayfanın yuklenme suresi 0.64s olabilir mi emin olamayız. Ayrıca yalnızca first pageview ’dan data toplamanız gerekir, cache ’ten dolayı ilk girişten sonra daha hızlı giren kullanıcıları da dahil ederse sonuc sizi yine yanıltacaktır.
Peki Ne Yapalım?
Analytics verisini hız icin kullanmanızı onermiyoruz. Eğer gercekten bu datayı toplamak ve değerlendirmek istiyorsanız tum ayarlamaların duzgun yapılması ve toplanan verinin doğru olması icin Analytics uzmanları ile calışmalısınız. Sampling oranı artırılabilen bir oran. Ancak yalnızca bu oranı artırmak doğru veri icin yeterli olmayacaktır.
2. Chrome UX Raporu
2017 Chrome Web Summit konferansında Google gercek zamanlı, Chrome kullanıcılarının deneyimlerinden ornekleme yaptığı Chrome UX raporunu duyurdu. Pagespeed Insights aracı da şu an Alan Verisi ’nde bu datayı sunuyor bize.
Gercek zamanlı veriyi duymuşsunuzdur ancak neden bu kadar onemli, hic duşunduk mu?
Şoyle acıklayalım, bir web sitesini webpagetest.org uzerinde test ettiğimde tum skorları neredeyse A olarak goruyorum. (Bağlantı ayarları ve ulke gibi değerlerle cok oynamadığınızı varsayın) Herşey guzel gorunuyor. Ancak Pagespeed Insights aracına girdiğimde skorlar ciddi anlamda duşuyor. Bu ne demek? Hangisi onemli?
Kesinlikle Pagespeed insights datası onemli cunku o veri sizin gercek kullanıcılarınızın deneyimlerinin ortalaması. Kitlenizin buyuk bir coğunluğu daha az ozelliklere sahip bir cep telefonu kullanıyor olabilir, kotu internet erişimine sahip olabilir, esas kitlenizin yaşadığı ulkedeki hız performansınızın kotu olması olabilir ancak onlar sizin kitleniz ve Google sizin hızınızı onlara gore optimize etmenizi bekliyor. Dolayısıyla hız bir sıralama faktoru ise Google ’ın onemsediği kısım kesinlikle bu olacaktır. Tabi ki gercek dunyada buna uygun optimizasyon yapmak pratik ve uygulanabilir bir şey olmayabilir ancak yine de kitlenizi tanımanız adına ve rakiplerinizin durumunu bilmeniz adına onemli.
Peki Chrome UX raporunu nasıl kullanacağız?
İki seceneğimiz bulunuyor, Big Query uzerinden SQL ile dataları cekmek ve Google Data Studio uzerinde hazır template ile dashboard oluşturmak.
2.1. Big Query ile Chrome UX Verileri
Big Query ile Chrome UX verilerini aylık 1TB ’a kadar ucretsiz cekebiliyoruz. Daha fazlası icin ucretlendirme devreye giriyor.
Oncelikle Google Cloud uzerinden bir proje başlatıyoruz.
Projemizi oluşturduktan sonra menuden Big Query ’ye geciş yapıyoruz.
Big Query ’ye geciş yaptıktan sonra sol tarafta isimlendirdiğimiz projenin sağındaki ucgene basarak menuyu acıyoruz ve display project diyoruz.
Proje ID ’sine chrome-ux-report yazarak projemizi başlatıyoruz. New Query sekmesinin altında ayarlardan Use Legacy SQL tikini kaldırıyoruz.
Query sayfasına aşağıdaki kodu yazıyoruz ve calıştırıyoruz.
SELECT
_TABLE_SUFFIX AS month,
origin,
SUM(fcp.density) AS fast_fcp
FROM
`chrome-ux-report.all.*`,
UNNEST(first_contentful_paint.histogram.bin) AS fcp
WHERE
fcp.start < 1000
AND origin IN ('https://www.bbc.co.uk',
'https://www.telegraph.co.uk','https://edition.cnn.com', 'https://www.nytimes.com','https://news.sky.com')
GROUP BY
month,
origin
ORDER BY
month,
origin
Site isimlerini değiştirmeyi unutmayın! Ayrıca bu verileri ulke bazlı da cekebilirsiniz. Yukarıdaki chrome-ux-report.all kısmını chrome-ux-report.country_tr şeklinde değiştirmelisiniz. Sonuclar aşağıya geldikten sonra Save Results kısmından verilerimizi Google Sheets ’e aktarabilir, verileri gorselleştirerek rakiplerimizle aramızdaki farkı inceleyebiliriz.
Ozetle SQL ile uğraşmaktan cekinmezseniz Chrome UX raporu ve Big Query ile hız konusunda guzel veriler elde edebilirsiniz. Neden bununla uğraşayım, Pagespeed Insights bu verileri vermiyor mu diyorsanız, PSI yalnızca son 30 gun verisini paylaşmakta. Burada daha eski verileri de gorebiliyoruz.
Yukarıda yalnızca FCP değer yoğunluğunu cektik, siz kullanıcı deneyim metriklerinden daha fazlasını cekebilirsiniz. Onlarca GB veriyi saniyeler icerisinde size sunabiliyor.
İşin guzel yani rakiplerinizin verilerini de cekebiliyor olmanız.
2.2. Google Data Studio Chrome UX Report Taslağı
Big Query kısmına girmeden hazır bir taslak yok mu diyorsanız, Data Studio uzerinde oluşturulmuş bir dashboard var.
Burada, kullanıcılarınızın yuzde kacı fast, average ve slow FCP ’lerde sitenizi deneyimlemiş, bunu gorebilirsiniz. 1 saniyenin altındaki FCP değeri fast olarak atanıyor. 1-2.5 arası average, 2.5 ustu slow olarak alabilirsiniz.
Bu linkten rakip bazlı kıyaslama yapabileceğiniz, bizim hazırladığımız data studio dashboard orneğini, make a copy diyerek kendiniz icin oluşturabilirsiniz.
Site isimlerini ve kaynağı değiştirmek icin data source kısmında kalem ikonuna tıklayarak edit sekmesini acın. Edit Connection yazan yerde geri ok tuşuna basın.
Acılan ekranda kendi URL ’inizi başında https olmadan yazın ve Reconnect ’e basın.
Ve son olarak done diyoruz.
Her bir grafik icin aynı işlemi tekrarladığınızda kendi rakip tablonuzu oluşturmuş olacaksınız, voilaa!
3. Screaming Frog ve Deep Crawl Aracları ile Coklu Sayfalarda Hız Metriklerini Tespit Etmek
Screaming Frog yakın zamanda xpath kullanarak custom extraction ile nasıl tum sayfalarımızın hız skorlarını cekebileceğimizi anlatan bir yazı yayınladı. Bu linkten ulaşabilirsiniz.
Yazıda belirtilen ayarları adım adım uyguladığınızda sayfa seviyesindeki skorlarınızı tarama sonucunda alabileceksiniz.
Hangi Sayfaları Almalıyım?
Burada Analytics hesabınıza girerek oturum sayısı yuksek acılış sayfalarınızın listesini alabilir, daha sonra Screaming Frog sitesindeki yazıyı takip ederek olcumleme yapabilirsiniz. Yalnız belirtmekte fayda var, cok yavaş ilerliyor, dolayısıyla birden yuklenmeyin.
Deepcrawl aracının da JavaScript rendering kısmını aktif ederek custom extraction ile bu verileri nasıl cekebileceğimizi anlattığı yazı icin buyrunuz.
Her ikisini de test ettik, Deepcrawl cok daha hızlı sonuc veriyor.
4. Sitekit Wordpress Eklentisi
Ekibimizden Mert ’in yeni yazısı Google'dan Wordpress Site Kit Eklentisi ’ni okuduysanız bu haberi duymuşsunuzdur.
Wordpress sitesi olanlar bu eklenti sayesinde tek bir platformda Google urunlerinin verilerine ulaşabilecek. Pagespeed kısmında ise guzel haber v1 versiyonunda yalnızca ana sayfa verilerini alabilecek olsak da, onemli sayfaların skorlarını da ileride ekleme hedefleri olduğundan bahsetmeleri.
Aşağıdaki eklenti gibi bir rapor sunması kacınılmaz duruyor.
5. Batchspeed Aracı
Cok populer olmayan ancak ara yuzu ve gorselleştirmeleri ile gonlumuzu celen, henuz gelişmekte olan bir arac Batchspeed.
Bulk olarak URL ’lerinizi verdiğinizde hem hız skorlarını hem optimizasyon onerilerini sayfa bazlı olarak getirdiği gibi, yalnızca sitenizin URL ’ini girdiğinizde crawl başlatarak da test ediyor. Ancak crawl dediysek tum sitenizi tarayacak ozellikli bir crawl değil maalesef. Dolayısıyla List of URL kısmını daha kullanışlı buluyoruz. Verilerini ise Google Pagespeed API ’den cekiyor.
İlerleyen gunlerde daha da gelişeceğini ve hızlanacağını umuyoruz.
Serinin 1. yazısında Site Hızı Optimizasyonu Oncesinde Bilmeniz Gerekenleri detaylı bir şekilde anlatmıştık. Bu yazımızda da gercek kullanıcı metrikleri ile hız olcumunu nasıl yapabileceğinizi en guncel konular ile birlikte aktarmaya calıştık. Bu alanda surekli yayınlanan yeni duyurular bize gosteriyor ki web performans konusunda 2019 yılında daha fazla geliştirme ile karşılaşacağız.
Serinin 3. yazısı AMP (Accelerated Mobile Pages) Rehberi ile devam edebilirsiniz!
kaynak: zeo.org/tr/blog/gercek-kullanici-metrikleri-ile-site-hizi-test-araclari/