2 Dakika Hız Testi Analizi: Bir Şelale Grafiği Nasıl Okunur
Şelale grafiği muhtemelen bir web sitesi performans incelemesinden alabileceğiniz verilerin en değerli kısmıdır. Ama bu aynı zamanda daha büyük. Bazen deneyimsiz ve hatta profesyonel kullanıcıların şelale grafiğini analiz etmek için zamana ihtiyaç duyduklarından korkar. Bu makalede, size sadece birkaç dakika içinde bir sonraki web sitesi analizinizi sallamak için kullanılabilecek 7 püf noktası göstereceğim. Şelale grafiğini nasıl okuyacağınızı ve analiz edeceğinizi kolayca öğreneceksiniz. Performans, Sayfa Hızı, Açma Saati Web Siteleri – Tüm bu terimler, her web projesinin en önemli yönlerinden birini göstermektedir. Yükleme süresi Google’ın sıralamasını etkileyebilir ve ayrıca kullanıcı katılımını belirleyebilir. Özellikle mobil cihazlarda. Google’ın en son performans aracı, site testim, web sitelerini yükleme hızının önemine iyi bir örnektir: Site testimle web sitenizi analiz ederseniz, Google size kaç web sitesi kullanıcısını ortadan kaldırabileceğinizi söyleyecektir. Web sitelerini size yükleme.
Raidbox.io için Google, ziyaretçi kaybının yüzde 19’unun beş ikinci yükleme hızımızdan kaynaklandığını tahmin ediyor.Hızlı yüklenen ve iyi optimize edilmiş web siteleri, web projelerinin başarısı için önemli ön koşullardır – hem ürün satmak, görüş ve bilgi paylaşmak hem de işletmeniz için para toplamak veya iyi hedefler.Google’dan gelen veriler, hücresel kullanıcıların olasılığının zaman artmadan web sitenizi terk ettiğini gösterir, sitenizi yüklemek için gereken süre ne kadar uzun sürer.Örneğin, web siteniz yaklaşık altı saniye içinde yüklenirse, ziyaretçilerin web sitenizi daha önce terk etme olasılığı kontrol grubuna göre yüzde 106 daha yüksektir. Bu nedenle, hissedilen web sitesini yükleme hızını analiz etmek önemli bir görevdir, ancak bazen sıkıcıdır. Her hafta düzinelerce WordPress web sitesini analiz ettiğimiz için, sadece süreci otomatikleştirmekle kalmıyor, aynı zamanda kendi analizinizi olağanüstü hızlandırmak için kullanmanız için yararlı olan bazı hack’ler de üretiyoruz. Size ihtiyacınız olan performans bilgilerini veren ancak ilk şey olan birkaç araç: Web sitenizin performansını çeşitli şekillerde ölçebilen birçok araç var. Temel olarak, iki tür test vardır: denetim optimizasyonu ve performans denetimi. Birincisi, WordPress web sitenizin ne kadar iyi optimize edildiğini ve nasıl daha da geliştirilebileceğini gösterir. Google PagesPeed Insights, Google Sitemi Test et ve Yahoo’nun YSLOW ünlü örnekleri. Bu aracın yaptığı şey temel olarak web sitenizi bir dizi kural ile karşılaştırmaktır. Web siteniz tarafından ne kadar çok kural varsa, testinizin sonuçları o kadar iyi olur.Performans denetimi veya hız testi ise, web sitenizin kullanıcının tarayıcısında ne kadar sürdürülmesi gerektiğini ölçer. WebPagetest, Pingdom ve GtMetrix üç ünlü (ve ücretsiz) örnektir. Bu kullanmak istediğiniz araçtır. Çünkü yalnızca performans denetimi size web sitesini doğru optimize etmek ve başarınızı ölçmek için ihtiyacınız olan verileri verir. Ve performans denetimi size verilerin en değerli kısımlarından birini verecektir: bir şelale grafiği. Bu grafik, kullanıcılar web sitenizi ziyaret ettiğinde, olduğunda ve web sunucunuzun ne kadar sürdüğünü tam olarak gösterecektir. Şelale grafiği nedir ve neden karmaşık görünebilir (sadece şekil ve renk) Bu kronolojik yapı yapar Şelale grafiği çok değerli. Bu, web sitenizin ne yaptığını tam olarak anlamanıza olanak tanır ve web sitenizi yavaşlatan potansiyel olarak tehlikeli süreçleri ve öğeleri tanımlamanıza olanak tanır. Kullandığınız araçlar ne olursa olsun, şelale grafiğinin her zaman dört özdeş özelliği vardır:
X (yatay) ekseni bir zaman eksenidir. Bu, web sitenizin her öğesini yüklemenin ne kadar sürdüğünü gösterir.
GTMetrix, web sitenizi şelale grafiğinin sağ alt köşesinde açma süresini görüntüler. Pingdom – en güzel şelale grafiğine sahip olabilecek – – şelale ekranının alt kenarının ortasındaki açılış saatini görüntüler. WebPagetest, web sitenizi grafiğin alt kenarına yükleme süresini görüntüleymez. Ancak tüm ölçeği içerir ve okumayı kolaylaştırır. 2) Y ekseni (dikey), web sitenizi tamamen yüklemek için gereken her isteği ve kaynakları içerir. Şelale hizmeti, web sitesi talebinizi kronolojik sırayla göstermektedir. Bir isteği tıklarsanız, yüklenen ilgili kaynaklar hakkında ek bilgi alırsınız. 3) Bazı kod türleri ne tür kaynakların yayınlandığını gösterir (görüntü, CSS, JavaScript, vb.) Örneğin WebPagetest, resimleri, JavaScript’i, CSS’yi vb. Tanımlamak için bu renk kodunu kullanır.
Pingdom ise çeşitli kaynak türlerini tanımlamak için bu sembolleri kullanır. 4) Ek kodlama sistemi, bireysel talebin nasıl yürütüldüğünü gösterir (bir web sunucusuna bağlanmak ne kadar sürer, kaç bağlantının açılması ve HTTPS’nin kullanılıp kullanılmadığı) Pingdom, HTTP isteklerinin farklı bir aşamasını göstermek için renkleri kullanır. Her aracın renk kodu açısından kendi mantığı vardır. Ancak temelde hepsi şelale grafiğinde aynı dört öğeyi kullanıyor. Bunu anladıktan sonra, çocuk oyununun analizi, şelale grafiğini nasıl okuyacağınızı bildikten sonra gerçekten 2 dakikalık bir şelale analizidir. saniye veya yeterli değil. Bu hile, web sitenizin nasıl ve ne kadar hızlı yüklendiğini anlamanıza yardımcı olacaktır. Ve size projenizi daha hızlı ve daha iyi hale getirmek için potansiyelin nerede olduğunu göstereceklerdir. 1 #1 – Önemli boyut: ne kadar kısa olursa, şelalenizin ne kadar ne kadar iyi gösterilirse, o kadar fazla istek oluşturulması ve belki de daha yavaş olması gerekir. Ancak: “Uzun” şelale görüşü her zaman kötü değildir. Web sitenizde destekleyici sohbet eklentisi, Google Map veya Google Analytics gibi bazı harici özelliklere ve kaynaklara ihtiyacınız olduğu için belirli bir uzunluğa sahip olabilir. HTTP/2 kullanıyorsanız, yalnızca web siteniz HTTPS üzerinden yüklenirse mümkündür, web siteniz de paralel yükleme ve push sunucusundan yararlanabilir. Bu teknoloji, çok fazla HTTP talebinin olumsuz etkilerini azaltır. Deneyimlerimize göre, şelale grafiğinin uzunluğu ile gerçek yükleme hızı arasında doğrudan bir korelasyon yoktur.Bir sınır var: 100 istek bir eşik gibi görünüyor.Web siteniz daha fazla istek üretiyorsa, daha yakından bakmalı ve örneğin bazı harici kaynakları kaldırarak HTTP isteklerinin sayısını azaltmaya çalışmalısınız.- Şelalenizin ekranı 100’den fazla istekliyse, daha yakından bakın ve istek sayısını azaltmaya çalışın.Kurallar #2 – Toplam Yükleme Süresi X -ekseninizin maksimum değeri analiziniz için çok önemlidir.Bu, web sitenizin tamamen oluşturulmasına ne kadar sürdüğünü gösterecektir.X ekseninizin sonundaki sayım ne kadar küçük olursa o kadar iyidir.
Bu değer 10 saniyeden büyükse, tam şarjlı bir metrik (GT Metrix’te varsayılan) kullanarak, web sitenizi yükleme hızını görmelisiniz. –– Toplam yükleme hızı <10 saniye olmalıdır. Kurallar #3 – Yeşil ve Mavi: Kullanıcılar tarafından İnternet kullanıcıları ve web sitesi ziyaretçileri olarak ne hissedilir, "kağıttaki" web sitesinde hızı umursamıyorsunuz. Önemli olan bir web sitesini ne kadar çabuk gördüğünüzdür. Bir web yöneticisi olarak, önbellekleme ve CDN kullanarak bu gerçeği tahmin edebilirsiniz. Kullanıcıların, ölçtüğünüze dayanarak değil, ne hissettiklerine göre hareket etmeleri, web sayfalarını yükleme hızını analiz ettiğinizde giderek daha önemlidir. WebPagetest, yükleme teknolojisinin hızı ile keçe yükleme hızı arasında ayrım yapan bildiğimiz tek ücretsiz test aracıdır. Tüm şelale grafikleri veya "tam yüklü" değeri, daha az önemli olan yükleme teknolojisinin hızını temsil eder. Bununla birlikte, şelale ekranınızdaki mavi ve yeşil çizgiler, web sitenizi ziyaret ettiklerinde kullanıcıların ne hissettiğini temsil eder.
Kullanıcınızın web sitenizde gerçekten görüntülendiği zaman periyodu, yeşil ve mavi çizgiler arasındaki boşlukla işaretlenir. Bu çizgilerin her ikisi de sola ve birbirine mümkün olduğunca yakın olmalıdır. Yeşil çizgi, web sitenizin ilk görsel öğesini yüklemeye başladığı zaman olan "Başlangıç Render" etkinliğini temsil eder. Mavi çizgi, kullanıcının web sitesinin tamamen şarj edildiğini düşündüğü zaman noktasını işaret eder, bu da büyük olasılıkla onunla etkileşime girecekleri anlamına gelir. Dediğim gibi: WebPagetest, iki değer arasında ayrım yapan bildiğimiz tek ücretsiz test aracıdır. Pingdom veya Gtmetrix gibi diğer test ekipmanları, no. Ergo, bu kural sadece WebPagetest Şelale Grafikleri için geçerlidir: -Green bıçakları taban çizgisinden yaklaşık 2-3 saniye görünecektir ve mavi bıçaklar taban çizgisinden 6 saniyeden fazla olmamalıdır. Kurallar #4 – HTTP/2 Üç İlk Kural Temelde Temelde Çok Doğal olarak göz önünde bulundurulur: Küçük bir istek, kısa süre, küçük mesafe, vb. Dördüncünün tespit edilmesi de çok kolaydır. Bununla birlikte, göndermenizin web sitenizi HTTP/1'e kıyasla önemli ölçüde hızlandıran HTTP/2– -Standar kullanıp kullanmadığını kontrol edebilirsiniz. HTTP/2'nin yalnızca web siteniz HTTPS üzerinden yüklenmesi durumunda çalıştığını unutmayın. HTTP/1.1 ile karşılaştırıldığında en önemli iyileştirmelerden biri paralel işleme. Web siteniz, aynı anda sunucudan birkaç kaynak talep edebilir ve içerebilir. Ve bu süreç şelalenizin sergilenmesinde açıkça görülmektedir.
Solda, HTTP aracılığıyla yüklenen RaiDboxes.io'dan ilk isteği görebilirsiniz. Gördüğünüz gibi, bireysel talep kronolojik olarak yayınlanır. Sağda aynı kısmı HTTPS aracılığıyla yüklü görürsünüz. Bu durumda, bireysel talepler paralel olarak yüklenir ve daha hızlı hale getirilir. Dolayısıyla, sıralı talep paralel olarak yüklenirse, web siteniz yeni daha hızlı standartlardan faydalanır. Değilse, barındırma sağlayıcınızla iletişime geçmelisiniz. Ancak unutmayın: HTTP/2 yalnızca web siteniz geçerli bir SSL sertifikası ile donatılmışsa kullanılabilir. Emin değilseniz, HTTP/2'yi kontrol etmek için böyle araçları da kullanabilirsiniz NOT: Web siteniz paralel yüklenmiyorsa, HTTP/2 Kural #5 kullanmaz, 5-görüntü daha küçük resimler olabilir Önbelleğe girdikten sonra WordPress sitenizin en önemli performansını yalnızca hesaba katın. Çünkü yüklediğiniz her resim için WordPress, siteniz için üstün resimler veya mini görüntüler adı verilen çok sayıda resim yapar. Bu nedenle, görüntü sıkıştırması, web sitenizin boyutunu azaltmak için en etkili yöntemlerden biridir. Görüntünün şelale grafiğinizde tespit edilmesi çok kolaydır: Görüntü Mor Blade ile temsil edilir (WebPagetest'te pingdom simge ile temsil edilir, GTMetrix görüntüyü vurgulamaz). Ve çubuk diğer web sitenizin isteğinden daha uzunsa (yüklenmesi daha uzun sürer), resminizi ayrıntılı olarak görmelisiniz.
Açıklama: Bu web sitelerinin her ikisi de sıkıştırılmamış bir web sitesi görüntüsünün iyi bir örneğidir. optimize edilmiş. İlk web sitesindeki görüntülerin oluşturulması 8,5 saniyeye kadar sürer. Bu çok uzun. İkinci örneğin iyi optimize edilmiş bir görüntüye sahiptir, ancak yine de HTTP/2 kullanabileceğiniz gibi. Deneyimlerimize dayanarak, test ettiğimiz web sitelerinin yaklaşık yüzde 30’u resimlerini daha fazla sıkıştırma potansiyeline sahiptir. – Görüntü bıçaklarınız diğer web sitesi öğelerinden önemli ölçüde daha uzunsa, görüntünüzün boyutunu azaltmaya veya sıkıştırmalarını artırmaya çalışın. Kurallar #6 – Bir şelale grafiğinin aktarılmasının belirlenmesi, web sitenizi anlamak için harika bir araçtır. Bu, hangi öğelerin yayınlandığını, web sitenizin yüklenirken bir sorunu veya hatası olup olmadığını ve ayrıca kaç saptırma ayarlandığını ve nereye liderlik ettiklerini gösterir. IO başka bir URL’ye aktarılır. Her 3xx-yanıt sarı bir sıra ile işaretlenir. Her transfer vurgulanır ve bir tür transfer içerir. Bir kereden fazla, bir şelale grafiği yardımıyla müşteri web sitesinde gereksiz veya tehlikeli transfer tespit edebiliriz. – Sarı sıra transferdir. Bir şey mantıklı değilse, ona bakın. Kurallar #7 – Hataların Tanımlanması Tek Görünümle Tanımlama Bazen web sitesi bileşenleriniz doğru görüntülenmez. Örneğin adSense çerçeveleri, haritalar veya yazı tipleri. Bir şelale grafiği ile bu bileşenleri kolayca tanımlayabilirsiniz: her kırmızı çizgi bir tür hatadır.
Açıklama: Bu web sitesi birkaç 4xx hatası üretiyor. Test aracı bir kez daha size ne tür bir hata bulduğunu gösterir. Yukarıdaki web sitesi çeşitli hatalarla sonuçlanır 404. Talep analizi, her şeyin kayıp tema lisansıyla ilgili olduğunu göstermektedir. Güncellendikten sonra 404’ün tamamı kayboldu. – Kırmızı çizgi 4xx bir hata gösterir. Kapanış: Şelalenin manzarası muhtemelen iyi olabileceğiniz en değerli verilerdir, şimdi sadece 2.100’den fazla kelimeye ihtiyacımız olduğunu anlıyoruz. Ancak şimdi, birkaç dakika içinde herhangi bir web sitesinin temel bir performans denetimi ve analizini yapmanızı sağlayan 7 şelale hacklememizi biliyorsunuz. Şelale grafiği, yükleme süresi, oluşturma siparişi ve hata ayıklama konsolu dahil olmak üzere çeşitli bilgi koleksiyonlarını birleştirir. Bu, verilerin çok değerli bir parçası haline getirir. Ve bunu nasıl doğru analiz edeceğinizi biliyorsanız, web projeleri hakkında tüm önemli gerçekleri bulmak için genellikle birden fazla görünüme bakmanıza gerek yoktur. Sadece tehlikeli desenler arıyor: Şelale grafiği çok mu uzun? (100+ istek) Yükleme süresi çok mı? (10+ saniye) Talep paralel mi? (= HTTP/2 kullanımı) Çok fazla ve çok uzun menekşe çubuk var mı? (= Zayıf optimize edilmiş görüntü)Yeşil ve mavi çizgiler sağda mı yoksa çok uzak mı? (= Kullanıcı tarafından hissedilen sayfa yükleme deneyimi)
Beklenmedik bir sarı sıra var mı? (= transfer)
Kırmızı çizgi var mı? (= oluşturma hatası)
