Kullanılmayan JavaScript'i Azaltarak WordPress sitenizi hızlandırın

Yayınlanan: 2022-08-03

Bu makalede, kullanılmayan JavaScript'i nasıl azaltabileceğinizi öğreneceğiz, bu da sonunda sitenin daha hızlı yüklenmesine yardımcı olacaktır.

Kullanılmayan JavaScript söz konusu olduğunda işler basittir: Web siteniz ne kadar gereksiz kod içeriyorsa, sitenin yüklenmesi o kadar uzun sürer. Hiç kimse yavaş site performansını ve bunun sonraki yansımalarını yaşamaktan hoşlanmaz, bu nedenle, kullanılmayan JavaScript dosyalarının web sitelerinden nasıl belirleneceğini ve bunlardan nasıl kurtulacağını anlamak çok önemlidir.

İçindekiler

JavaScript nedir?

JavaScript, dinamik olarak güncellenen içerik oluşturma ve multimedya yönetimi de dahil olmak üzere hemen hemen her şeyi yapmanızı sağlayan bir programlama dilidir. Birkaç satır JavaScript koduyla (belki de her şeyi değil) neler başarabileceğiniz dikkat çekicidir.

JavaScript, Document Object Model API aracılığıyla, bir kullanıcı deneyimini yenilemek için HTML ve CSS'yi dinamik olarak düzenlemek için sıklıkla kullanılır. Web sayfanızın kodunun genellikle sayfada göründüğü sırayla yüklendiğini ve çalıştığını unutmayın. JavaScript, değiştirilmesi gereken HTML ve CSS'den önce yüklenir ve çalıştırılırsa, hatalar meydana gelebilir.

Kullanılmayan JavaScript nedir?

Kullanılmayan JavaScript dosyaları, sayfanın birincil içeriğini oluşturmak veya yüklemek ve göstermek için gerekli olmayan kaynaklardır.

İlk sunulması gereken materyale veya "ekranın üst kısmı" olarak bilinen içeriğe ait değillerdir. Sayfa yüklemesini hızlandırmak için yalnızca gerekli kaynaklar, çoğunlukla HTML kodu, tarayıcı tarafından analiz edilmeli ve oluşturulmalıdır.

Hala kodda olmalarına rağmen, artık kullanılmamaktadırlar. Hiçbir işe yaramıyorlar.

JavaScript Kullanımını Neden Azaltmalısınız?

Web sitenizin verimliliği ve kullanıcı deneyimi, kullanılmayan JavaScript dosyalarından önemli ölçüde etkilenebilir. Önemli Web Verileri ölçümlerinden biri olan İlk Giriş Gecikmesi (FID), söz konusu ana göstergedir.

İlk Giriş Gecikmesi (FID), bir sayfanın yanıt verme hızını kullanıcı etkileşimini hesaba katarak ölçtüğü için yalnızca sahada hesaplanabilir.

Kullanıcı etkileşimine dayalı olarak sayfanın etkileşimini ölçen Lighthouse istatistiği olarak Toplam Engelleme Süresi (TBT), FID'nin yerini aldı.

Kullanılmayan JavaScript Türleri

Aşağıdaki iki kullanılmayan JavaScript biçimi şunlardır:

  • Kritik olmayan JavaScript: Başka bir yerde kullanılır ancak sayfanın üst kısmındaki malzeme için kullanılmaz.
  • Ölü JavaScript: Artık kullanımda değil. Artık bağlantılı olmayan veya yalnızca kısa bir süre kullanılmış olan sayfanın önceki yinelemelerinin parçaları olabilir.

Kullanılmayan JavaScript'e Sahip Olmanın Dezavantajları

Kullanılmayan JavaScript, sayfa yükleme süresinde gecikme şeklinde bir web sitesinin performansı üzerinde olumsuz bir etkiye sahiptir. Web sitesinin kullanılabilirliği ve SERP'lerde ne kadar iyi performans gösterdiği, çok önemli bir faktör olan site hızından doğrudan etkilenir. Yavaş yüklenirse, kullanıcıların bir web sitesinden ayrılıp başka bir web sitesini ziyaret etme olasılığı artar; ortaya çıkan hemen çıkma oranı, sitenin arama motoru sonuçlarını düşüren güçlü bir SEO göstergesidir.

Sorun, bir web sitesinin yüklenmesinin gerçekte ne kadar sürdüğünden çok, tüketicilerin bir web sitesinin yüklenmesinin ne kadar sürdüğünü nasıl algıladıklarıyla ilgilidir. Tarayıcılar, kullanılmayan komut dosyaları da dahil olmak üzere her şeyi aynı anda yüklemeye çalıştığından, sitenin ilk başta sitenin kullanılabilir olması için gerekli olan komut dosyalarını yüklediğinden emin olmaya çalışmalısınız, ardından komut dosyalarının geri kalanı yüklenebilir.

Kullanılmayan JavaScript'i azaltmanın faydaları

Tarayıcının üzerinde daha fazla JavaScript kodu bulunan bir sayfayı indirmesi, oluşturması ve yürütmesi o kadar uzun sürer. Ek olarak, kullanılmayan JavaScript bile etkilenir. Tarayıcı, sayfada mevcutsa, onu işlemek için zaman ve kaynak harcamak zorunda kalacaktır. Bu, rutin kod incelemelerine ve optimizasyon çabalarına duyulan ihtiyacın altını çiziyor.

Mobil kullanıcılarınız da kod optimizasyonundan yararlanır. JavaScript'i işlemek için tarayıcıya olan bağımlılığı azaltarak bant genişliği ihtiyacını azaltabilirsiniz. Sayfa yükleme işleminin gereğinden fazla gecikmesini önlemek için, önemli JavaScript'iniz ile gerekli olmayan JavaScript'i ayırt edebilmelisiniz.

Kullanılmayan JavaScript nasıl azaltılır?

Önce GTMetrix kullanarak büyük JavaScript dosyalarını nasıl tanımlayabileceğinizi göreceğiz ve ardından kullanılmayan Javascript'i azaltmanın yollarını tartışacağız.

En büyük JavaScript dosyalarını bulmak için GTMetrix kullanın

En büyük JavaScript dosyalarınızı belirlemek için GTmetrix Şelale grafiğini kullanın.

  • GTMetrix sitesine gidin ve sitenizin URL'sini girin ve Sitenizi Test Edin'e tıklayın.
  • Sonuçlar görüntülendikten sonra Şelale sekmesine tıklayın
  • JS'ye tıklayın ve dosyaları JavaScript dosya boyutunun artan düzeninde görebileceksiniz.

Genellikle, URL, nereden kaynaklandığını ortaya çıkaracaktır. Tüm JavaScript dosyalarınızı görüntülemek için tür filtresini kullanın. Toplam ve kullanılmayan baytları görmek için kullanım görselleştirmesini de görüntüleyebilirsiniz.

JavaScript'i küçült

JavaScript'i küçültmek, kodunuzu gereksiz karakterlerden arındırır. Kaynak kodunuzdaki sorunlu dosyaları bulun ve web sitenize zarar verirse bunları küçültmeden hariç tutun.

Bunu LiteSpeed ​​Cache eklentisini kullanarak kolayca yapabilirsiniz ve WordPress sitelerini CyberPanel kullanarak dağıttığınızda varsayılan olarak kullanılabilir.

  • WordPress kontrol paneline gidin
  • Sol taraftaki menüden LiteSpeed ​​Cache -> Sayfa Optimizasyonu'na tıklayın
  • Üstten JS Ayarları'na tıklayın ve JS Minify'ı açın ve Değişiklikleri Kaydet'e tıklayın . Bu, tüm JavaScript dosyalarınızı ve kodlarınızı küçültür.

Elementor'da kullanılmayan JavaScript'i kaldırın

Widget JS işleyicilerini ve Swiper'ı yalnızca gerçekten kullanıldıklarında dinamik olarak yükleyerek, bu, Elementor'un JavaScript dosyalarını en aza indirir.

  • WordPress kontrol paneline gidin
  • Sol taraftaki menüden Elementor -> Ayarlar'a tıklayın
  • Üst çubuktan Denemeler sekmesine tıklayın ve İyileştirilmiş Varlık Yükleme bölümünün durumunu Etkin'e çevirin
  • Aşağı kaydırın ve Değişiklikleri Kaydet'e tıklayın

Temel Olmayan JavaScript'i erteleyin veya geciktirin

  • WordPress Kontrol Paneli'ne gidin
  • Sol taraftaki menüden Eklentiler -> Yeni Ekle'ye tıklayın
  • Async JavaScript'i arayın. Yükle ve Etkinleştir
  • Sol taraftaki menüden Ayarlar -> Async JavaScript'e gidin
  • Üst çubuktan Ayarlar sekmesinde. Erteleme Uygula'yı tıklayın
  • Aşağı kaydırın ve Değişiklikleri Kaydet'e tıklayın

Varlık boşaltma eklentisi ile kullanılmayan JavaScript'i kaldırın

Belirli dosyaların veya eklentilerin bir web sitesine yüklenmesi gerekmediğinde, Asset CleanUp, gereksiz JavaScript'i devre dışı bırakmanıza izin verir.

  • WordPress kontrol paneline gidin
  • Sol taraftaki menüden Eklentiler -> Yeni Ekle'ye tıklayın
  • Varlık Temizleme'yi arayın. Yükle ve Etkinleştir
  • Sol taraftaki menüden Varlık Temizleme -> Ayarlar'a tıklayın
  • Soldaki menüden Test Moduna tıklayın ve açmak için Test Modunu Etkinleştir seçeneğine tıklayın
  • Aşağı kaydırın ve Tüm Ayarları Güncelle'ye tıklayın
Kullanılmayan JavaScript'i Azaltın
  • Şimdi soldaki menüden JavaScript'i Optimize Et'e tıklayın ve Yüklenen JS'yi Daha Az Dosyada Birleştir'i açın.
  • Aşağı kaydırın ve Tüm Ayarları Güncelle'ye tıklayın

Kullanılmayan eklenti modüllerini devre dışı bırakın

  • WordPress Kontrol Paneli'ne gidin
  • Sol taraftaki menüden Eklentiler -> Yeni Ekle'ye tıklayın
  • RankMath'i arayın . Eklentiyi kurun ve etkinleştirin
  • Sol taraftaki menüden RankMath -> Dashboard'a tıklayın
  • Üst çubuktan Modüller'e tıklayın ve kullanılmayan herhangi bir Modülün geçişini kapatın.

Çözüm

Kullanılmayan JavaScript, tarayıcının anlamsız komut dosyasını indirmesi, ayrıştırması, derlemesi ve değerlendirmesi gerektiğinden web sitenizin yüklenmesinin daha uzun sürmesine neden olur. Daha fazla hücresel veri kullanır ve oluşturma parametresini yavaşlatır. Bu, web sitesinin ne kadar iyi performans gösterdiğini etkiler ve sonunda kullanıcı deneyimini bozar.

Bu nedenle, bu komut dosyalarını en aza indirerek web sitenizin daha hızlı yüklenmesini sağlayabilir ve genel işlevselliğini iyileştirebilirsiniz.