Web Performans Bütçesi: Nedir + nasıl yönetilir ve ölçülebilir
Performans, kullanıcı deneyimi ve web sitenizdeki dönüşüm oranını artırma için çok önemlidir. Kullanıcılar hızlı bir şekilde yüklenir ve sorunsuz bir şekilde etkileşime girerse web sayfalarından ayrılmama eğilimindedir. Ama ne kadar hızlı? Bunun için tek bir cevap yok. Tıpkı herhangi bir işletme gibi, hedefleri, kullanıcı demografisi ve bütçeli her benzersiz web sitesi gibi. Bütçeniz için maksimum performans elde etmenize yardımcı olarak bu karışıklığı ortadan kaldırmak için bir performans bütçesi oluşturun. Bu makalede, web sitelerinin performansını doğru metrikle nasıl ölçeceğinizi öğrenecek ve işletme hedeflerinize verimli bir şekilde ulaşmak için bir performans bütçesi hazırlayacaksınız.
Performans bütçesi nedir? Web sitesi performansı verme ve alma oyunudur. Kullanıcı deneyimine veya tasarıma öncelik vermeli misiniz? Sayfanızı yükleme hızına bir darbe almaya vs chatbot vs eklemeye ne dersiniz? Web sitenizin gerçekten üçüncü taraf komut dosyaları ve özel yazı tipleri yüklemesi gerekiyor mu? Eğer öyleyse, kullanıcılarınıza hangi işlevi veriyorlar? Ve dönüşümü teşvik etmenize yardımcı oluyorlar mı?
Ancak zamanla, site trafiği arttığında ve siteye daha fazla özellik eklediğinizde, web sitenizin performansının orijinal kadar iyi olmadığını göreceksiniz. Performans bütçelemesinin yardımcı olduğu yer burasıdır. Performans bütçesi nedir: sayfanızda bir “bütçe” belirlediniz ve sayfaların bunu aşmasına izin vermediniz. Bu belirli bir açılış saati olabilir, ancak bütçeyi istek veya sayfa sayısına böldüğünüzde genellikle konuşma yapmak daha kolaydır. Performans bütçesinde bir web performans uzmanı olan Kadlec ekibi, performanslarını etkileyen çeşitli web siteleri metriklerine uyguladığınız bir sınır koleksiyonudur. Bazı performans bütçe metrikleri şunları içerir: Toplam sayfa boyutu
HTTP için toplam talep
Hücresel ağlarda sayfaların açılış zamanı
İlk İçerik Kedi (FCP)
Uzunluk boyası (LCP)
Tüm web siteleri için bir performans bütçesi veya sayfa sayfasına veya her ikisine göre (önerilen) bir performans bütçesi ayarlayabilirsiniz. Yukarıda belirtilen metriği kullanarak, performansın iyi kalmasını sağlamak için web siteniz için net, iyi tanımlanmış ve ölçülen bir hedef belirleyebilirsiniz. Performans bütçesi örneği
‘Ev’ 200 kb’den daha az olmalı ve 3G hızlı hücresel dokusunda 2 saniyenin altında yüklenmelidir.
‘Arama sayfası’ masaüstü sitesinde 1,5 MB’dan daha az görüntü olmalıdır.
‘Blog sayfası’ 1,5 saniye içinde yüklenmeli ve yavaş bir 3G ağında 5 saniyenin altında etkileşimli hale gelmelidir.
‘Landas sayfası’, Deniz Feneri Performans Denetimi’nde 85’in üzerinde bir performans puanı olmalıdır.
Performans bütçesi belirlemenin faydaları Performans bütçesinin belirlenmesi, web sitenizin performansını artırmak için ilk adımı atmanıza yardımcı olur. Web sitenize ek özellikler eklerken, tasarımcılar, geliştiriciler veya pazarlamacılar olsun, ekibiniz veya kuruluşunuzdaki herkes için bir referans noktası olarak işlev görecektir. Örneğin, resim ve yazı tipi sayısının sınırını belirlediyseniz ( ve dosya boyutu), tasarımcılar ne kullanabileceklerini daha iyi anlayacaklar. Benzer şekilde, senaryo sayısı ve üçüncü taraf kütüphaneleri üzerinde sınırlar uygulamak, geliştiricilerin hedeflerine daha iyi yaklaşmalarını sağlayacaktır. Performans bütçesine sahip olmak, web sitenizin performansını daha iyi izlemenize yardımcı olacaktır. Web sitenizin performansı zaman zaman kademeli olarak düşerse, performans bütçesine geri dönebilir ve yanlış bir şey olduğu yerde test edebilirsiniz.
Performansı doğru metrik ile ölçün bir şeyi ölçemiyorsanız, web sitesinin performansı üzerindeki etkisini ölçün, izleyemez veya düzeltemezsiniz. Web sitesi performans bütçesini belirlemek için kullanabileceğiniz çeşitli ölçülebilir metriklere bakalım.
Bu tip metriğin miktarına dayanan üç farklı performans bütçesi metriği, anlaşılması, ölçülmesi ve belirlenmesi en kolay olanıdır. Web geliştirme aşamasında çok faydalıdırlar, çünkü tasarımcıların ve geliştiricilerin daha iyi işbirliği yapmalarına yardımcı olabilir. Performans bütçesini belirlemek için kullanılan en yaygın miktar metrikleri şunları içerir:
Paylaşabileceğiniz maksimum sayfa ağırlığı: Maksimum boyutta görüntü
Web yazı tipinin maksimum boyutu
Maksimum web yazı tipi miktarı
Maksimum boyut komut dosyası (örneğin çerçeve, kütüphane) Maksimum komut dosyası sayısı
Maksimum HTML ve CSS boyutu
Maksimum video boyutu
Bölünebileceğiniz toplam dış kaynak sayısı:
Maksimum HTTP talebi
Maksimum üçüncü taraf senaryo sayısı
Yukarıdaki metriğin gerçek kullanıcı deneyimini belirlemediğini fark etmelisiniz. Ancak, performans bütçelemesi için iyi bir başlangıç noktası olarak işlev görürler.
İlerici Sayfa Oluşturma Kullanıcı deneyimini geliştirir (Kaynak: Google) Örneğin, kullanıcılar, sayfanın kaynaklarını içerme şekline bağlı olarak yavaş veya hızlı bir şekilde aynı boyutta ve miktarda iki sayfa görebilir. Optimize edilmiş sayfalar, önemli kaynaklar göndermek için daha iyidir, kullanıcılar için olmayanlardan çok daha hızlı görünecektir. Bu nedenle, sitenizin performansını daha net bir şekilde anlamak için miktar metriklerini diğer kullanıcılara odaklanan metriklerle birleştirmeniz gerekir. Zaman tabanlı metrik tip metrik, çeşitli yönlerin sayfalar ne kadar hızlı içerdiğini söyler. Sayfa yükleme hızını ölçmek için kullanılan en yaygın iki olay DOMConCenToaded ve yükleme olaylarıdır. Ancak, sunucu kullanıcıya minimum bir sayfa gönderebilir ve birkaç saniye sonra yükleme ve gerçek içerik ekranını geciktirebilir çünkü kullanıcının ne yaşadığına dair tam bir resim vermezler.
Bunu iyileştirmek için W3C Web Performans Grubu, gerçek kullanıcı izlemeye dayalı kullanıcı performans metriklerini ölçmek için API’yı onaylar. Performans bütçenizde kullanabileceğiniz en önemli zaman metriklerinden bazıları şunlardır: İlk İçerik Kedi (FCP) FCP, ekranda (veya tarayıcıda) oluşturulan herhangi bir içeriği yüklemek için sayfanın gereken süreyi ölçer. Bu, sayfa yüklemesinin başlangıcını yakalar. Siteniz için ilk içerikli boya geliştirmek için teknikleri öğrenmek istiyorsanız kılavuzumuza bakın. En büyük CAT Contentful (LCP) Google, LCP puanını 2.5 saniyenin altındaki iyi (Kaynak: Google) LCP, tarayıcıdaki metni veya en büyük görüntü öğesini oluşturmak için sayfanın gereken süreyi ölçer. LCP, FCP ve First Maningful Boya’dan (FMP) daha iyi bir yükleme deneyiminden daha iyi bir boyut sağladığından, bu kullanıcı deneyimini ölçmek için iyi bir metriktir. Google’a göre, LCP şimdi merkezli kullanıcıları ölçmek için tercih edilen bir seçenektir.
İlk Giriş Gecikmesi (FID) FID, her kullanıcı etkileşimine yanıt vermek için sayfanın ihtiyaç duyduğu süreyi ölçer. Örneğin, kullanıcı bağlantıyı tıkladığında veya sayfadaki düğmeyi devirdiğinde, tarayıcının kullanıcı girişine yanıt vermek için ilgili tüm komut dosyalarını ve bilgileri yüklemesi gerekir. Etkileşimli Etkileşimli Zaman (TTI) Etkileşimli Süre Tüm öğelerini oluşturmak, komut dosyasını (varsa) yüklemek ve daha sonra kullanıcı girişine yanıt vermek için sayfanın ihtiyaç duyduğu toplam süreyi ölçer. Toplam Engelleme Süresi (TBT) Toplam engelleme süresi TTI refakatçisi metriğidir. Bu, FCP ve TTI arasındaki zaman olarak tanımlanır. TTI, kullanıcının sayfa ile etkileşime girmesini engelleyen sayfanın yükleme işleminin süresini ölçer. Bu aynı zamanda Metrik Fid. Bu, yüklendiğinde sayfada meydana gelen beklenmedik düzende toplam değişiklikleri ölçer. Örneğin, herhangi bir sayfa yüklediğinizde, sayfa tamamen yüklendikten sonra metin bloğu veya düğmesi aniden değişir. Daha fazla bilgi için Annie Sullivan’ın CLS hakkında derin bir video izleyin. Yukarıda listelenen tüm metriklerden LCP, FID ve CLS, sitenizin genel performansını izlemek için en yararlı olanlardır. Ayrıca Google’ın yeni web çekirdek web metriğinin bir parçasıdır. Google’ın en yeni web Vitals Metrik Çekirdeği (Kaynak: Google) Bu sefer tüm metrikleri tarayıcı geliştirme araçları ve çevrimiçi hız test siteleri (WebPagetest, PagePeed Insights, Deniz Feneri, vb.) Yardımıyla ölçebilirsiniz.
Lighthouse ve WebPagetest gibi web sitesi hız test araçlarına göre hesaplanan performans puanı kurallarına dayanan metrikler, sitenizin performans bütçesini belirlemek için metrik olarak işlev görebilir. Bu araç, site performansını ölçmek için en iyi pratik kuralları izlediğinden, nispeten istikrarlı olmak için buna güvenebilirsiniz. Deniz feneri kullanıyorsanız, PagePeed Insights puanlarını bir performans ölçüsü olarak kullanabilirsiniz, ayrıca sitenizin performansını optimize etmek için talimatlar alacaksınız. Hatta bir bütçe performansı bile belirleyin. En iyi sonuçlar için, miktar tabanlı performans metrikleri, zaman tabanlı ve kural tabanlı bir kombinasyon kullanın. Performans bütçesinin nasıl belirlenmesi, performans bütçesinin ne olduğunu ve onu belirlemek için kullanabileceğiniz çeşitli metrikleri bildikten sonra, web siteniz için bir performans bütçesinin nasıl ayarlanacağını keşfedelim. Adım 1: Web sitesinin performansı üzerine yapılan ilk araştırmalar birçok faktöre bağlıdır. Bütçeye hemen karar vermek zor. Rakiplerinizi ve sizinkine benzer (veya aklınızda olanlar) inceleyerek başlayın. Rakipleri veya benzeri siteleri nasıl bulacağınızdan emin değilseniz, bazı teknikler: Google’da “İlgili: Anahtar Kelime” Gelişmiş Arama Operatörü ile arama
Alexa’da benzer siteler bulun
Benzer kullan Verandanızda bir resim vardiyası ve görüntü ve metin içeren üç parça daha varsa, vahşi doğada benzer sayfalar arayın ve performanslarını ölçün.Bu sitenin performansını ölçerken, sayfa ağırlığı, sayfa açma süresi, HTTP, LCP, FID ve TBT istekleri gibi ana metriklere odaklanın.Web sitenizi çok fazla içerik değiştirmeden yeniden tasarlarsanız, mevcut web sitesi metriğinizi bir başlangıç noktası olarak kullanabilirsiniz.Web sitenizdeki en önemli sayfaları belirleyerek başlayın.Genellikle, bu en fazla trafiği çeken bir avlu veya sayfadır.Web sitenizin rekabetle nasıl karşı karşıya kaldığına dair net bir resim elde etmek için, tüm performans metrik değerlerine sahip bir grafik yapın.
Psikofizik alanındaki araştırmaya göre, tüm önemli performans metrik değerlerinin (Kaynak: Google) grafiği, insanlar sadece fark en az%18 olduğunda performans değerlerindeki değişiklikler arasındaki farkı görür. Bunu% 20 kural olarak basitleştirebilirsiniz. Dolayısıyla, siteniz şu anda 3 saniye içinde yüklüyse, kullanıcınız performans farkını görebilmeniz için en az% 20 daha hızlı içermelidir. Bu, en az 2,4 saniyelik yükleme hızını hedeflemeniz gerektiği anlamına gelir. Adım 2: Performans için temel ayar ayarlayın WebPagetest ve/veya Chrome geliştirici araçlarını performans ölçümleri yapmak için kullanın. Aldığınız değer tüm koşullar için doğru olmayacaktır, ancak bu değer, performans bütçenizi dayandırmanız için çok iyi bir referans noktası olacaktır. Bütçeyi sadece bir miktar metriği ile belirlemek zordur. Örneğin, E-Niaga web sitesinde birçok ürün resmi olacak, ancak haber web sitesinde çoğunlukla metin öğeleri var. Ancak, reklamcılıkla desteklenen bir haber platformuysa, üçüncü taraf reklamlarının ve performanslarını etkileyebilecek kullanıcı izleme komut dosyalarının taranmasını içermelidir. Varsayılan tarayıcı test aracını kullanarak sitenin performansını ölçüyorsanız, okumadan önce tarayıcı önbelleğinizi boşalttığınızdan emin olun. Bu işlemi daha hızlı hale getirmek için Clear Cache Chrome uzantısını kullanabilirsiniz. Hala bir taban çizgisi ayarlamakta zorlanıyorsanız, işte başlamanız için değerli bir değer: 3 saniyenin altında sayfayı açıyor
5 saniyeden azMaksimum 200 kb sıkıştırılmış kritik yol kaynağı
Adım 3: Bulduğunuz değere göre bir performans bütçesi ayarlayın, siteniz için başlangıç performans bütçesini ayarlayın.İlk performans bütçesi her zaman tahmini ve üst sınır olacaktır, ancak mümkün olduğunca doğru belirlemeye çalışmalısınız.Web sitenizi kullanıcı deneyimi için önceliklendirmek size gerçekten yardımcı olacaktır.İçerik sitenizdeki sayfalarda değişebileceğinden, her sayfa türü için bir performans bütçesi ayarlayın.Nispeten küçük bir web sitesi (<15 sayfa) çalıştırırsanız, çok zaman almadığı için her sayfa için bir performans bütçesi de belirleyebilirsiniz.Hala bir performans bütçesi ayarlamakta zorlanıyor mu?Web sitenizi oluşturmak için planlama veya geliştirme aşamasındaysanız, hedef sayfalarınızın boyutunu ve farklı ağ hızları için çeşitli öğeleri tahmin etmek için Performans Bütçesi hesaplayıcısı gibi araçları kullanabilirsiniz.
Performans bütçenizi bu basit çevrimiçi hesap makinesi ile hesaplayın Farklı sayfa öğelerinin boyutunu ihtiyaçlarınıza göre ayarlayabilirsiniz, ancak her zaman bütçe sınırının altındaki toplam sayfa boyutunu koruyabilirsiniz. Adım 4: Performans bütçenizi kullanın Performans bütçesi, yüksek performanslı web siteleri oluşturmak için size ve ekibinize rehberlik edecek bir referanstır. Bir tasarımcı, geliştirici, pazarlamacı veya site sahibi olun, verdiğiniz karar sitenin performansını etkileyebilirse, belirtilen sınır dahilinde olduğundan emin olmak için performans bütçesine danışmanız gerekir. Örneğin, sitenin geliştirilmesinden sorumluysanız ve pazarlama başkanı sizden web sitenize şişen bir analiz komut dosyası eklemenizi istiyorsa, paydaşlara neden mümkün olmadığını açıklamak için performans bütçesini kullanabilirsiniz. Sitenin performansını etkilemeden ekleyin. Aynı şekilde, bir UI/UX tasarımcısı ve paydaşlarsanız, görüntülerle dolu siteler tasarlamak istersiniz, performans bütçesini neden performansı ve dolayısıyla dönüşümü açıklamak için kullanabilirsiniz. Notlar:
Performans bütçesi bir müjde değildir. Bazen pragmatik olun ve sitenize belirli özellikleri uygularken ayarlayın. Ancak, performans bütçesi genellikle bu durumdan kaçınmanıza yardımcı olacaktır. Performansını izleyin ve performans bütçesini web sitenizin ilk aşamalarında uygulayın, FCP ve TTI gibi kullanıcılara odaklanan varlık boyutunun ölçülmesine ve izleme performans metriklerine odaklanın. Gerçek kullanıcılardan doğrudan bir metrik alarak bunu düzenli olarak izleyin ve not edin. Bu, web sitesindeki değişikliklerin performansını nasıl etkileyebileceğini ve ana iş metriğini nasıl etkileyebileceğini gösterecektir. Web sitesi performansını izlemeyi kolaylaştırmak ve performans bütçesini uygulamak için aşağıdaki araçları kullanabilirsiniz: WebPagetest – en güvenilir web sitesi hız test araçlarından biri. Ve ücretsiz! Orada bir hesap oluşturursanız, test sonuçlarınıza bir yıla kadar erişebilirsiniz. Bir Fire WebPagetest'in yardımıyla testleri de otomatikleştirebilirsiniz. Lighthouse Lightwallet – Google Deniz Feneri, performans bütçenizi ayarlamak için kullanabileceğiniz LightWallet adlı bir özellik içerir. Web sitenizi Lighthouse’da her test ettiğinizde, metriklerinizden biri bütçe sınırını aşarsa otomatik olarak bir uyarı görüntüler. Bir performans bütçesi oluşturmak ve performans testini otomatikleştirmek için bir deniz feneri botu da kullanabilirsiniz.
SpeedCurve – Bu, bir performans bütçesi belirlemenizi sağlayan birinci sınıf bir web sitesi test ve izleme aracıdır. Bütçe sınırınızı aşan bir metrik bulursanız, hemen size hatırlatacaktır.
Performans web sitesine ve Speedcurve’de Performans Bütçesi’ni takip edin
Caliber -Dünik Premium Web Sitesi Performans bütçesini belirlemek için kullanabileceğiniz ve bütçe sınırını aşan bir metrik varsa bir uyarı alın. Performans bütçesi, kullanıcının deneyimine zarar vermeden sitenizin performansına odaklanmanıza yardımcı olur. site işlevselliği. Bu, Siteye hangi özelliklerin ekleneceğine ve hangilerinin silineceğine karar vermek için siz ve ekibiniz için bir rehber olarak işlev görecektir. Sonuç, kullanıcılarınız için yüklenen ve hızlı hisseden bir site. Özellikle çevrimiçi bir işseniz, web sitelerinin performansı iş hedeflerinize ulaşmak için her şeyden daha önemlidir. Performans bütçesi oluşturmak, tüm paydaşların ortak bir hedefe doğru bir ekip olarak katılmalarını ve birlikte çalışmasını sağlar: web sitesi performansı. Bugün siteniz için bir performans bütçesi ayarlayarak başlayın! Siteniz için bir performans bütçesinin nasıl ayarlanacağı hakkında daha fazla bilgi edinmek ister misiniz? Aşağıda yorum yapın.
