WebPageTest ile Detaylı Hız Analizi

Lighthouse size sayfanın nesi yavaş olduğunu söyler; WebPageTest ise bunu gerçek bir cihazda, seçtiğiniz şehirden, seçtiğiniz bağlantı profiliyle ölçüp saniye saniye gösterir. Türkiye'den gelen ziyaretçileriniz için Frankfurt'tan yapılan bir ölçüm ile İstanbul'dan yapılan ölçüm arasında ciddi fark olabilir ve bu farkı görebileceğiniz araçların başında WebPageTest gelir.

Bu rehberde WebPageTest'i verimli kullanmanın yolunu anlatacağım: hangi test ayarları gerçekten önemli, "First View" ile "Repeat View" arasındaki farkı nasıl yorumlarsınız, waterfall ve connection view neyi ele verir, filmstrip ile iki sürümü nasıl karşılaştırırsınız ve giriş gerektiren sayfaları çok adımlı betiklerle nasıl ölçersiniz. Aracın gücü ayrıntısındadır; ayarları rastgele bırakıp aldığınız sonuç, Lighthouse'un verdiğinden daha fazlasını söylemez.

WebPageTest'i Farklı Kılan Ne#

Çoğu hız testi aracı, bulutta çalışan sanal bir tarayıcıda sayfayı bir kez yükler ve size birkaç sayı verir. WebPageTest'in ayrıcalığı, ölçümü dünyanın farklı noktalarında duran gerçek makinelerde ve gerçek telefonlarda yapmasıdır. Ölçüm noktasını seçebilirsiniz, bağlantı profilini kısıtlayabilirsiniz, aynı testi arka arkaya birkaç kez çalıştırıp medyanı alabilirsiniz ve sonucun videosunu kare kare izleyebilirsiniz.

İkinci ayrıcalığı, ağ katmanına Lighthouse'tan çok daha derin inmesidir. Her isteğin DNS, TCP, TLS aşamalarını ayrı ayrı gösterir; hangi isteğin hangi TCP bağlantısını kullandığını "Connection View" ile açıkça çizer; TLS oturum tekrar kullanımını, HTTP/2 önceliklendirmesini ve önbellek başlıklarını denetler. Bir sunucu yapılandırma sorununu ararken bu ayrıntı seviyesine ihtiyacınız olur.

Üçüncü ayrıcalığı ise çok adımlı senaryolardır. Giriş yapılması gereken bir panel, sepete ürün ekleme akışı ya da form gönderimi gibi durumları betikle tanımlayıp her adımı ayrı ayrı ölçebilirsiniz. Bunu yapabilen ücretsiz araç sayısı çok azdır.

Test Ayarlarını Doğru Kurmak#

Ana sayfadaki URL kutusuna adresi yazıp "Start Test" demek en hızlı yoldur ama en yanıltıcı olanıdır da. Ayarları açıp şu dört kalemi mutlaka gözden geçirin:

Test Location en kritik ayardır. Türkiye ağırlıklı bir kitleniz varsa Avrupa'ya yakın bir nokta seçin; sunucunuz da Türkiye'deyse ölçüm gerçeğe yakın çıkar. Amerika kıyısından yapılan bir test, sunucunuz İstanbul'da olsa bile her isteğe 150-200 ms ekler ve sizi olmayan bir sorunu kovalamaya iter.

Number of Tests ayarını 1'de bırakmayın. WebPageTest üç veya beş çalıştırma yaptığında size otomatik olarak medyan testi seçer ve rapor o testin üzerinden açılır. Tek ölçümde denk gelen bir ağ hıçkırığı, sizi olmayan bir sorunla saatlerce uğraştırabilir.

İki ayrıntı daha var: Capture Video kutusunu işaretleyin (filmstrip bu sayede oluşur) ve gelişmiş ayarlarda gerekiyorsa Ignore SSL Certificate Errors seçeneğini yalnızca kendi geliştirme ortamınızı ölçerken açın; canlı sitede açık bırakmak sertifika sorunlarını gizler.

İlk Görünüm ve Tekrar Görünüm Farkı#

Rapor iki sütun hâlinde gelir: First View (boş önbellekle ilk ziyaret) ve Repeat View (aynı tarayıcının ikinci ziyareti). Bu ikisini ayrı ayrı okumak gerekir çünkü tamamen farklı iki soruyu cevaplarlar.

First View, size yeni ziyaretçinin deneyimini gösterir. Arama motorundan gelen, reklamdan tıklayan, ilk kez sitenizi gören herkes bunu yaşar. Dönüşüm oranınızı belirleyen sayı budur.

Repeat View ise önbellek yapılandırmanızın karnesidir. İkinci ziyarette hâlâ onlarca istek ağa çıkıyorsa, statik dosyalarınıza uzun ömürlü önbellek başlığı vermiyorsunuz demektir. Sağlıklı bir kurulumda Repeat View'da yalnızca HTML belgesi ve belki birkaç API çağrısı ağa çıkar; CSS, JS, görsel ve yazı tiplerinin tamamı tarayıcı önbelleğinden gelir.

Önbellek başlıklarını hızlıca doğrulamak için tarayıcıya bile gerek yok:

# Statik bir dosyanin onbellek basliklarini kontrol et
curl -sI https://firmaniz.com/css/stil.css | grep -i "cache-control\|expires\|etag"

Beklenen çıktı şuna benzer:

cache-control: public, max-age=31536000, immutable
etag: "6a1f-5f2c9b"

Bu başlık yoksa Repeat View'ınız First View'a çok benzer çıkar ve düzeltmesi en kolay performans kazancını kaçırıyorsunuz demektir. Apache tarafındaki ayarları .htaccess ile önbellek ve sıkıştırma yazısında adım adım anlattım.

Waterfall ve Connection View'ı Okumak#

WebPageTest'in waterfall grafiği, DevTools'unkinden daha okunaklıdır çünkü her isteğin aşamalarını farklı renklerle ayırır ve üzerine FCP, LCP gibi işaretleri çizer. Grafiği okuma yöntemini waterfall grafiği nasıl okunur yazısında ayrıntılı ele aldım; burada WebPageTest'e özel iki görünüme değineyim.

Connection View, isteklerin hangi TCP bağlantısı üzerinden gittiğini satır satır gösterir. Sağlıklı bir HTTP/2 kurulumunda kendi alan adınıza ait onlarca istek tek bir bağlantıda toplanmış olmalıdır. Grafikte kendi alan adınız için beş altı ayrı bağlantı görüyorsanız ya HTTP/1.1'e düşülüyordur ya da statik dosyalarınızı gereksiz yere farklı alt alan adlarına dağıtmışsınızdır. Eski "domain sharding" tekniği HTTP/2 ile birlikte artık zararlıdır; her yeni alan adı yeni bir DNS + TCP + TLS bedeli demektir.

Grafiğin altındaki CPU Utilization ve Bandwidth şeritleri de çok şey anlatır. Sayfa yüklenirken işlemci uzun süre yüzde 100'de kalıyorsa sorun bant genişliğinde değil, JavaScript ayrıştırmasındadır; bu durumda TBT metriğine yönelmeniz gerekir. Tersine, işlemci boşta duruyor ama bant şeridi sürekli doluysa dosya boyutlarınız fazladır.

Filmstrip ve Görsel Karşılaştırma#

Filmstrip, sayfanın yüklenişini yarım saniyelik karelere böler ve her karede ekranın nasıl göründüğünü gösterir. Bu görünüm, sayısal metriklerin kaçırdığı bir şeyi yakalar: algılanan hız. Sayfanız teknik olarak 2 saniyede yükleniyor olabilir ama ilk 1,5 saniye boş ekran, sonra her şey birden geliyorsa kullanıcı bunu yavaş algılar. Buna karşılık içerik kademeli olarak dolan bir sayfa, aynı toplam sürede daha hızlı hissettirir.

Filmstrip'in en güçlü kullanımı karşılaştırmadır. WebPageTest'in "Compare" özelliği iki testi yan yana koyup videolarını senkron oynatır. Bir değişiklik yaptıktan sonra öncesi ve sonrası testlerini karşılaştırmak, patronunuza ya da müşterinize sonucu anlatmanın da en etkili yoludur; kimse 340 ms'lik LCP kazancını rakamla hissetmez ama iki videoyu yan yana görünce anlar.

Filmstrip'te aranacak tipik sorunlar şunlardır: uzun süre bembeyaz kalan ekran (FCP sorunu), metin görünüp sonra yazı tipi değişmesi (font yükleme), içerik yerleştikten sonra zıplaması (düzen kayması, ayrıntısı CLS düzen kayması yazısında) ve görselin geç gelmesi (LCP kaynağı sorunu).

Çok Adımlı Test Betikleri#

Giriş gerektiren sayfaları ölçmek için WebPageTest'in kendi betik dilini kullanırsınız. Betik, gelişmiş ayarlardaki "Script" sekmesine yapıştırılır ve sekmeyle ayrılmış komutlardan oluşur:

logData	0
navigate	https://firmaniz.com/giris
setValue	name=eposta	[email protected]
setValue	name=sifre	OrnekParola123
logData	1
clickAndWait	css=button[type="submit"]
logData	0
navigate	https://firmaniz.com/panel
logData	1
navigate	https://firmaniz.com/panel/faturalar

Buradaki mantık şudur: logData 0 ölçümü kapatır, logData 1 açar. Böylece giriş adımının kendisi ölçüme karışmaz, yalnızca ilgilendiğiniz sayfalar raporlanır. navigate komutu yeni bir adım başlatır ve rapor her adımı ayrı ayrı gösterir.

Burada önemli bir uyarı var: betikte gerçek bir müşteri hesabı kullanmayın. Yalnızca test için açılmış, yetkisi sınırlı bir hesap kullanın; WebPageTest sonuçları varsayılan olarak herkese açıktır ve bağlantıyı bilen herkes raporu görebilir. Testi gizli tutmak için "Private" seçeneğini işaretlemeyi de unutmayın. Güçlü ve tek kullanımlık bir test parolası üretmek için şifre üretici aracımızı kullanabilirsiniz.

API ile Otomasyon#

Aynı testi her dağıtımdan sonra elle çalıştırmak sürdürülebilir değildir. WebPageTest'in HTTP API'si testi tetikler ve size sonucu döndürür:

# Testi baslat, JSON olarak test kimligini al
curl -s "https://www.webpagetest.org/runtest.php?url=https%3A%2F%2Ffirmaniz.com%2F&k=$WPT_API_KEY&location=ec2-eu-central-1:Chrome.4G&runs=3&f=json" \
  -o baslat.json

TEST_ID=$(node -e "console.log(require('./baslat.json').data.testId)")

# Sonuc hazir olunca ozet metrikleri cek
curl -s "https://www.webpagetest.org/jsonResult.php?test=$TEST_ID" -o sonuc.json
node -e "
const d = require('./sonuc.json').data.median.firstView;
console.log('TTFB:', d.TTFB, 'ms | LCP:', d['chromeUserTiming.LargestContentfulPaint'], 'ms | Byte:', d.bytesIn);
"

Bu iki komutu bir dağıtım betiğine bağladığınızda, her yayından sonra otomatik ölçüm alır ve eşiği aşan bir değişiklikte uyarı üretebilirsiniz. API anahtarını kaynak koduna değil, ortam değişkenine koyun.

Raporun Alt Bölümlerinde Saklananlar#

Çoğu kullanıcı raporun üst kısmındaki özet tabloya bakıp sekmeyi kapatır; oysa asıl ayrıntı alt bölümlerdedir. Üç sekmeyi mutlaka açma alışkanlığı edinin.

Details sekmesi, her isteğin tam başlık dökümünü verir. Gönderilen ve alınan başlıkları burada görürsünüz: sıkıştırma açık mı, hangi önbellek başlığı dönüyor, çerezler ne kadar büyük. Her istekte gereksiz yere taşınan 4 KB'lık bir çerez yığını, yüz istekte 400 KB fazladan yükleme demektir ve bu tamamen görünmez bir israftır.

Performance Review sekmesi, her kaynağı beş başlıkta puanlar: sıkıştırma, önbellek başlığı, CDN kullanımı, birleştirme ve görsel optimizasyonu. Tabloda kırmızı gördüğünüz satırlar, kod yazmadan düzeltilebilecek yapılandırma hatalarıdır ve genellikle en ucuz kazançlardır.

Content Breakdown sekmesi ise sayfayı tür bazında böler: kaç KB JavaScript, kaç KB görsel, kaç KB yazı tipi. Aşağıdaki gibi bir dağılım tipik bir sorunu ele verir:

Bu tabloyu gördüğünüzde önceliğiniz kendiliğinden belirginleşir: en büyük iki kalemle başlarsınız. Sayfanın toplam ağırlığından yola çıkarak aylık bant genişliği ihtiyacınızı kabaca çıkarmak isterseniz bant genişliği hesaplayıcı aracımız işinizi görür.

Sık Yapılan Hatalar#

En yaygın hata, yanlış lokasyondan ölçüm yapıp sunucuyu suçlamaktır. Ölçüm noktası ile sunucunuz arasındaki fiziksel mesafe her isteğe gecikme ekler; testi kitlenize yakın bir noktadan alın, yoksa CDN kurmanız gerektiği yanılgısına kapılırsınız. Bu kararı verirken CDN mi daha iyi hosting mi yazısındaki karşılaştırma işinizi kolaylaştırır.

İkinci hata, tek ölçümle karar vermektir. Üç çalıştırma yapıp medyanı almak, sonuçların güvenilirliğini belirgin biçimde artırır ve size neredeyse hiçbir şeye mal olmaz.

Üçüncü hata, Repeat View'ı hiç açmamaktır. Kullanıcılarınızın önemli bir kısmı siteye birden fazla kez girer; ikinci ziyaretteki istek sayısı hâlâ yüksekse önbellek başlıklarınızı düzeltmek, kod optimizasyonundan çok daha ucuz bir kazançtır.

Dördüncü hata, test sonucunu genel bir yargıya çevirmektir. WebPageTest tek bir sayfayı, tek bir anda ölçer. Ana sayfanız hızlı olabilir ama ürün detay sayfanız çok daha ağır olabilir. En az üç şablonu (ana sayfa, kategori, detay) ayrı ayrı ölçün.

Sıkça Sorulan Sorular#

WebPageTest ücretsiz mi#

Temel kullanım ücretsizdir: herkese açık test noktalarından günlük belirli sayıda test çalıştırabilirsiniz. Yoğun saatlerde kuyrukta beklemeniz gerekebilir. API erişimi, özel test noktaları ve daha yüksek test kotası için ücretli planlar bulunur. Kendi altyapınıza özel bir test aracısı da kurabilirsiniz.

WebPageTest mi Lighthouse mu kullanmalıyım#

İkisi rakip değil, tamamlayıcıdır. Lighthouse hızlı bir teşhis ve puanlama verir, kod tarafındaki iyileştirme önerilerini listeler. WebPageTest ise gerçek cihaz ve gerçek coğrafyadan ölçüm yapar, ağ katmanını çok daha derin gösterir. Pratikte Lighthouse ile başlayıp, sebebi bulamadığınızda WebPageTest'e geçmek verimli bir düzendir.

Test sonuçları neden Lighthouse'tan farklı çıkıyor#

Çünkü ölçüm koşulları farklıdır: WebPageTest gerçek ağ kısıtlaması uygular, Lighthouse ise varsayılan olarak simüle edilmiş kısıtlama kullanır. Ayrıca ölçüm noktası, cihaz gücü ve tarayıcı sürümü de farklı olabilir. İki aracın sayıları birebir tutmaz; önemli olan aynı araçla yapılan öncesi-sonrası karşılaştırmasıdır.

Giriş gerektiren sayfayı nasıl test ederim#

Betik sekmesine navigate, setValue ve clickAndWait komutlarıyla giriş akışını yazarsınız ve giriş adımlarını logData 0 ile ölçüm dışında bırakırsınız. Testi mutlaka "Private" işaretleyin ve gerçek bir müşteri hesabı yerine yalnızca test için açılmış sınırlı yetkili bir hesap kullanın.

Sonucu paylaşırken dikkat etmem gereken bir şey var mı#

Evet. Varsayılan olarak test sonuçları herkese açıktır ve raporda istek başlıkları, çerezler ve bazen oturum bilgileri görünebilir. Giriş içeren veya kişisel veri geçen testleri mutlaka gizli olarak çalıştırın. Sonuç bağlantısını paylaşmadan önce başlık dökümüne bir göz atmak iyi bir alışkanlıktır.

Mobil ölçüm için gerçek cihaz mı emülasyon mu#

Mümkünse gerçek cihaz seçin. Emülasyon ekran boyutunu ve ağ profilini taklit eder ama işlemci farkını tam yansıtamaz; oysa mobil performansın asıl darboğazı çoğu zaman işlemci gücüdür. Gerçek cihaz test noktalarında kuyruk daha uzundur, buna karşılık sonuç kullanıcı deneyimine çok daha yakındır.

Kapanış#

WebPageTest, "sitem neden yavaş" sorusuna tahminle değil ölçümle cevap veren araçtır; yeter ki ayarlarını doğru kurun. Aklınızda kalması gereken dört alışkanlık: ölçüm noktasını kitlenize göre seçin, en az üç çalıştırma yapıp medyanı kullanın, Repeat View'ı açıp önbellek karnenizi görün ve değişiklikleri filmstrip karşılaştırmasıyla doğrulayın.

Ölçümler sunucu kaynaklı bir gecikmeye işaret ediyorsa çözüm çoğu zaman altyapı tarafındadır. Türkiye'deki kullanıcılarınıza yakın, NVMe diskli VDS ve bulut sunucu paketlerimiz gecikmeyi doğrudan düşürür; hazır optimize bir başlangıç arıyorsanız web hosting planlarımıza bakabilirsiniz. Ölçüm ve iyileştirme döngüsünü düzenli olarak yürütmemizi isterseniz sunucu yönetimi hizmetimiz bu işi üstlenir.