Kullanılmayan JavaScript'i kaldırın

Kullanılmayan JavaScript sayfanızın yükleme hızını yavaşlatabilir:

  • JavaScript oluşturmayı engelliyorsa tarayıcının, sayfayı oluşturmak için gereken diğer tüm çalışmalarla devam edebilmesi için komut dosyasını indirmesi, ayrıştırması, derlemesi ve değerlendirmesi gerekir.
  • JavaScript eşzamansız olsa (oluşturmayı engellemese) bile kod, indirme sırasında diğer kaynaklarla bant genişliği için rekabet eder. Bu da performans üzerinde önemli sonuçlara yol açar. Kullanılmayan kodları ağ üzerinden göndermek de sınırsız veri planı olmayan mobil kullanıcılar için israf yaratır.

Kullanılmayan JavaScript denetimi nasıl başarısız oluyor?

Lighthouse, 20 kibibayttan fazla kullanılmayan kod bulunan her JavaScript dosyasını işaretler:

Denetimin ekran görüntüsü.
Komut dosyasının kaynak kodunu yeni bir sekmede açmak için URL sütunundaki bir değeri tıklayın.

Kullanılmayan JavaScript kodları kaldırma

Kullanılmayan JavaScript kodları tespit edin

Chrome Geliştirici Araçları'ndaki Kapsam sekmesi, kullanılmayan kodların satır satır dökümünü sağlayabilir.

Puppeteer'daki Coverage sınıfı, kullanılmayan kodları tespit etme ve kullanılan kodları ayıklama sürecini otomatikleştirmenize yardımcı olabilir.

Kullanılmayan kodları kaldırma desteği için geliştirme aracı

Paketleyicinizin kullanılmayan kodları önlemeyi veya kaldırmayı kolaylaştıran özellikleri destekleyip desteklemediğini öğrenmek için aşağıdaki Tooling.Report testlerine göz atın:

Yığına özel rehberlik

Angular

Angular KSA kullanıyorsanız paketlerinizi incelemek için üretim derlemenize kaynak eşlemelerini ekleyin.

Drupal

Kullanılmayan JavaScript öğelerini kaldırmayı ve gerekli Drupal kitaplıklarını yalnızca alakalı sayfaya veya bir sayfadaki alakalı bileşene eklemeyi düşünün. Ayrıntılar için Kitaplık tanımlama bölümüne bakın.

Joomla

Sayfanızda kullanılmayan JavaScript'ler yükleyen Joomla uzantılarının sayısını azaltmayı veya bu uzantıları değiştirmeyi düşünün.

Magento

Magento'nun yerleşik JavaScript paketlemesini devre dışı bırakın.

Tepki ver

Sunucu tarafında oluşturmuyorsanız JavaScript paketlerinizi React.lazy() ile bölün. Aksi halde, loadable-components gibi bir üçüncü taraf kitaplığı kullanarak kodu bölün.

Vue

Sunucu tarafında oluşturmuyor ve Vue yönlendirici kullanmıyorsanız paketleri geç yükleme rotalarına göre bölün.

WordPress

Sayfanızda kullanılmayan JavaScript'ler yükleyen WordPress eklentilerinin sayısını azaltmayı veya değiştirmeyi düşünün.

Kaynaklar