Hızlı başlangıç Kılavuzu
WebPagetest, web sayfalarının performansını ölçmek ve analiz etmek için kullanılır. İlk başta göz korkutucu görünebilecek birçok seçenek var ama hızlı test yapmak oldukça basit. Bu kılavuz, bir test gönderme ve sonuçları yorumlama konusunda size yol gösterecektir.
Performans Testi Çalıştırma
1. Sayfa URL’sini girin:
Yapmanız gereken ilk şey, test edilecek bir sayfaya karar vermektir. Çoğu kişi sitelerinin ana sayfasıyla başlar (ancak insanların ziyaret ettiği diğer sayfaları da ihmal etmeyin). Test etmek istediğiniz bir sayfaya karar verdikten sonra WebPagetest’e gidin ve test edilmesini istediğiniz sayfanın URL’sini giriş yapınız.
2. Bir Konum Seçin:
Sonrasında, testin nereden yürütülmesini istediğinize karar vermelisiniz. WebPagetest, fiziksel olarak dünyanın her yerinde bulunan test makinelerine sahiptir ve kullanıcılarınızın ziyaret ettiği yere yakın bir konumdan test etmelisiniz. Listeden bir konum seçebilir veya değiştir düğmesine tıklarsanız harita görünümünden bir konum seçebilirsiniz. (konum seçmek için bir balona tıklayın ve ardından Tamam’a tıklayın). İşaretçiyi baloncukların üzerinde tutarsanız, konumun nerede olduğunu bildiren bir mesaj görüntülerler:
3. Bir Tarayıcı Seçin:
Son olarak, test için hangi tarayıcıyı kullanacağınıza karar vermeniz gerekir. Farklı konumlar farklı tarayıcıları destekler, bu nedenle belirli bir konum aradığınız tarayıcıya sahip değilse farklı bir konum deneyebilirsiniz. Dulles, VA ABD konumu, WebPagetest’in birlikte çalıştığı tüm tarayıcıları destekler (Chrome, Firefox, Edge, Internet Explorer, Android, iOS). Bildirilen en fazla bilgiye sahip olduğundan, genellikle ilk testler için Chrome’u kullanmanızı öneririz.
4. Testi Gönderin
Her şey istediğiniz gibi yapılandırıldıktan sonra, “Testi Başlat” düğmesine tıklayın, talebiniz test için test yerine gönderilecektir. Önünüzde kaç test olduğuna bağlı olarak testin çalışması biraz zaman alabilir (önünüzdeki her test için en az bir dakika belirleyin, ancak bundan daha uzun olması olağandışı değildir). Test tamamlandığında, sonuçlar size gösterilecektir.
Sonuçların Yorumlanması
Sonuçlar ekranı ilk gördüğünüzde biraz korkutucu olabilir çünkü tüketilecek çok fazla bilgi var ama ilk önce bakmanız gereken bazı önemli bilgiler var.
Optimizasyon Dereceleri:
Sonuç sayfasının üst kısmında, en kritik performans optimizasyonları için bir dizi not bulunur. Bunlar, hemen hemen tüm siteler için geçerli olan temel optimizasyonları kapsar ve A veya B olmayan her şey, bazı ciddi inceleme ve araştırmaları haklı çıkarır.
Canlı Tut Etkinleştirildi:
Sayfadaki bir içerik parçası (image, javascript, css, flash vb.) için her istek, web sunucusuna bir bağlantı üzerinden yapılmalıdır. Yeni bağlantılar kurmak çok zaman alabilir, bu nedenle mümkün olduğunda bağlantıları yeniden kullanmak en iyisidir ve bu, canlı tutmaktır. Çoğu yapılandırmada varsayılan olarak etkindirler ve HTTP 1.1 standardının bir parçasıdırlar ancak bozulacakları zamanlar vardır (bazen istemeden). Canlı tutmayı etkinleştirmek genellikle yalnızca sunucudaki bir yapılandırma değişikliğidir ve sayfanın kendisinde herhangi bir değişiklik gerektirmez ve genellikle bir sayfanın yüklenme süresini %40-50 oranında azaltabilir.
Metni Sıkıştır:
Bir sayfadaki resim veya video olmayan hemen hemen her şey bir tür metindir (html, javascript, css). Metin gerçekten iyi sıkıştırılır ve HTTP, dosyaları sıkıştırılmış biçimde aktarmanın bir yolunu sağlar. Metin kaynakları için sıkıştırmayı etkinleştirmek, genellikle sayfanın kendisinde herhangi bir değişiklik gerektirmeden yalnızca bir sunucu yapılandırma değişikliğidir ve hem performansı iyileştirebilir hem de içeriği sunma maliyetlerini azaltabilir (iletilen veri miktarını azaltarak). Metin kaynakları genellikle sayfanın başında indirildiğinden (javascript ve css), bunların daha hızlı teslim edilmesinin kullanıcı deneyimi üzerinde, resimler veya diğer içerik üzerindeki aşırı baytlardan çok daha büyük bir etkisi vardır.
Görüntüleri Sıkıştır:
Görüntü sıkıştırma denetimi yalnızca fotoğraf görüntülerine (JPEG dosyaları) bakar ve kalitenin çok yüksek ayarlanmadığından emin olur. JPEG görüntüler genellikle görsel kalitede gözle görülür bir azalma olmaksızın oldukça büyük ölçüde sıkıştırılabilir. Photoshop’un “Web için Kaydet” modunda görüntüleri “50” kalite düzeyinde sıkıştırma standardı kullanıyoruz, ancak genellikle kötü görünmeye başlamadan önce onları olabildiğince sıkıştırmalısınız. Ayrıca, özellikle bir dijital kameradan (kamera, lens, konum, hatta küçük resimlerle ilgili bilgiler) geliyorsa, fotoğraflara başka verilerin dahil edilmesi nadir değildir ve bunların bir kısmı bir web’de yayınlanmadan önce resimlerden kaldırılmalıdır. sayfası (telif hakkı bilgilerini saklamaya dikkat edin).
Statik İçeriği Önbelleğe Alın:
Statik İçerik, sayfanızda sık sık değişmeyen içerik parçalarıdır (resimler, javascript, css). Bunları, kullanıcının tarayıcısının bir önbellekte saklaması için yapılandırabilirsiniz, böylece kullanıcı sayfaya geri dönerse (veya aynı dosyayı kullanan başka bir sayfayı ziyaret ederse), dosyayı istemek yerine zaten sahip olduğu kopyayı kullanabilir. web sunucusu. Statik içeriği kullanıcının tarayıcısında başarıyla önbelleğe almak, tekrar görüntüleme ziyaretinin performansını önemli ölçüde artırabilir (sayfaya bağlı olarak %80+’e kadar) ve web sunucularındaki yükü azaltır. Bazen bir sayfayı bozmadan önbelleğe almayı uygulamak zor olabilir, ancak bunu körü körüne etkinleştirmeyin (değiştirmeyi umduğunuz herhangi bir dosya için dosya adını değiştirebilmeniz gerekir).
CDN’nin Kullanımı:
Web sunucusuna bir içerik parçası için yapılan her istek, kullanıcının tarayıcısından sunucuya kadar tüm yolu ve geri gitmelidir. Sunucudan uzaklaştıkça, bu önemli bir süre olabilir (bu, sayfada daha fazla istek olduğu için hızlı bir şekilde toplanır). Sonuçta, geçen süre ışık hızıyla sınırlıdır, bu nedenle sunucunuzu kullanıcılara daha yakın hale getirmek dışında yapabileceğiniz pek bir şey yoktur. Bir İçerik Dağıtım Ağı’nın (CDN) yaptığı tam olarak budur. Dünyanın her yerinde kullanıcılara yakın sunucuları vardır ve bir web sitesinin statik içeriğini kullanıcılara yakın sunuculardan sunabilirler. CDN kullanmanın mantıklı olmadığı tek durum, bir web sitesinin tüm kullanıcılarının zaten web sunucusuna yakın olması (bir topluluk web sitesi gibi).
Üst Düzey Metrikler:
Sonuçlar sayfasının üst kısmındaki veri tablosu, yüklenen sayfa hakkında size bazı üst düzey bilgiler verir:
İlk bakış:
İlk Görüntüleme satırı, önbelleği ve çerezleri temizlenmiş bir tarayıcıyla yapılan ve sayfayı ilk kez ziyaret edenlerin neler yaşayacağını gösteren bir testtir.
Görünümü Tekrarla:
Tekrar Görünümü satırı, İlk Görünüm testinden hemen sonra hiçbir şey silinmeden yapılan bir testtir. İlk Görünüm testinden sonra tarayıcı penceresi kapatılır ve ardından Tekrar Görünümü testini yapmak için yeni bir tarayıcı başlatılır. Tekrar Görünümü testi, bir kişinin sayfayı ilk ziyaretinden bir süre sonra geri geliyorsa ne göreceğini temsil eder (ve test, sayfayı hemen yeniden ziyaret ettiğinden en iyi durum senaryosudur).
Belge Tamamlandı:
Belge Tamamlandı başlığı altında gruplanan metrikler, tarayıcı sayfanın yüklendiğini kabul edene kadar toplanan metriklerdir (javascript olaylarına aşina olanlar için onLoad olayı). Bu genellikle tüm resim içeriği yüklendikten sonra olur, ancak javascript yürütmesi tarafından tetiklenen içeriği içermeyebilir.
Tamamen dolu:
Tamamen Yüklendi başlığı altında gruplanan metrikler, Belge Tamamlandıktan sonra 2 saniye boyunca ağ etkinliği olmayana kadar toplanan metriklerdir. Bu genellikle ana sayfa yüklendikten sonra javascript tarafından tetiklenen tüm etkinlikleri içerir.
Yükleme zamanı:
Yükleme Süresi, kullanıcının sayfada gezinmeye başladığı andan Belge Tamamlandı olayına kadar geçen süredir (genellikle tüm sayfa içeriği yüklendiğinde).
İlk Bayt:
İlk Bayt süresi, kullanıcının sayfada gezinmeye başladığı andan sunucu yanıtının ilk biti gelene kadar geçen süredir. Bu sürenin büyük kısmı genellikle “arka uç süresi” olarak adlandırılır ve sunucunun kullanıcı için sayfayı oluşturmak için harcadığı süredir.
Oluşturmayı Başlat:
Render’ı Başlat zamanı, ekranda bir şeyin görüntülendiği ilk noktadır. Bu noktadan önce kullanıcı boş bir sayfaya bakıyordu. Bu, kullanıcının sayfa içeriğini gördüğü anlamına gelmez, arka plan rengi kadar basit bir şey olabilir, ancak kullanıcı için bir şeylerin olduğunun ilk göstergesidir.
İstekler:
Bu, sayfadaki içerik parçaları (resimler, javascript, css, vb.) için tarayıcı tarafından yapılması gereken isteklerin sayısıdır.
Bayt Girişi:
Bu, tarayıcının sayfayı yüklemek için indirmesi gereken veri miktarıdır. Aynı zamanda yaygın olarak “Sayfa Boyutu” olarak da adlandırılır.
https://www.webpagetest.org/video/compare.php?tests=220413_BiDcZM_F4M-r:2-c:0-e:filmstrip
https://www.webpagetest.org/vitals.php?test=220413_BiDcZM_F4M&run=2
https://www.webpagetest.org/result/220413_BiDcZM_F4M/2/performance_optimization/
https://www.webpagetest.org/result/220413_BiDcZM_F4M/2/domains/
https://www.webpagetest.org/breakdownTimeline.php?test=220413_BiDcZM_F4M&run=1
https://www.webpagetest.org/result/220413_AiDcFC_HA6/
https://www.webpagetest.org/video/compare.php?tests=220413_AiDcFC_HA6-r:1-c:0-e:filmstrip
https://www.webpagetest.org/result/220413_AiDcFC_HA6/1/details/
https://www.webpagetest.org/vitals.php?test=220413_AiDcFC_HA6&run=1
https://www.webpagetest.org/result/220413_AiDcFC_HA6/1/performance_optimization/
https://www.webpagetest.org/result/220413_AiDcFC_HA6/1/breakdown/
https://www.webpagetest.org/result/220413_AiDcFC_HA6/1/domains/
https://www.webpagetest.org/breakdownTimeline.php?test=220413_AiDcFC_HA6&run=1
https://www.webpagetest.org/vitals.php?test=220413_AiDc2W_HDG&run=3
https://www.webpagetest.org/vitals.php?test=220413_AiDcG1_HEJ&run=1
https://www.webpagetest.org/vitals.php?test=220413_AiDcRW_HEX&run=3
https://www.webpagetest.org/vitals.php?test=220413_BiDcB1_FBC&run=3
https://pagespeed.web.dev/report?url=https%3A%2F%2Fyemlihatoker.com%2Fseo-danismanligi%2F
