Yavaş üçüncü taraf JavaScript'i tanımlama

Lighthouse ve Chrome Geliştirici Araçları ile performans dedektifliği becerilerinizi geliştirin.

Milica Mihajlija
Milica Mihajlija

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.

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:

  1. Geliştirici Araçları'nı açmak için "Control+Shift+J" (veya Mac'te "Command+Option+J") tuşlarına basın.
  2. Lighthouse sekmesini tıklayın.
  3. Mobil'i tıklayın.
  4. Performans onay kutusunu seçin. (Denetimler bölümündeki geri kalan onay kutularının işaretlerini kaldırabilirsiniz.)
  5. Simulated Fast 3G, 4x CPU Slowdown'u (Hızlı 3G, 4x CPU Yavaşlaması) tıklayın.
  6. Depolama Alanını Temizle onay kutusunu seçin.
  7. Denetimleri çalıştır'ı tıklayın.

Chrome DevTools Denetimleri panelinin ekran görüntüsü.

Üçü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.

51 üçüncü tarafın bulunduğunu ve hayali startup'ların listesini gösteren ekran görüntüsü.
Başlangıç oluşturma aracı ile oluşturulan üçüncü taraf sağlayıcı adları. Yaşayan veya ölmüş gerçek startup'larla herhangi bir benzerlik olması tamamen tesadüftür.

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.

"Üçüncü taraf kaynaklarını göster" onay kutusunun işaretli olduğunu gösteren ekran görüntüsü.

Ç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 DevTools "Çok büyük ağ yükünden kaçının" denetiminin ekran görüntüsü.

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. sekmesini tıklayın. 1. panelindeki herhangi bir isteği sağ tıklayın. 1. İstek URL'sini engelle'yi seçin.

Chrome Geliştirici Araçları Performans panelindeki içerik menüsünün ekran görüntüsü. "İstek URL'sini engelle" seçeneği vurgulanmış.

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:

  1. 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.)
  2. Sorun olduğunu düşündüğünüz üçüncü taraf komut dosyalarından sorumlu URL'leri veya alanları engelleyin.
  3. 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.