Lighthouse ve Chrome Geliştirici Araçları ile performans dedektifliği becerilerinizi geliştirin.
Geliştirici olarak, genellikle sitenizin hangi üçüncü taraf komut dosyalarını yükleyeceğini kontrol edemezsiniz. Üçüncü taraf içeriğini optimize etmeden önce, sitenizi yavaşlatan şeyin ne olduğunu bulmak için biraz araştırma yapmanız gerekir. 🕵️
Bu yayında, yavaş üçüncü taraf kaynaklarını belirlemek için Lighthouse ve Chrome Geliştirici Araçları'nı nasıl kullanacağınızı öğreneceksiniz. Bu gönderide, bir arada en iyi şekilde kullanılacak, gittikçe güçlenen teknikler adım adım açıklanmıştır.
Yalnızca 5 dakikanız varsa
Lighthouse Performans denetimi, sayfa yüklemeyi hızlandırma fırsatlarını keşfetmenize yardımcı olur. Yavaş üçüncü taraf komut dosyalarının, JavaScript yürütme süresini azaltın ve Çok büyük ağ yüklerini önleme denetimlerinin altındaki Teşhis bölümünde görünmesi olasıdır.
Denetleme yapmak için:
- Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Mobil'i tıklayın.
- Performans onay kutusunu seçin. (Denetimler bölümündeki geri kalan onay kutularının işaretlerini kaldırabilirsiniz.)
- Simulated Fast 3G, 4x CPU Slowdown'u (Hızlı 3G, 4x CPU Yavaşlaması) tıklayın.
- Depolama Alanını Temizle onay kutusunu seçin.
- Denetimleri çalıştır'ı tıklayın.
Üçüncü taraf kullanımı
Lighthouse Üçüncü taraf kullanımı denetimi, bir sayfanın kullandığı üçüncü taraf sağlayıcıların listesini gösterir. Bu genel bakış, genel durumu daha iyi anlamanıza ve gereksiz üçüncü taraf kodunu belirlemenize yardımcı olabilir. Denetim Lighthouse uzantısında bulunmaktadır ve yakında Chrome 77'de Geliştirici Araçları'na eklenecektir.
JavaScript yürütme süresini azaltın
Lighthouse JavaScript yürütme süresini azaltma denetimi, ayrıştırması, derlemesi veya değerlendirmesi uzun süren komut dosyalarını vurgular. CPU yoğun üçüncü taraf komut dosyalarını keşfetmek için 3. taraf kaynaklarını göster onay kutusunu seçin.
Çok büyük ağ yüklerinden kaçının
Lighthouse Çok büyük ağ yüklerinden kaçının denetimi, üçüncü taraflardan gelenler de dahil olmak üzere sayfa yükleme süresini yavaşlatabilecek ağ isteklerini tanımlar. Ağ yükünüz 4.000 KB'ı aştığında denetim başarısız olur.
Chrome Geliştirici Araçları'nda ağ isteklerini engelleme
Chrome Geliştirici Araçları ağ isteğini engelleme, belirli bir komut dosyası, stil sayfası veya başka bir kaynak kullanılamadığında sayfanızın nasıl davrandığını görmenize olanak tanır. Performansı etkilediğinden şüphelendiğiniz üçüncü taraf komut dosyalarını tanımladıktan sonra, bu komut dosyalarına yapılan istekleri engelleyerek yükleme sürenizin nasıl değiştiğini ölçün.
İstek engellemeyi etkinleştirmek için: 1. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın. 1. Ağ sekmesini tıklayın. 1. Ağ panelindeki herhangi bir isteği sağ tıklayın. 1. İstek URL'sini engelle'yi seçin.
Geliştirici Araçları çekmecesinde Engelleme isteğinde bulun sekmesi görünür. Hangi isteklerin engellendiğini buradan yönetebilirsiniz.
Üçüncü taraf komut dosyalarının etkisini ölçmek için:
- Ağ panelini kullanarak sayfanızın ne kadar sürede yüklendiğini ölçün. Gerçek dünya koşullarını emüle etmek için ağ sınırlama ve CPU kısıtlama'yı etkinleştirin. (Daha hızlı bağlantılar ve masaüstü donanımlarında, pahalı komut dosyalarının etkisi bir cep telefonundaki kadar etkili olmayabilir.)
- Sorun olduğunu düşündüğünüz üçüncü taraf komut dosyalarından sorumlu URL'leri veya alanları engelleyin.
- Sayfayı yeniden yükleyin ve engellenen üçüncü taraf komut dosyaları olmadan yükleme süresini tekrar ölçün.
Bu durumda bir hız artışı görebilirsiniz ancak ara sıra üçüncü taraf komut dosyalarını engellemek beklediğiniz etkiyi yaratmayabilir. Bu durumda, yavaşlığa neden olan URL'yi ayırana kadar engellenen URL'lerin listesini azaltın.
Üç veya daha fazla ölçüm çalıştırmanın ve ortanca değerlere bakmanın, muhtemelen daha istikrarlı sonuçlar oluşturacağını unutmayın. Üçüncü taraf içerik, zaman zaman sayfa yükleme başına farklı kaynaklar alabildiğinden, bu yaklaşım size daha gerçekçi bir tahmin sağlayabilir. Geliştirici Araçları artık Performans panelinde birden fazla kaydı desteklediği için bu işlem biraz daha kolay hale gelir.