Lighthouse ve Chrome Geliştirici Araçları ile performans dedektifi becerilerinizi geliştirin.
Geliştirici olarak, sitenizin yüklediği üçüncü taraf komut dosyaları üzerinde genellikle kontrol sahibi değilsinizdir. Üçüncü taraf içeriğini optimize etmeden önce, sitenizi yavaşlatan unsurları bulmak için biraz dedektiflik 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 yayında, birlikte kullanıldığında en iyi performansı gösteren, giderek daha güçlü teknikler ele alınmaktadır.
Yalnızca 5 dakikanız varsa
Lighthouse Performans denetimi, sayfa yüklemelerini hızlandırma fırsatlarını keşfetmenize yardımcı olur. Yavaş üçüncü taraf komut dosyaları, JavaScript yürütme süresini kısaltın ve Devasa ağ yüklerinden kaçının denetimlerinin altındaki Teşhis bölümünde görünebilir.
Denetim çalıştırmak için:
- Geliştirici Araçları'nı açmak için "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+Option+J") tuşlarına basın.
- Lighthouse sekmesini tıklayın.
- Mobil'i tıklayın.
- Performans onay kutusunu işaretleyin. (Denetim bölümündeki diğer onay kutularının işaretini kaldırabilirsiniz.)
- Simüle Edilen Hızlı 3G, 4x CPU Yavaşlatma'yı tıklayın.
- Depolama alanını temizle onay kutusunu işaretleyin.
- 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ış, büyük resmi daha iyi anlamanıza ve gereksiz üçüncü taraf kodunu belirlemenize yardımcı olabilir. Denetim, Lighthouse uzantısında kullanılabilir ve yakında Chrome 77'deki Geliştirici Araçları'na eklenecektir.
JavaScript yürütme süresini kısaltma
Lighthouse JavaScript yürütme süresini kısaltın denetimi, ayrıştırması, derlenmesi veya değerlendirilmesi uzun süren komut dosyalarını vurgular. CPU'ya yoğun üçüncü taraf komut dosyalarını keşfetmek için Üçüncü taraf kaynaklarını göster onay kutusunu işaretleyin.
Çok büyük ağ yüklerinden kaçının
Lighthouse'ın Çok büyük ağ yüklerinden kaçının denetimi, sayfa yüklenme süresini yavaşlatabilecek ağ isteklerini (üçüncü taraflardan gelenler dahil) tanımlar. Ağ yükünüzün boyutu 4.000 KB'yı 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ği engelleme özelliği, belirli bir komut dosyası, stil sayfası veya başka bir kaynak kullanılamadığında sayfanızı nasıl davrandığını görmenizi sağlar. Performansı etkilediğinden şüphelendiğiniz üçüncü taraf komut dosyalarını belirledikten sonra, bu komut dosyalarına yönelik 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 "Kontrol+Üst Karakter+J" (veya Mac'te "Komut+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.
DevTools çekmecesinde bir İstek engelleme sekmesi görünür. Buradan hangi isteklerin engellendiğini 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ı taklit etmek için ağ sınırlamasını ve CPU sınırlamasını etkinleştirin. (Daha hızlı bağlantılarda ve masaüstü donanımlarında pahalı komut dosyalarının etkisi, cep telefonundaki kadar temsili 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üklemenin ne kadar sürdüğünü yeniden ölçün.
Hızda bir iyileşme görebilirsiniz ancak üçüncü taraf komut dosyalarının engellenmesi bazen beklediğiniz etkiyi göstermeyebilir. Bu durumda, yavaşlığa neden olan URL'yi tespit edene kadar engellenen URL'lerin listesini azaltın.
Üç veya daha fazla ölçüm çalıştırması yapmanın ve ortanca değerlere bakmanın muhtemelen daha kararlı sonuçlar vereceğini unutmayın. Üçüncü taraf içerikleri bazen sayfa yükleme başına farklı kaynaklar çekebileceğinden bu yaklaşım size daha gerçekçi bir tahmin verebilir. Geliştirici Araçları artık Performans panelinde birden fazla kaydı destekliyor. Bu sayede, bu işlemi biraz daha kolay hale getirebilirsiniz.