Web Sitesi Hız Denetimlerini Anlama

Yayınlanan: 2020-08-26

Eastside Co'da dünyanın en iyi Shopify ve Shopify Plus web sitelerinden bazılarını tasarlıyor ve oluşturuyoruz. Kullanıcı deneyiminin optimal olduğundan emin olmaya özen gösteriyoruz ve bunun önemli bir parçası da web sitesi performansını ve 'iyi'nin nasıl göründüğünü anlamaktır. Mevcut birçok web sitesi denetimi türü vardır, bunlardan biri de hız denetimidir.

Bu makale, web sitesi hız denetimlerinin nasıl çalıştığının bir dökümünü vermeyi amaçlamaktadır.

İlk olarak, neden bir hız denetimi yapacağınızla başlayalım. Amaç basit: Web siteniz çeşitli cihazları kullanan ziyaretçiler için ne kadar iyi yüklenecek? Etkili bir hız denetimi yapmak, ne kadar hızlı yüklendiğini belirleyecek ve size nasıl daha hızlı hale getireceğinize dair ipuçları verecektir. (Denetiminizi gerçekleştirdikten sonra Shopify sitenizin hızını artırmanın yollarıyla ilgili ayrıntılı makalemize göz atmayı unutmayın.)

SHOPIFY PLUS'I DÜŞÜNÜYOR MİSİNİZ?


Bir hız denetimi, web sitenizin masaüstünde ve mobilde nasıl yüklendiği arasında bir karşılaştırma gösterecektir. Ama akılda tutulması gereken bazı önemli uyarılar var.

Hız Denetimi Çalıştırma Gücü

Dizüstü bilgisayarınızdan bir web sitesi hız denetimi yapmak yanıltıcı sonuçlar verecektir. Ya da Lighthouse'u kurduysanız ve gerçek zamanlı verileri umuyorsanız olacaktır.

İlk olarak, bir denetim yürütürken dikkate alınması gereken birçok faktör vardır. Bir anda gelen yaygın mitlerin bir dökümü var. Ama önce, denetimi yürütme gücü akılda tutulması gereken bir şeydir.

Hız denetim aracı olarak PageSpeed ​​Insights'a (PSI) güvenebilirsiniz. Yapabilirdin. Ancak unutulmaması gereken önemli bir faktör var:

PSI , gerçek dünyadaki darboğazları yakalamaz. Veya gerçek dünya sayfası Temel Performans Göstergelerine (KPI'lar) karşı ölçün

PSI, performans sorunları için hata ayıklama sağlamak için benzetilmiş bir ortamdır.

Gerçek dünyadaki darboğazları ve sayfa TPG'lerini bulmak için Google Lighthouse gibi bir araca ihtiyacınız var. Ancak onu çalıştırmak için donanıma da ihtiyacınız var.

Lighthouse'u dizüstü/masaüstü bilgisayarınıza kurabilirsiniz, ancak geri alacağınız ölçüm puanları düşük olacaktır. Bunun nedeni, Lighthouse'un gerçek dünya darboğazları ve ağ gecikmesi oluşturmak için kısma algoritmaları kullanmasıdır.

Bu, onu çalıştıran donanımdan çok fazla işlem gücü gerektirir. İşte bu yüzden Eastside Co'da özel bir denetim sunucusu kullanıyoruz. Google'ın atabileceği tüm kısıtlamalarla denetimleri yürütmek için bir sürü işlem gücüne sahiptir.



BİZİMLE ÇALIŞ

PSI Sonuçları Hakkında Bir Kelime

Google'ın sunduğu PageSpeed ​​Insights (PSI) popüler bir araçtır. Denetimi çalıştırmak için Lighthouse'u (ayrıca bir Google aracı) kullanır. Ancak bunu simüle edilmiş bir ortamda yaptığını unutmayın.

Performans metrikleri ve anlamları hakkında ayrıntılı bir tartışma var. İlk olarak, PSI sonuçlarıyla ilgili şu efsaneleri ele alalım:

  • Kullanıcı deneyimi tek bir ölçümden gelir : hayır, durum böyle değil. Metrikleri tek bir zamandan değil, bir dizi değerden değerlendirmeniz gerekir.

  • Temsili bir kullanıcı tanımlayabilirsiniz : yine hayır. Kullanıcılar web sitenizi çeşitli cihazlardan ve ağ bağlantılarından ziyaret edeceklerdir.

  • Web siteniz sizin için hızlı yüklenir, böylece herkes için yüklenir : hayır, doğru değil. Ağ gecikmesi ve ağ hızı, kullanıcı deneyimini değiştirebilecek iki şeydir.

Toplanan performans verileri iki türde gelir: laboratuvar verileri ve saha verileri.

Laboratuvar Verileri

Laboratuvar verileri (PSI tarafından üretilir), kontrollü bir ortamdan alınan performans verileridir. Ağ ve cihaz ayarları için ön ayarları kullanır. Buradaki fikir, hata ayıklama amacıyla bir dizi tekrarlanabilir veri elde etmenizdir.

Alan Verileri

Saha verileri, gerçek sayfa yüklemelerinden toplanan performans verileridir. Yani kullanıcılarınızın gerçek anlamda deneyimlediği verilerdir.

Temel fark şudur: PSI'ın ürettiği laboratuvar verileri daha geniş bir ölçüm aralığına sahiptir. Saha verileri daha sınırlıdır, ancak gerçek bir kullanıcı deneyimidir.

Performans Metriklerinin Kodu Çözüldü

Metrik puanlara ve anlamlarına geçmeden önce anlamamız gereken birkaç önemli nokta var.

Puanlar Neden Dalgalanıyor?

Lighthouse, bir denetimin sonuçlarında dalgalanmalar gösterecektir. Bunun nedenleri var ve bunların Deniz Feneri ile ilgisi yok.

  • Sunulan reklamlar değişiyor. Web sitenizde reklam sunuyorsanız veya A/B testleri yapıyorsanız bu, performans farklılıklarına neden olur.

  • İnternet trafiği yönlendirme değişiklikleri. Ağ üzerinden web sitesinin kendisine giden yol değişebilir.

  • Kullanılan donanımdaki değişiklikler. Bir mobil cihaza kıyasla güçlü bir masaüstü bilgisayar.

  • Antivirüs yazılımı bant genişliği taleplerine neden olabilir. Bu, denetim sonuçlarında dalgalanmalara neden olacaktır.

  • Sayfaya JavaScript ekleyen tüm tarayıcı uzantıları.

ağırlıklandırma

Metrikler, Lighthouse algoritmalarında yerleşik olarak bulunan ağırlıklı bir ortalama kullanır. Bu ağırlıklar raporda görünmez. Kullanıcıların performans algısının dengeli bir ölçüsünü sağlarlar. Bu, Lighthouse ekibinin yaptığı düzenli araştırmalardan geliyor.

Metrikler

Artık ne anlama geldiklerini çözmek için en üst düzey metrikleri inceleyebiliriz:

İlk içerikli boyama (FCP) - bu metrik, ekranın üst kısmındaki metnin yüklenmesinin ne kadar sürdüğünü ölçer. Bu, kaydırmanıza gerek kalmadan gördüğünüz içeriktir. Çok fazla yazı tipi ve büyük yazı tipi dosyaları bu puanı etkileyecektir. Yazı tiplerini harici kaynaklardan yüklemeyi yavaşlatacağı gibi.

Hız indeksi (SI) - bu metrik, ekranın üst kısmındaki görsel değişiklikler durduğunda kaydedilir. Bu, videoların ve kahraman resimlerinin hepsinin hız endeksi puanını etkilediği anlamına gelir.

En büyük içerikli boya (LCP) - bu ölçüm, en büyük resmi veya metin bloğunu arar. Bu öğenin görünüm alanına yüklenmesinin ne kadar sürdüğünü ölçer. Bu bir kahraman resmi veya metnin büyük bir bölümü olabilir.

Etkileşim zamanı (TTI) - bu metrik, sayfanın kullanıcı girişi için ne kadar sürede hazır olduğunu ölçer. Geç yüklenen uygulamalar ve izleme veya analiz komut dosyaları bu ölçümü etkiler.

Toplam engelleme süresi (TBT) - bu metrik TTI gibidir. Ancak sayfadaki toplam engelleme süresini ölçer. Bu, kullanıcının öğelere tıklayamaması veya sayfayı kaydıramaması anlamına gelir.

Kümülatif düzen kayması (CLS) - bu metrik görsel kararlılığı ölçer. başka bir deyişle, sayfa yüklendikçe içeriğin ne kadar değiştiğini ve içeriğin okunmasını veya görüntülenmesini zorlaştırdığını ölçer.

Nihayet...

Web sitesi hız denetimleri ile ilgili ana noktalar şunlardır: laboratuvar verileri ve saha verileri vardır. Laboratuvar verilerinin simüle edilmiş bir ortam ve saha verilerinin gerçek zamanlı kullanıcı deneyimi olduğu durumlarda. Saha verilerini görmek üzere Lighthouse'u çalıştırmak için, ana makinenin mümkün olduğunca fazla işlem gücüne sahip olması gerekir. PSI'dan alınan laboratuvar verileri, temel rehberlik ve hata ayıklama amaçları için uygundur.

Web sitesi hız denetimlerimiz veya e-ticaret işiniz için bir Shopify veya Shopify Plus mağazasını nasıl tasarlayıp oluşturabileceğimiz hakkında daha fazla bilgi edinmek istiyorsanız bize yazın!

BİZİMLE KONUŞ