Performans, kullanıcı deneyimi ve web sitenizdeki dönüşüm oranlarını artırmak için çok önemlidir.
Web sitenizdeki sayfanız hızlı bir şekilde yüklenir ve sorunsuz bir şekilde etkileşime girerse, kullanıcıların bir web sayfasını terk etme olasılığı daha düşüktür.
Ama ne kadar hızlı yeterince hızlıdır? Bunun tek bir cevabı yok.
Tıpkı herhangi bir işletme gibi, her web sitesi kendi hedefleri, kullanıcı demografisi ve bütçeleri ile diğerlerinden benzersizdir.
Bir performans bütçesi belirlemek, bütçeniz için maksimum performansı elde etmenize yardımcı olarak bu karışıklığı giderir.
Bu yazıda, iş hedeflerinize verimli bir şekilde ulaşmak için web sitesi performansını doğru ölçümlerle nasıl ölçeceğinizi ve bir performans bütçesi nasıl belirleyeceğinizi öğreneceksiniz.
İçindekiler
- Performans Bütçesi nedir?
- Performansı Doğru Metriklerle Ölçün
- Performans Bütçesi Nasıl Belirlenir?
- Performansı İzleme ve Performans Bütçelerini Uygulama
- Sonuç
Performans Bütçesi Nedir?
Web sitesi performansı bir alış ve veriş oyunudur.
Kullanıcı deneyimine mi yoksa tasarıma mı öncelik vermelisiniz?
Bir sohbet robotu (chatbot) eklemeye veya sayfa yükleme hızınızı düşürmeye ne dersiniz?
Web sitenizin gerçekten üçüncü taraf bir komut dosyası ve özel yazı tipleri yüklemesi gerekiyor mu?
Varsa, kullanıcılarınıza hangi işlevleri sunuyorlar?
Ve dönüşümleri artırmanıza yardımcı oluyorlar mı?
Siteniz için en iyi performansı elde etmek için tasarım, işlevsellik, iş hedefleri ve kullanıcı deneyimi arasında doğru dengeyi bulmanız gerekir.
Yeni bir web sitesi oluştururken veya onu yenilerken, tüm bu faktörleri hesaba katmak daha kolaydır.
Ancak zamanla, site trafiği arttıkça ve siteye daha fazla özellik ekledikçe, web sitenizin performansının başlangıçta olduğu kadar iyi olmadığını göreceksiniz. Performans bütçelemenin yardımcı olduğu yer burasıdır.
Performans bütçesi tam olarak duyulduğu gibidir: Sayfanızda bir “bütçe” belirlersiniz ve sayfanın bunu aşmasına izin vermezsiniz. Bu, belirli bir yükleme süresi olabilir, ancak bütçeyi istek sayısına veya sayfanın boyutuna göre böldüğünüzde genellikle konu hakkında daha kolay bir sohbet olur.
Performans bütçesi, performansını etkileyen çeşitli web sitesi ölçümlerine uyguladığınız bir limitler topluluğudur.
Bazı performans bütçe ölçütleri şunları içerir:
- Toplam sayfa boyutu
- Toplam HTTP istek sayısı
- Mobil ağlarda sayfa yükleme süresi
- İlk Zengin İçerikli Boyama (FCP)
- Uzun Zengin İçerikli Boyama (LCP)
Tüm web sitesi için veya tek tek sayfa temelinde veya her ikisi için (önerilir) bir performans bütçesi belirleyebilirsiniz.
Yukarıda bahsedilen ölçümleri kullanarak, web sitenizin iyi performans göstermeye devam etmesini sağlamak için net, iyi tanımlanmış, ölçülebilir hedefler belirleyebilirsiniz.
Performans Bütçesi Örnekleri
- “Ana Sayfa” boyutu 200 KB’den küçük olmalı ve hızlı 3G mobil ağda 2 saniyeden kısa yüklenmelidir.
- “Arama sayfası”, masaüstü sitesinde 1,5 MB’tan daha az görsel içermelidir.
- “Blog sayfası” 1,5 saniye içinde yüklenmeli ve Yavaş 3G ağında 5 saniyenin altında etkileşime girmelidir.
- “Açılış sayfası”, Lighthouse performans denetimlerinde 85’in üzerinde bir performans puanına sahip olmalıdır.
Performans Bütçesi Ayarlarının Yararları
Bir performans bütçesi tanımlamak, web sitenizin performansını artırmak için ilk adımı atmanıza yardımcı olur.
Web sitenize ekstra özellikler eklerken, tasarımcılar, geliştiriciler veya pazarlamacılar olsun, ekibinizdeki veya kuruluşunuzdaki herkes için bir referans noktası görevi görür.
Örneğin, görüntülerin ve yazı tiplerinin sayısı (ve bunların dosya boyutları) için bir sınır belirlediyseniz, tasarımcılar neyi kullanıp kullanamayacaklarını daha iyi anlayacaktır.
Benzer şekilde, üçüncü taraf komut dosyalarının ve kitaplıklarının sayısına bir sınır koymak, geliştiricilerin hedeflerine daha iyi yaklaşmalarını sağlayacaktır.
Bir performans bütçesine sahip olmak, web sitenizin performansını daha iyi izlemenize de yardımcı olacaktır.
Web sitenizin performansı zaman içinde kademeli olarak düşerse, performans bütçenize geri dönebilir ve sorunların nerede olduğunu test edebilirsiniz.
Doğru Metriklerle Performansı Ölçün
Bir şeyi ölçemezseniz, web sitesi performansı üzerindeki etkisini ölçebilmek bir yana, onu izleyemez veya iyileştiremezsiniz.
Bir web sitesi performans bütçesi belirlemek için kullanabileceğiniz çeşitli ölçülebilir metriklere bakalım.
Nicelik Tabanlı Metrikler
Bu metrik türü anlaşılması, ölçülmesi ve ayarlanması en kolay olanıdır.
Hem tasarımcıların hem de geliştiricilerin daha iyi iş birliği yapmalarına yardımcı olabildikleri için web geliştirme aşamasında oldukça kullanışlıdırlar.
Bir performans bütçesi belirlemek için en sık kullanılan nicelik ölçümleri şunları içerir:
- Aşağıdakilere ayırabileceğiniz maksimum sayfa büyüklüğü:
o Maksimum görüntü boyutu
o Maksimum web yazı tipi boyutu
o Maksimum web yazı tipi sayısı
o Maksimum komut dosyası boyutu (ör. çerçeveler, kitaplıklar)
o Maksimum komut dosyası sayısı
o Maksimum HTML ve CSS boyutu
o Maksimum video boyutu
- Aşağıdakilere ayırabileceğiniz toplam dış kaynak sayısı:
o Maksimum HTTP isteği sayısı
o Maksimum üçüncü taraf komut dosyası sayısı
Yukarıdaki metriklerin gerçek kullanıcı deneyimine karar vermediğini unutmamalısınız.
Ancak, performans bütçeleme için harika bir başlangıç noktası görevi görürler.
Örneğin, bir kullanıcı, sayfaların kaynaklarını nasıl yüklediğine bağlı olarak, aynı boyutta ve aynı sayıda istek içeren iki sayfayı yavaş veya hızlı olarak algılayabilir. Kritik kaynak teslimi için daha iyi optimize edilmiş sayfa, kullanıcıya, olmayan sayfadan çok daha hızlı görünecektir.
Bu nedenle, sitenizin performansını daha net anlamak için nicelik ölçümlerini diğer kullanıcı merkezli ölçümlerle birleştirmeniz gerekir.
Zamanlamaya Dayalı Metrikler
Metrik türü, sayfanın çeşitli yönlerinin ne kadar hızlı yüklendiğini size söyler.
Sayfa yükleme hızını ölçmek için kullanılan en yaygın iki olay DOMContentLoaded ve yükleme (load) etkinlikleridir. Ancak, sunucu kullanıcıya minimal bir sayfa sunabildiğinden ve gerçek içerik yüklemesini ve görüntülenmesini saniyeler sonrasına ertelediğinden, kullanıcının yaşadıklarının tam bir resmini vermezler.
Bunu düzeltmek için W3C Web Performance Group (Web Performans Grubu), gerçek kullanıcı izlemeye dayalı kullanıcı performansı ölçümlerini ölçmek için API’leri (uygulama programlama arayüzü) onayladı. Performans bütçenizde kullanabileceğiniz en önemli zamanlama metriklerinden bazıları şunlardır:
İlk Zengin İçerikli Boyama (FCP)
FCP, bir sayfanın ekranda (veya tarayıcıda) oluşturulan herhangi bir içeriği yüklemek için geçen süreyi ölçer. Bir sayfa yüklemesinin başlangıcını yakalar.
Siteniz için FCP metriğini geliştirme tekniklerine dalmak istiyorsanız blog yazılarımıza göz atın.
En Büyük Zengin İçerikli Boyama (LCP)
LCP, bir sayfanın tarayıcıdaki en büyük metin veya görüntü öğesini oluşturmak için geçen süreyi ölçer. LCP, algılanan yükleme deneyimi için FCP ve İlk Anlamlı Boyama’dan (FMP) daha iyi bir ölçüm sağladığından, kullanıcı deneyimini ölçmek için harika bir ölçümdür. Google’a göre LCP, bundan sonra kullanıcı merkezli performansı ölçmek için tercih edilen seçimdir.
İlk Giriş Gecikmesi (FID)
FID, bir sayfanın herhangi bir kullanıcı etkileşimine yanıt vermesi için geçen süreyi ölçer. Örneğin, bir kullanıcı sayfadaki bir bağlantıyı tıkladığında veya bir düğmeye dokunduğunda, tarayıcı, kullanıcının girdilerine yanıt vermek için ilgili tüm komut dosyalarına ve bilgilere sahip olmalıdır.
Etkileşime Geçen Süre (TTI)
TTI, bir sayfanın tüm öğelerini oluşturmak, komut dosyalarını (varsa) yüklemek ve ardından kullanıcı girdilerine yanıt vermek için harcadığı toplam süreyi ölçer.
Toplam Engelleme Süresi (TBT)
TBT, TTI’nin tamamlayıcı bir metriğidir. FCP ile TTI arasındaki zaman olarak tanımlanır. TTI, sayfa yükleme işleminin kullanıcının sayfayla etkileşime girmesini engellediği zamanı ölçer. Aynı zamanda FID metriğiyle de ilgilidir.
Kümülatif Düzen Kayması (CLS)
CLS, bir sayfanın görsel kararlılığının bir ölçüsüdür. Yüklendiğinde bir sayfada meydana gelen tüm beklenmedik düzen kaymalarının toplamını ölçer. Örneğin, herhangi bir sayfayı yüklediğinizde, metin bloğu veya düğmesi, sayfa tam olarak yüklendikten sonra aniden kayar.
Yukarıda listelenen tüm metrikler arasında LCP, FID ve CLS, sitenizin genel performansını izlemek için en yararlı olanlardır. Ayrıca, Google’ın yeni Temel Web Hayati Verileri (Core Web Vitals) ölçümlerinin de bir parçasıdır.
Tüm bu zamanlama metriklerini tarayıcı geliştirme araçları ve çevrimiçi hız testi sitelerinin (PageSpeed Insights, Lighthouse başta olmak üzere WebPageTest ve diğerleri) yardımıyla ölçebilirsiniz, başka yazılarımızda detaylarını anlatıyoruz.
Kural Tabanlı Metrikler
Lighthouse ve WebPageTest gibi web sitesi hız testi araçları tarafından hesaplanan performans puanları, sitenizin performans bütçesini ayarlamak için ölçüm görevi görebilir.
Bu araçlar site performansını ölçmek için genel en iyi uygulama kurallarını takip ettiğinden, nispeten kararlı olmalarına güvenebilirsiniz.
Lighthouse kullanıyorsanız, site performansınızı optimize etmek ve hatta bir performans bütçesi belirlemek için ipuçları da alacaksınız.
En iyi sonuçlar için niceliğe dayalı, zamanlamaya dayalı ve kurala dayalı performans metriklerinin bir birleşimini (kombinasyonunu) kullanın.
Performans Bütçesi Nasıl Belirlenir?
Artık bir performans bütçesinin ne olduğunu ve onu ayarlamak için kullanabileceğiniz çeşitli metrikleri öğrendiğinize göre, web siteniz için bir performans bütçesini nasıl belirleyeceğinizi inceleyelim.
Adım 1 : Ön Araştırma
Bir web sitesinin performansı pek çok faktöre bağlıdır. Hemen bir bütçeye karar vermek zordur.
Rakiplerinizi ve sizinkine benzer siteleri (veya aklınızdan geçenleri) araştırmaya başlayın.
Rakip veya benzer siteleri nasıl bulacağınızdan emin değilseniz, işte birkaç teknik:
- “related: anahtar kelime” arama operatörüyle Google’da arama yapın
- Alexa’da benzer siteler bulun
- SimilarWeb’i kullanın
Ana sayfanızda bir resim kaydırıcısı ve resimler ve metinler içeren üç bölüm daha varsa, benzer sayfalara doğal (gerçek hayat) ortamda bakın ve performanslarını ölçün. Bu sitelerin performans ölçümlerini alırken, sayfa ağırlığı, sayfa yükleme süresi, HTTP isteklerinin sayısı, LCP, FID ve TBT gibi temel ölçütlere odaklanın.
İçeriğini fazla değiştirmeden web sitenizi yeniden tasarlıyorsanız, mevcut web sitenizin metriklerini başlangıç noktası olarak kullanabilirsiniz.
Web sitenizdeki en önemli sayfaları belirleyerek başlayın. Tipik olarak, en yüksek miktarda trafik çeken bir açılış sayfasıdır veya birkaç tane açılış sayfalarıdır.
Web sitenizin rekabete karşı ne durumda olduğunun net bir resmini elde etmek için, tüm performans ölçüm değerlerini içeren bir grafik oluşturun.
Psikofizik alanındaki araştırmalara göre, insanlar performans değeri değişiklikleri arasındaki farkı yalnızca fark en az %18 olduğunda fark ederler.
Bunu %20 kuralı olarak görerek daha da basitleştirebilirsiniz. (Psikofizik nicelik bakımından, fiziksel uyaranın ve etkilediği algı ve hislerin arasındaki ilişkiyi inceler)
Dolayısıyla, mevcut sitenizin ana sayfası 3 saniye içinde yükleniyorsa, kullanıcılarınızın performansta bir fark görmesi için en az %20 daha hızlı yüklenmesi gerekir. Bu, en az 2,4 saniyelik bir sayfa yükleme hızını hedeflemeniz gerektiği anlamına gelir.
Adım 2 : Performans için Temel Belirleyin
Performans ölçümleri yapmak için PageSpeedInsights ve / veya WebPageTest ve / veya Chrome Geliştirici Araçlarını kullanın.
Aldığınız değerler tüm koşullar için doğru olmayacak, ancak performans bütçenizi temel alabileceğiniz mükemmel bir referans noktası oluşturacaklardır.
Yalnızca nicelik metrikleriyle bütçe tanımlamak zordur.
Örneğin, bir e-ticaret web sitesinde çok sayıda ürün resmi bulunur, ancak bir haber web sitesinde çoğunlukla metin öğeleri bulunur. Ancak, reklam destekli bir haber platformuysa, üçüncü taraf reklam sunma ve performansını etkileyebilecek kullanıcı izleme komut dosyalarını yüklemelidir.
Tarayıcınızın yerleşik test aracını kullanarak bir sitenin performansını ölçüyorsanız, okumaları almadan önce tarayıcınızın önbelleğini temizlediğinizden emin olun. Bu işlemi çok daha hızlı hale getirmek için Önbelleği Temizle Chrome uzantısını kullanabilirsiniz.
Hala bir temel oluşturmakta zorlanıyorsanız, başlamanız için işte uygun değerler:
- 3 saniyeden kısa sayfa yükleme süresi
- 5 saniyeden az TTI
- Maksimum 200 KB sıkıştırılmış kritik yol kaynağı
Adım 3 : Performans Bütçesini Belirleyin
Keşfettiğiniz değerlere göre siteniz için başlangıç performans bütçesini belirleyin.
İlk performans bütçesi her zaman bir tahmin ve bir üst sınır olacaktır, ancak bunu olabildiğince doğru bir şekilde belirlemeye çalışmalısınız. Web sitenizi kullanıcı deneyimi için önceliklendirmek size burada son derece yardımcı olacaktır.
İçerik sitenizdeki sayfalara göre değişiklik gösterebileceğinden, her sayfa türü için bir performans bütçesi belirleyin.
Nispeten küçük bir web sitesi çalıştırıyorsanız (<15 sayfa), çok zaman almayacağından her sayfa için de bir performans bütçesi belirleyebilirsiniz.
Hala performans bütçesini belirlemekte zorlanıyor musunuz? Web sitenizi oluşturmanın planlama veya geliştirme aşamasındaysanız, sayfanızın hedef boyutunu ve farklı ağ hızları için çeşitli öğelerini tahmin etmek için Performans Bütçe Hesaplayıcı gibi bir araç kullanabilirsiniz.
Farklı sayfa öğelerinin boyutunu gereksinimlerinize göre ayarlayabilir, ancak her zaman toplam sayfa boyutunu bütçe sınırının altında tutabilirsiniz.
Adım 4 : Performans Bütçenizi Kullanın
Performans bütçesi, sizi ve ekibinizi yüksek performanslı bir web sitesi oluşturmaya yönlendirecek bir referanstır.
İster tasarımcı ister geliştirici, pazarlamacı veya site sahibi olun, vermiş olduğunuz bir karar site performansını etkileyebiliyorsa, belirlenen sınırlar içinde olduğundan emin olmak için performans bütçesine başvurmalısınız.
Örneğin, site geliştirmeden sorumluysanız ve pazarlama başkanı sizden web sitenize sitenin performansını etkileyen şişirilmiş bir analitik komut dosyası eklemenizi isterse, paydaşlara neden performans bütçesini etkilemeden eklemenin mümkün olmadığını açıklamak için kullanabilirsiniz.
Benzer şekilde, bir UI / UX tasarımcısıysanız ve paydaşlar, görüntü ağırlıklı bir site tasarlamanızı istiyorsa, performans bütçesini, performansa ve dolayısıyla dönüşümlere neden zararlı olduğunu açıklamak için kullanabilirsiniz.
Not: Performans bütçesi, müjde değildir. Bazen, sitenizde belirli özellikleri uygularken pragmatik olun ve buna göre ayarlayın. Ancak, bir performans bütçesi bu durumlardan sık sık kaçınmanıza yardımcı olacaktır.
Performansı İzleme ve Performans Bütçelerini Uygulama
Web sitenizin ilk aşamalarında, varlık boyutlarını ölçmeye ve FCP ve TTI gibi kullanıcı merkezli performans ölçütlerini izlemeye odaklanın.
İdeal olarak ölçümleri doğrudan gerçek kullanıcılardan alarak bunları düzenli olarak izleyin ve kaydedin.
Bu size web sitesi değişikliklerinin performansını nasıl etkileyebileceğini ve temel iş ölçümlerini nasıl etkileyebileceğini gösterecektir.
Web sitesi performansını izlemeyi ve performans bütçelerini zorlamayı kolaylaştırmak için şu araçları kullanabilirsiniz:
- WebPageTest – En güvenilir web sitesi hız testi araçlarından biridir. Ve ücretsizdir! Orada bir hesap oluşturursanız, test sonuçlarınıza bir yıla kadar erişebilirsiniz. WebPageTest API yardımıyla testleri de otomatikleştirebilirsiniz.
- Lighthouse LightWallet – Google Lighthouse, performans bütçenizi ayarlamak için kullanabileceğiniz LightWallet adlı bir özellik içerir. Web sitenizi Lighthouse’da her test ettiğinizde, metriklerinizden herhangi biri bütçe sınırlarını aşarsa size otomatik olarak uyarılar gösterir. Lighthouse Bot’u bir performans bütçesi belirlemek ve performans testini otomatikleştirmek için de kullanabilirsiniz.
- SpeedCurve – Bu, aynı zamanda performans bütçeleri belirlemenizi sağlayan birinci sınıf bir web sitesi performans testi ve izleme aracıdır. Bütçe sınırlarınızı aşan herhangi bir metrik bulursa, sizi hemen uyarır.
- Calibre – Performans bütçeleri belirlemek ve herhangi bir ölçüt bütçe sınırının üzerine çıktığında uyarılar almak için kullanabileceğiniz başka bir premium web sitesi performans izleme aracıdır.
Sonuç
Performans bütçesi, kullanıcı deneyimine veya site işlevselliğine zarar vermeden sitenizin performansına odaklanmanıza yardımcı olur.
Siteye hangi özelliklerin ekleneceği ve hangilerinin çıkarılacağına karar vermeniz için siz ve ekibiniz için bir rehber görevi görecektir.
Sonuç, kullanıcılarınız için hızlı yüklenen ve hissettiren bir sitedir.
Esasen çevrimiçi bir işletme iseniz, web sitesi performansı iş hedeflerinize ulaşmak için her şeyden daha önemlidir.
Bir performans bütçesi belirlemek, tüm paydaşların ortak bir amaca yönelik olarak bir ekip olarak birlikte çalışmasını sağlar: WEB SİTESİ PERFORMANSI.
Siteniz için bir performans bütçesi belirlemeye bugün başlayın!
Siteniz için bir performans bütçesini nasıl belirleyeceğiniz hakkında daha fazla bilgi edinmek ister misiniz?
Yorum ve görüşlerinizi yazabilirsiniz, TurboPak ekibi size hizmet etmeye hazır!
Siz de fikrinizi belirtin