WebPageTest ile Performans Analizi

Hızlı bir web sitesi artık mutlak bir zorunluluktur. Mobil bir çağda ve yatılı tüketicilerle yavaş bir web sitesi, işletmenizin başarılı olması veya başarısız olması arasındaki fark olabilir. Peki, web sitenizi hız açısından tam olarak nasıl test edersiniz ve onu yavaşlatabilecek sorunları nasıl tespit edebilirsiniz?

Bu yazıda WebPageTest adlı popüler bir araca bakacağız. Bu ölçüm aracı, sitenizin performans açısından iyileştirilebilecek alanlarını saptamak için kullanılabilecek bir dizi ayrıntılı istatistik ve veri sağlar. Ancak sağlanan bilgi hacmi biraz bunaltıcı olabilir. Endişelenmeyin… WebPageTest'in nasıl kullanılacağını adım adım anlatacağız, böylece bu ücretsiz araçtan en iyi şekilde nasıl yararlanabileceğinizi netleştireceğiz.

WebPageTest'e Başlarken

Her şeyden önce, başlamak için webpagetest.org'a gidin. Düzen çok net ve hemen web sitenizin URL'sini girebileceğiniz bir kutu göreceksiniz.

Başlangıçta bir seçeneğiniz var… varsayılan 'Gelişmiş Test' sekmesini mi kullanıyorsunuz yoksa 'Basit Test' sekmesine mi gidiyorsunuz? Basit Test özelliği, sitenize hızlı bir genel bakış için harikadır ancak bu makale için Gelişmiş Test sekmesine bakacağız.

Gelişmiş Test Ayarları

Sayfayı aşağı kaydırdığınızda Test Konumu açılır menüsünü göreceksiniz. Bu oldukça açıklayıcı. Seçmek istediğiniz yer, hedef kitlenizin bulunduğu yere en yakın olanıdır. Avustralya'da yaşıyorlarsa, Londra, İngiltere'den test yapmak pek mantıklı değil. Bu alıştırmanın amacı, web sitemizin kullanıcılarımız için nasıl performans gösterdiğini öğrenmektir.

Bir sürü yer var ama bazı yerler, test için kullanılan tarayıcı biçiminde diğerlerinden daha fazla test seçeneği sunuyor. Yine, hedef kitleniz tarafından kullanılması muhtemel olanı denemek ve seçmek istiyorsunuz. Web sitenizin hangi tarayıcılardan ziyaret edildiğine ilişkin bazı istatistikleri görüntülemek için Google Analytics gibi araçları kullanabilirsiniz.

Seçebileceğiniz diğer gerçekten harika ayarlar, bağlantı gibi şeylerdir. Yani, son kullanıcının cihazı internete bu şekilde bağlanır. 'Bağlantı'nın yanındaki açılır menüyü tıklayın ve 3G bağlantısı (yavaş veya hızlı) içeren seçenekleri göreceksiniz. Kitlenizin sitenizi nasıl deneyimleyeceği konusunda size gerçek bir dünya hissi verdiği için bu gerçekten güzel.

Oldukça kullanışlı olan başka bir ayar da 'Görünümü Tekrarla' seçeneğidir. Bu seçenek etkinleştirildiğinde, sitenizde etkinleştirdiğiniz önbelleğe almanın etkisini göstermeye yardımcı olan ilk yüklemeden sonra sitenin yeniden test edileceği anlamına gelir.

Keşfetmek isteyebileceğiniz bir dizi daha gelişmiş seçenek var. Çoğumuz için, sitenizi test etme konusunda gerçekten derin bir dalış yapmıyorsanız, yukarıda özetlenen ayarlar yeterli olacaktır. Mevcut gerçek nitty cesur ayarlar hakkında daha fazla bilgi edinmek isteyenler için WebPageTest belgelerine bakın.

Değiştirdiğiniz ayarlardan herhangi birini not edin. Test etme ve ardından optimize etme aşamasında aynı ayarları kullanarak yeniden test etmeye devam etmeniz önemlidir, aksi takdirde elde ettiğiniz sonuçları çarpıtırsınız. Hazır olduğunuzda, 'Testi Başlat' düğmesine basın ve ardından arkanıza yaslanın ve sonuçları bekleyin (normalde yaklaşık bir dakika sürer).

İlk Ekran

Bu örnekte Apple'ın web sitesini (apple.com) kullandık ve onu Londra, İngiltere'den hızlı bir 3G bağlantısı üzerinden test ettik. İlk sonuçlar aşağıda gösterilmiştir:

Sağ üst köşeye bir göz atın ve sayfanın nasıl performans gösterdiğine dair ilk 'başlangıç' genel bakışını sağlayan 7 renkli kutu göreceksiniz. Bunların her birinin ne olduğunu inceleyelim.

Kutu 1 – Güvenlik Puanı

Bu, WebPageTest tarafından sağlanan ve aslında Snyk ile bir entegrasyon olan ve bir web sitesinin güvenliğine ilişkin bir fikir sağlayan yeni bir özelliktir. Renkli kutuya tıklarsanız, söz konusu web sitesinin güvenlik açısından ayrıntılı bir analizini içeren synk.io web sitesine yönlendirileceksiniz. İletişimin güvenlik ayrıntılarını tanımlamak için bir istemci ve bir sunucu arasında değiş tokuş edilen HTTP Güvenlik Başlıkları özellikle dikkate alınmalıdır. En önemlileri Strict-Transport-Security, Content-Security-Politika, X-Frame-Options'dır.

Pressidium ile web sitenizi barındırın

60 GÜN PARA GERİ GARANTİSİ

PLANLARIMIZI GÖRÜN

Sitenizde önemli bir Güvenlik başlığı eksikse, Synk web sitesinde bu konuda bilgilendirileceksiniz.

Kutu 2 – İlk Bayt Zamanı

İkinci kutu, İlk Bayt Zamanını sağlar (Aksi halde İlk Bayt Zamanı veya TTFB olarak da bilinir). Bu, sunucunun istemci isteğine ilk veri baytı ile yanıt vermesine kadar geçen süredir. İdeal olarak, 300 ms'nin altında bir rakamı hedeflersiniz. Bu değer daha çok sunucuyla ilgilidir ve web sitenizin dosyalarının oluşturulması için harcanan zamanla ilgisizdir. Örneğin yavaş bir DNS sunucusundan veya yetersiz önbelleğe alma işleminden etkilenebilir.

Bu noktada, önbelleği etkinleştirdiyseniz, önbelleğe alınan içeriğin ölçülmesi için web sayfası testinizi yeniden çalıştırmanız gerektiğini unutmamak önemlidir. Aslında, sonuçların sitenizdeki önbelleğe alınmış içeriği tam olarak yansıttığından emin olmak için testi en az 3 kez çalıştırmanız önerilir.

İlk Bayt Süresi, üç değerin toplamıdır: HTTP isteğinin gönderilmesi için gereken süre, sunucu tarafından işlenecek süre ve sunucunun ilk baytı istemciye geri göndermesi için gereken süre. Kutuya tıklayarak bununla ilgili daha fazla ayrıntıya ulaşabilirsiniz:

Gördüğümüz gibi, Apple web sitesi testin bu bölümünde pek iyi sonuç vermedi.

Bu bağlantı yapıldıktan sonra kaynaklar teslim edilmeye başlanabilir. Yavaş bir TTFB'nin en yaygın nedenleri ağ sorunları, web sunucusu yapılandırması, olası sunucu disk G/Ç'si ve RAM sorunlarıdır.

Kutu 3 – Canlı Tut

'Canlı Tut Etkin' kutusu, canlı tutma HTTP başlığının durumunu gösterir. Bu başlık etkinleştirildiğinde, veriler aynı bağlantı kullanılarak aktarılacaktır, aksi takdirde aktarılması gereken her dosya için yeni bir bağlantı oluşturulmalıdır. Canlı tutma çoğu durumda varsayılan olarak etkindir ve genellikle sunucu tarafında bir ayardır. Kendiniz etkinleştirmeniz gerekiyorsa, .htaccess dosyanızı düzenleyebilir ve aşağıdaki kodu ekleyebilirsiniz.

 <ifModule mod_headers.c> Header set Connection keep-alive </ifModule>

Kutu 4 – Sıkıştırılmış Transfer

Sıkıştır Aktarma değeri, Gzip sıkıştırmasının durumunu temsil eder. Bu, statik dosyalarınızı gerçek zamanlı olarak sıkıştırmak ve daha sonra açmak için kullanılan bir tekniktir. Bu şekilde dosya boyutu küçüldüğü için aktarım süresi azalır. Sunucu sağlayıcınız bu teknolojiyi varsayılan olarak uygulamıyorsa, aşağıdaki gibi her dosya türü için ilgili kuralı belirterek kendiniz yapabilirsiniz:

 AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html

Yine, ilgili renkli kutuya tıklamak sizi ayrıntılı bir genel bakış bölümüne götürecektir, böylece web sitenizde tam olarak neler olduğunu görebilirsiniz.

Kutu 5 – Görüntüleri Sıkıştır

Resimleri Sıkıştır kutusu oldukça açıklayıcıdır. Üzerine tıklayın ve size hangi görüntülerin daha iyi sıkıştırılabileceğini gösterecektir.

Bu durumda, WebPageTest, aktarılması gerekmeyen verilerde 54 kb tasarruf sağlayarak başarıyla sıkıştırılabileceğini düşündüğü üç görüntü belirledi. Bu kulağa pek hoş gelmeyebilir, ancak bir cep telefonunda kaydedebileceğiniz her kb'lik bir fark yaratır.

Görüntüler, statik içeriğinizin en çok yer kaplayan yönüdür. Onları sıkıştırmak mutlak bir zorunluluktur. WebPageTest analizi, sitenizi yavaşlatan ve bu nedenle dikkat edilmesi gereken resimlerin belirlenmesini kolaylaştırır.

Kutu 6 – Statik içeriği önbelleğe alın

'Statik içeriği önbelleğe al' kutusuna basarsanız, 'Statik varlıkların tarayıcı önbelleğe alınmasından yararlanın' adlı ayrıntılı bir bölüme yönlendirileceksiniz.

Tarayıcı önbelleğe alma, geliştiriciniz veya yöneticiniz tarafından, web tarayıcısına bir kaynağın ne zaman önbelleğe alınacağını, ne zaman önbelleğe alınacağını ve doğru HTTP başlıklarının kullanılmasıyla ne kadar süreyle önbelleğe alınacağını bildirerek kullanılabilir. Tarayıcı önbelleğine alma hakkında daha ayrıntılı bilgileri 'Tarayıcı önbelleği nasıl çalışır?' makalemizde bulabilirsiniz. Ayrıca Pressidium'un tarayıcı önbelleğe almayı nasıl uyguladığını buradan öğrenebilirsiniz.

Kutu 7 – CDN'nin Etkin Kullanımı

Coğrafi olarak yayılmış bir kullanıcı tabanınız varsa, bir CDN (veya İçerik Dağıtım Ağı) kullanmaya değer. Örneğin, tüm müşterileriniz Londra'daysa ve ana sunucunuz da Londra'da bulunuyorsa, muhtemelen bir CDN kullanmanın pek bir anlamı yoktur. Bununla birlikte, kullanıcılarınız coğrafi olarak daha çeşitliyse, bir CDN, web sitenizin bir kopyasını kendilerine daha yakın bir sunucuya yerleştirerek bu kullanıcılar için sitenizin performansında büyük bir fark yaratabilir.

Bir CDN kullanıyorsanız, WebPageTest bunun ne kadar etkili çalıştığına bakacaktır.

Performans Sonuçları

Şimdi Özet Sekmesinin üst kısmında göreceğiniz Performans Sonuçları ile başlayarak biraz daha veriye bakalım.

Performans sonuçlarında, İlk Bayt Süresi, sayfanın görünür bölümlerinin görüntülendiği ortalama süre olan Hız İndeksi, görsel kararlılığı ölçmek için Kümülatif Düzen Kayması (CLS), harcanan süre gibi şeyler için en önemli genel bakışları görebiliriz. Belge tamamen yüklenene kadar ve daha fazlası.

Şelale Görünümü

Performans Sonuçlarının hemen altında, koşularınızın her biri için şelale görünümünü görebiliriz. Bunlardan herhangi birine tıklarsanız, şelale formatında koşunun tüm detaylarını içeren sayfaya yönlendirileceksiniz.

Web sitenizin her bir varlığı için tüm performans istatistikleri size sağlanacaktır. Bunlar farklı renktedir, bu da onları ayırt etmeyi kolaylaştırır. Bunlardan herhangi birine tıklarsanız, daha fazla ayrıntı sağlayan bir açılır pencere açılır.

Şelale Görünümü, sayfanın görsel bir temsilidir ve bileşen yüklerine nasıl erişilir. Bu, işleri yavaşlatabilecek bileşenleri kolayca tanımlamamızı sağlar. Darboğazların nerede olduğunu görebilmek ciddi anlamda faydalıdır ve sorunları tahmin etmek yerine kesin doğrulukla çözebileceğimiz anlamına gelir.

Bağlantı Görünümü

Bağlantı Görünümü panosu, tarayıcı ve sunucu arasındaki bağlantıların önlemlerini görsel olarak özetleyerek web performans sorunlarını çok kolay bir şekilde belirlemenize olanak tanıdığı için çok kullanışlı bir özelliktir.

Bağlantı durumunu doğrudan DNS, İlk bağlantı, SSL anlaşmasından video kaynakları gibi şeylere kadar görebilirsiniz. Bunun altında, web sitesini yükleyen cihazdaki CPU kullanımını gösteren bir grafik de bulunmaktadır. Veri işleme sırasında kullanılan seviyeleri gösteren bir bant genişliği göstergesi de vardır.

İstek Ayrıntıları

Son olarak, Bağlantı Görünümü'nün altında size iki analiz panosu daha sunulur – İstek Ayrıntıları ve İstek Başlıkları.

İstek Ayrıntıları panosu çok yararlıdır ve içerik türü, istek başlangıç ​​zamanı, indirilen bayt sayısı ve çok daha fazlası gibi istekle ilgili verilerle birlikte istenen tüm kaynakları listeler. Bu tablo aslında sıralanabilir… o sütuna göre sıralamak için sütun başlıklarına tıklamanız yeterlidir.

İstek Başlıkları panosu, başlık bilgileriyle birlikte istek kaynaklarının listesini (evet, tahmin ettiniz) sağlar. Tüm ayrıntılar için her birine tıklayın.

Çözüm

Web sitenizin etkinliğinin derinlemesine bir analizine ihtiyacınız varsa, WebPageTest kullanmak için harika bir araçtır. Sağladığı bilgilere derinlemesine girmeseniz bile, sitenizin iyi çalışıp çalışmadığı ve nasıl performans gösterdiğine daha yakından bakmanın gerekip gerekmediği konusunda hızlı bir fikir edinebilirsiniz. Ve hepsinden iyisi, ücretsiz!