Yakın zamanda okuyucularımızdan biri bize Google sayfa hızı puanlarını artırmak için JavaScript'leri WordPress'te alt kısma nasıl taşıyabileceklerini sordu. Sordukları için mutluyuz, çünkü dürüst olmak gerekirse bunun hakkında yazmak istiyorduk. Daha önce, WordPress'e JavaScript ve CSS stillerini doğru bir şekilde nasıl ekleyeceğinizi konuşmuştuk. Bu makalede, WordPress'te JavaScript'leri alt kısma nasıl taşıyacağınızı göstereceğiz, böylece sitenizin yüklenme süresini ve Google sayfa hızı puanınızı iyileştirebilirsiniz.
JavaScript'leri Alt Kısma Taşımanın Faydaları
JavaScript istemci tarafı bir programlama dilidir. Kullanıcının web tarayıcısı tarafından çalıştırılır ve web sunucunuz tarafından değil. JavaScript'i üste koyduğunuzda, tarayıcılar sayfanızın geri kalanını yüklemeden önce JavaScript'i çalıştırabilir veya işleyebilir. JavaScript'ler alta taşındığında, web sunucunuz sayfayı hızla oluşturacak ve ardından kullanıcının tarayıcısı JavaScript'leri çalıştıracaktır. Sunucu tarafı oluşturma işleminin tamamı zaten yapıldığı için, JavaScript arka planda yüklenecek ve genel yükleme daha hızlı olacaktır.
Bu, Google sayfa hızı veya Yslow ile test ederken hız puanınızı iyileştirecektir. Google ve diğer arama motorları artık sayfa hızını arama sonuçlarını görüntülerken performans metriklerinden biri olarak kabul ediyor. Bu, daha hızlı yüklenen web sitelerinin arama sonuçlarında daha belirgin görüneceği anlamına gelir.
WordPress'e Betik Eklemenin Doğru Yolu
WordPress, tema ve eklenti geliştiricilerinin betiklerini sıraya eklemelerine ve ihtiyaç duyulduğunda yüklemelerine olanak tanıyan güçlü bir kuyruğa alma sistemine sahiptir. Betikleri ve stilleri doğru bir şekilde kuyruğa almak, sayfa yükleme hızınızı önemli ölçüde iyileştirebilir.
Temel bir örnek göstermek için bir WordPress temasına küçük bir JavaScript ekleyeceğiz. JavaScript'inizi .js dosyasına kaydedin ve bu .js dosyasını temanızın js dizinine yerleştirin. Temanızda JavaScript'ler için bir dizin yoksa, bir tane oluşturun. Betik dosyanızı yerleştirdikten sonra, temanızın functions.php dosyasını düzenleyin ve şu kodu ekleyin:
function wpb_adding_scripts() {
wp_register_script('my-amazing-script', get_template_directory_uri() . '/js/my-amazing-script.js','','1.1', true);
wp_enqueue_script('my-amazing-script');
}
add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );
Bu kodda wp_register_script() fonksiyonunu kullandık. Bu fonksiyonun aşağıdaki parametreleri vardır:
<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
Betiği bir WordPress sayfasının alt bilgisine veya altına eklemek için tek yapmanız gereken $in_footer parametresini true olarak ayarlamaktır.
Ayrıca, şablon dizininin URL'sini döndüren get_template_directory_uri() başka bir işlevini de kullandık. Bu işlev, WordPress temalarında betik ve stil kuyruğa alma ve kaydetme için kullanılmalıdır. Eklentiler için plugins_url() işlevini kullanacağız.
Sorun:
Sorun şu ki, bazen WordPress eklentileri kendi JavaScript'lerini <head> içine veya sayfa gövdesine ekler. Bu betikleri alta taşımak için eklenti dosyalarınızı düzenlemeniz ve betikleri düzgün bir şekilde alta taşımanız gerekir.
JavaScript Kaynağını Bulma
Sitenizi web tarayıcısında açın ve sayfa kaynağını görüntüleyin. Dosyanın konumunu ve kaynağını belirten JavaScript dosyasına bağlantıyı göreceksiniz. Örneğin, aşağıdaki ekran görüntüsü, betiğimizin ‘test-plugin101’ adlı bir eklentiye ait olduğunu gösteriyor. Betik dosyası js dizininde bulunmaktadır.
Bazen JavaScript'in ayrı bir .js dosyası aracılığıyla bağlanmak yerine doğrudan sayfaya eklendiğini göreceksiniz. Bu durumda, tüm eklentilerinizi tek tek devre dışı bırakmanız gerekir. Her eklentiyi devre dışı bıraktıktan sonra sayfayı yenileyin, böylece betiği sayfalarınıza ekleyen eklentiyi bulana kadar. Tüm eklentileri devre dışı bıraktıktan sonra bile JavaScript kaybolmazsa, JavaScript'in temanız tarafından eklenip eklenmediğini görmek için başka bir temaya geçmeyi deneyin.
Betikleri Kaydet ve Yükle
JavaScript'i üst bilgi bölümüne ekleyen eklentiyi veya temayı bulduktan sonra, bir sonraki adım eklentinin dosyayı çağırdığı yeri bulmaktır. Tema veya eklentinizin PHP dosyalarından birinde, o belirli .js dosyasına bir çağrı göreceksiniz.
Eklenti veya tema zaten JavaScript dosyasını eklemek için enqueuing kullanıyorsa, yapmanız gereken tek şey eklentinizde veya temanızda wp_register_script fonksiyonunu değiştirmek ve $in_footer parametresi için true eklemektir. Şöyle ki:
wp_register_script('script-handle', plugins_url('js/script.js' , __FILE__ ),'','1.0',true);
Eklentinizin veya temanızın üst bilgiye veya içerik arasına ham JavaScript eklediğini varsayalım. Eklenti veya tema dosyalarındaki ham JavaScript kodunu bulun, JavaScript'i kopyalayın ve bir .js dosyasına kaydedin. Ardından, JavaScript'i alt kısma taşımak için yukarıda gösterildiği gibi wp_register_script() fonksiyonunu kullanın.
Editörün notu: Temel dosyalarda değişiklik yaptığınızda ve eklentiyi güncellediğinizde değişikliklerinizin üzerine yazılmayacağını anlamak önemlidir. Bunu yapmanın daha iyi bir yolu, betiği kayıttan çıkarıp temanızın functions.php dosyasından yeniden kaydetmektir. Bu eğitime bakın.
Betikleri alt bilgiye taşımanın yanı sıra, daha hızlı bir sosyal medya eklentisi ve resimleri tembel yüklemeyi de düşünmelisiniz. Bununla birlikte, site hızınızı iyileştirmek için W3 Total Cache ve MaxCDN kullanmalısınız.
Bu makalenin JavaScript'leri WordPress'te alta taşımanıza ve sayfa hızınızı iyileştirmenize yardımcı olduğunu umuyoruz. Sorularınız ve geri bildirimleriniz için lütfen aşağıya bir yorum bırakın.
Ravi
js'lerini tek dosyaya taşıdığımda eklentilerim normal şekilde güncellenecek mi? Ben yeniyim.
WPBeginner Ekibi
Bunu yapmanın birden fazla yolu vardır. En yaygın olanlardan biri, farklı kaynaklardan yüklenen JavaScript dosyalarını tek bir JS dosyasına yapıştırmak ve ardından onu kuyruğa almaktır.
Catharine
Harika, teşekkürler!
Catharine
Merhaba Syed, eğitim için teşekkürler. Ancak ben tamamen acemiyim ve çok temel bir sorum var. Yayınladığınız kod parçası (tüm işlev vb.) için, kuyruğa almak istediğimiz her JavaScript parçası için bunu functions.php dosyasına eklememiz gerekiyor mu? Sanırım sormak istediğim, birden fazla sayfada üstbilgilerde yüklenen birden fazla JavaScript parçası olduğunda bu kodu nasıl biçimlendirirsiniz?
Yardımınız çok makbule geçecektir!
Marc Jacobs
Merhaba, harika bir eğitim. Ancak bir sorum var. Web sitemi Google Page Speed Insights ile çalıştırdım ve sayfa hızımı artırmak için engelleyici JavaScript'i (ve CSS'yi) ortadan kaldırmam gerektiği uyarısını aldım. Bu web sitesindeki bilgileri okudum (harika bir okuma!), ancak eklentinin hız eksikliğine neden olan js dosyalarını "çağırdığı" php dosyalarını bulamıyorum. Gecikmenin çoğuna neden olan eklentiyi (Google-maps-ready) belirledim, ancak oradan nasıl devam edeceğimi bilmiyorum. Eklenti klasöründeki her php dosyasını aradım, ancak google hız testinde bahsedilen dosyalara uzaktan benzeyen bir js dosyası bulamadım:
…
Hangi php dosyasını düzenleyeceğimi nasıl anlarım? Yardımcı olursanız çok sevinirim!
merhaba,
Marc.
WPBeginner Desteği
Sitenizdeki Google Haritaları Hazır bir eklenti bu dosyaları ekliyor.
Yönetici
Basavaraj Tonagatti
Merhaba, yakın zamanda Genesis Framework+Eleven 40 Child Theme'e geçtim. Google sayfa hızı testini çalıştırdığımda ben de aynı sorunla karşılaşıyorum. Ancak tam olarak nasıl yapacağımı bilmediğim için değişiklik yapmakta zorlanıyorum. Bana sitemdeki tam nedenin ne olduğunu ve bu Javascript sorununu nasıl kaldırabileceğimi kimse yönlendirebilir mi? (Herhangi bir stil dili bilmiyorum ve bu kod dilleri hakkında tamamen bilgim yok.)
Joseph Stanley-Hunt
Çok teşekkürler, bunu ve başka bazı numaraları (burada da cevaplarını buldum) nasıl yapacağımı merak ediyordum.
Bir sorum var ama parametrelerde
in-headolmadığını görüyorum. Bu,in_footeryanlış olarak ayarlanırsa, otomatik olarakheadbölümüne kaydedildiği anlamına mı geliyor?WPBeginner Desteği
Evet, varsayılan değer
in_footeriçin yanlıştır. Bu nedenle, aksi takdirdeheadbölümünde görüneceği içinin_footerdeğerini açıkça doğru olarak ayarlamanız gerekir.Yönetici
Mike
Eklenti güncellemesi de hemen aklıma geldi. Bununla ilgili daha fazla tavsiye için sabırsızlanıyorum.
Jason
Harika makale! Uzun zamandır bu soruları soruyordum çünkü çok sayıda tema, java betikleri önce yüklendiği için Google hız testinde ceza alıyor. Belki başkaları bu betikleri alt bilgiye nasıl koyacağını biliyordur.
Tekrar teşekkürler, bunu deneyip nasıl çalıştığını size bildireceğim.
Jeremy Myers
Harika bir eğitim.
Ancak eklentiyi güncellediğimizde bunu tekrar yapmamız gerekecek, değil mi? Ve her eklenti güncellemesinde mi?
functions.php'deki js'yi kayıttan çıkarıp sonra alt bilgiye bir şekilde yeniden kaydetmek mümkün mü?
adam
Merhaba, bu faydalı ipuçları için teşekkürler. Ancak, W3 Total Cache küçültme .js'lerini başlığa nasıl taşırım?
Bu, wp içeriğindeki önbellekteki js konumu, wp eklentisi değil.
Lucca
Değerli bilgi için teşekkürler – mükemmel çalışmaya devam edin.
Raj
Nice and Simple guide. Thanks for posting this article to increase the speed of WordPress
Danyel Perales
Güzel ipucu. Paylaştığınız için teşekkürler!