Düşük veri maliyetiyle yüksek performanslı ve dayanıklı bir site oluşturmak için birkaç temel hedef vardır.
Her hedef için bir denetim yapmanız gerekir.
| Hedef | Neden mi? | Neyi test etmelisiniz? |
|---|---|---|
| Gizlilik, güvenlik 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ış. |
| Yükleme performansını iyileştirme | Kullanıcıların %53'ü, yüklenmesi üç saniyeden uzun süren siteleri terk ediyor. | Eşzamansız olarak yüklenebilecek veya ertelenebilecek JavaScript ve CSS. Etkileşimli olma 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 azaltma • Web uygulaması depolama alanı gereksinimlerini azaltma (özellikle düşük özellikli cihazlara sahip kullanıcılar için önemlidir) • Barındırma ve yayınlama maliyetlerini azaltma • Yayınlama performansını, güvenilirliğini ve dayanıklılığını artırma | Sayfa ağırlığı bütçesi belirleyin: Örneğin, ilk yükleme 400 kB'ın altında olmalıdır. Ağır JavaScript olup olmadığını kontrol edin. Şişirilmiş resimleri, medyaları, HTML, CSS ve JavaScript'i bulmak için dosya boyutlarını kontrol edin. Geç yüklemeye uygun resimleri bulun ve kapsam araçlarıyla kullanılmayan kod olup olmadığını kontrol edin. |
| Kaynak isteklerini azaltma | • Gecikme sorunlarını azaltma • Yayınlama maliyetlerini azaltma • Yayınlama performansını, güvenilirliğini ve esnekliğini artırma | Herhangi bir kaynak türü için aşırı veya gereksiz istekler 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 (veya geç yüklenebilecek) resimler. |
| Bellek kullanımını optimize etme | Özellikle mobil cihazlarda bellek yeni darboğaz haline gelebilir. | 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ıyla kullanılmayan JavaScript ve CSS'leri bulun. Aşırı DOM boyutu ve ilk yüklemede gereksiz yere çalışan komut dosyaları olup olmadığını kontrol edin. Birden fazla sürümde yüklenen JavaScript'leri veya küçük bir yeniden düzenlemeyle önlenebilecek kitaplıkları arayın. |
Web sitelerini denetlemek için kullanabileceğiniz ç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ı
- Analytics
- Sunucular ve işletme sistemleri tarafından sağlanan metrikler
- Ekran ve video kaydı
- Manuel testler
Aşağıda, her denetim türü için hangi yaklaşımın uygun olduğunu öğreneceksiniz.
Kaynak isteklerini kaydetme: Sayı, boyut, tür ve zamanlama
Bir siteyi denetlemeye başlamak için iyi bir yöntem, tarayıcınızın ağ araçlarıyla sayfaları kontrol etmektir. Bunu 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ın kaydını tutmayı unutmayın. Ağ istekleri için ekran görüntüsü almak yeterli 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ı denetlemeye başlamadan ö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. Önbelleğe alma işlemini bir hizmet çalışanı aracılığıyla yapıyorsanız Cache API depolama alanını temizleyin. Tarayıcı önbelleğini devre dışı bırakma veya önceden önbelleğe alınmış girişleri kaldırma konusunda endişelenmenize gerek kalmaması için gizli pencere kullanabilirsiniz.
Tarayıcı araçlarıyla kontrol etmeniz gereken bazı temel özellikler ve metrikler şunlardır:
- Yükleme performansı: Lighthouse, yükleme metriklerinin bir özetini sunar. Addy Osmani, sayfa yükleme için önemli kullanıcı anlarının harika bir özetini yazdı.
- Kaynakları yükleme ve ayrıştırma ile bellek kullanımı için Zaman çizelgesi etkinlikleri. Daha ayrıntılı bilgi edinmek istiyorsanız bellek ve JavaScript profillerini ç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'tan büyük).
- Kullanılmayan JavaScript. Chrome'un kapsam aracını kullanarak kontrol edebilirsiniz.
- Resim dosyalarının toplam sayısı ve ağırlığı.
- Özellikle büyük olan tekil resim dosyaları.
- Resim biçimleri: JPEG veya SVG olabilecek PNG'ler var mı? WebP, yedeklerle birlikte mi kullanılıyor?
- Duyarlı görsel 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 kapsam panelini kullanın.)
- Web yazı tipleri (simge yazı tipleri dahil) gibi diğer öğelerin sorunlu kullanımını kontrol edin.
- Sayfa yüklemeyi engelleyen bir şey olup olmadığını görmek için Geliştirici Araçları zaman çizelgesini kontrol edin.
Hızlı bir kablosuz ağ veya hücresel bağlantı kullanıyorsanız düşük bant genişliği ve yüksek gecikme emülasyonu ile test edin. Masaüstünün yanı sıra mobil cihazlarda da test yapmayı unutmayın. Bazı siteler, farklı cihazlar için farklı öğeler ve düzenler sunmak amacıyla UA algılama özelliğini kullanır. Yalnızca cihaz simülasyonuyla değil, uzaktan hata ayıklama 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 gereksinimlerini kontrol etmenin basit bir yoludur.
İlk ve sonraki yükleme performansını test etme
Lighthouse, WebPagetest ve Pagespeed Insights; hızı, veri maliyetini ve kaynak kullanımını analiz etmek için kullanışlıdır. WebPagetest ayrıca statik içerik önbelleğe alma, ilk bayta kadar geçen süre 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: İndir düğmesini tıklayarak Chrome Geliştirici Araçları Denetim panelindeki raporları kaydedin:
Temel Progresif Web Uygulaması (PWA) gereksinimlerini test etme
Lighthouse; güvenlik, işlevsellik, erişilebilirlik, 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ıyla uygulayıp uygulamadığını kontrol eder.
Lighthouse, sitenizin kabul edilebilir bir çevrimdışı deneyim sunup sunamayacağını da test eder.
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 paylaş düğmesini tekrar tıklayın ve Gist olarak kaydet'i seçin.
Gerçek performansı izlemek için analiz, etkinlik izleme ve işletme metriklerini kullanma
Mümkünse değişiklikleri uygulamadan önce analiz verilerinin (hemen çıkma oranları, sayfada geçirilen süre, çıkış sayfaları gibi işletmenizin gereksinimleriyle alakalı her şey) kaydını tutun.
Mümkünse etkilenebilecek işletme ve teknik metriklerini kaydedin. Böylece değişiklik yaptıktan sonra sonuçları karşılaştırabilirsiniz. Örneğin, bir e-ticaret sitesi, dakika başına sipariş sayısını takip edebilir 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 maliyetleri, CPU gereksinimleri, yayınlama maliyetleri ve esneklik muhtemelen iyileşir.
Analizler uygulanmadıysa şimdi tam zamanı. İşletme metrikleri ve analizleri, sitenizin çalışıp çalışmadığına dair nihai kararı verir. Uygunsa düğme tıklamaları ve video oynatmaları gibi kullanıcı işlemleri için etkinlik izleme özelliğini ekleyin. Ayrıca, kullanıcılarınızın "dönüşümlere" doğru ilerlediği yollar olan hedef akışı analizini de uygulamak isteyebilirsiniz.
Performans metriklerinin işletme metrikleriyle nasıl bir ilişki içinde olduğunu kontrol etmek için Google Analytics Site Hızı'nı takip edebilirsiniz. Örneğin: "Ana sayfa ne kadar hızlı yüklendi?" ile "Ana sayfadan giriş yapılması satışla sonuçlandı mı?" sorularını karşılaştırın.
Google Analytics, Navigation Timing API'den alınan verileri kullanır.
JavaScript performans API'lerinden birini veya kendi metriklerinizi kullanarak verileri 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ı ve müdahale uyarılarını kontrol etmek için ReportingObserver'ı da kullanabilirsiniz. Bu, gerçek kullanıcılardan gerçek dünyadaki canlı ölçümleri 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şleminin video kaydını yapın. Bu özellik, yüksek kare hızlarında ve zamanlayıcı ekranı eklediğinizde daha iyi çalışır.
Ekran video kayıtlarını da kaydetmek isteyebilirsiniz. Android, iOS ve masaüstü platformları için birçok ekran videosu kaydetme uygulaması (ve aynı işlemi yapan komut dosyaları) vardır.
Video kaydı sayfa yükleme, WebPagetest'teki film şeridi görünümüne veya Chrome Geliştirici Araçları'ndaki Ekran Görüntüsü Yakala özelliğine benzer şekilde çalışır. Sayfa bileşenlerinin yüklenme hızına dair gerçek bir kayıt elde edersiniz: nelerin hızlı, nelerin yavaş olduğunu görürsünüz. Daha sonraki iyileştirmelerle karşılaştırmak için video kayıtlarını ve ekran video kayıtlarını kaydedin.
Önceki ve sonraki hâlini yan yana karşılaştırmak, iyileştirmeleri göstermenin harika bir yoludur.
Başka bir konu var mı?
Uygunsa Web Bloat Score'u alın. Bu eğlenceli bir testtir ancak kod şişkinliğini göstermek veya iyileştirmeler yaptığınızı göstermek için de etkili bir yöntem olabilir.
Aşağıda gösterilen What Does My Site Cost? (Sitemin Maliyeti Ne Kadar?) aracı, sitenizin farklı bölgelerde yüklenmesinin maliyeti hakkında kabaca bir fikir verir.
Başka birçok bağımsız ve online araç da mevcuttur: perf.rocks/tools adresine göz atın.