Lighthouse 'reduce unused JavaScript' uyarısını düzeltme

'reduce unused JavaScript' Lighthouse uyarısı nedir?

Lighthouse'daki reduce unused JavaScript uyarısı nedir? Lighthouse, 20kb'den fazla kullanılmayan bayta sahip komut dosyalarını işaretler.

'reduce unused JavaScript' uyarısı Lighthouse puanını doğrudan etkiler.

Kullanılmayan JavaScript, Core Web Vitals'ı geçmek için de oldukça önemlidir çünkü kullanılmayan JavaScript'in bir bedeli vardır! Ağ kaynakları için rekabet edebilir ve ana iş parçacığını engelleyebilir. Bu, Core Web Vitals'ı yavaşlatır, özellikle Largest Contentful Paint (LCP) ve Interaction to Next Paint (INP).

Kullanılmayan JavaScript'e ne sebep olur?

Kullanılmayan JavaScript'in birçok nedeni olabilir. Kullanılmayan JavaScript genellikle şunlardan kaynaklanır:

• CMS'nizde çok fazla  eklenti.
• Ölü kod.
• Kötü kodlama.
• Kısıtlanmamış tag manager erişimi
• Gereksiz import'lar
  
• Hemen yüklenen ancak kullanımdan hemen önce yüklenebilecek kodlar.

'unused JavaScript' pagespeed'i nasıl etkiler

Kullanılmayan JavaScript, Lighthouse metriklerini doğrudan etkiler. Bir web sayfasının oluşturulmasını gereksiz yere karmaşık hale getirir ve yüksek bir Lighthouse puanı almayı neredeyse imkansız kılar. Tarayıcınızın web sayfasını ekranda görüntüleyebilmesi için daha fazla iş yapması gerekir. 

Ancak bir Lighthouse puanının Core Web Vitals puanı olmadığını unutmayın. Core Web Vitals, CrUX verileriyle ölçülür.

Kullanılmayan JavaScript ile ilgili 2 sorun vardır.

• Her şeyden önce bu JavaScript'in indirilmesi gerekir. Bu komut dosyaları ağ kaynakları için rekabet edecektir. Bu, Largest Contentful Paint (LCP) üzerinde büyük bir etkiye sahip olabilir
• İkinci olarak tarayıcının tüm bu JavaScript'i çalıştırması gerekecektir. Tarayıcı bu JavaScript'i çalıştırırken temelde başka hiçbir şey yapmayı bırakır ve kullanıcı girdisine yanıt veremez veya sayfayı ayrıştırmaya devam edemez. Bu hem Largest Contentful Paint (LCP) hem de Interaction to Next Paint (INP) değerlerini etkiler

'unused JavaScript' nasıl bulunur

'unused JavaScript'i bulmak için Lighthouse denetimini okuyabilir veya tüm JavaScript dosyalarının ve kullanılmayan bayt miktarlarının tam listesini almak için 'Chrome Coverage Tool'u kullanabilirsiniz.

Chrome geliştirici araçlarını ctrl-shift-i kısayolu ile açın. Ardından komut menüsünü açmak için ctrl-shift-p kısayolunu kullanın ve 'coverage' yazın. 'Start instrumenting coverage and reload page' seçeneğini seçin. Bu, sayfayı yeniden yükleyecek ve CSS veya JavaScript kodu içeren tüm dosyalar için kullanılmayan bayt miktarını gösterecektir.

'reduce unused JavaScript' nasıl düzeltilir

'reduce unused JavaScript' uyarısını düzeltmek için öncelikle kaynağını izlemeniz gerekir. Lighthouse, hangi komut dosyalarının yüksek miktarda kullanılmayan bayta sahip olduğunu size gösterecektir. 5 olağan şüpheli vardır:

1. Gereksiz veya önemsiz eklentileri kaldırın. WordPress gibi eklenti tabanlı bir CMS kullanıyorsanız, kullanılmayan kodunuzu temizlemenin en kolay ve en etkili yöntemi ihtiyacınız olmayan veya basit bir kod değişikliğiyle kolayca değiştirilebilecek eklentileri kaldırmaktır (örneğin analitik eklentiniz, sohbet eklentiniz, sosyal paylaşım eklentiniz)
   
2. Ölü kodu kaldırın. Ölü kod, mevcut web sitesi tarafından artık kullanılmayan koddur. Yalnızca yer ve bant genişliği kaplar. Bir web siteniz varsa, yılda en az iki kez özel komut dosyalarınıza iyi bir göz attığınız ve artık gerekli olmayan kodları kaldırdığınız bir ölü kod maratonu planlamanızı öneririm.
   
3. Kötü kodlanmış komut dosyalarını yeniden yazın.  Kötü kodlanmış komut dosyaları genellikle çok sayıda gereksiz kontrol ve if/else ifadesi içerir. Bu kontroller hiçbir zaman kullanılmayabilir ve bazı if/else koşulları gerekli olmayabilir. Çok sayıda eski komut dosyanız varsa veya mevcut JavaScript geliştiriceniz öncekinden daha iyiyse, eski komut dosyalarını yeniden gözden geçirmek iyi bir fikir olabilir.
   
4. Tag manager'ınızı temizleyin ve erişimi kısıtlayın. Tag manager, özellikle daha az teknik departmanların etiket eklemesine izin verildiğinde, kullanılmayan kodun yaygın bir kaynağıdır. Çoğu zaman kullanılmayan etiketlerini kaldırmayı unuturlar ve tag manager kullanılmayan JavaScript'in ana kaynağı haline gelir.
5. Gereksiz import'ları kaldırın (NextJS, React, VUE vb). Çoğu SPA ortamı çok fazla bileşen/fonksiyon import eder. Import'larınızı tekrar kontrol edin ve kullanılmayan kodu kaldırın. 
6. Route'ları veya bileşenleri lazy load yapın  (NextJS, React, VUE vb). Lazy loading bileşenleri, bu bileşenleri yalnızca ihtiyaç duyulduğunda import eder. Bu, kullanılmayan kodu lazy load yaptığınız sayfalar için 'unused JavaScript Lighthouse uyarısını' hemen kaldıracaktır.
7. Kritik olmayan komut dosyalarının yüklenmesini erteleyin. Bazen bir komut dosyasına ihtiyacınız vardır (örneğin, bir form göndermek için) ancak hemen ihtiyacınız yoktur. Ve dürüst olalım, ziyaretçilerinizin %98'i zaten kayıt olmayacaktır. Bu yüzden bu komut dosyaları çoğunlukla kullanılmaz. Bu komut dosyasını sayfa yüklemesi sırasında değil, ziyaretçi formla etkileşime geçtiğinde yüklemek daha mantıklı olacaktır.

'reduce unused JavaScript' için geçici çözüm

Bazen tüm kullanılmayan JavaScript uyarılarını düzeltmek mümkün değildir. Bu durumda bu kullanılmayan kaynakların etkisini en aza indirmeyi deneyebilirsiniz

- Tüm JavaScript kaynaklarını ana alan adınızdan yükleyin (bu yeni bir ağ bağlantısını önler)
- Fontlarınız ve LCP görsel öğesi gibi daha önemli kaynakları önceden yükleyin.
- Mümkün olduğunca fazla JavaScript'i erteleyin
- Daha az önemli JavaScript'i sayfanın altına yerleştirin