İlk performans bütçeniz

Milica Mihajlija
Milica Mihajlija

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.

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:

Chrome Geliştirici Araçları'ndaki Lighthouse paneli

Ö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.
Doggos.com'un masaüstü analizi
Mobil FCP TTI
Ana sayfa 1.800 ms. 6150 ms.
Sonuçlar sayfası 1.100 ms. 7.870 ms.
Doggos.com'un mobil analizi

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:

  1. Google aramadaki "related:" anahtar kelimesi
  2. Alexa'nın benzer siteler özelliği
  3. SimilarWeb

İlgili anahtar kelimeyi içeren Google Arama ekran görüntüsü

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.
Doggos.com'un 3G ağında rekabet analizi
Bilgisayar başında duran bir köpek
Doggos.com, FCP metriği açısından iyi bir performans gösteriyor ancak TTI açısından ciddi bir geride kalıyor

İ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.
Doggos.com'u rakiplerinin önüne çıkaracak performans bütçesi

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.
Doggos.com performans bütçesi revize edildi

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:

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.

Chrome Kullanıcı Deneyimi raporundaki cihaz dağıtım verileri
Chrome Kullanıcı Deneyimi raporundaki cihaz dağıtım verileri

Sonraki adımlar

Performans bütçenizin proje boyunca uygulandığından emin olun ve bunu derleme sürecinize dahil edin.