Sitenizin hızını ölçmek için bir demiryolu performans modeli nasıl kullanılır
Web sitesinin performansını nasıl ölçüyorsunuz? Web sitelerini nasıl optimize edeceğiniz hakkında çok sayıda çevrimiçi bilgi var, ancak yeterince yapıp yapmadığınızı gerçekten nasıl biliyorsunuz? Geliştiricilerin optimizasyon çabalarını ölçmelerine yardımcı olmak ve kullanıcıları performans hikayelerinin ortasına yerleştirmelerini hatırlatmak için bazı Googleer bir demiryolu modeli geliştirdi. Rail, kullanıcının web deneyimini dört ana eylemde paylaşan kullanıcı merkezli bir performans modelidir. Bu, geliştiricileri web performansı hakkında bütünsel olarak düşünmeye teşvik eder ve “bu yavaş ne anlama geliyor?” “Kullanıcılar yaptığımız şeylerle etkileşime girdiklerinde ne hissediyor?”
Bu yazıda, “yeterli” olduğunuzu belirlemenize yardımcı olmak için model tarafından belirlenen yönergeleri ve web sitenizdeki rayları ölçmek için kullanabileceğiniz araçları keşfedeceğiz. Demiryolu modeli nedir? Web sayfası yüklendiğinde, perde arkasında meydana gelen birçok teknik şey vardır. Arka tarafta, tarayıcının önünde kelimeler, resimler ve diğer medya bulunurken, site dosya ve kaynaklar sorar ve alır. Tüm bunlar gerçekleşirken, kullanıcı sayfanın hızını optimize ettiyseniz, onunla etkileşime girmeye başlayabilmesi için sayfanın yüklenmesini bekliyor. Sorun şu ki, geliştiriciler genellikle sayfa yüklendikten sonra neler olduğunu unutuyorlar.
Google’ın web temel bilgileri yönergelerine göre, kullanıcılar zamanlarının çoğunu sitenin girişlerine yanıt vermesini beklemek için harcarlar (yani tıklayın, dokunun ve kapatılır), sitenin yüklenmesini beklemezler. Bu nedenle, siteniz yıldırım kadar hızlı yüklenebilse de, kullanıcı navigasyonunuzdaki bağlantıyı tıklatırsa ve kaydolmak için iki saniye sürerse çömelme anlamına gelir. Demiryolu modeli bunu dikkate alır ve web sitesi ile kullanıcı deneyimini dört ana eylemde paylaşır: yanıt, animasyon, boşta ve yük. Resim: Paul Irland. Her demiryolu eylemi, yakında tartışacağımız insan algısının eşiğine dayanan kendi performans hedefleriyle birlikte gelir. Bu modelin arkasındaki fikir, sitenizi bu alanların her birine göre optimize ederseniz ve tutarlı bir hızlı web deneyimi sunarsanız, kullanıcınız mutlu olacaktır.
0 ila 16 ms: İnsanlar hareketleri izlemede çok iyidir ve animasyonun çeşitli çerçeve hızları veya aşırı durması varsa bunu sevmezler. Animasyon, her saniyede her 60 yeni çerçeve için pürüzsüz olarak kabul edilir. Çerçeve başına 16 ms. Daha uzun ve eylem ile reaksiyon arasındaki ilişki kesilir.
100 ila 300 ms: Kullanıcılar biraz net bir gecikme hissediyorlar.
300 ila 1000 ms: Bu pencerede kullanıcılar “bir şey oluyor” gibi hissediyor, yani sayfa yükleniyor ve görev çalışıyor.
1000ms veya daha fazla: 1 saniyeden fazla, kullanıcılar görevlerine odaklanıyor.
10000ms veya daha fazla: 10 saniyeden fazla, kullanıcılar hayal kırıklığına uğrar ve yapmadıkları takdirde görevi görmezden gelme eğilimindedir.
Bu algı eşiği hatırlamak için yararlıdır, çünkü sitenizin çeşitli kullanıcı etkileşimlerine ne kadar yanıt vermesi gerektiği konusunda pratik bir rehber sağlar.
Bununla birlikte, kullanıcıların performansın ertelenmesi hakkındaki algılarının genellikle kullandıkları ağa ve cihaz koşullarına bağlı olduğunu hatırlamak önemlidir. Örneğin, sayfanın hızlı bir Wi-Fi bağlantısı aracılığıyla güçlü bir masaüstü makinesinde 1 saniyeden daha kısa bir sürede yüklenmesini beklemek mümkün değildir, ancak yavaş bir 3G bağlantısı kullanan mobil cihazlar için, 5 saniyede yükleme daha gerçekçidir. . Bu nedenle, mobil kullanıcılar genellikle daha sabırlıdır. İnsan algısının eşiği hakkında daha fazla bilgi edinmek için performansın ne hissedildiğini ve neden optimize etmeniz gerektiğini görün.
Benchmark Performans Demiryolu Modeli Geliştiriciler için demiryolu ile ilgili harika şey, web performansını düşünmek için bir yapı sağlaması, ancak web sitelerini oluştururken ve optimize ederken gidebileceğimiz ölçütleri de ayarlamasıdır. Dört ana demiryolu alanının her birine daha ayrıntılı olarak bakalım. Yanıt yanıtı, sitenizin kullanıcı etkileşimine ne kadar hızlı yanıt verdiği ile ilgilidir. Örneğin, bu tıklayabilir, formları kontrol edebilir veya animasyon başlatabilir. Gerçek bir duraklama olmadan önce sitenizin hemen yanıt vermesi çok önemlidir. Değilse, eylem ve tepki arasındaki ilişki kesilecektir. Lewis’in açıkladığı gibi, bir şeyi tıkladıysanız ve yanıt vermek uzun zaman alır, böylece tıklamanızı kaydedip kaydetmediğini merak etmeye başlarsınız, böylece ikinci kez tıklıyorsunuz , ama bunu yaparak ilk tıklamanıza yanıt vermeye müdahale ediyorsunuz … Eh, bu gerçekten demiryolu önlemek istediğiniz şey.
Hedef: 50 MD’den daha az işleme olayları. Google Yönergeleri: Site, 100 MD’de görülen yanıtı sağlamak için kullanıcının eylem/girişini 50 MD içinde işlemelidir. Tamamlanması 50 MD’den fazla alan eylemler için, her zaman yükleme göstergeleri görüntüleyen veya aktif durum için renkleri değiştiren geri bildirim sağlayın.
Animasyon animasyonu, web tasarımında o kadar yaygın hale geldi ki kullanıcılar çok düzgün etkileşimler bekliyor ve çerçeve hızının biraz azaldığını hemen anlıyor. Animasyon şunları içerir:
Görsel animasyon. Bu, gelen ve çıkış animasyonlarını ve yükleme göstergelerini içerir.
Taslak. Bu, kaydırma çubuğunu kullanmayı, ancak kullanıcı yuvarlanmaya başladığında atmayı da içerir, ardından serbest bırakılır ve sayfa yuvarlanmaya devam eder. Bir haritayı geçmek veya büyütmek için sıkıştırma gibi.
Hedef: 10 MD’de bir çerçeve üretin. Google Yönergeleri: Doğru bir şekilde canlandırılması için, her animasyon çerçevesi 60 FPS’ye (yani 1 saniye 60 = 16.6 MD) ulaşmak için 16 MD’den daha az bir sürede tamamlanmalıdır. Her kare için maksimum “bütçe” 16 MD’dir, ancak tarayıcı her bir kareyi oluşturmak için yaklaşık 6 MD gerektirir.
İşsiz olduğunda işsiz, ilk kez yüklendikten sonra sitenizin ekranının arkasında olanları ifade eder. Sıkıştırma öncesi teknikler hakkında son yazılarda bahsettiğim gibi, boş zaman kaynakları yüklemek, almak ve bağlamak için ideal bir fırsat sunuyor. Hedef: Sayfanın şansını artırmak için sessiz süreyi en üst düzeye çıkarmak 50 MD’deki kullanıcı etkileşimlerine yanıt verebilir. Google Yönergeleri: Yalnızca ilk yükleme sırasında sayfanızın en önemli öğelerini yükleyin ve başkaları için boş zaman kullanın. Google, sitenizin 100 yanıt penceresinde yanıt verebilmesi için 50 MDTK bloğunda boşta kalma süresi boyunca şüpheli çalışmanın gruplandırılmasını önerir. Kullanıcı çalışma süresi sırasında sayfa ile etkileşime girerse, etkileşimlerine öncelik verilmeli ve boş zaman çalışmasına müdahale etmelidir.
Yükleme yükü, kullanıcıları hızlı bir şekilde ilk boyaya getirmeyi ifade eder. Bu, sayfanın 1 saniyeden daha kısa bir sürede yüklenmesi anlamına gelir. Sayfanız ne kadar hızlı yüklenirse, o kadar az sıçramak isteyen kullanıcılar ve odaklanma olasılıkları o kadar az olur ve hasar gören görevleri dikkate alırlar. Google’a göre, içeren sitelerin hızlı bir şekilde ortalama daha uzun bir seansa, daha düşük orana ve daha yüksek reklamlara sahip olması şaşırtıcı değildir. Hedef: İlk anlamlı boyayı 1 saniyede verin ve 5 saniyeden daha kısa bir sürede etkileşimli bir süreye ulaşın. Google Yönergeleri: Sitenize erişmek için kullanıcılar tarafından kullanılan cihazlara ve ağ bağlantılarına göre sayfa hızınızı optimize edin. Oluşturma yolunu optimize etmeye odaklanın, sitenizin renderlemeyi engellemesi ve kârınız için boş zaman kullanması için önemlidir. Google, sayfaların yavaş bir 3G bağlantısı kullanarak orta sınıf mobil cihazlarda 5 saniye veya daha kısa sürede yüklenmesini ve etkileşimli olmasını önerir. Bir sonraki yük için, 2 saniye veya daha azını hedefleyin. Ray tarafından belirlenen hedef rayı ölçmek için araçlar uzun görünebilir, ancak aslında ücretsiz olarak mevcut üç araç kullanarak ölçülmesi çok zor olmayabilir: Chrome Devtools, Deniz Feneri ve WebPagetest.
Chrome Devtools: Chrome’un varsayılan geliştiricisi, perdelerin arkasına bakmanıza izin verir, böylece sayfanız yüklendiğinde veya yürürken gerçekleşen her şeyin derinlemesine bir analizini sağlayarak söylenebilir. Google, bu kılavuzdaki metrik rayı ölçmek için Devtools’un nasıl kullanılacağı hakkında daha spesifik talimatlar sunmaktadır. Deniz Feneri: Bu fantastik denetim aracı, Chrome Devtools’ta, bir node.js modülü olarak ve WebPagetest’te mevcuttur. Temel olarak, URL’yi girersiniz ve Deniz Feneri orta sınıf cihazını yavaş bir 3G bağlantısı ile simüle edin. Bu bir dizi denetim çalıştırır ve daha sonra en iyi uygulamayı, erişilebilirliği ve SEO’yu karşılamak için sitenizin performansını kontrol eden raporlar verir.
WebPagetest: Bu Hız Test Aracını daha önce bu blogda tartıştık. Test edilecek URL’yi girdiğinizde, Ray Yükleme Yönergelerini taklit etmek için yavaş bir mobil cihaz ve 3G bağlantısı seçmek için daha fazla ayar kullanın.
Sonuç, alanları optimize etmek için yakalanmak çok kolaydır ve hıza takıntılıdır. Rail’in yaptığı şey, web sitelerinin performansını ölçmek ve geliştirmek için güvenilir ölçüt geliştiricileri sağlayan genel kullanıcı deneyimine odaklanan bir çerçeve sağlamaktır. Özet için, yararlı demiryolu performans hedeflerinin ayrıntıları şunlardır:
Sitenizi demiryolu ölçütlerine test etmenizi ve daha hoş bir kullanıcı deneyimi yaratmak için yapabileceğiniz şeylerde bir artış bulmanızı şiddetle tavsiye ediyorum.
