WordPress’te JavaScript ayrıştırma nasıl geciktirilir (4 yöntem)
WordPress sitenizi yalnızca WordPress’teki JavaScript’in dökülmesini geciktirecek talimatlarla karşılanacak bir performans test aracı aracılığıyla mı çalıştırıyorsunuz?
Ücretsiz demoyu deneyin
Bu değişikliğin uygulanmasının, özellikle mobil ziyaretçiler için, sitenizin yükleme süresinde olumlu bir etkisi olabilir. Ancak uyarıyı anlamak oldukça zor olabilir, bu yüzden JavaScript’in ayrışmasını geciktirmenin ve bu değişikliği WordPress sitenize nasıl uygulayabileceğinizi tam olarak açıklayacağız. Bu makalede öğreneceğiniz şey budur:
Sadece doğrudan öğreticiye atlamak istiyorsanız, yukarıdaki listedeki son bağlantıyı tıklayabilirsiniz.
Video sürümünü izlemeyi tercih ediyor musunuz? WordPress sitenizi Google PagePeed Insights, GTMetrix veya diğer sayfa hız test araçları aracılığıyla çalıştırdıysanız, JavaScript’in ayrışmasını geciktirmek için öneriler bulabilirsiniz. Ama gerçek niyet nedir? Ve bu neden önemli performansın dikkate alınması? Temel olarak, birisi WordPress sitenizi ziyaret ettiğinde, site sunucunuz web sitenizin HTML içerik içeriğini ziyaretçinin tarayıcısına gönderir. Ziyaretçi tarayıcısı daha sonra yukarıdan başlar ve sitenizi oluşturmak için koda göz atar. Yukarıdan aşağıya doğru hareket ederken, herhangi bir JavaScript bulursa, JavaScript dosyasını alıp parçalayana kadar sayfaların geri kalanını oluşturmayı bırakırdı.
Bu, site sayfalarınızı açarken olumsuz bir etkiye sahip olabilen her komut dosyası için bunu yapacak, çünkü ziyaretçilerin tarayıcıları indirip tüm JavaScript’i ayrıştırırken boş ekrana bakmaları gerekiyor. Sitenizin temel işlevi için belirli komut dosyaları gerekmiyorsa (en azından ilk sayfanın yüklenmesinde), komut dosyasının sitenizden daha önemli olan parçaların yüklenmesini engellemesini istemezsiniz, bu nedenle sayfalar Hız test aracı her zaman JavaScript’in ayrışmasını geciktirmenizi söyler. Peki, JavaScript’in ayrışmasını geciktirmek ne anlama geliyor? Temel olarak, siteniz tarayıcı ziyaretçisine, sitenizin ana içeriği yükleme tamamlanıncaya kadar JavaScript’i indirmesini ve / veya ayrıştırmasını söyleyecektir. O zaman, ziyaretçiler sayfanızı zaten görebilir ve etkileşime girebilir, bu nedenle JavaScript’i indirmek ve parçalamak için bekleme süresinin artık olumsuz bir etkisi yoktur. İçeriğin yarısını hızlandırarak, Google’ı mutlu edersiniz ve ziyaretçileriniz için daha iyi ve daha hızlı bir deneyim yaratırsınız. Sitenin JavaScript’in ayrışmasını geciktirmesi gerekir, sitenizi GTMetrix üzerinden çalıştırabilirsiniz.
GTMetrix size bir değer verecek ve ayrıca askıya alınması gereken belirli bir komut dosyası içerecek:
GTMetrix üzerindeki JavaScript testlerinin dökümünü erteleyin
Bültenlere Kaydolun
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
kontrolsüz
Ertelemek
Her iki özellik de ziyaretçi tarayıcılarının HTML’nin ayrışmasını dökmeden JavaScript’i indirmesine izin verir. Bununla birlikte, fark, Async’in komut dosyasını almak için HTML’nin ayrışmasını duraklatmasa da (varsayılan davranışla yapılacağı gibi), Async’in alındıktan sonra komut dosyasını yürütmesi için HTML ayrıştırıcılarını zorluyor.
DeFer ile, ziyaretçinin tarayıcısı HTML’yi yıkarken komut dosyasını indirmeye devam edecek, ancak HTML’nin ayrışması tamamlanana kadar komut dosyasını parçalamak için bekleyecekler. Web ile büyümenin grafikleri farkı çok iyi açıklıyor:
Grafik Async ve Decer’ı açıklıyor
Varvy’den Patrick Sexton tarafından önerilen başka bir seçenek, harici bir JavaScript dosyasını ancak başlangıç sayfasını yükledikten sonra çağırmak için bir komut dosyası kullanır. Bu, ziyaretçinin tarayıcının başlangıç sayfasını yükleyene kadar herhangi bir JavaScript indirmeyeceği veya çalıştırmayacağı anlamına gelir. Son olarak, göreceğiniz bir başka yaklaşım da JavaScript’i sayfanın altına taşımaktır. Ancak, bu yöntem iyi bir çözüm değildir, çünkü sayfanız daha hızlı görünse de, ziyaretçinin tarayıcısı tüm komut dosyaları tamamlanana kadar sayfayı yükleme olarak görüntüleyecektir. Bu, bazı ziyaretçilerin sayfanızla etkileşime girmesini durdurabilir, çünkü onlara göre içerik tam olarak yüklenmez.
Eklenti – JavaScript’in dökümünü geciktirmek için birkaç ücretsiz ve premium ücretsiz WordPress eklentisi vardır. İki popüler eklenti ile nasıl yapılacağını göstereceğiz.
Varvy yöntemi – Teknolojiyi anlarsanız, site kodunuzu doğrudan düzenleyebilir ve Varvy’den bir kod görüntüsü kullanabilirsiniz.
Dosya Functions.php – Komut dosyasını otomatik olarak geciktirmek için functions.php dosyasına bir kod parçası ekleyebilirsiniz.
Doğrudan seçtiğiniz yönteme gidebilir veya sizin için en iyisini bulmak için tüm teknikleri okuyabilirsiniz.
1. Ücretsiz JavaScript Async JavaScript eklentisi, popüler Autoptimize eklentisinin arkasındaki aynı kişi olan Frank Goossens’den ücretsiz bir WordPress eklentisidir. Bu, Async veya Derver kullanarak JavaScript’in dökümünü geciktirmenin basit bir yolunu sunar. Başlamak için wordpress.org adresinden ücretsiz bir eklenti yükleyebilir ve etkinleştirebilirsiniz. Ardından, eklentileri yapılandırmak için Ayarlar → Async JavaScript’i açın. Üstte, eklentinin işlevselliğini etkinleştirebilir ve Async ve Defer arasında seçim yapabilirsiniz. Unutma:
Async, HTML’yi geçip geçerken JavaScript’i indirdi, ancak JavaScript’i çalıştırmak için HTML’nin ayrışmasını duraklattı.
HTML’yi ayrıştırırken ve HTML’nin ayrışması tamamlanana kadar çalıştırmayı beklerken JavaScript indirmelerini erteleyin.
JavaScript Async eklentisi nasıl kullanılır
Dahası, JQuery’nin nasıl ele alınacağını da seçebilirsiniz. Birçok tema ve eklenti jQuery’ye çok bağımlıdır, bu nedenle jQuery betiğinin ayrışmasını geciktirmeye çalışırsanız, sitenizin temel işlevlerinden bazılarına zarar verebilirsiniz. En güvenli yaklaşım JQuery’yi dışlamaktır, ancak gecikmeyi deneyebilirsiniz. Sitenizi iyice test ettiğinizden emin olun. Dahası, sitenizde etkin olan belirli temaları veya eklentileri hedeflemenize izin verecek iyi kullanıcı dostu özellikler de dahil olmak üzere, askıya alınmayacak şekilde belirli komut dosyalarını manuel olarak girebilir veya hariç tutabilirsiniz: JavaScript Async, kuralları içerir/hariç tutabilirsiniz.
Merkezi bir kontrol panelinden yönetilen bir eklenti ile JavaScript’in ayrışmasını basitleştirin. Ücretsiz Kinsta’yı deneyin.
JavaScript’in WP Roket ile ayrışması nasıl geciktirilir
3. Varvy tarafından önerilen yöntemi (kodu) kullanın, Varvy’den Patrick Sexton, siteniz ilk sayfa yüklemesini tamamlayana kadar JavaScript’i indirmeyi ve çalıştırmayı bekleyen bir kod snippet’inin kullanılmasını önerdiğinden bahsediyoruz. . Bu yöntemi, Varvy tarafından sağlanan kod görüntülerini inceleyerek ve ardından kapatma etiketinden hemen önce komut dosyasını ekleyerek uygulayabilirsiniz. Varvy’den aşağıdaki kod:
“Defer.js” i ertelemek istediğiniz JavaScript dosyasındaki gerçek dosya/ yol adıyla değiştirdiğinizden emin olun. Ardından, function.php dosyası üzerinden kodu girmek için wp_footer kancasını kullanabilirsiniz. Bu yaklaşımla, vary kodunu böyle bir şeye saracaksınız: / ** JavaScript’in snippet kodu ile varvy* / add_action (‘wp_footer’, ‘my_footer_scripts’); İşlev my_footer_scripts () {?> Replace_with_varvy_script <
? php} 4. JavaScript’i son işlevle erteleyin.php dosyası, function.php dosyasına aşağıdaki kod görüntülerini ekleyerek eklentilere ihtiyaç duymadan JavaScript dosyanıza erteleme özniteliğinizi de ekleyebilirsiniz. : işlev defer_parsing_of_js ($ url) {if (is_user_logged_in ()) $ url döndür; // (false === Strpos ($ url, ‘.js’)) $ url döndürürse WP yöneticisini kırmayın; if (strpos ($ url, ‘jQuery.js’)) $ url döndür; Return str_replace (‘src’, ‘src’, $ url); } add_filter (‘script_loader_tag’, ‘defert_parsing_of_js’, 10); Temel olarak, bu görüntü WordPress’e JQuery hariç tüm JavaScript dosyalarınıza erteleme özniteliğini eklemesini söyler. Bu hızlı ve kolaydır, ancak size Async JavaScript eklentisi tarafından sunulan granüler kontrol seviyesini vermez. Bir mesaj aldınız mı *JavaScript uyarısının ayrıştırılması *? Endişelenmeyin … şimdi bu 4 yöntemle düzeltin! WordPress sitenizdeki JavaScript’in dökümünü geciktirmek için özet bir tweet için tıklayın, önemli bir performans değerlendirmesidir. WordPress’teki JavaScript’in ayrışmasını geciktirmek için yukarıdaki yöntemlerden birini kullandıktan sonra, iki şey yapmalısınız: belirli komut dosyalarını geciktirmenin üst yarı yaşam içeriğine zarar vermemesini sağlamak için sitenizi test edin. Bir kez daha, bu genellikle jQuery ile olabilir, bu yüzden birçok araç jQuery.js hariç tutmanıza izin verir. Ancak, bu başka bir senaryoda da olabilir.
