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.
Kullanılmayan JavaScript denetimi neden başarısız olur?
Lighthouse, 20 kibibayttan fazla kullanılmayan kod içeren her JavaScript dosyasını işaretler:
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.