Düşük veri maliyetine sahip, 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ç | Neden mi? | 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ı/rotaları ve öğeleri için HTTPS uygulanmış olmalıdır. |
| Yükleme performansını artırma | Yüklenmesi üç saniyeden uzun süren sitelerden kullanıcıların% 53'ü ayrılıyor | 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ı azaltma | • 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ığı bütçesi ayarlayın: Örneğin, ilk yükleme 400 KB'tan az olmalıdır. Ağır JavaScript olup olmadığını kontrol edin. Fazladan yer kaplayan resimleri, medyayı, HTML'yi, CSS'yi 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 azaltma | • 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. | Ağır 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 kaldırılabilecek kitaplıkları arayın. |
Web sitelerini denetlemek için çok çeşitli araç 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 ilk adımı, tarayıcınızın ağ araçlarını kullanarak sayfaları kontrol etmektir. Bu işlemi nasıl yapacağınızdan emin değilseniz Chrome Geliştirici Araçları ağ paneli Başlangıç Kılavuzu'nu inceleyin. Firefox, Safari, Internet Explorer ve Edge için de benzer araçlar mevcuttur.
Değişiklik yapmadan önce sonuçları kaydetmeyi unutmayın. Ağ istekleri için bu işlem 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:
- 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 profilleme ç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 olan JavaScript dosyaları (ör. 100 KB'ın üzerinde).
- Kullanılmayan JavaScript. Chrome kapsama aracını kullanarak kontrol edebilirsiniz.
- Resim dosyalarının toplam sayısı ve ağırlığı.
- Özellikle büyük olan tek resim dosyaları.
- Resim biçimleri: JPEG veya SVG olabilecek PNG'ler var mı? WebP, yedeklerle birlikte mi kullanılıyor?
- Duyarlı resim tekniklerinin (ör. srcset) 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 özelliğini kullanarak gerçek donanımda 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 dakikada alınan 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.
Analizleri henüz uygulamadıysanız şimdi tam zamanı. İşletme metrikleri ve analizleri, sitenizin işe yarayıp yaramadığının nihai belirleyicisidir. Uygun durumlarda, düğme tıklamaları ve video oynatmalar gibi kullanıcı işlemleri için etkinlik izlemeyi dahil edin. 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, Navigation Timing API'deki 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ı
Sayfanın mobil cihazda ve masaüstünde yüklenmesini videoya kaydedin. Bu yöntem, yüksek kare hızlarında ve zamanlayıcı ekranı eklerseniz daha da iyi sonuç verir.
Ekran kayıtlarını da kaydedebilirsiniz. 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. Daha sonra yapılan iyileştirmelerle karşılaştırmak için video kayıtlarını ve ekran kayıtlarını 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 Web Bloat Score (Web Sıkıştırma 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? sayfasında, sitenizin farklı bölgelerde yüklenmesinin mali maliyeti hakkında kabaca bilgi verilmektedir.
Bağımsız ve online olarak kullanılabilen birçok araç vardır: perf.rocks/tools adresine göz atın.