Günlük hayatın vazgeçilmezi haline gelen internet birçok yönden hayatı kolaylaştırmakta olduğu gibi yanında hataları da getiriyor. defer parsing of JavaScript çözümü ile ilgili içeriğimizde sorunu çözmeniz için gayret göstereceğiz.
Haberleri takip etmek, sosyal medyayı kullanmak ya da alışveriş yapmak gibi ihtiyaçların karşılanmasını en düşük enerjiyle gerçekleştirmemize olanak sağlayan bu araç, zaman zaman kullanıcılara zorluklar da yaşatabilir. İnternet kullanıcılarının en çok karşılaştığı sorunlardan biri ise herhangi bir internet sayfasını açmak isterken sayfanın tarayıcıya geç yüklenmesidir.
Bu hem kullanıcıları hem de web site sahiplerini rahatsız eden bir problemdir. Eğer siz de böyle bir sorun ile karşı karşıyaysanız, gelin defer parsing of JavaScript çözümünü birlikte detaylı bir şekilde inceleyelim.
Defer Parsing of JavaScript Çözümü Ne İçin Uygulanır?
İnternet sayfalarının geç açılmasının sebebi aslında oldukça basit; JavaScript kodlarının sayfa hızına olumsuz etki etmesi. Herhangi bir web siteye giriş yapmak istediğinizde JavaScript uygulaması sayfada yer alan Script etiketlerini ayrıştırmaya başlar ve bu da sizin ekran başında beklemenize sebep olur.
Script miktarı arttıkça bekleme süresi de doğru orantılı olarak artar. Bunun için ise defer parsing of JavaScript çözümünü uygulamak, bir diğer deyişle JavaScript’te gerçekleşen bu ayrıştırmayı ertelemek, mevcut sorunu ortadan kaldırmak için yeterli bir çözüm olacaktır. Fakat bu işlem her web site için uygun ya da gerekli değildir. Eğer siz de web sitenize böyle bir işlem uygulayıp uygulamamanız gerektiğini analiz etmek istiyorsanız, GTMetrix ya da benzeri araçlar ile birlikte sayfa hızınızı ölçerek sonrasında kararınızı verebilirsiniz.
Defer Parsing of JavaScript Çözümü Nedir?
Defer Parsing of JavaScript, Türkçe ismi ile JavaScript ayrıştırmasını ertelemek için yapmanız gereken şey; kullanılan JavaScript miktarını en aza indirmek ya da sayfa yüklenirken uygulamanın açılışını engellemektir. Bunun için de kod içerisine “Defer” isimli etiketi yerleştirmeniz gerekir. Bu işlemi gerçekleştirdiğinizde JavaScript’te bulunan dosyalar sonradan açılır ve sitenin açılış hızını düşürmez. Fakat bu çözümü uygularken dikkat edilmesi gereken nokta web sitesinin yapısıdır. Eğer web siteniz açılırken karşınıza “yükleniyor” imgesi çıksın istiyorsanız defer etiketini kullanamazsınız.
Defer etiketi sayesinde ayrıştırmayı ertelemenin dışında bu problem için farklı yöntemler de bulunmaktadır. Örneğin, “Script Async” niteliğini kullanarak web sitenizi ziyaret eden kişilerin yükünü sayfa açılışı sırasında erteleyebilir, tarayıcı farklı bir işlemle meşgulken daha uygun bir zamanda işleme koyabilirsiniz.
Yukarıdaki yöntemlere ek olarak defer parsing of JavaScript çözümü için mobil uygulama oluştururken de işlem uygulayabilirsiniz. Bunun için JavaScript’te yer alan değişmezler üzerine kod depolayarak yorumlardaki kod yükünü azaltabilirsiniz. Böylece, web sitenizde bulunan JavaScript yalnızca gerekli zamanlarda kullanılır, erken yüklendiği halde doğru zamana kadar ayrıştırma gerçekleştirmez. Unutmamalısınız ki tüm bu seçenekleri uygularken yapılan küçük bir hata, doğru sonuca ulaşmanızı engelleyebilir. Bu yüzden uygulamak istediğiniz işlem ne olursa olsun, ilk yapmanız gereken şey web sitenizi yedeklemek olmalıdır. Böylece herhangi bir hatayla karşı karşıya kaldığınızda veri kaybına uğramaz, güvenli bir şekilde işlemleri tekrar deneyebilirsiniz.
Lütfen yaptığınız işlemlerden önce veritabanı yedeğinizi aldığınıza emin olun.
JavaScript’i ayrıştırmasını ertelemek için aşağıdaki kodu kullanmanız gerekir. Bu kodu
</body>etiketinin hemen öncesindeki HTML satırına ekleyin . Bu komut dosyasını kullanmak için aşağıdaki talimatları okuyun.
<script type="text/javascript"> function parseJSAtOnload() { var element = document.createElement("script"); element.src = "ornek.js"; document.body.appendChild(element); } if (window.addEventListener) window.addEventListener("load", parseJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", parseJSAtOnload); else window.onload = parseJSAtOnload; </script>
Yukarıda da bahsettiğimiz gibi web sitenizin kodları üzerinde herhangi bir değişiklik yapmadan hemen önce tam bir yedek almayı unutmayın. Aksi bir durum söz konusu olursa yedeğinizi tekrar kullanın.
- Yukarıdaki kodu kopyalayın ve </body> etiketinizin hemen öncesine yapıştırın.
- Yukarıda yazılı element.src = ile başlayan satır kodunu bulun. “ornek.js”; içeriğini, ertelenecek olan JavaScript bağlantısı ile değiştirin. JavaScript bağlantısını Google PageSpeed aracının ertelemeyi önerdiği kodlar ile çalışın.
- Değişiklikleri kaydedin.
- Son olarak, etkisini görmek için web sitesini tekrar test edin.
Bir Seferde Birden Fazla JavaScript Kodunu Erteleyin
Tek seferde birden fazla JavaScript kodunu ertelemek isterseniz yukarıdaki kodlarımızda ufak değişiklikler yapabiliriz. Aşağıda yazılı kodumuzdaki ornek1.js, ornek2.js, ornek3.js ve buna benzer, yerine ertelemek istediğiniz komut dosyalarının bağlantılarını direkt olarak yazabilirsiniz.
İşte o kod;
< script type="text/javascript"> function parseJSAtOnload() { var links = ["ornek1.js", "ornek2.js", "ornek3.js"], headElement = document.getElementsByTagName("head")[0], linkElement, i; for (i = 0; i < links.length; i++) { linkElement = document.createElement("script"); linkElement.src = links[i]; headElement.appendChild(linkElement); } } if (window.addEventListener) window.addEventListener("load", parseJSAtOnload, false); else if (window.attachEvent) window.attachEvent("onload", parseJSAtOnload); else window.onload = parseJSAtOnload; </script >
WordPress Defer Parsing of JavaScript Çözümü
Aşağıdaki yöntemler sayesinde de JavaScript dosyalarınızı WordPress’te ayrıştırmasını ertelemeniz mümkündür.
WordPress eklentileri sayesinde bu işlemi gerçekleştirmek mümkün,
Yukarıda belirtilen kodları kullanma (bu yöntemde eklenti kullanılmaz) eklenti kullanmak istemiyorsanız bu husus da sizin için geçerli.
Function.php dosyasına birkaç kod parçacığı eklemek. Bu işlem de WordPress’te kodlar ile oynamaya ve dosyaları düzenlemeye alışkın olan kişiler için uygun.
WordPresste JavaScript Ayrıştırılmasını Erteleyen Eklentiler
WordPress hepimiz için elbette büyük kolaylık. Özellikle eklentiler sayesinde kodlama bilmeden bile bazı sorunların çözümlerine ulaşmamız mümkün oluyor. Sizlere bu alt başlığımızda, özellikleri ve işlevleri ile tüm eklentiler arasında öne çıkan üç hız makinesini listeliyoruz.
- Autoptimize
- Speed Booster Pack
- W3 Total Cache
Autoptimize Eklentisi
- WordPress kontrol panelinize gidin. Eklentiler > Yeni Ekle sekmesine tıklayın. [Eklentiyi İndir]
- Bu sekmede WordPress eklenti deposunun sağ üstündeki arama alanına Autoptimize yazın.
- Eklentiyi etkinleştirin.
- WP Kontrol paneli > Autoptimize sekmesine ilerleyin.
- Aşağıdaki gibi bir ekran göreceksiniz. Aşağıdaki ekran görüntüsünde gösterildiği gibi seçenekleri işaretleyin.
- Değişiklikleri kaydet butonuna tıklayın ve bitirin.
Not: Ayrıca, herhangi bir JavaScript’i Autoptimize’den hariç tutabilirsiniz.
Speed Booster Pack Eklentisi
Bu, WordPress’teki optimizasyon eklentilerinin arasında en iyilerinden birisi sayılır. [Eklentiyi İndir]
- WordPress Kontrol Paneli> Eklentiler> Yeni Ekle’ye gidin.
- WordPress eklenti deposunda Speed Booster Pack’i arayın.
- Speed Booster Pack’i kurun ve etkinleştirin.
- WordPress Kontrol Paneli > Speed Booster Pack‘a gidin. Aşağıdaki gibi ekrana yönlendirileceksiniz.
- Aşağıdaki resimde gösterildiği gibi seçenekleri seçin. (Bu özelliğin web sitenizi bozma olasılığı ÇOK yüksektir! Dikkatli olmayı unutmayın. Bu ayarı etkinleştirdikten sonra web sitenizi test edin.)
- Değişiklikleri Kaydet’i tıklayın.
W3 Total Cache
Evet, WordPress’deki diğer optimizasyon eklentisinden diğeri ile karşınızdayız. Bu sorun için W3 Total Cache eklentisini de kullanabilirsiniz. W3 Total Cache, en popüler önbellek eklentilerinden biridir. [Eklentiyi İndir]
Bu eklentiyi yüklemiş olabilirsiniz. Eğer yüklemedeyiseniz:
- WordPress Kontrol Paneli> Eklentiler> Yeni Ekle’ye gidin.
- WordPress eklenti deposunda W3 Total Cache’yi arayın .
- W3 Total Cache eklentisini yükleyin ve etkinleştirin .
- WP Kontrol Paneli > Performans (W3 Toplam Önbellek Ayarları)> Küçült’e gidin.
- JS küçültme ayarlarına gidin. Aşağıdaki resimde gösterildiği gibi ayarları göreceksiniz.
- Aşağıdaki resimde gösterildiği gibi seçenekleri işaretleyin. İşte, bitirdiniz.
Defer Parsing of JavaScript Çözümünün Etkileri Nelerdir?
Defer parsing of JavaScript çözümü için gerekli adımları uyguladıktan sonra web sitenizde gözlemleyeceğiniz etkiler aslında oldukça net ve basit; sayfa hızınızın yükselmesi. Sonuçtaki iyileşmeyi gözlemlemek için ise ilk başta yaptığınız gibi hazır bir araç sayesinde seo analizi yapabilirsiniz.
Analiz sonucunda karşınıza çıkan sayfa hızı yüzdesi, defer parsing of JavaScript çözümü sayesinde %100’e kadar çıkabilir ve böylece kullanıcılar sayfanızı çok daha kolay bir şekilde ziyaret eder, site trafiğinde gözle görülür değişiklikler kaydedilir, sonuç olarak web siteniz kaliteli bir performans sergileyerek hak ettiği değere kavuşmuş olur.