WordPress’te JavaScript ayrıştırma nasıl geciktirilir
Bir WordPress web sitesi veya diğer web siteleri çalıştırın, web sitenizin performansının önemli ölçüsünün sayfa hızı olduğunu bilmelisiniz. GTMetrix veya Google PagePeed Insights gibi site performans test araçlarından birini kullanırsanız, JavaScript’in ayrışmasını geciktirmeniz önerilebilir. Şimdi, ifade kafa karıştırıcı olabilir, ancak web sitenizin açılış saatini artırmada önemli bir rol oynar. Peki, ayrıştırma JavaScript’in askıya alınmasıyla kastedilen nedir? Pekala, bunu daha sonra ayrıntılı olarak tartışacağız. Kısacası, JavaScript’in ayrışmasındaki gecikme, tarayıcının, komut dosyasının indirilmesini beklemeden önce web sitesinin içeriğini yüklemesini sağlar.
Bu işlem önemlidir, çünkü tarayıcı diğer web sitesi içeriğini yüklemeden önce sunucudan javascript oluşturur ve indirir. Bu, web sitenizin hızını mahveder ve sayfanız için açılış saatine müdahale eder. Neyse ki, JavaScript’in bozulmasını geciktirmek, sorunları azaltmanın en iyi yoludur. Bu makalede WordPress’teki JavaScript’in ayrışmasını geciktirmek için kanıtlanmış beş yöntemi açıkladım. Ancak bundan önce, ifadenin ne anlama geldiği hakkında daha fazla bilgi edineceğini ve JavaScript’in ayrışmasını erteleyip ertelemeniz gerekip gerekmediğini bilelim. Başlayalım!
İçindekiler
WordPress’te JavaScript’i ayrıştırmayı geciktirerek ne demek istiyorsunuz?
Ayrıştırma JavaScript’i ertelemeniz gerektiğini nereden biliyorsunuz?
Async ve Nitelikler İptal
Neden ayrıştırma JavaScript’i ertelemeniz gerekiyor?
1. Arama sıralamasını artırmak için:
2. Dönüşüm oranını artırmak için:
3. Daha iyi bir kullanıcı deneyimi sağlamak için:
WordPress’te ayrıştırmayı geciktirmek için beş farklı yöntem
Yöntem 1: Ücretsiz JavaScript Async Eklentisini Kullanma Yöntem 2: WP Roket Eklentisini Kullanma
Yöntem 3: Toplam W3 eklentisini kullanma
Yöntem 4: Varvy öneri yöntemini kullanarak
Yöntem 5: Dosya işlevlerini kullanma.php
WordPress’te ayrıştırma JavaScript’i geciktirmek için alternatif eklenti
1. Hız amplifikatör paketi:
2. Tanımlı JavaScript WP:
SSS (sık sık sorulan sorular)
JavaScript’in ayrışması veya yüklenmesinde gecikme nedir?
Web sitemin hedefini engelleyen JavaScript’i nasıl silebilirim?
Web sitemde önemli olmayan JavaScript’i tanımlamak için başka hangi araçları kullanabilirim?
AutoPtimize eklentisini kullanarak WordPress’teki JavaScript’in ayrışmasını erteleyebilir miyim?
Çözüm
WordPress’te JavaScript’i ayrıştırmayı geciktirerek ne demek istiyorsunuz? JavaScript’in dökümünü geciktirme tekniğini anlamadan önce, web tarayıcısının bir web sayfası oluşturduğunu bilmelisiniz.
Her şeyden önce, tarayıcınız web sunucunuza bir istek gönderdiğinde, tarayıcı HTML belgeleri şeklinde indirilen bir sayfa alır. Bu HTML belgesi metin, çeşitli DOM öğelerini oluşturan kodlar ve görüntüler, stil sayfaları ve komut dosyaları gibi farklı kaynaklar içerir. Varsayılan olarak, tarayıcı bu kaynağı sırayla indirdi. Web sayfalarının ayrışması ancak tüm kaynaklar indirildikten sonra devam eder. Ayrıca, web sayfalarınızı açarken büyük kaynakların kötü bir etkisi vardır. Tarayıcınız web sitenizi oluşturmak için koda her göz attığında, herhangi bir JavaScript bulursanız tarayıcı oluşturmayı durdurur. İşlem, JavaScript dosyalarını alıp çözene kadar durdurulur. Bunun web sitenizin hızı üzerinde olumsuz bir etkisi vardır.
Neyse ki, JavaScript’in dökümünü geciktirme işlemi, tarayıcıya, web sitenizin ana içeriği yüklemeyi bitirene kadar JavaScript dosyasını indirmek ve parçalamak için beklemesini söyler. Bu noktada, ziyaretçileriniz web sitenizle etkileşime girebilir, böylece JavaScript’i indirmek ve parçalamak için gereken süre artık sitenizin açılış saatini tehlikeye atmaz. Ayrıştırma JavaScript’i ertelemeniz gerektiğini nereden biliyorsunuz? Daha önce söylediğimiz gibi, GTMetrix, Google PagePeed Insights veya WP Makine Hız Araçları gibi site performans test araçları, web sitenizi analiz ederken JavaScript’in ayrışmasını genellikle geciktirmenizi önerir. Özellikle GTMetrix size değer verir ve ihtiyaç duyan bazı komut dosyalarını içerir. Sayfanızı yükleme hızını artırmak için gerekli olmak için gerekli. Sadece web sitesi URL’nizi girip aracın yargılamasını bekleyin. Değerlendirme tamamlandığında, PagesPeed sekmesini açın ve JavaScript’in ayrışmasındaki gecikmeyi genişletin. Bu bölüm, aşağıdaki örnekte gösterildiği gibi, oluşturma işlemi sırasında yüklenen zorunlu olmayan komut dosyalarının bir listesini sunar:
Async ve Nitelikler Komut dosyasının indirilmesinin web sayfalarını oluşturmaya müdahale etmediğinden emin olmak için gecikme çok önemlidir. Bunu yapmanın iki yolu vardır:
kontrolsüz
Script etiketine async özniteliğini şu şekilde ekleyebilirsiniz:
Tam olarak, tarayıcı kodda bulduktan hemen sonra kaynakları indirir, ancak kaynaklar hala indirilirken HTML’yi parçalamaya devam eder. Öte yandan, komut dosyası etiketine erteleme özniteliğini şu şekilde ekleyebilirsiniz:
Not: Defert.js’yi harici JavaScript dosya adınıza değiştirdiğinizden emin olun. Bundan sonra, kodu function.php aracılığıyla kodu girmek için wp_footer kancasını kullanabilirsiniz. Bu yaklaşımla, şöyle bir vary kodu sarabilirsiniz: / ** der JavaScript’in snippet kodu ile varvy* / add_action (‘wp_footer’, ‘my_footer_scripts’); İşlev my_footer_scripts () {?> Replace_with_varvy_script < ? PHP} İşte bu yöntemin her adımı açık bir resimle açıklanmıştır: WordPress Gösterge Tablonuzu girin ve görünüşe gidin -> Temasekarang editörü, ekranın sağ tarafından header.php dosyasını tıklayın ve ardından söz konusu kodu yapıştırın Kapanmadan önce yukarıda . Bundan sonra Dosya Güncelle düğmesini tıklayın. Yöntem 5: Dosya Fonksiyonları kullanma WordPress’in geliştirilmesi hakkında bir fikriniz varsa, HTML işaretlemesi aracılığıyla doğrudan komut dosyası eklememeniz gerektiğine alışkın olmalısınız. Bunun yerine, kaynak istemek ve gerektiğinde web sitenizi ayırmak için varsayılan WordPress işlevini kullanmanız gerekir. Function.php dosyasına bir kod parçası ekleyerek JavaScript dosyanıza erteleme özniteliğini kullanabilirsiniz. Bunun için, WordPress kontrol panelinizden tema düzenleyicisine gitmeniz gerekir. Bundan sonra, function.php’i tıklayın ve aşağıdaki kodu ekleyin: function dference_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); Bu görüntüler, WordPress’e JQuery hariç tüm JavaScript dosyalarınıza DeFer’ın özelliğini eklemesini söyler. Ayrıca JavaScript dosyanıza async veya erteleme özniteliğini kullanmak için aşağıdaki kodu kolayca ekleyebilirsiniz. Function add_defer_tags_to_scripts ($ tag) { # # List komut dosyaları $ scripts_to_defer = array (‘script_a’, ‘script_b’) adresine öznitelik eklemek için; $ scripts_to_async = array (‘script_c’, ‘script_d’); # erteleme etiketlerini scripts_to_defer dizisi foreach ($ current_script olarak $ scripts_to_defer olarak ekleyin {if (true == strpos ($ tag, $ current_script)) dönüş str_replace (‘src’; } # Async etiketlerini scripts_to_async dizisi forEach’e ekleyin ($ scripts_to_async $ current_script olarak) {if (true == strpos ($ tag, $ current_script)) return str_rreplace (‘src’, ‘async “src’); } return $ tag; } ASHNC özniteliğini eklemeden ve komut dosyası etiketine ertelemeden önce, WordPress’in erişebilmesi için her komut dosyasını sıralamanız gerektiğini unutmayın. Bunun için aşağıdaki kod: add_action (‘wp_enqueue_scripts’, ‘enqueue_custom_js’); işlev enqueue_custom_js () {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’); } Functions.php dosyasına kod eklemeyi bitirdiğinizde Dosya Güncelleme düğmesini tıklatın. Bu yöntemin her adımı açık bir resimle açıklanır: WordPress kontrol panelinizi girin ve görünüşe gidin -> editör temasekarang, ekranın sağ tarafında bulunan functions.php dosyasını tıklayın. Daha sonra yukarıda belirtilen kodu koyabilir ve gerekli değişiklikleri kaydetmek için Dosya Güncelleme düğmesini tıklayabilirsiniz. WordPress’te ayrıştırmayı geciktirmek için alternatif eklentiler JavaScript Async eklentisi ve WP roketinin yanı sıra JavaScript’in ayrışmasını geciktirmek için WordPress’te ayrışmasını geciktiriyorsanız, çok şeyiniz var. Bazıları şunlardır: 1. Hız amplifikatör paketi: Bu, JavaScript optimizasyonu ve diğer birçok hız optimizasyon tekniğinde size yardımcı olmak için kolay bir arayüze sahip ücretsiz bir WordPress eklentisidir. Hızlı Amplifikatör Paketinin Güçlü Yönleri: Çok basit ve kullanımı kolay ve etkileşimli bir kullanıcı arayüzü ile donatılmış Yardım JavaScript optimizasyonu, CSS optimizasyonu, yavaş yükleme ve ağ dağıtım entegrasyon içeriği (CDN) Olağanüstü performans ve hataların iyileştirilmesi için düzenli olarak güncellendi Speed Booster Paket Dezavantajları:
Bu eklenti veya özelliklerinden birinin etkinleştirilmesinin web sitenizdeki diğer eklentilere aykırı olma riski vardır. 2. Asma JavaScript WP: Bu WordPress eklentisi, labjs kullanarak wp_enqueue_script () aracılığıyla eklenen tüm JavaScript’in yüklenmesini geciktirir. Sonuç, doğru yükleme süresinin optimizasyonudur. WP ertelenmiş JavaScripts’in avantajları: Kullanımı çok kolay ve piyasadaki en popüler çözümlerden biridir JavaScript’in WordPress’te ayrışmasını geciktirmek için açıkça tasarlanmış, sadece ek bir özellik olarak değil
WP ertelenmiş JavaScripts: Nadir güncellemeler ve daha yeni WordPress sürümleriyle uyumlu olmayabilir Web sitenizdeki diğer eklentilerin hasar görmesine neden olabilir
SSS (sık sık sorulan sorular)
JavaScript’in ayrışması veya yüklenmesinde gecikme nedir?
Gecikme veya yükleme JavaScript, JavaScript dosyalarını yalnızca web sitesi içeriğiniz yüklendikten sonra yüklemek anlamına gelir. Bu, önemli oluşturma sayfalarının veya yolların yüklenmesinde yer almayacağı anlamına gelir. JavaScript’in ayrışmasını geciktirdiğinizde, içeriğinizi ziyaretçilerinize görüntülemek için JavaScript yüklenene kadar web siteniz beklemez. Web sitesi başlangıçta içerik görüntüler ve ardından yalnızca CSS ve JavaScript dosyaları yüklenir. Web sitemin eğilimini engelleyen JavaScript’i nasıl silebilirim?
Gereksiz JavaScript’in kaldırılması için en yararlı yaklaşım, diğer web sitesi öğelerinden önce arızayı geciktirmektir. Sitenize değer katan gereksiz JS komut dosyalarını en aza indirerek diğer stratejileri kullanabilirsiniz. Ayrıca JavaScript ve CSS’yi birlikte birleştirmeye çalışmanızı öneririz.
Web sitemde önemli olmayan JavaScript’i tanımlamak için başka hangi araçları kullanabilirim?
Hangi JavaScript’in önemli olup olmadığını belirlemek için GTMetrix dışında birçok çevrimiçi araç var. Bazıları aşağıdaki gibidir: 1. Google PagePeed Insight: Google’dan gelen bu sayfa içgörü aracı, web sitenizin eksikliklerini hız ve performans açısından belirlemenize yardımcı olur. Bu araç, web sitenizin açık zamanını ayrıntılı içgörü ile artırmak için hangi adımları atmanız gerektiğine dair bazı değerli öneriler sunar. Web sitenizi farklı renk kodlarıyla görüntüler: düşük, ortalama turuncu ve sonsuza kadar yeşil için kırmızı. Benzer şekilde, bu araç aktarım boyutuna ve potansiyel tasarruflara sahip bir JS komut dosyası URL’si bulunur. Daha sonra talimatları izleyebilir ve kritik olmayan tüm JS/stilleri askıya alabilirsiniz. 2. Pingdom Web Sitesi Hız Testi: Pingdom Web Sitesi Hız Testi, web sitelerinin izlenmesine, izlenmesine ve test edilmesine yardımcı olan bir başka popüler araçtır. Bu aracı kullanarak, web sitenizin performansını analiz etmek için dünya çapında yedi farklı test sunucusu konumu arasından seçim yapabilirsiniz. Bu araç aynı zamanda diğer web sitesi test araçlarına benzer bir öneri listesi sunar. Sayfa performansını artırmak için bölümdeki önerileri aşağı kaydırabilir ve gözlemleyebilirsiniz. Daha iyi performans için ‘JavaScript’i altına koy’ seçeneğini seçmenizi tavsiye ediyoruz. Ancak, bu JavaScript kodunu geciktirmek, JS komut dosyasının WordPress sitenizi yavaşlatmasını önlemek için en kolay ve en etkili yöntemdir. Otomatikleştirme eklentisini kullanarak WordPress’teki JavaScript’in dökülmesini geciktirir miyim?
Evet yapabilirsin!AutoPtimize, JavaScript’in ayrışmasını geciktirmenize yardımcı olmak için yararlı bir eklentidir.İşlemi yapmak için, eklentiyi WordPress kontrol panelinizdeki eklenti sekmesinden yükleyin ve etkinleştirin ve aşağıdaki talimatları izleyin: Eklentiyi otomatik olarak yükledikten ve etkinleştirdikten sonra, Ayarlar sayfasını açın ve JS, CSS ve HTML seçeneklerini seçin. sayfanın.Şimdi JavaScript kodunu optimize etme seçeneğini kontrol edin ve ardından aşağıdaki resimde gösterildiği gibi diğer seçeneklerin kilidini açacaksınız.JS-Files Toplam seçeneğini kontrol edin ve diğerlerini oldukları gibi bırakın.Buna ek olarak, eklenti, hazırlanmayan engelleme özellikleri eklemek istemediğiniz JavaScript’i hariç tutmanıza olanak tanır.Gerekli değişiklikleri yaptıktan sonra, sayfanın sonuna kadar gidin ve Değiştir düğmesini tıklayın.
