(Çözüm) Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın
Oluşturmayı engelleyen kaynakları ortadan kaldırın uyarısı mı alıyorsunuz? Bu makalede bu uyarının nedenini ve nasıl üstesinden gelebileceğinizi öğreneceksiniz. Ayrıca bu sayede site hızınızda da artış yaşayacaksınız.
Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın Nedir?
Oluşturmayı engelleyen kaynakları ortadan kaldırın WordPress kullanıcılarının sık sık karşılaştığı uyarılardan biridir. Google Pagespeed aracında site hızınızı test ettiğiniz zaman bu uyarıyla karşılaşırsınız. Bu uyarının tam olarak ne anlama geldiğini anlamak için, web tarayıcılarının sisteminin nasıl çalıştığını da bilmeniz gerekiyor.
Biri web sitenize giriş yaptığı zaman, tarayıcı web sitenizdeki kodları en üstten en aşağıya doğru sırasıyla okuyarak derlemeye başlar. Bunu yaparken herhangi bir CSS veya JavaScript dosyasına denk gelirse o dosyayı indirip işlemek zorundadır. Bu süreçte de diğer işlemleri okumayı durdurur. Yani kaynaklar indirilip okunurken sitenizin diğer kodlarının yüklemesi bir süreliğine bekletilir.
Eğer JavaScript kodlarınız header bölümünde olursa bu aslında sizin ve ziyaretçiler için bir sorundur. Çünkü tarayıcı öncelikle meta bilgilerini, javascript dosyasını ve sonraki HTML kodlarını yani site içeriğini okumaya başlar. Bu da site içeriğinin daha geç yüklenmesine neden olur.
Oluşturmayı engelleyen kaynakları ortadan kaldırın uyarısını aldığınız zaman aslında Google size gereksiz kaynakları header bölümünde yüklemekten vazgeç diye bir tavsiyede bulunuyor.
Aşağıdaki yöntemleri kullanarak bu sorunun üstesinden gelecek ve site hızınızı da arttırmış olacaksınız.
WordPress Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırın Çözümü
Bunu ortadan kaldırmak için iki yolumuz var. Birisi manuel olarak kodlarla oynayarak, diğeri de WordPress eklentilerini kullanarak. Herkesin kodlama bilgisi olmadığı için daha kolay yöntem olan eklentilerle bu işi halledeceğiz. Ancak başlamadan önce bilmeniz gereken iki şeyden bahsedeceğim. Async ve Defer. Bu iki yöntemin ne olduğunu anlamanız önemli. İleride eklentide bunlar arasından seçim yapmanız gerekecek.
Async ve Defer
Oluşturmayı engelleyen JavaScript’leri ortadan kaldırmak için kullanabileceğimiz yöntemlerden biridir. Öncelikle bunların ne olduğuna bakalım. Ayrıca fotoğrafta sistemin nasıl çalıştığını grafik olarak daha iyi anlayabilirsiniz.
Autoptimize + Async Javascript Eklentisi (Ücretsiz)
Autoptimize ve Async Javascript eklentileri aynı geliştirici tarafından paylaşılmış ücretsiz eklentilerdir. Bu eklentiler sayesinde hem CSS hem de JavaScript dosyalarını optimize edebilirsiniz.
- Öncelikle Autoptimizeve Async Javascripteklentilerini sitenize yükleyin.
- Öncelikle Ayarlar > Async Javascript eklentisine tıklayın.
- En üstteki Enable Async Javascript kutusunu işaretleyin.
- Alttaki Quick Settings bölümünden de Async veya Defer seçeneklerinden birini seçmeniz gerekiyor. Öncelikle Async seçeneğini seçip test yapabilirsiniz. Eğer bu seçenek sitenizde sorunlara neden olduysa Defer seçeneğini deneyin. Ancak Defer seçeneğini seçerken jQuery’leri hariç tutmanız gerekiyor. Defer (jQuery excluded) seçeneğini seçin yani.
- En aşağıya inerek ayarları kaydedin.
Async Javascript ayarlarında yapmanız gereken şeyler bu kadar. Şimdi Autoptimize eklentisinin ayarlarını yapalım.
- Ayarlar > Autoptimize eklentisine tıklayın.
- JavaScript Kodunu Optimize Et ve CSS Kodunu Optimize Et seçeneklerini işaretleyin.
- En aşağıya inerek değişiklikleri kaydedin.
Tüm işlemler bittikten sonra PageSpeed testi yapabilirsiniz.
WP Rocket Eklentisi (Ücretli)
WP Rocket, ücretli ve oldukça sağlam bir performans eklentisidir. Ben de bu eklentiyi kullanıyorum. Bu sayede sitenizdeki oluşturmayı engelleyen kaynakları ortadan kaldırın uyarısıyla karşılaşmıyorum. Bu uyarı bazen karşınıza sitenizdeki oluşturmayı engelleyen CSS ve JavaScript kodlarını ortadan kaldırın olarak da çıkabiliyor. İkisi de aynı şey. Buraya tıklayarak WP Rocket resmi sitesine gidebilir ve eklentiyi satın alabilirsiniz. Veya R10gibi forumlardan eklentiyi daha uygun fiyatlara satın alabilirsiniz.
- Eklentiyi alıp sitenize kurulumu yaptın.
- Ayarlar > WP Rocket seçeneğine tıklayın.
- CSS dosyalarını küçült ve CSS teslimini iyileştir seçeneklerini işaretleyin.
- Aynı sayfadan aşağıya inerek JavaScript dosyasını küçült ve Ertelenmiş JavaScript yükle seçeneklerini işaretleyin.
- Sayfanın ene aşağısına inip değişiklikleri kaydet butonuna tıklayın.
Tüm bu işlemlerden sonra PageSpeed testi yapabilirsiniz.
JavaScript Kodlarını Footer’a Taşıyın
Yukarıdaki tüm işlemler eklentileri kullanarak kolaylıkla yapabileceğiniz işlemlerdir. Bu işlemlerse eklentisiz oluşturmayı engelleyen kaynakları ortadan kaldırın hatasını çözmek için kullanabileceğiniz bir yöntem. Normal şartlarda header.php dosyasını açıp tüm CSS ve JavaScript kodlarını tek tek taşıyabilirsiniz. Ancak kod bilgisi olmadan bunları yapmak zor.
Bunun için sizlere bir kod vereceğim. Bu kodu functions.php dosyasına yapıştırarak işlemi otomatik olarak yapmış olacaksınız. Bu kodu functions.php dosyasına ekledikten sonra sitenizi kontrol edin. Herhangi bir hata yoksa kullanmaya devam edebilirsiniz.
- WordPress panelinize girin.
- Görünüm > Tema düzenleyicisine tıklayın.
- Sağ taraftaki tema dosyaları bölümünden functions.php dosyasına tıklayın.
- Aşağıdaki kodları kopyalayarak functions.php dosyasının en altına yapıştırın ve kaydedin.