WordPress’te JavaScript ayrıştırma nasıl geciktirilir
Web sitenizin performansının önemli ölçüsü sayfa hızıdır. Sayfa hızı, tarayıcının web sitesini oluşturması için gereken süredir. Daha hızlı yükleme süresi, ziyaretçilerinizin çoğunun yüklendiğinde web sitenizde kalmasını sağlar. Sayfa Hızı ayrıca arama motoru ürünlerinde web sitenizin sıralamasını kısmen belirler. Bu nedenle, WordPress sitesini hızlandırmak genellikle site sahibinin istek listesinin en üstünde yer alır. Bu öğreticide, web sayfalarının yüklenmesi sırasında JavaScript’in ayrıştırılmasındaki gecikmeyi – web sitenizden ölü ağırlığı ortadan kaldırmak için ana teknik.
Sayfa Hızı, birçok şeye bağlı olan kullanıcı deneyiminin önemli bir parçasıdır. Bu makale, web sitenizi oldukça hızlı bir WordPress ana bilgisayarında çalıştıran temel faktörleri kontrol ettiğinizi varsaymaktadır. Neden ayrıştırma JavaScript’i erteliyorsunuz? JavaScript’in ayrışmasını geciktirme tekniğini anlamak için geri adım atalım ve web tarayıcısının sayfayı nasıl oluşturduğunu analiz edelim. Tarayıcınız web sunucunuza bir istek gönderdiğinde, sunucu tarafından geri gönderilen sayfa HTML belgeleri şeklinde indirilir. Bu HTML belgesi metin, çeşitli DOM öğelerini oluşturan kodlar ve görüntüler, stil sayfaları ve komut dosyaları gibi kaynaklar içerir.
Tarayıcı bu HTML işaretleme satırını satır satır. Ayrıca, sayfadaki kaynakların indirilmesi gerekir. Varsayılan olarak, tarayıcı bu kaynağı belgede bulunduğunda sırayla indirdi. Web sayfalarının oluşturulması ancak kaynaklar indirildikten sonra devam eder. Sayfayı açarken büyük kaynakların kötü bir etkisi vardır. Görüntü sayfa boyutunun önemli bir bölümünü oluşturduğundan, WordPress siteniz için görüntüleri optimize etmeniz önerilir. JavaScript dosyaları için, sayfanızı doğru şekilde oluşturmak için hangi komut dosyalarının gerekli olduğunu belirlemeniz gerekir. Web sayfalarınızı hızlandırmak için önemli olmayan komut dosyasının indirilmesini erteleyebilirsiniz. Bir sonraki bölümde, sayfalarınızı oluşturmak için hangi komut dosyalarının nasıl gerekli olduğunu belirleyeceğimizi göreceğiz. Hangi komut dosyası ertelenmelidir? Minimal JavaScript kullanan nispeten küçük web siteleri için, yükleme sayfaları için önemli komut dosyaları olmayabilir. Ancak, daha karmaşık bir web sitesini yönetirseniz, web sitenizdeki tüm komut dosyalarının dikkatli bir şekilde analizi, hangi komut dosyalarının yükleme sayfaları için önemli olduğunu ortaya çıkarabilir. Bu analizi yapmanın bir yolu, komut dosyalarını tek tek silmek ve sayfa yüklemesi sırasında JavaScript konsolunda hata olup olmadığını kontrol etmektir. Ancak, bu süreç JavaScript ve Web teknolojisi hakkında yeterli bilgi gerektirir.
Sayfanızı yüklemek için hangi komut dosyalarının önemli olduğunu değerlendirmek için daha kolay yöntem, GTMetrix gibi bir hız testi aracı kullanmaktır. Web Sitesi URL’nizi girin ve onu yargılamak için aracın bekleyin. Sonuçlar sayfasında PagesPeed sekmesini açın ve “JavaScript’in Ayrışmasını Ertelen” i genişletin. Bu bölüm, oluşturma işlemi sırasında yüklenen zorunlu olmayan komut dosyalarının bir listesini göstermektedir. Async Vs. Erteleme, komut dosyasını indirmenin web sayfalarını oluşturmaya müdahale etmediğinden emin olmanın iki yolu vardır. İlk olarak, komut dosyası etiketine async öznitelikleri ekleyebilirsiniz. Bu, tarayıcıya asenkron komut dosyaları yüklemesini söyler. Başka bir deyişle, tarayıcı kodda bulduktan hemen sonra kaynakları indirmeye başlar, ancak kaynaklar hala indirilirken HTML’yi tanımlamaya devam eder. Aşağıdaki komut dosyası etiketlerine örnekler, async özniteliklerinin nasıl ekleneceğini göstermektedir:
ikinci, komut dosyası etiketine erteleme özniteliğini ekleyebilirsiniz. Bu, tarayıcıya arıza tamamlanana kadar kaynak indirmemesini söyler. Ayrışma ve oluşturma tamamlandıktan sonra, tarayıcı daha önce bulunan ertelenmiş bir komut dosyası listesini indirdi. Aşağıdaki komut dosyası etiketinin örnekleri, erteleme özniteliğinin html sayfasına nasıl ekleneceğini gösterir: Erteleme ve asinc özellikleri arasındaki temel fark, kaynakların ne zaman olacağıdır. İndirildi. Diyelim ki iki komut dosyası var: A ve B, A, B’nin A’ya bağımlılığı vardır, ancak A, B’den önemli ölçüde daha büyüktür.
WordPress’te ayrıştırma JavaScript’i oynatın. Dosya Functions.php Düzenle WordPress’in geliştirilmesinde çalıştıysanız, HTML İşaretlemesi aracılığıyla doğrudan komut dosyası eklemeniz önerilmediğini biliyorsunuz. Bunun yerine, kaynak istemek için varsayılan WordPress işlevini kullanmalısınız. Dolayısıyla, komut dosyalarınızdan birine bir async veya erteleme özniteliği eklemek istiyorsanız, işlevlerinize aşağıdaki işlevi eklemelisiniz.
Add_defer_tags_to_scripts işlevi ($ tag) {
# Özellikler eklemek için komut dosyalarının listesi
$ scripts_to_defer = array (‘script_a’, ‘script_b’);
$ scripts_to_async = array (‘script_c’, ‘script_d’);
# Süspansiyon etiketini scripts_to_defer dizisine ekleyin
foreach ($ current_script olarak $ scripts_to_defer) {
if (true == strpos ($ tag, $ current_script))
Return str_replace (‘src’, ‘derver = “erteleme” src’, $ tag);
}
# Scripts_to_async dizisine ashnc etiketi ekle
foreach ($ current_script olarak $ scrips_to_async) {
if (true == strpos ($ tag, $ current_script)) return str_replace (‘src’, ‘async = “async” src’, $ tag);
}
geri $ etiketi;
} Komut dosyası etiketine erteleme ve async özniteliğini eklemeden önce, WordPress’in erişebilmesi için her komut dosyasını sıralamanız gerektiğini unutmayın:
Add_action (‘wp_enqueue_scripts’, ‘enqueue_custom_js’);
enqueue_custom_js () işlevi {
wp_enqueue_script (‘script_a’, get_stylesheet_directory_uri (). ‘/script_a.js’);
wp_enqueue_script (‘script_b’, get_stylesheet_directory_uri (). ‘/script_b.js’);
wp_enqueue_script (‘script_c’, get_stylesheet_directory_uri (). ‘/script_c.js’);
wp_enqueue_script (‘script_d’, get_stylesheet_directory_uri (). ‘/script_d.js’);
} 2. Kaynak kodunu Functions.php dosyası aracılığıyla düzenleyen eklentiyi kullanın. Teknolojiyi anlamıyorsanız, yalnızca WordPress sitenizdeki JavaScript’in ayrışmasını geciktirmek için eklentileri kullanmanız gerekir.
JavaScript Asyncron Async JavaScript, bu görevi yapmak için WordPress sitenize indirip yükleyebileceğiniz ücretsiz bir eklentidir. Bu özellikleri etkinleştirmek için eklenti ayar alanındaki Async JavaScript seçeneğini etkinleştirin. Ardından, Async JavaScript yöntemine gidin ve Async veya Defer yöntemini kullanmak isteyip istemediğinizi seçin.
Diğer gelişmiş seçenekler için sayfayı aşağı kaydırın. Burada, eşzamanlı ve deşen etiketlerini uygulamak istediğiniz komut dosyalarının bir listesini oluşturabilirsiniz. Ardından, hariç tutulacak bir komut dosyası listesi de ekleyebilirsiniz. Ayrıca, bu eklenti tarafından yapılan değişikliklerden hariç tutulacak eklentilerin ve temaların bir listesini de yapabilirsiniz.
Komut dosyasının ayrışmasını geciktirmek için seçeneği optimize edin, Async JavaScript ile aynı yazar tarafından yapılan otomatiktimize eklentinin bir parçası olarak da kullanılabilir. Eklenti ayar sayfasında, JavaScript kodunuzu optimize et seçeneğini kontrol edin, gerekli olmayan komut dosyası askıya alınır ve altbilgiye aktarılır. Ekstra sekmede, async öznitelikleri eklemek istediğiniz komut dosyasını da ekleyebilirsiniz. Bu öğreticiye sarın, önce sayfaların önemini ve JavaScript oluşturma çalışmasının nasıl çalışmasını tartışıyoruz. Ardından, JavaScript’in ayrışmasını geciktirmeniz için nedenleri araştırıyoruz. Son olarak, WordPress’te başarmak için kullanabileceğiniz iki seçenek görüyoruz. Komut dosyası etiketinize async veya erteleme özniteliği eklemek için functions.php dosyasını düzenleyebilir veya komut dosyasını optimize etmek için async javascript veya autoPtimize gibi eklentileri kullanabilirsiniz. WordPress üzerindeki JavasRipt’in ayrışmasını nasıl erteleyeceğinizle ilgili sorular var mı? Öyleyse, aşağıdaki yorumlarda soru sormaktan çekinmeyin.
