Kişisel bütçe, işletme veya aile bütçesi belirlediğinizde harcamalarınız için bir sınır belirlemiş ve bu sınırı aşmadığınızdan emin olursunuz. Performans bütçeleri de aynı şekilde çalışır, ancak web sitesi performansını etkileyen metriklerde işe yarar.
Bir performans bütçesi oluşturarak ve uygulandığında, sitenizin mümkün olduğunca hızlı bir şekilde oluşturulduğundan emin olabilirsiniz. Bu değişiklik, ziyaretçilerinize daha iyi bir deneyim sunacak ve işletme metriklerini olumlu yönde etkileyecektir.
İlk performans bütçenizi birkaç basit adımda nasıl tanımlayabileceğiniz aşağıda açıklanmıştır.
Ön analiz
Mevcut bir sitenin performansını artırmaya çalışıyorsanız, işe en önemli sayfaları belirleyerek başlayın. Örneğin, bunlar en yüksek kullanıcı trafiğine sahip sayfalar veya bir ürün açılış sayfası olabilir.
Önemli sayfalarınızı tanımladıktan sonra sıra bunları analiz etmeye gelir. İlk olarak, kullanıcı deneyimini en iyi ölçen zamanlama ara noktalarına odaklanacağız.
Chrome Geliştirici Araçları'ndaki Denetimler paneli altında Lighthouse'u bulacaksınız. Aşağıdaki iki defayı kaydetmek için her sayfada Misafir penceresinde denetimler çalıştırın:
Örnek olarak, son derece özelleştirilmiş bir arama motoru olan Doggos.com'u ele alalım. Doggos.com, internetteki köpeklerle ilgili tüm içeriği dizine eklemeyi amaçlar ve bunun en önemli sayfaları ana sayfa ve sonuçlar sayfalarıdır. Aşağıda, masaüstü ve mobil cihazlarda site için ölçülen FCP ve TTI sayıları verilmiştir.
| Masaüstü | FCP | TTI |
|---|---|---|
| Ana sayfa | 1.680 ms. | 5.550 ms. |
| Sonuçlar sayfası | 2.060 ms. | 6.690 ms. |
| Mobil | FCP | TTI |
|---|---|---|
| Ana sayfa | 1.800 ms. | 6150 ms. |
| Sonuçlar sayfası | 1.100 ms. | 7.870 ms. |
Rekabet analizi
Kendi sitenizi analiz ettikten sonra sıra rakiplerinizin sitelerini analiz etmeye gelir. Sizinkine benzer web sitelerinden gelen sonuçları karşılaştırmak, performans bütçesi belirlemek için harika bir yoldur. İster köklü bir proje üzerinde çalışıyor ister sıfırdan başlıyor olun, bu önemli bir adımdır. Rakiplerinizden daha hızlı olduğunuzda rekabet avantajı elde edersiniz.
Hangi sitelere bakacağınızdan emin değilseniz deneyebileceğiniz birkaç araç aşağıda verilmiştir:
- Google aramadaki "related:" anahtar kelimesi
- Alexa'nın benzer siteler özelliği
- SimilarWeb
Gerçekçi bir resim için en az 10 rakip bulmaya çalışın.
Zamanlama aşamaları için bütçe
Bu örnekte, özel arama motorumuz çok sayıda rakibe sahiptir. Biz de mobil cihazlar için ana sayfayı optimize etmeye odaklanacağız. Günümüzde internet trafiğinin yarısından fazlası mobil ağlarda meydana gelmektedir. Varsayılan olarak cep telefonu numaralarını kullanmak yalnızca mobil kullanıcılarınıza değil, masaüstü kullanıcılarınıza da fayda sağlayacaktır.
Tüm benzer web siteleri için FCP ve TTI saatleriyle bir grafik oluşturun ve en hızlı olanı öne çıkarın. Bunun gibi bir grafik, web sitenizin rakiplere kıyasla nasıl performans gösterdiğine dair daha net bir resim sağlar.
| Site/Ana Sayfa | FCP | TTI |
|---|---|---|
| goggles.com | 880 ms. | 3.150 ms. |
| Doggos.com | 1.800 ms. | 6.500 ms. |
| quackquackgo.com | 2.680 ms. | 4.740 ms. |
| ding.xyz | 2.420 ms. | 7.040 ms. |
İyileştirme yapılabilir. % 20 kuralı, bu konuda iyi bir yönergelerdir. Araştırmalara göre, kullanıcılar %20'den fazla yanıt süresinde bir farklılık olduğunu anlamıştır. Diğer bir deyişle, karşılaştırılabilir en iyi siteden fark edilir bir şekilde daha iyi olmak istiyorsanız en az% 20 daha hızlı olmanız gerekir.
| Ölçüm | Şu andaki zaman | Bütçe (rakiplerden% 20 daha hızlı) |
|---|---|---|
| FCP | 1.800 ms. | 704 ms. |
| TTI | 6.500 ms. | 2.520 ms. |
Mevcut bir siteyi optimize etmeye çalışıyorsanız, söz konusu hedefe ulaşmak imkansız görünebilir. Bu, pes edeceğiniz anlamına gelmez. Küçük adımlarla başlayın ve mevcut hızınızdan% 20 daha yüksek bir bütçe belirleyin. Buradan optimizasyona devam edin.
Doggos.com için revize edilmiş bir bütçe şöyle olabilir:
| Ölçüm | Şu andaki zaman | İlk bütçe (şu anki zamandan% 20 daha hızlı) | Uzun vadeli hedef (rakiplerden% 20 daha hızlı) |
|---|---|---|---|
| FCP | 1.800 ms. | 1.440 ms. | 704 ms. |
| TTI | 6.500 ms. | 5.200 ms. | 2.520 ms. |
Farklı metrikleri birleştirme
Güçlü bir performans bütçesi, farklı metrik türlerini birleştirir. Ara hedef zamanlamaları için bütçeyi zaten belirlemiştik ve şimdi aralarına iki tane daha ekleyeceğiz:
- miktara dayalı metrikler
- kurala dayalı metrikler
Miktara dayalı metrikler için bütçe
Aklınıza gelen toplam sayfa ağırlığı sayısı ne olursa olsun, 170 KB'ın altında kritik yol kaynaklarını (sıkıştırılmış/küçültülmüş) yayınlamaya çalışın. Bu, web sitenizin ucuz cihazlarda ve yavaş 3G'de bile hızlı olmasını garanti eder.
Masaüstü deneyimi için daha büyük bir bütçeniz olabilir, ancak çok da acele etmeyin. Geçen yıla ait HTTP Arşivi verilerine göre hem masaüstü hem de mobil cihazlardaki ortanca sayfa ağırlığı 1 MB'ın üzerindedir. İyi performans gösteren bir web sitesine sahip olmak için bu ortanca değerlerin çok altında bir hedefi hedeflemeniz gerekir.
Aşağıda TTI bütçelerine dayalı birkaç örnek verilmiştir:
| Ağ | Cihaz | JS | Resimler | CSS | HTML | Yazı Tipleri | Toplam | Etkileşime hazır olma süresi |
|---|---|---|---|---|---|---|---|---|
| Yavaş 3G | Moto G4 | 100 | 30 | 10 | 10 | 20 | Yaklaşık 170 KB | 5 sn. |
| Yavaş 4G | Moto G4 | 200 | 50 | Tayland bahtı | 30 | 30 | Yaklaşık 345 KB | 3 saniye |
| WiFi | Masaüstü | 300 | 250 | 50 | 50 | 100 | Yaklaşık 750 KB | 2 sn. |
Miktar metriklerini temel alarak bütçe tanımlamak zor bir iştir. Bir sürü ürün fotoğrafı içeren e-ticaret web sitesi, çoğunlukla metin içeren bir haber portalından çok farklıdır. Sitenizde reklamlar veya analizler varsa gönderdiğiniz JavaScript miktarını artırırsınız.
Başlangıç noktası olarak yukarıdaki tabloyu kullanın ve üzerinde çalıştığınız içeriğin türüne göre ayarlama yapın. Sayfalarınızın neleri içereceğini belirleyin, araştırmanızı inceleyin ve her bir öğe boyutu için bilgiye dayalı bir tahminde bulunun. Örneğin, çok sayıda resim içeren bir web sitesi oluşturuyorsanız JS boyutu için daha sıkı sınırlar koyun.
Çalışır durumda bir web siteniz olduğunda, kullanıcı odaklı performans metriklerindeki performansınızı kontrol edin ve bütçenizi ayarlayın.
Kurala dayalı metrikler için bütçe
Kurala dayalı çok etkili metrikler, Lighthouse puanlarıdır. Lighthouse, uygulamanızı 5 kategoriye ayırır. Bunlardan biri performanstır. Performans puanları, İlk Zengin İçerikli Boyama ve Etkileşime Hazır Olma Süresi dahil olmak üzere 5 farklı metriğe göre hesaplanır.
Harika bir site oluşturmaya çalışırken Lighthouse performans puanı bütçesini en az 85 (100 üzerinden) olarak ayarlayın. Pull isteklerinde zorunlu kılmak için Lighthouse CI'yı kullanın.
Önceliklerinizi belirleyin.
Kendinize sitenizde ne düzeyde etkileşim beklediğinizi sorun. Haber web sitesiyse kullanıcıların ana hedefi içeriği okumaktır. Bu nedenle, hızlı bir şekilde oluşturmaya ve FCP'yi düşük tutmaya odaklanmanız gerekir. Doggos.com ziyaretçileri, alakalı bağlantıları en kısa sürede tıklamak ister, bu nedenle ilk öncelik düşük TTI'dır.
Kitlenizin tam olarak hangi bölümüne masaüstünde ve mobil cihazlarda göz attığını öğrenin ve önceliği buna göre belirleyin. Bunu anlamanın bir yolu, Chrome Kullanıcı Deneyimi raporu kontrol panelini kullanarak kitlenizin rakiplerin web sitelerinde neler yaptığını kontrol etmektir.
Sonraki adımlar
Performans bütçenizin proje boyunca uygulandığından emin olun ve bunu derleme sürecinize dahil edin.