WordPress’te Render Engelleyici JavaScript ve CSS Nasıl Onarılır

WordPress’te render engelleyici JavaScript ve CSS’yi ortadan kaldırmaya mı çalışıyorsunuz?

Web sitenizi Google PageSpeed Insights’ta test ederseniz, muhtemelen render engelleyici komut dosyalarını ve CSS’yi ortadan kaldırmanız için bir öneri göreceksiniz. Ancak, WordPress sitenizde bunu nasıl yapacağınıza dair herhangi bir ayrıntı sağlamaz.

Bu makalede, Google PageSpeed puanınızı iyileştirmek için WordPress’te render engelleyici JavaScript ve CSS’yi nasıl kolayca düzeltebileceğinizi göstereceğiz.

Render Engelleyici JavaScript ve CSS Nedir?

Render engelleyici JavaScript ve CSS, bir web sitesinin bu dosyaları yüklemeden önce bir web sayfasını görüntülemesini engelleyen dosyalardır.

Her WordPress web sitesi, web sitenizin ön ucuna JavaScript ve CSS dosyaları ekleyen bir temaya ve eklentilere sahiptir.

Bu komut dosyaları sitenizin sayfa yükleme süresini artırabilir ve ayrıca sayfanın oluşturulmasını engelleyebilir.

Bir kullanıcının tarayıcısı, sayfadaki HTML’nin geri kalanını yüklemeden önce bu komut dosyalarını ve CSS’yi yüklemek zorunda kalacaktır. Bu, daha yavaş bir bağlantıya sahip kullanıcıların sayfayı görmek için birkaç milisaniye daha beklemek zorunda kalacağı anlamına gelir.

Bu komut dosyaları ve stil sayfaları render engelleyici JavaScript ve CSS olarak adlandırılır.

Google PageSpeed puanı 100’e ulaşmaya çalışanWordPress web sitesi sahiplerinin bu mükemmel puana ulaşmak için bu sorunu çözmeleri gerekecektir.

Google PageSpeed Puanı Nedir?

Google PageSpeed Insights, web sitesi sahiplerinin web sitelerini optimize etmelerine ve test etmelerine yardımcı olmak için Google tarafından oluşturulan bir web sitesi hız testi aracıdır. Bu araç, web sitenizi Google’ın hız yönergelerine göre test eder ve sayfa yükleme sürenizi iyileştirmek için öneriler sunar.

Sitenizin geçtiği denetim sayısına göre size bir puan gösterir. Çoğu web sitesi 50-70 arasında bir puan alır. Ancak bazı web sitesi sahipleri 100’e (bir sayfanın alabileceği en yüksek puan) ulaşma zorunluluğu hisseder.

Gerçekten Mükemmel “100” Google PageSpeed Puanına İhtiyacınız Var mı?

Google PageSpeed içgörülerinin amacı, web sitenizin hızını ve performansını iyileştirmek için size yönergeler sağlamaktır. Bu kurallara harfiyen uymak zorunda değilsiniz.

Hızın, Google’ın sitenizi nasıl sıralayacağını belirlemesine yardımcı olan birçok web sitesi arama motoru optimizasyonu (SEO) ölçümünden yalnızca biri olduğunu unutmayın. Hız, sitenizdeki kullanıcı deneyimini iyileştirdiği için çok önemlidir.

Daha iyi bir kullanıcı deneyimi hızdan çok daha fazlasını gerektirir. Ayrıca faydalı bilgiler, daha iyi bir kullanıcı arayüzü ve metin, resim ve videolarla ilgi çekici içerikler sunmanız gerekir.

Hedefiniz, harika bir kullanıcı deneyimi sunan hızlı bir web sitesi oluşturmak olmalıdır.

Google PageSpeed kurallarını öneri olarak kullanmanızı öneririz. Bunları kullanıcı deneyimini bozmadan kolayca uygulayabiliyorsanız, bu harika. Aksi takdirde, yapabildiğiniz kadarını yapmaya çalışmalı ve gerisi için endişelenmemelisiniz.

Bunu söyledikten sonra, WordPress’te render engelleyici JavaScript ve CSS’yi düzeltmek için neler yapabileceğinize bir göz atalım.

WordPress’te render engelleyici kaynakları ortadan kaldıracak iki yöntemi ele alacağız. Web siteniz için en uygun olanı seçebilirsiniz:

Yöntem 1: Render Engelleme Komut Dosyalarını ve CSS’yi WP Rocket ile Düzeltin

Bu yöntem için WP Rocket eklentisini kullanacağız. Herhangi bir teknik beceri veya karmaşık bir kurulum olmadan web sitenizin performansını hızlı bir şekilde artırmanıza olanak tanıyan piyasadaki en iyi WordPress önbelleğe alma ve optimizasyon ek lentisidir.

Öncelikle WP Rocket eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

WP Rocket kutudan çıktığı gibi çalışır ve web siteniz için en uygun ayarlarla önbelleğe almayı açar. WordPress’te WP Rocket’in nasıl düzgün bir şekilde kurulacağı ve ayarlanacağı hakkındaki eksiksiz kılavuzumuzda daha fazla bilgi edinebilirsiniz.

Varsayılan olarak, JavaScript ve CSS optimizasyon seçeneklerini açmaz. Bu optimizasyonlar web sitenizin görünümünü veya bazı özelliklerini potansiyel olarak etkileyebilir, bu nedenle eklenti bu ayarları isteğe bağlı olarak etkinleştirmenize izin verir.

Bunu yapmak için, Ayarlar ” WP Rocket sayfasını ziyaret etmeniz ve ardından ‘Dosya Optimizasyonu’ sekmesine geçmeniz gerekir.

Buradan CSS Dosyaları bölümüne gidin ve ‘CSS’yi Küçült’, ‘CSS Dosyalarını Birleştir’ ve ‘CSS Teslimini Optimize Et’ seçeneklerinin yanındaki kutuları işaretleyin.

‘CSS Teslimini Optimize Et’ ayarı için WP Rocket,‘Kullanılmayan CSS’yi Kaldır‘ yöntemini seçmenizi önerir.

En iyi performansı sunmanın yanı sıra, sayfa boyutunu ve HTTP isteklerini azaltmaya yardımcı olabilir.

Ardından, JavaScript Dosyaları bölümüne kaydırmanız gerekir. Buradan, maksimum performans iyileştirmesi için tüm seçenekleri kontrol edebilirsiniz.

JavaScript dosyalarını CSS için yaptığınız gibi küçültebilir ve birleştirebilirsiniz.

WordPress’in jQuery Migrate dosyasını yüklemesini de durdurabilirsiniz. Bu, WordPress’in jQuery’nin eski sürümlerini kullanan eklentiler ve temalar için uyumluluk sağlamak üzere yüklediği bir betiktir.

Çoğu web sitesinin bu dosyaya ihtiyacı yoktur, ancak yine de kaldırmanın temanızı veya eklentilerinizi etkilemediğinden emin olmak için web sitenizi kontrol etmek isteyeceksiniz.

Ardından, biraz daha aşağı kaydırın ve ‘JavaScript’i Ertelenmiş Olarak Yükle’ ve ‘jQuery için Güvenli Mod’ seçeneklerinin yanındaki kutuları işaretleyin.

Bu seçenekler, gerekli olmayan JavaScripts’in yüklenmesini geciktirir ve jQuery güvenli modu, jQuery’yi satır içi kullanabilecek temalar için yüklemenizi sağlar. Temanızın hiçbir yerde satır içi jQuery kullanmadığından eminseniz bu seçeneği işaretlemeden bırakabilirsiniz.

Ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklamayı unutmayın.

Bundan sonra, web sitenizi Google PageSpeed Insights ile tekrar test etmeden önce WP Rocket’teki önbelleği temizlemek de isteyebilirsiniz.

Test sitemizde masaüstü cihazlarda %100 skor elde etmeyi başardık ve hem mobil hem de masaüstü skorlarında render engelleme sorunu çözüldü.

Yöntem 2: Otomatik Optimize Etme ile Render Engelleme Komut Dosyalarını ve CSS’yi Düzeltin

Bu yöntem için, özellikle web sitenizin CSS ve JS dosyalarının dağıtımını iyileştirmek için yapılmış ayrı bir eklenti kullanacağız. Bu eklenti işinizi görse de, WP Rocket’in sahip olduğu diğer güçlü özelliklere sahip değildir.

Yapmanız gereken ilk şey, web sitesi performansını hızlandırmak için ücretsiz bir eklenti olan Autoptimize‘ı yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından, eklenti ayarlarını yapılandırmak için Ayarlar ” Otomatik Optimize Et sayfasını ziyaret etmeniz gerekir.

İlk olarak, JavaScript Seçenekleri bloğunun altındaki ‘JavaScript Kodunu Optimize Et’ seçeneğinin yanındaki kutuyu işaretlemeniz gerekir. ‘Aggregate JS-files’ seçeneğinin işaretli olmadığından emin olun.

Ardından, CSS Seçenekleri kutusuna gidin ve ‘CSS Kodunu Optimize Et’ seçeneğini işaretleyin.

‘Aggregate CSS-files’ seçeneğinin işaretli olmadığından emin olun.

Şimdi ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet ve Önbelleği Boşalt’ düğmesine tıklayabilirsiniz.

Devam edin ve web sitenizi PageSpeed Insights aracı ile test edin. Demo sitemizde, bu temel ayarlarla render engelleme sorununu çözmeyi başardık.

Hala render engelleyici komut dosyaları varsa, eklentinin ayarlar sayfasına geri dönebilir ve hem JavaScript hem de CSS seçenekleri altındaki ayarları gözden geçirebilirsiniz.

Örneğin, eklentinin satır içi JS içermesine izin verebilir ve seal.js veya jquery.js gibi varsayılan olarak hariç tutulan komut dosyalarını kaldırabilirsiniz. Ardından, değişikliklerinizi kaydetmek ve eklenti önbelleğini boşaltmak için ‘Değişiklikleri Kaydet ve Önbelleği Boşalt’ düğmesine tıklamanız yeterlidir.

İşiniz bittiğinde, devam edin ve PageSpeed Insights aracı ile web sitenizi tekrar kontrol edin.

Autoptimize Nasıl Çalışır?

Autoptimize, sıraya alınmış tüm JavaScript ve CSS‘leri toplar. Bundan sonra, küçültülmüş CSS ve JavaScript dosyaları oluşturur ve önbelleğe alınmış kopyaları web sitenize async veya ertelenmiş olarak sunar.

Bu, oluşturmayı engelleyen komut dosyaları ve stiller sorununu çözmenize olanak tanır. Ancak, bunun web sitenizin performansını veya görünümünü de etkileyebileceğini lütfen unutmayın.

Render Engelleyici JavaScript ve CSS Hala Varsa Ne Yapmalı?

Eklentilerin ve WordPress temanızın JavaScript ve CSS’yi nasıl kullandığına bağlı olarak, tüm render engelleyici JavaScript ve CSS sorunlarını tamamen düzeltmek zor olabilir.

Yukarıdaki araçlar yardımcı olabilirken, eklentilerinizin düzgün çalışması için farklı bir öncelik seviyesinde belirli komut dosyalarına ihtiyacı olabilir. Bu durumda, yukarıdaki çözümler bu tür eklentilerin işlevselliğini bozabilir veya beklenmedik şekilde davranabilirler.

Render engelleme sorunlarını tamamen ortadan kaldırmaya çalışmak yerine, web sitenizi hızlandırmak için alternatif yaklaşımlar uygulamanızı öneririz. Örneğin, statik JavaScript ve CSS dosyalarınızı sunmak ve yükleme süresini azaltmak için bir CDN hizmeti kullanabilirsiniz.

Daha fazla bilgi için WordPress hızını ve performansını artırmaya yönelik nihai kılavuzumuzu okuyabilirsiniz.

Umarız bu makale WordPress’te render engelleyici JavaScript ve CSS’yi nasıl düzelteceğinizi öğrenmenize yardımcı olmuştur. WPBeginner’ın 6 ipucu ile sayfa yükleme hızını nasıl artırdığına ilişkin makalemizi ve en iyi yönetilen WordPress barındırma şirketlerini karşılaştırmamızı da görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.