Kullanılmayan JavaScript'i kaldırın

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

  • JavaScript oluşturmayı engelliyorsa tarayıcının sayfayı oluşturmak için gereken diğer tüm işlemlere devam edebilmesi için komut dosyasını indirmesi, ayrıştırması, derlemesi ve değerlendirmesi gerekir.
  • JavaScript eşzamansız olsa bile (oluşturmayı engellemese) kod, indirilirken bant genişliği için diğer kaynaklarla rekabet eder. Bu durum, performans üzerinde önemli etkilere sahiptir. Kullanılmayan kodun ağ üzerinden gönderilmesi, sınırsız veri planı olmayan mobil kullanıcılar için de israftır.

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

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

Kullanılmayan JavaScript'i kaldırma

Kullanılmayan JavaScript'i algılama

Chrome Geliştirici Araçları'ndaki Kapsam sekmesi, kullanılmayan kodu satır satır olarak ayrıntılı bir şekilde gösterebilir.

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

Kullanılmayan kodları kaldırma desteği için derleme aracı

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

Pakete özel yönergeler

Angular

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

Drupal

Kullanılmayan JavaScript öğelerini kaldırmayı değerlendirin ve yalnızca gerekli Drupal kitaplıklarını alakalı sayfaya veya bir sayfadaki alakalı bileşene ekleyin. Ayrıntılar için Drupal dokümanlarına bakın. Gereksiz JavaScript'ler ilave eden ekli kitaplıkları belirlemek için Chrome Geliştirici Araçları'nda kod kapsamını çalıştırmayı deneyin. Drupal sitenizde JavaScript toplama devre dışı bırakıldığında, sorumlu temayı veya modülü komut dosyasının URL'sinden belirleyebilirsiniz. Listede çok sayıda komut dosyasına sahip olan ve kod kapsamında çok sayıda kırmızı işaret taşıyan temalar veya modüller arayın. Bir tema veya modülün komut dosyası kitaplığını yalnızca sayfada gerçekten kullanıldığı durumlarda eklemeniz gerekir.

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 değerlendirin.

Magento

Magento'nun yerleşik JavaScript gruplama özelliğini devre dışı bırakın.

React

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

Vue

Sunucu tarafında oluşturmuyorsanız ve Vue yönlendiricisini kullanıyorsanız paketleri gecikmeli 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