Google tarafından hazırlanan web tabanlı site hızı ölçme aracı Pagespeed Insights'ta "Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın" uyarısı mı alıyorsunuz? Bu JavaScript ve CSS kodları hatasını kolaylıkla çözebilirsiniz. Gördüğünüz gibi aşağıdaki çözüm yöntemleriyle Wordpress web sitemin hızını önemli ölçüde arttırdım.
Bu Hata Neden Olur?
Web sitesi hızı, Google gözünde önemli ölçüde bir değere sahiptir. Bu hızı belirleyen belli başlı faktörler arasında da, web sitenizde kullanılan CSS ve JavaScript dosyalarının kullanımı gelir. Web sitenizin header bölümünü incelerseniz, CSS ve JavaScript dosyalarını çağıran kod satırları görebilirsiniz. Bu kodlar temanın belli özelliklerini veya bir eklentinin özelliklerini çağırmak için kullanılabilir.
Tarayıcılar, her zaman öncelik olarak bu dosyaları yüklerler. Eğer fazla CSS ve JavaScript dosyası çağrılmış ise, bu web sitenizin yüklenmesini geciktirmiş olur. Eğer bu sorunu çözerseniz, site açılış hızı konusunda büyük bir avantaj sağlamış olursunuz.
Çözümü Nedir?
Google PageSpeed puanınızı yükseltmek istiyorsanız, yapabileceğiniz birkaç şey var. Bunları isterseniz manuel olarak isterseniz de eklentiler ile yapabilirsiniz. Size manuel kodlar ile yapmayı ve W3 Total Cache veya Autoptimize eklentileriyle yapmayı göstereceğim.
#1 - W3 Total Cache Eklentisi ile Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırma
Eğer normalde de bu eklentiyi kullanıyorsanız, yalnızca birkaç ayar yapmanız gerekecek. Eğer eklenti sitenizde kurulu değilse, Wordpress eklentiler kısmında W3 Total Cache araması yapın ve eklentiyi kurun. Öncelikle bu ayarları yapmadan önceki hız testi sonucunu paylaşıyorum. Ayarlar sonrasındaki sonucu da paylaşacağım.
# Sol taraftaki menülerde Performance seçeneğini göreceksiniz. Bu kısımdan General Settings seçeneğine giriş yapın. Sayfayı biraz aşağı kaydırdığınızda Minify bölümünü göreceksiniz. Bu bölümden Minify seçeneğini aktif hale getirin. Bir alt satırdaki Minify Mode seçeneğini de Manuel olarak ayarlayın. Alt kısımdaki mavi Save all settings butonuna tıklayarak tüm ayarları kaydedin.
# Manuel seçeneğini seçtiğimiz için, oluşturmayı engelleyen kaynak dosyalarını el ile belirtmemiz gerekiyor. Bunun için PageSpeed Insights aracınındaki kaynak dosyalarını kullanacağız. Sitenizi tarattıktan sonra aşağıya doğru inin ve "Oluşturmayı engelleyen kaynakları ortadan kaldırın" yazısının üzerine tıklayın. Resimde gördüğünüz gibi kaldırmanız gereken dosyalar sırayla listelenecek.
# Bu listedeki dosyaların URL'sini almak için üzerine sağ tıklayıp Bağlantı adresini kopyala seçeneğini kullanabilirsiniz.
# Şimdi tekrar eklenti ayarlarına dönüyoruz. Performance kısmından Minify seçeneğine giriş yapın. Sayfayı biraz aşağıya kaydırıp JS ayarlarına inin. Bu kısımdaki Before seçeneğinin Embed Type türünü Non-blocking using "async" olarak değiştirin. Daha sonra alt kısımda Js file management kısmındaki Add a script butonuna tıklayın. Bu butona tıkladığınızda URL girebileceğiniz bir alan açılacak. Bu alana PageSpeed Insights'tan aldığınız kaynak dosyalarının URL'lerini yapıştıracaksınız. Yalnız unutmayın bu kısma yalnızca Javascript dosyalarını eklemeniz gerekiyor. Link içerisinde jquery veya .js yazısı görüyorsanız, bunlar Javascript dosyasıdır. Her URL için Add a script butonuna tıklayın ve tüm URL'leri ayrı ayrı yapıştırın.
# Eğer PageSpeed aracında oluşturma engelleyici javascript'i kaldırın hatası da yer alıyorsa, oradaki JS dosyasını da JS ayarlarına ekleyin.
# Tüm URL'leri yapıştırdıktan sonra sayfayı biraz daha aşağıya kaydırıp CSS ayarlarına gelin. Bu kısımda da eğer CSS minify settings aktif değilse aktif hale getirin. Bu şekilde css küçültme işlemi de yapmış olacağız. Alt kısımdaki Add a style sheet butonuna tıklayın. JS ayarlarında yaptığınız işlemlerin aynısını burada da yapacaksınız. Bu kısma da sadece CSS dosyalarının URL'sini yapıştırmanız gerekiyor. Link içerisinde .css geçen bütün kaynaklar birer CSS dosyasıdır.
# Tüm ayarlar tamamlandıktan sonra sağ kısımdaki mavi renkli Save All Settings & Purge Caches butonuna tıklayarak tüm ayarların kaydolmasını ve önbelleklerin temizlenmesini sağlayın.
Site hızlandırma için yapacağınız tüm ayarlar bunlar. Artık yalnızca site açılma hızı test aracına girerek testinizi gerçekleştirin. Hala aynı hata yer alıyorsa biraz vakit geçtikten sonra tekrar deneyin. Bu da ayarları yaptıktan sonraki hız testi sonucumuz. Farklı optimizelerle bu sonucu daha da arttırabilirsiniz.
[su_highlight background="#c8021e" color="#ffffff"]Yaptığınız ayarlar sonrasında web sitenizi iyice kontrol edin. Herhangi çalışmayan bir kısım veya eklenti olabilir. Böyle bir durumla karşılaşırsanız, eklediğiniz URL'leri tek tek silerek hangisinden kaynaklandığını tespit etmeye çalışın.[/su_highlight]
#2 - Autoptimize Eklentisi ile Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırma
Eğer farklı bir eklenti ile de yapabilir miyim diye merak ediyorsanız, Autoptimize eklentisiyle de aynı işlemleri yapabileceğinizi belirtmek isterim. Ben şahsen W3 Total Cache kullanıyorum. Ancak seçim size kalmış. Hangisinin daha performanslı olacağını düşünüyorsanız, o eklentiyi tercih edebilirsiniz. Alacağımız sonuçlar aşağı yukarı aynı olduğu için burada hız testi sonuçlarını paylaşmayacağım. Yapmanız gereken ilk şey Autoptimize eklentisini yüklemek.
# Eklentiyi yükleyip aktif ettikten sonra Ayarlar kısmından Autoptimize seçeneğine tıklayın. Bu kısımdan eklentinin ayarlar bölümüne girmiş olacağız.
# İlk baştaki JavaScript Seçenekleri kısmındaki ayarları yapacağız. Bu kısımda ayarlar bölümü kapalı halde gelecektir. JavaScript kodunu optimize et seçeneğini aktif hale getirdiğinizde, diğer tüm ayarlar da aktif hale gelmiş olacak. Daha sonra Satıriçi JS kodlarını toparla seçeneğini de aktif hale getirin. Bu sayede Body içinde çağrılmış olan tüm JavaScript kodlarını toparlamış olursunuz. Autoptimizeden hariç tutulacak scriptler kısmı otomatik olarak dolu gelir. Bu, önemli JS dosyalarının hariç tutulmasını sağlar. Son olarak da "Try-catch" sarma özelliğini ekle seçeneğini aktif hale getirin. Aldığınız hataları minimum seviyeye indirmiş olur.
# Alt kısımdaki CSS Seçenekleri kısmının ayarlarını da yapalım. Bu kısımda CSS kodunu optimize et seçeneğini aktif hale getirin. Seçeneği aktif hale getirdikten sonra CSS dosyalarını toparla ve Satıriçi CSS'i toparla seçenekleri aktif hale gelecek. Bunlardan başka herhangi bir ayar yapmanıza gerek yok.
# Ayarları yaptıktan sonra sayfanın en aşağısına inerek Değişikleri Kaydet ve Önbelleği Temizle butonuna tıklayın. PageSpeed aracına girerek test yapın.
[su_highlight background="#c8021e" color="#ffffff"]Yaptığınız ayarlardan sonra sitenize girerek inceleme yapın. Çalışmayan bir eklenti veya kısım varsa seçenekleri devredışı bırakarak sorunu tespit etmeye çalışın. [/su_highlight]
#3 - Manuel Kodlar ile Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırma
Makalenin başında bu hatanın, header kısmındaki CSS ve JS dosyalarından kaynaklandığını söylemiştik. Bu dosyaları çağıran kodları header yerine footer bölümüne taşımanız, hem sitenin hızında artış hem de bu hatanın ortadan kaybolmasını sağlar. Ancak bu işlem temanızdaki bazı kısımların veya eklentilerinizin çalışmasını engelleyebilir. Eğer illa ben eklentisiz yapmak istiyorum derseniz, bu yöntemi deneyebilirsiniz. Ben eklenti ile yapmayı tercih ediyorum.
Bütün JavaScript Kodlarını Footer'a Bölümüne Taşımak
Bu çok kolay bir işlemdir. Fonksiyon dosyasına ekleyeceğiniz bir dizi kod yardımı ile header kısmında bulunan tüm Javascript çağıran kodları footer bölümüne taşıyabilirsiniz. Aşağıdaki kodu temanızın functions.php dosyasına eklemeniz gerekiyor.
[su_quote]
function sdt_remove_ver_css_js( $src ) {
if ( strpos( $src, 'ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'sdt_remove_ver_css_js', 9999 );
add_filter( 'script_loader_src', 'sdt_remove_ver_css_js', 9999 );
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');
[/su_quote]
[su_highlight background="#c8021e" color="#ffffff"]Kodu functions.php dosyasına ekledikten sonra sitenizde veya eklentilerinizde bir bozulma meydana gelirse, kodları tamamen kaldırın ve eklenti ile yapmayı deneyin.[/su_highlight]