Düşük veri maliyetine sahip, yüksek performanslı ve dayanıklı bir site oluşturmanın birkaç temel hedefi vardır.
Her hedef için bir denetime ihtiyacınız vardır.
Amaç | Why? | Neleri test etmelisiniz? |
---|---|---|
Gizliliği, güvenliği ve veri bütünlüğünü sağlama ve güçlü API kullanımını etkinleştirme | HTTPS neden önemlidir? | Tüm site sayfaları/yönlendirmeleri ve varlıkları için HTTPS uygulandı. |
Yükleme performansını artırma | Yüklenmesi üç saniyeden uzun süren sitelerin %53'ü kullanıcılar tarafından terk ediliyor | Eşzamansız veya ertelenen şekilde yüklenebilecek JavaScript ve CSS. Etkileşime hazırlık süresi ve yük boyutu için hedefler belirleyin: Örneğin, 3G'de TTI. Performans bütçesi belirleyin. |
Sayfa ağırlığını azaltın | • Sınırlı veri planlarına sahip kullanıcılar için veri maliyetini azaltın • Web uygulaması depolama alanı gereksinimlerini azaltın (özellikle düşük özellikli cihazlardaki kullanıcılar için önemlidir) • Barındırma ve yayınlama maliyetlerini azaltın • Yayınlama performansını, güvenilirliğini ve dayanıklılığını iyileştirin | Sayfa ağırlığı için bir bütçe belirleyin: Örneğin, ilk yükleme için 400 kB'tan küçük bir değer kullanın. Ağır JavaScript olup olmadığını kontrol edin. Şişmiş resim, medya, HTML, CSS ve JavaScript'i bulmak için dosya boyutlarını kontrol edin. Yavaş yüklenebilir resimleri bulun ve kapsama araçlarını kullanarak kullanılmayan kod olup olmadığını kontrol edin. |
Kaynak isteklerini azaltın | • Gecikme sorunlarını azaltın • Yayın maliyetlerini azaltın • Yayın performansını, güvenilirliğini ve dayanıklılığını iyileştirin | Herhangi bir kaynak türü için aşırı veya gereksiz istek olup olmadığına bakın. Örneğin: tekrar tekrar yüklenen dosyalar, birden fazla sürümde yüklenen JavaScript, hiç kullanılmayan CSS, hiç görüntülenmeyen resimler (veya gecikmeli yüklenebilir resimler). |
Bellek kullanımını optimize etme | Özellikle mobil cihazlarda bellek yeni darboğaz olabilir | Ana sayfayı yüklerken ve diğer site özelliklerini kullanırken sitenizin bellek kullanımını diğer sitelerle karşılaştırmak için Chrome Görev Yöneticisi'ni kullanın. |
CPU yükünü azaltma | Mobil cihazların (özellikle de düşük özellikli cihazların) CPU'su sınırlıdır. | Yoğun JavaScript olup olmadığını kontrol edin. Kapsam araçlarını kullanarak kullanılmayan JavaScript ve CSS'yi bulun. Aşırı DOM boyutu ve ilk yüklemede gereksiz yere çalışan komut dosyalarını kontrol edin. Birden fazla sürümde yüklenen JavaScript'i veya küçük bir yeniden yapılandırmayla atlanılabilecek kitaplıkları arayın. |
Web sitelerini denetlemek için çok çeşitli araçlar ve teknikler vardır:
- Sistem araçları
- Yerleşik tarayıcı araçları
- Tarayıcı uzantıları
- Online test uygulamaları
- Emülasyon araçları
- Analiz
- Sunucular ve işletme sistemleri tarafından sağlanan metrikler
- Ekran ve video kaydı
- Manuel testler
Aşağıda, her denetleme türü için hangi yaklaşımın uygun olduğunu öğreneceksiniz.
Kaynak isteklerini kaydedin: sayı, boyut, tür ve zamanlama
Bir siteyi denetlemenin en iyi yolu, tarayıcınızın ağ araçlarını kullanarak sayfaları kontrol etmektir. Bunu nasıl yapacağınızdan emin değilseniz Chrome Geliştirici Araçları ağ panelini Başlangıç Kılavuzu'na göz atın. Benzer araçlar Firefox, Safari, Internet Explorer ve Edge için de kullanılabilir.
Değişiklik yapmadan önce sonuçları kaydetmeyi unutmayın. Ağ istekleri için bu, ekran görüntüsü kadar basit olabilir. Profil verilerini JSON dosyası olarak da kaydedebilirsiniz. Test sonuçlarını kaydetme ve paylaşma hakkında daha fazla bilgiyi aşağıda bulabilirsiniz.
Ağ kullanımını denetlemeden önce, ilk yükleme performansıyla ilgili doğru istatistikler elde etmek için tarayıcı önbelleğini devre dışı bıraktığınızdan emin olun. Hâlihazırda bir hizmet çalışanı aracılığıyla önbelleğe alma işlemi yapıyorsanız Cache API depolama alanını temizleyin. Tarayıcı önbelleğini devre dışı bırakmak veya daha önce önbelleğe alınmış girişleri kaldırmak zorunda kalmamak için gizli (özel) pencere kullanabilirsiniz.
Tarayıcı araçlarıyla kontrol etmeniz gereken bazı temel özellikler ve metrikler şunlardır:
- Yük performansı: Lighthouse, yük metriklerinin özetini sağlar. Addy Osmani, sayfa yüklemeyle ilgili önemli kullanıcı anlarının mükemmel bir özetini yazdı.
- Kaynakları yükleme ve ayrıştırma ve bellek kullanımı için zaman çizelgesi etkinlikleri Daha ayrıntılı bilgi edinmek isterseniz bellek ve JavaScript profil çıkarma özelliğini çalıştırın.
- Toplam sayfa ağırlığı ve dosya sayısı.
- JavaScript dosyalarının sayısı ve ağırlığı.
- Özellikle büyük tekli JavaScript dosyaları (örneğin, 100 KB'ın üzerinde).
- Kullanılmayan JavaScript. Chrome kapsam aracını kullanarak kontrol edebilirsiniz.
- Resim dosyalarının toplam sayısı ve ağırlığı.
- Özellikle büyük boyutlu tekil resim dosyaları.
- Resim biçimleri: JPEG veya SVG olabilecek PNG'ler var mı? WebP, yedeklerle birlikte mi kullanılıyor?
- Duyarlı resim tekniklerinin (srcset gibi) kullanılıp kullanılmadığı.
- HTML dosya boyutu.
- CSS dosyalarının toplam sayısı ve ağırlığı.
- Kullanılmayan CSS. (Chrome'da kapsama panelini kullanın.)
- Web yazı tipleri (simge yazı tipleri dahil) gibi diğer öğelerin sorunlu kullanımını kontrol edin.
- Sayfa yüklemesini engelleyen herhangi bir şey olup olmadığını görmek için DevTools zaman çizelgesini kontrol edin.
Hızlı kablosuz ağ veya hızlı hücresel bağlantı kullanıyorsanız düşük bant genişliği ve yüksek gecikme emülasyonu ile test edin. Masaüstünde olduğu kadar mobilde de test yapmayı unutmayın. Bazı siteler, farklı cihazlara farklı öğeler ve düzenler sunmak için UA koku alma özelliğini kullanır. Yalnızca cihaz simülasyonuyla değil, uzaktan hata ayıklama yöntemini kullanarak gerçek donanım üzerinde test yapmanız gerekebilir.
Bellek ve CPU yükünü kontrol etme
Değişiklik yapmadan önce bellek ve CPU kullanımının kaydını tutun.
Chrome'da, Görev Yöneticisi'ne Pencere menüsünden erişebilirsiniz. Bu, bir web sayfasının koşullarını kontrol etmenin basit bir yoludur.
İlk ve sonraki yükleme performansını test etme
Lighthouse, WebPagetest ve Pagespeed Insights hız, veri maliyeti ve kaynak kullanımını analiz etmek için kullanışlıdır. WebPagetest, statik içerik önbelleğe alma, ilk bayta kadar geçen süreyi ve sitenizin CDN'leri etkili bir şekilde kullanıp kullanmadığını da kontrol eder.
Sonuçları kaydetme
- WebPagetest: Test sonuçlarının her birinin kendi URL'si vardır.
- PageSpeed Insights: Online PageSpeed Insights aracı, gerçek dünyadaki performans istatistiklerini vurgulayan Chrome Kullanıcı Deneyimi raporu verilerini artık içeriyor.
- Lighthouse: Chrome Geliştirici Araçları Denetim panelindeki indir düğmesini tıklayarak raporları kaydedin:
Temel Progresif Web Uygulaması şartlarını test etme
Lighthouse; güvenliği, işlevselliği, erişilebilirliği, performansı ve arama motoru performansını test etmenize yardımcı olur. Lighthouse özellikle sitenizin hizmet çalışanları ve web uygulaması manifesti gibi PWA özelliklerini başarılı bir şekilde uygulayıp uygulamadığını kontrol eder.
Lighthouse, sitenizin kabul edilebilir bir çevrimdışı deneyim sağlayıp sağlayamayacağını da test eder.
Bir Lighthouse raporunu JSON olarak indirebilir veya Lighthouse Chrome uzantısını kullanıyorsanız raporu GitHub Gist olarak paylaşabilirsiniz: Paylaş düğmesini tıklayın, Görüntüleyicide aç'ı seçin, ardından yeni pencerede tekrar Paylaş düğmesini tıklayın ve Gist olarak kaydet'i seçin.
Gerçek dünyadaki performansı izlemek için analizleri, etkinlik izlemeyi ve işletme metriklerini kullanın
Mümkünse değişiklikleri uygulamadan önce analiz verilerinin kaydını tutun: Hemen çıkma oranları, sayfadaki süre, çıkış sayfaları gibi işletmenizin şartlarıyla alakalı tüm verileri kaydedin.
Mümkünse etkilenebilecek işletme ve teknik metrikleri kaydedin. Böylece, değişiklikleri yaptıktan sonra sonuçları karşılaştırabilirsiniz. Örneğin, bir e-ticaret sitesi dakikadaki sipariş sayısını izleyebilir veya stres ve dayanıklılık testi için istatistikleri kaydedebilir. Sayfa ağırlığını ve kaynak isteklerini azaltırsanız arka uç depolama alanı maliyetleri, CPU gereksinimleri, yayınlama maliyetleri ve esneklik büyük olasılıkla iyileşir.
Analizler henüz uygulanmadıysa, şimdi tam zamanı. Sitenizin çalışıp çalışmayacağına karar verirken son kararı işletme metrikleri ve analizleridir. Uygunsa düğme tıklamaları ve video oynatmaları gibi kullanıcı işlemleri için etkinlik izleme özelliğini kullanın. Ayrıca, kullanıcılarınızın "dönüşümler"e doğru ilerlediği yolları gösteren hedef akışı analizini de uygulayabilirsiniz.
Performans metriklerinin işletme metrikleriyle nasıl ilişkili olduğunu kontrol etmek için Google Analytics Site Hızı'na göz atabilirsiniz. Örneğin: "Ana sayfa ne kadar hızlı yüklendi?" ile "Ana sayfa üzerinden giriş satışla sonuçlandı mı?"
Google Analytics, Gezinme Timing API'den gelen verileri kullanır.
JavaScript performans API'lerinden birini veya kendi metriklerinizi kullanarak veri kaydetmek isteyebilirsiniz. Örneğin:
const subscribeBtn = document.querySelector('#subscribe');
subscribeBtn.addEventListener('click', (event) => {
// Event listener logic goes here...
const lag = performance.now() - event.timeStamp;
if (lag > 100) {
ga('send', 'event', {
eventCategory: 'Performance Metric'
eventAction: 'input-latency',
eventLabel: '#subscribe:click',
eventValue: Math.round(lag),
nonInteraction: true,
});
}
});
Tarayıcı desteğinin sonlandırılmasına ve müdahale uyarılarına bakmak için ReportingObserver'ı da kullanabilirsiniz. Bu, gerçek kullanıcılardan gerçek zamanlı ölçümler almak için kullanılan birçok API'den biridir.
Gerçek deneyim: ekran ve video kaydı
Mobil ve masaüstü cihazlarda sayfa yükleme işlemini video olarak kaydedin. Bu yöntem, yüksek kare hızlarında ve zamanlayıcı ekranı eklerseniz daha da iyi sonuç verir.
Ekran video kayıtlarını da kaydetmek isteyebilirsiniz. Android, iOS ve masaüstü platformları için birçok ekran kaydı uygulaması (ve aynı işlemi yapan komut dosyaları) vardır.
Sayfa yükleme işlemini video olarak kaydetme özelliği, WebPagetest'teki film şeridi görünümüne veya Chrome Geliştirici Araçları'ndaki Ekran Görüntüsü Alma'ya benzer şekilde çalışır. Sayfa bileşeni yükleme hızının gerçek zamanlı kaydını alırsınız: Hızlı ve yavaş olan bileşenler. Video kayıtlarını ve ekran video kayıtlarını daha sonra yapılan iyileştirmelerle karşılaştırmak için kaydedin.
Yan yana önce ve sonra karşılaştırması, iyileştirmeleri göstermenin mükemmel bir yolu olabilir.
Başka bir konu var mı?
Gerekirse bir Web Bloat Puanı alın. Bu eğlenceli bir testtir ancak kod şişmesini göstermenin veya iyileştirme yaptığınızı göstermenin ilgi çekici bir yolu da olabilir.
Aşağıda gösterilen Sitemin Maliyeti Ne? başlıklı makalede, sitenizi farklı bölgelerde yüklemenin mali maliyeti hakkında genel bilgi verilmektedir.
Bağımsız ve online olarak kullanılabilen birçok araç vardır: perf.rocks/tools adresine göz atın.