WordPress JavaScript Dosyalarını Footera Taşımak

Web site ve blog sahiplerinin en çok tercih ettiği web yazılımı Wordpress bazen yoğun eklenti kullanımı, temaların çok fonksiyon içermesi gibi sebeplerden dolayı web site testlerinden düşük puan alabiliyor. Bu testlerden en önemlisi diye nitelendirebileceğimiz Google PageSpeed skorunda 85/100’ün üstünü görebilmek için Google’ın web sitemizin test sonucunda verdiği önerileri dikkate almak gerekiyor. “JavaScript dosyalarını footera taşımak” adlı bu yazımda Google PageSpeed testinde sıkça karılaşılan problemlerden birisine çözüm üreteceğiz.

* Yazıya devam etmeden önce web site testinizi hemen yapmak için buraya tıklayın. Testi yapıp sonucu bir kenara kaydedin ve yazının sonunda karşılaştırma yapın.

Eğer şimdiye kadar  web siteniz üzerinde herhangi bir optimizasyon işlemi yapmadıysanız sitenizi Google PageSpeed Insights testine soktuğunuzda “Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın” şeklinde bir hatayı muhtemelen alacaksınız.

JavaScript Dosyalarını Footera Taşımak
Google PageSpeed Insights

PageSpeed testinin size verdiği geri dönütler, üzerinde çalıştığınızda ve olumlu puan aldığınızda Google sıralamanızı artıracak çok önemli geri dönütlerdir. Bu testten 85/100 üzerine çıkmak güzel bir başarı sayılır.

Google’ın hız testinden 85’in üzerine çıkmanıza engel olan hatalardan en sık karşılaşılanı JavaScript (JS) dosyalarının gereksiz olsa bile sitenizdeki içerikle aynı anda hatta daha önce yükleniyor olmasıdır.  Google, ziyaretçileri hemen sitedeki içeriğe ulaştıran web sitelerini çok sever ve kıymet verir. Bunu için de JS ve CSS dosyalarını optimize etmenizi ister. Şimdi ben de size “Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın” hatasındaki JS dosyalarından nasıl kurtulacağınızı göstereceğim.

Bu problemin çözümünde 2 farklı yoldan bahsedeceğim.

1functions.php dosyasını düzenleyerek

Eğer WordPress üstünde belirli bir zaman harcamışsanız “functions.php” dosyasını vakti zamanında düzenlemiş ya da en azından adını duymuşsunuzdur.

“funcitons.php” dosyası tema klasörlerinin içerisinde yer alan ve temanın fonksiyonlarının tanımlandığı genellikle uzun ve karmaşık bir dosyadır. Bu dosya WordPress sitenizde kullandığınız tema klasörünün yani /wp-content/themes/sizin-temaniz adlı klasörün içerisinde yer alır. Bu klasöre cPanel üzerindeki dosya yöneticisi ile ulaşabilirsiniz. Ya da FTP hesabınız vasıtası ile Filezilla gibi FTP programlarını kullanarak erişebilirsiniz. Bu kısımları zorlanmayacağınızı düşündüğüm için atlıyorum.

DİKKAT! Aşağıda anlatacağım adımlar aslında çok kolay olsa da yine de web sitenize zarar verebileceğinizi bilmeniz gerekiyor. Anlattığım her şey düzeltilebilir şeyler ancak anlatmadığım ve yanlışlıkla yaptığınız şeyleri düzeltmek zor olabilir. Bu yüzden functions.php dosyanızı düzenlemeden önce mutlaka kopyasını alın ve bir yere kaydedin. Lütfen hiç bilginiz yoksa bir bilene danışarak yapın ya da dilerseniz ben size özel destek verebilirim. Benimle iletişim kurun.

Web sitenizin /wp-content/themes/sizin-temaniz/ dizinine ulaştığınızı düşünerek devam ediyorum. Tema klasörünüzün içerisinde “funcitons.php” dosyasını gördünüz bile. Şimdi o dosyayı bir metin editörü ile açın ve düzenleyin. Dosyanın en sonuna şu kodu olduğu gibi yapıştırın:

DİKKAT! Çoğu temada functions.php dosyasının en sonunda ?> ifadesi yer alır. ancak bazı temalarda bu ifade olmaz. Eğer sizin temanızın functions.php dosyası da ?> ile bitiyorsa lütfen aşağıda verdiğim kodları bu ifadeden hemen önce ekleyin.

// JS dosyalarını footera taşıma kodu başlangıcı. 
function remove_head_scripts() { 
remove_action('wp_head', 'wp_print_scripts'); 
remove_action('wp_head', 'wp_print_head_scripts', 9); 
remove_action('wp_head', 'wp_enqueue_scripts', 1); 
add_action('wp_footer', 'wp_print_scripts', 5); 
add_action('wp_footer', 'wp_enqueue_scripts', 5); 
add_action('wp_footer', 'wp_print_head_scripts', 5); } 
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' ); 
// JS dosyalarını footera taşıma kodu sonu.

Bu kodu functions.php dosyasına yaıştırdıktan sonra dosyayı kaydedin. Ardından PageSpedd testini yeniden uygulayın. JS dosyaları hakkında verdiği uyarıyı karşılaştırın. Eğer değişiklik olmuşsa rahatlayın hepsi bu kadar! 🙂

Bazı temalar bu kodlarla herhangi bir değişiklik göstermeyebilir. Eğer PageSpedd Insights sonuçlarında gösterilen javascript dosyalarının sonunda .js?ver=1.3.5 gibi bir versiyon kodu bulunuyorsa şimdi yapacağımız adımları deneyin.

Öncelikle aşağıdaki kodu functions.php dosyasına ekleyin:

// Version parametresini kaldır kodu başlangıcı

function vc_remove_wp_ver_css_js( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );

// Version parametresini kaldır kodu sonu

 

Yukarıdaki kodu functions.php dosyasının en sonuna ekleyin. Ardından başka hiçbir değişiklik yapmadan testi yenileyin. Versiyon parametreleri kalkmış şekilde görünecektir.

Versiyon parametrelerini kaldırdıktan sonra ilk verdiğim kodu yukardaki versiyon parametreleri kaldırma kodunun hemen altına ekleyin ve testi yeniden deneyin. Yani functions.php dosyasının en altındaki görüntü şu şekilde olacak:

// Version parametresini kaldır kodu başlangıcı
function vc_remove_wp_ver_css_js( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );

// Version parametresini kaldır kodu sonu

// JS dosyalarını footera taşıma kodu başlangıcı.
function remove_head_scripts() {
remove_action('wp_head', 'wp_print_scripts');
remove_action('wp_head', 'wp_print_head_scripts', 9);
remove_action('wp_head', 'wp_enqueue_scripts', 1);
add_action('wp_footer', 'wp_print_scripts', 5);
add_action('wp_footer', 'wp_enqueue_scripts', 5);
add_action('wp_footer', 'wp_print_head_scripts', 5); }
add_action( 'wp_enqueue_scripts', 'remove_head_scripts' );
// JS dosyalarını footera taşıma kodu sonu.

Şimdi testi tekrar yaptığınızda oluşturmayı engelleyen JS dosyalarının tamamen uyarından çıktığını ya da dosyaların azaldığını göreceksiniz.

Eğer bu da olmadı diyorsanız yukarıdaki kodu functions.php dosyanızdan kaldırıp aşağıdaki ile değiştirin:

// Version parametresini kaldır kodu başlangıcı
function vc_remove_wp_ver_css_js( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'vc_remove_wp_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'vc_remove_wp_ver_css_js', 9999 );

// Version parametresini kaldır kodu sonu

//Alternatif JS dosyalarını footera taşıma kodu başlangıcı
function footer_enqueue_scripts() {
 remove_action('wp_head', 'wp_print_scripts');
 remove_action('wp_head', 'wp_print_head_scripts', 9);
 remove_action('wp_head', 'wp_enqueue_scripts', 1);
 add_action('wp_footer', 'wp_print_scripts', 5);
 add_action('wp_footer', 'wp_enqueue_scripts', 5);
 add_action('wp_footer', 'wp_print_head_scripts', 5);
}
add_action('after_setup_theme', 'footer_enqueue_scripts');

// Kod sonu

Şimdi JS dosyalarının versiyon parametlerinin kalktığını ve oluşturmayı önleyen JS dosyalarının artık olmadığını göreceksiniz.

ÖNEMLİ! Yukarıda anlattığım işlemleri yaptığınızda sitenizin bazı fonksiyonları çalışmayabilir. Bunun sebebi aslında bazı JS dosyalarının temanın en üstünde yüklenmesi gerekliliğidir. Siz onları footera taşıdğınızda temanız doğal olarak düzgün bir şekilde çalışamaz. Eğer böyle bir sorunla karşılaşırsanız functions.php dosyanızı yeniden açın ve eklediğiniz kodları tamamen silin. Bu yöntem sizin için ne yazık ki uygun bir yöntem değil.

Eğer web siteniz sorunsuz çalışıyor ve Google PageSpeed Insights sonuçlarındaki JS dosyalarını artık görmüyorsanız işlem tamamdır. 2. yöntem sizi ilgilendirmiyor 😉

JavaScript Dosyalarını Footera Taşımak
BlogKurdu.net PageSpeed testi sonucu. Oluşturmayı önleyen tüm JS dosyaları kayboldu. Sadece bir tane CSS dosyamız var 😉

Üzülmeyin! W3 Total Cache eklentisi ile bu problemi de halledebiliyoruz. O halde şimdi 1. yöntemde başarısız olanlar için 2. yönteme geçelim.

2W3 Total Cache Minify Ayarları İle

Daha önceki bir yazımda W3 Total Cache Nedir? Nasıl Kullanılır? diyerek W3 Total Cache eklentisini tanıtmıştım ve ardından W3 Total Cache Ayarları ile Daha Hızlı WordPress adlı yazımda da bu ekntinin ayarlarının nasıl yapılması gerektiğini uzun ve detaylı bir şekilde anlatmıştım.

W3 Total Cache ayarlarını anlatırken sizlere “Minify” ayarlarını “Auto” modunda etkinleştirmenizi söylemiştim. Oluşturmayı önleyen JS dosyaları hatasının çözümü “Minify” ayarlarını “Manual” olarak yapmakta.

Şimdi öncelikle eğer W3 Total Cache ayarlarını yapmadıysanız hemen önceki yazılarımı okuyarak adım adım yapın ve “General Settings” altındaki “Minify” ayarlarını yaparken “Manual” seçeneğini işaretleyin. Eğer ayarları yapmışsanız sadece Minify ayarlarını Auto yerine Manual olarak değiştirin.

JavaScript Dosyalarını Footera Taşımak

Yukarıdaki adımları yaptıysanız admin panelinizde Performance seçeneği altındaki “Minify” kısmına gidelim. Burada JS başlıklı bölüme gidiyoruz.

Before </body> yazan kısmı Combine Only ve “Non-blocking usign async” seçenekleri aktif olacak şekilde değiştiriyoruz.  Bu bölümü de hallettikten sonra “Theme:” yazan kısımdan şuan sitemizde kullandığımız aktif temayı seçiyoruz. Ardından alt taraftaki “Add a script” butonuna basarak Google PageSpeed testimizde bize hata olarak verdiği JS kodlarını tek tek yapıştırıyoruz. Her biri için aşağıdaki resimde görüldüğü gibi ayarlamaları yapıyoruz. Ancak birden fazla JS dosyası için hata almışsanız her birini tek tek ekleyip ekledikten sonra tek tek deneme yaparak sitenizde bir hata oluşup oluşmadığını inceleyin.

JavaScript Dosyalarını Footera Taşımak

Yani bir dosyayı ekleyin ve kaydedin. Ardından sitenizi bir gözden geçirin bir bozulma yada fonksiyon kaybı yoksa diğer JS dosyasını aynı şekilde ekleyip tekrar kaydedin tekrar deneyin. Hiçbir sorunla karşılaşmazsanız her şey tamam demektir! Ancak temanızı bozan bir dosya eklerseniz o dosyayı çıkarıp diğerlerini eklemeye devam edin. Bu şekilde tüm JS dosyalarını ekledikten sonra PageSpeed testini yapın ve gözlerinizle güzel sonucu görün 😉

Hepsi bu kadar! Aslında okurken zormuş gibi görünebilir ama başardığınızda kendinizle gurur duyacaksınız. Eğer tüm adımlara rağmen başarılı bir sonuç alamadıysanız lütfen aşağıdaki yorum alanı yardımı ile sorularınızı çekinmeden sorun. Elimden geldiğince yardımcı olurum 🙂 Dilerseniz iletişim sayfası aracılığı ile mesaj olarak da bana soru sorabilirsiniz.

Hepinize iyi bloglamalar!

32 comments

  1. merhaba hocam sorum su olacak o tek kalan css hatasını gıderme sansımız yokmu varsa nasıl yapabılırım yardımcı olursanız cok sevınırım tesekkurler ıyı calısmalar

    1. Merhabalar!
      PageSpeed’de CSS dosyaları için verilen uyarılar footer’a taşımak için değil optimizasyon içindir. CSS dosyalarının header kısmında yüklenmesi sitenin düzgün açılması için şarttır. CSS dosyalarını sıkıştırarak, boyutlarını küçülterek optimize edip tekrar doğru dizine yükleyebilirsiniz. Google PageSpeed sonucunun en altında optimize edilmiş şekilde bütün dosyaları size verir. Onları indirip yükleyin. Yine de değişmez ise sıkıntı yapmayın, tek bir CSS dosyası büyük bir kayıp değildir 🙂

  2. hocam bir web sitesi hızına bakarmısın benim düzenleyebildigim bu ne yaptıysam cıkartamadım o tek hatayı birde siz bakarmısınız rica etsem merzifonluyuz(.)com

    1. Web sitenizin PageSpeed değeri 100 üzerinden 96. Bence şuan olağanüstü bir skor. Bu skora yaklaşamayan binlerce insan var 🙂 Üstelik hem mobil hem de masaüstü skorunuz çok çok iyi. Blog Kurdu’nun skoru bile sizden oldukça düşük. Bence canınızı sıkacak, tek CSS dosyasını takıntı yapacak hiçbir şey yok. Şuan sizin yerinizde olmak isteyen insanlar bu yorumlarınıza sinirleniyorlardır. Hoşça kalın 🙂

  3. Hocam Cevabınız İçin Teşekkürler Yönlendirmeleri yaptım ama gel bana sor bu hale getirene kadar son bır sorum olacak mobılle ılgılı bu nedırve cozumu nedır
    Hafifçe vurma hedeflerini uygun şekilde boyutlandırın
    Web sayfanızdaki bağlantılardan/düğmelerden bazıları dokunmatik ekranda kullanıcıların zorlanmadan hafifçe vurabilmeleri için çok küçük olabilir. Daha iyi bir kullanıcı deneyimi sağlamak için bu hafifçe vurma hedeflerinin boyutlarını büyütmeyi düşünün.

    1. Bu uyarı temanızın tasarımı ile ilgili bir uyarıdır. Mobilde yer alan butonların, linklerin vb. ögelerin birbirine çok yakın olması gibi tasarımsal durumlar bu uyarıya sebep olur. Mesela örnek olarak “devamını oku” linki ile “yorumlar” linki birbirine çok yakınsa bu uyarıyı alırsınız.

  4. Bunların duzeltımı ıle ılgılı bır calısmanız varmı yardımcı olabılecek sekılde css ıle ılgılı yardımı sızın makalenızden aldım basarılarınızın devamını dılerım

    1. O konularla ilgili de paylaşımlarda bulunacağım fakat henüz net bir tarih veremiyorum. Sırada bekleyen fazlaca yazı var 🙂 Umarım diğer konularda da yardımcı olacak içerikler bulabilirsiniz. Yeni yayınlanan içerikleri kaçırmamak için ücretsiz bir şekilde e-posta abonesi olabilirsiniz. Kendinize iyi bakın.

  5. Hocam merhaba. WordPress optimizasyon çalışmaları özellikle blog yazanlar için ciddi önem arz ediyor. Yazmış olduğunuz makaleyi çok beğendim gayet anlaşılır ve uygulanabilir bir yazı olmuş. Sayenizde google, pingdom tools, gtmetrix değerlerimi bir tık daha yükselttim. Teşekkür ediyorum başarılar!

  6. Merhaba,function.php dosyasında değişiklik yaptıgımda hız testinde herhangi bir değişiklik olmadı.W3 Total Cache de ise evet %71 den %85 ‘e cıktım ancak minify dediğim vakit sitem açılmıyor.Bu sorunu nasıl halledebilirim yardımcı olursanız çok sevinirim.

    1. Merhabalar, functions dosyası için verdiğim kodlar minify özelliği temanın Javascript dosyalarını direkt olarak etkilediği için bu hatalarla karşılaşmak çok olası bir durum. Temayı görmeden bir şey demek çok zor. Dilerseniz özel çalışma yapmam mümkün 🙂

  7. merhaba detube teması kullanıyorum optimizasyon çalışmanızın ücretini mail kısmında yazdığım mailime yazar mısınız.skype de aynı adresdir. ekleyebilirseniz sevinirim. saygılar.

  8. slm hocam ne yaptıysam bu sefer baska bır sıtemde basaramadım hata aldım yardımcı olurmusunuz

  9. Slm Ömer Faruk Ban Bu Konuda Yardımcı OLurmusun Ftp Bilgilerini Veriyim Bir Kontrol Edermisin Ne Yaptıysam Olumsuz Kurtulamadım Düzeltilmesi Gerekiyor:
    Tarayıcı önbellekleme özelliğinden yararlanın
    Nasıl düzeltileceğini göster
    Düzeltmeyi Düşünün:
    Oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın
    Nasıl düzeltileceğini göster
    Resimleri optimize edin
    Nasıl düzeltileceğini göster
    Sunucu yanıt süresini kısaltın
    Nasıl düzeltileceğini göster
    HTML’yi küçültün
    Nasıl düzeltileceğini göster
    bu hatalardan

      1. İşin kötü tarafı site sanki mobil uyumlu değilmiş gibi görünüyor. Google artık önümüzdeki dönemde buna çok önem verecek. Bir türlü halledemedim. Tema değiştirme bile düşünüyorum son adımda.

Leave a Reply

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir