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’in ü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. Aradaki farkı anlamanız için bu önemli 😉

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.

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.

Sizlere “oluşturmayı önleyen JavaScript ve CSS kodlarını ekranın üst kısmındaki içerikten kaldırın” probleminin çözümünde 2 farklı yoldan bahsedeceğim. Hadi gelin ilk çözüm ile başlayalım!

1-functions.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.

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:

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:

Ş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 iki kodu da functions.php dosyanızdan kaldırıp aşağıdaki ile değiştirin:

Ş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 😉

Ü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.

2-W3 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.

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.

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!