Javascript'in WordPress'te Ayrıştırılmasını Ertele [Ertele ve Zaman Uyumsuz Kullanarak]

Hızlı yüklenen WordPress siteleri, ziyaretçiler için kullanıcı deneyimini geliştirmek, web sitenizin arama motorlarında görünürlüğünü artırmak ve sitenizin organik trafiğini artırmak söz konusu olduğunda ciddi faydalar sağlar.

Bir web sayfası HTML, CSS, Javascript ve resimler içerir ve sayfa yükleme süresini azaltmak için bunların her birinin optimize edilmesi gerekir. Görüntüler, sayfa boyutu üzerindeki en büyük etkilerden birine sahiptir, bu nedenle, bir WordPress görüntü optimizasyon eklentisi kullanarak görüntü dosyası boyutlarını azaltmak önemlidir.

Sayfa performansını daha da artırmak için WordPress'te javascript'in ayrıştırılmasını erteleyebilirsiniz ; bu, tarayıcılara Javascript yüklenmeden önce sayfa içeriğini ve resimleri yüklemelerini önerebileceğiniz anlamına gelir. Bu önlemin alınması, formlar ve kaydırıcılar gibi Javascript öğelerinin yüklenmesinin fazladan birkaç saniye sürebileceği anlamına gelir, ancak bu, sayfa yükleme süreleri önemli ölçüde iyileştiği için ödenmesi gereken küçük bir bedeldir.

Javascript kodu daha sonra Defer ve Async adlı iki teknik kullanılarak yürütülebilir. Her iki yöntem de popüler WordPress önbellek eklentileri tarafından desteklenir, ancak özel çözümler size daha sonra hangi Javascript dosyalarının yükleneceği konusunda biraz daha fazla kontrol sağlar.

Bu yazıda, Javascript dosyalarının yüklenmesini ertelemenin faydalarını açıklayacağım ve size beş kullanışlı WordPress eklentisi göstereceğim. süreci sizin için basitleştirecektir.

Konuyu tam olarak anlamanız için tüm makaleyi okumanızı tavsiye ederim, ancak yeni başlayan biriyseniz, bu makaleden çıkarmanız gereken tek şey, Erteleme ve Async'in web sitenizin sayfa yükleme sürelerini önemli ölçüde iyileştirebileceğidir.

WordPress'te Javascript Ayrıştırmayı Ertelemenin Farklı Yolları (Defer & Async ile)

Javascript, düğmeler, formlar, medya galerileri, ses, video, geri sayım sayaçları, sosyal medya zaman çizelgeleri ve daha fazlasını görüntülemek için kullanılan WordPress web sitelerinin önemli bir yapı taşı olarak kendini kanıtlamıştır.

Ne yazık ki Javascript, web sayfalarının yavaş yüklenmesinin ana nedenlerinden biridir, çünkü tarayıcının sayfanın HTML işaretlemesini ayrıştırmaya devam edebilmesi için her komut dosyasını durdurması, indirmesi ve yürütmesi gerekir.

Ayrıştırma, tarayıcının sayfanın kodunu analiz edip çalıştırabileceği bir biçime dönüştürdüğü işlemdir. Bu işlemi durduran herhangi bir kod, sayfayı ziyaretçiler için oluşturma sürecini geciktirdiği için "Render-Blocking" olarak adlandırılır.

Oluşturmayı engelleyen kaynaklar, bir WordPress web sitesinin yavaş yüklenmesinin yaygın bir nedenidir. Kritik CSS, oluşturma engellemesini önlemek için satır içinde görüntülenebilir, ancak Javascript kodunun sayfa oluşturmayı engellemesini önlemek için Javascript yüklemesini daha sonra Ertele veya Async kullanarak ertelemek daha iyidir.

Kullanılmayan Javascript kodunu kaldırmak ve Javascript yürütme süresini azaltmak da iyi bir uygulamadır. Bunu yapmanın bir yolu, her bir Javascript dosyasındaki boşlukları ve gereksiz kodları kaldıran Minification adlı bir işlemle büyük Javascript dosyalarının boyutunu azaltmaktır.

Google PageSpeed ​​Insights ve GTmetrix gibi web sitesi kıyaslama hizmetlerinin dikkate aldığı en önemli ölçütlerden biri, ilk içeriğin ziyaretçilere gösterilmesi için geçen süre olan First Contentful Paint'tir. Google, 0 ila 1,8 saniyelik bir FCP süresinin iyi ve 1,8 ila 3 saniyenin orta düzeyde olduğunu belirtir. 3 saniyenin üzerindeki herhangi bir şey yavaş kabul edilir.

Tek yapmanız gereken, sayfanın oluşturulmasını engelleyen Javascript ve CSS dosyalarını görmek için bir sayfanın URL'sini bir web sitesi kıyaslama hizmetine girmektir. Aşağıdaki ekran görüntüsünden görebileceğiniz gibi, oluşturmayı engelleyen CSS ve Javascript dosyalarının indirilmesi saniyeler alabilir, bu nedenle bu kaynakları ortadan kaldırabilirseniz sayfalarınız önemli ölçüde daha hızlı yüklenir.

Oluşturmayı engelleyen Javascript dosyalarını ortadan kaldırmanın en etkili yolu, erteleme ve eşzamansız özniteliklerini kullanmaktır. Bu boole öznitelikleri, harici dosyaları çağırmak için SRC özniteliği kullanıldığında yalnızca komut dosyası HTML öğesiyle kullanılabilir.

 <script src="javascript.js"></script>

 <script defer src="javascript.js"></script>

 <script async src="javascript.js"></script>

HTML komut dosyası öğesine erteleme veya eşzamansız özniteliği eklediğinizde, tarayıcıya, sayfa ayrıştırılırken dosyayı indirmesini tavsiye etmiş olursunuz. Erteleme ile, sayfa tamamen ayrıştırıldıktan sonra dosya yürütülür.

Bunun aksine, async özniteliği, dosyayı indirilir indirilmez yürüten eşzamansız bir işlemdir. Bu nedenle, tarayıcı dosyayı yürütmek için HTML'yi ayrıştırmayı kısa süreliğine durduracağından, bir sayfayı eşzamansız olarak ayrıştırmak için toplam süre biraz daha uzun olacaktır.

Hem erteleme hem de eşzamansız belirtecek olsaydınız, tarayıcılar eşzamansız kullanır.

Anlaşılması gereken önemli bir standart, sıklıkla DOM olarak adlandırılan Belge Nesne Modeli'dir. DOM, XML dosyası veya HTML sayfası gibi bir belgenin tamamını tek bir nesne olarak temsil eder. Baş, gövde ve başlıklar gibi önemli öğeler, DOM'un dalları olarak düşünülebilir.

Bir Javascript dosyası başka bir dosyadan veya DOM'un kendisinden bilgi gerektirmiyorsa, sayfanızın önemli öğeleri daha hızlı görüntüleneceğinden async yöntemini kullanmak faydalı olabilir. Dosya henüz yüklenmemiş bilgiler istiyorsa, zaman uyumsuzluğun web sitenizde hatalara neden olabileceğini unutmayın.

Bir Javascript dosyası bilgi gerektiriyorsa, dosya yürütülmeden önce tüm içeriğin doğru şekilde alınmasını sağladığından erteleme tercih edilen seçenektir.

Erteleme ve zaman uyumsuzluğun amacı, sayfa oluşturmanın engellenmesini azaltmaktır ve hangi yöntemi kullanırsanız kullanın sayfa yükleme sürelerinde önemli bir gelişme göreceksiniz.

Erteleme ve zaman uyumsuzluğun ne zaman kullanılacağına ilişkin daha kapsamlı bir açıklama için Zell Liew'in “Async and Defer özniteliklerinin nasıl ve ne zaman kullanılacağı” başlıklı makalesini okumanızı tavsiye ederim.

Bir WordPress Eklentisi Kullanarak Javascript'in Ayrıştırılmasını Erteleme

Web sitenizdeki Javascript çağrılarının çoğu WordPress temanızdan ve etkinleştirilmiş WordPress eklentilerinden gelir, bu nedenle erteleme ve zaman uyumsuz niteliklerini komut dosyası öğelerine manuel olarak eklemek pratik değildir.

Javascript'in WordPress'te ayrıştırılmasını ertelemek ve web sitenizde erteleme veya zaman uyumsuz uygulama sürecini basitleştirmek için bir performans WordPress eklentisi kullanmak daha iyidir.

Yanlış yapılandırma ayarının web sitenizin tasarımında sorunlara yol açacağını unutmayın. Örneğin, doğru yapılandırma ayarlarını seçmediğiniz veya iletişim formunun dosyalarını optimizasyondan çıkarmadığınız sürece iletişim formları doğru görüntülenmeyebilir.

Bu nedenle, web siteniz için doğru yapılandırma ayarlarını ve en iyi performansı bulmak için deneme yanılma gereklidir.

• Web Sitesi Yedeklemeleri – Bir optimizasyon WordPress eklentisini etkinleştirmeden önce web sitenizi yedekleyin
• Test Performansı – Web sitenizdeki önemli sayfaların performansını ve bir optimizasyon yapılandırma ayarını her değiştirdiğinizde test edin
• Web Sitenizi İnceleyin – Yapılandırmanızı değiştirdikten sonra web sitenizin hiçbir bölümünün bozuk olup olmadığını kontrol edin

Javascript'in ayrıştırılmasını ertelerken herhangi bir büyük sorunla karşılaşırsanız, eklentinin varsayılan ayarlarına geri dönün. Eklenti, web sitenizle uyumlu çalışmıyorsa da kaldırılabilir.

1. Otomatik optimize et

Autoptimize, Javascript, CSS ve HTML'yi bir araya getirmenize ve küçültmenize izin veren çok yönlü bir WordPress optimizasyon çözümüdür. Optimize edilmiş içerik, performansı artırmak için önbelleğe alınır. Bu önbellek hızla çok büyüyebilir, bu nedenle önbelleği otomatik olarak temizlemek için Autoclear Autoptimize Cache'i kullanmanızı tavsiye ederim.

Autoptimize, dosya toplama özelliğiyle bilinmesine rağmen, Javascript dosyalarının işlemeyi engellememesi için ayrıştırılmasını ertelemek için de kullanılabilir. Javascript ve CSS kodu satır içi olarak da görüntülenebilir ve resimler, Google Yazı Tipleri, emojiler ve daha fazlası için ek optimizasyon seçenekleri vardır.

2. Eşzamansız JavaScript Eklentisi

Autoptimize'ın yaratıcısı tarafından geliştirilen Async JavaScript, web siteniz genelinde Javascript dosyalarına zaman uyumsuz uygulama ve erteleme uygulamanıza olanak tanır. Size her Javascript dosyası üzerinde tam kontrol sağlayarak jQuery'i, belirli Javascript dosyalarını, WordPress eklentilerini ve WordPress temalarını hariç tutmanıza izin verir. İsterseniz, tam olarak hangi Javascript dosyalarının eşzamanlanmayacağını ve hangilerinin erteleneceğini belirleyebilirsiniz.

Async Javascript'in en harika özelliklerinden biri, web siteniz için olası tüm yapılandırma ayarları için GTmetrix'te performans testleri yapan kurulum sihirbazıdır. Sonuçlar web sitenizin her yapılandırmada tam olarak ne kadar hızlı olacağını gösterdiğinden, bu harika bir zaman tasarrufu sağlar, ancak web sitenizin hiçbir yönünün bozuk olmadığından emin olmak için web sitenizi her seferinde kontrol ettiğinizden emin olun.

3. Mükemmellik

Perfmatters, düzinelerce benzersiz performans özelliğine sahip birinci sınıf bir WordPress performans araç kutusudur. Yılda 24,95 dolardan perakende satış yapan eklenti, web sitenizdeki Javascript dosyalarının (tüm JS dosyaları) ayrıştırılmasını ertelemenize olanak tanır. jQuery dosyaları ertelemelere dahil edilebilir ve belirli Javascript dosyalarını da hariç tutabilirsiniz. Size sunduğu bir başka harika seçenek de Javascript dosyalarını yalnızca kullanıcı etkileşimi olduğunda yükleyecek olan Javascript Delay'dir.

Perfmatters, güvenliği ve performansı artırmak için temel WordPress özelliklerini devre dışı bırakmak için kullanılabilir. Ayrıca, özel bir oturum açma URL'si tanımlamanıza, içeriği önceden yüklemenize, görüntüleri yavaş yüklemenize, Google Analytics'i entegre etmenize, Google Yazı Tiplerini optimize etmenize ve daha pek çok şeye olanak tanır.

En sevdiğim özellik, web sitenizdeki her sayfa için Javascript ve CSS dosyalarını etkinleştirmenize ve devre dışı bırakmanıza olanak tanıyan komut dosyası yöneticisidir. WordPress geliştiricileri, yalnızca birkaç sayfada gerekli olsalar bile, web sitenize Javascript ve CSS dosyaları yüklemek gibi kötü bir alışkanlığa sahip olduklarından, bu, sayfaların boyutunu önemli ölçüde azaltacaktır.

4. Varlık Temizleme

Asset CleanUp, Javascript ve CSS dosyalarını küçültmenize, birleştirmenize ve ayrıştırmayı ertelemenize izin veren, zengin özelliklere sahip bir optimizasyon WordPress eklentisidir. CSS ve JS yöneticisi, Perfmatter'ın komut dosyası yöneticisine benzer şekilde çalışır ve bir dosyanın belirli bir sayfaya yüklenip yüklenmediğini belirlemenize olanak tanır. Ayrıca temel WordPress ayarlarını devre dışı bırakabilir, HTML kodunu temizleyebilir, Google Yazı Tiplerini optimize edebilir ve daha fazlasını yapabilirsiniz.

Asset CleanUp Pro için tek bir lisans yıllık 42,36 €'dan satılmaktadır. Yükseltme, kodu satır içine yerleştirmenize ve Javascript dosyaları için sayfa sayfa bazında zaman uyumsuz ve erteleme belirtmenize olanak tanır. Ayrıca bir eklenti yöneticisinin kilidini açar ve varlıkların web sitenize nasıl yüklendiği konusunda size daha fazla kontrol sağlar.

5. HTTP/2 İtme Ön Yüklemesi

HTTP/2 Push Preload, sıralı yükleme işlevini kullanarak Javascript ve CSS dosyalarını HTTP2 destekli sunucunuz genelinde push ve preload yapmanızı sağlar. Bu, tüm dosyalara uygulanabilir veya her kaynağı ayrı ayrı yapılandırmayı seçebilirsiniz. Kaynak türleri arasında komut dosyası, stil, ses, yerleştirme, getirme, yazı tipi, resim, nesne ve video bulunur.

Bir Javascript dosyasının URL'sini girdiğinizde, eşzamanlamayı, ertelemeyi veya kaldırmayı seçebilirsiniz. HTTP/2 Push Preload, bu ayarın ne zaman uygulanacağına ilişkin kuralları tanımlamanıza olanak tanır. Tüm sayfalar, cep telefonları veya masaüstü bilgisayarlar, belirli gönderiler ve sayfalar, kategoriler, arama sayfaları, WooCommerce sayfaları ve daha fazlası için bir kaynak için Javascript kuralları tanımlayabilirsiniz.

Son düşünceler

Javascript, web sitelerine dinamik içerik ve etkileşimli öğeler eklemek için tercih edilen yöntem olmaya devam ediyor. Birçok WordPress teması ve eklentisi Javascript kullandığından, WordPress'te javascript'in ayrıştırılmasını ertelemek ve sayfaların hızlı bir şekilde oluşturulmasını sağlamak ve sayfa oluşturmanın engellenmesini azaltmak için erteleme ve zaman uyumsuzluğu kullanmak önemlidir.

Birçok WordPress eklentisinde erteleme ve eşzamansız uygulama işlevleri bulacaksınız, ancak bu makalede bahsettiğim çözümler size Javascript dosyalarınız üzerinde daha fazla kontrol sağlıyor.

Kendi web sitemde, dosya toplama için Autoptimize ve Javascript ertelemeleri için Async JavaScript kullanıyorum. Async Javascript'ten memnunum, ancak HTTP/2 Push Preload, size optimizasyon ayarlarının uygulandığı yerler üzerinde daha iyi kontrol sağladığından birçok web sitesi sahibi için daha iyi bir seçenek olabilir.

Asset CleanUp ve Perfmatters benzer özellikler ve işlevler sunar, bu nedenle ikisini birlikte kullanmanızı önermiyorum. Asset CleanUp Pro, şüphesiz daha iyi kontrol ve daha gelişmiş özellikler sunuyor, ancak kullanımı daha kolay olduğu için WordPress'i temizlemek için kendi web sitemde Perfmatters kullanmaya devam ediyorum. Sayfa oluşturmanın engellenmesini azaltmak için javascript'in ayrıştırılmasını ertelemek üzere farklı bir WordPress eklentisi kullanıyor olsanız bile, her iki çözüm de herhangi bir WordPress optimizasyon kurulumunu geliştirecektir.

Javascript ayrıştırmasını ertelemek için tüm bu WordPress eklentilerini test etmenizi ve en iyi yapılandırmaya sahip olduğunuzdan emin olmak için birden fazla test yapmanızı tavsiye ederim.

İyi şanlar.

kevin