WordPress'te Oluşturmayı Engelleyen JavaScript ve CSS Nasıl Onarılır

WordPress'te oluşturmayı engelleyen JavaScript ve CSS'yi ortadan kaldırmak istiyor musunuz?

Web sitenizi Google PageSpeed ​​bilgileri üzerinde test ederseniz, oluşturmayı engelleyen komut dosyalarını ve CSS'yi ortadan kaldırmak için büyük olasılıkla bir öneri görürsünüz. Ancak, WordPress sitenizde bunun nasıl yapılacağı hakkında herhangi bir ayrıntı sağlamaz.

Bu makalede, Google PageSpeed ​​puanınızı yükseltmek için WordPress'te oluşturmayı engelleyen JavaScript ve CSS'yi nasıl kolayca düzeltebileceğinizi göstereceğiz.

Oluşturmayı Engelleyen JavaScript ve CSS nedir?

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

Her WordPress sitesinde, web sitenizin ön ucuna JavaScript ve CSS dosyaları ekleyen bir tema ve eklentiler bulunur. 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ının, HTML'nin geri kalanını sayfaya yüklemeden önce bu komut dosyalarını ve CSS'yi yüklemesi gerekir. Bu, daha yavaş bir bağlantıya sahip kullanıcıların sayfayı görmek için birkaç milisaniye daha beklemesi gerekeceği anlamına gelir.

Bu komut dosyaları ve stil sayfaları, oluşturmayı engelleyen JavaScript ve CSS olarak adlandırılır.

100 Google PageSpeed ​​puanını elde etmeye çalışan web sitesi sahiplerinin, bu mükemmel puanı elde etmek için bu sorunu düzeltmeleri gerekecektir.

Google Sayfa Hızı Puanı nedir?

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

Sitenizin geçtiği kural sayısına göre size bir puan gösterir. Çoğu web sitesi 50-70 arasında bir yere gelir. Bununla birlikte, bazı web sitesi sahipleri 100'ü (bir sayfanın alabileceği en yüksek puan) elde etmek zorunda hissederler.

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

Google PageSpeed ​​bilgilerinin amacı, web sitenizin hızını ve performansını artırmak için size yönergeler sağlamaktır. Bu kurallara kesinlikle uymak zorunda değilsiniz.

Hızın, Google'ın sitenizi nasıl sıralayacağını belirlemesine yardımcı olan birçok web sitesi SEO ölçümünden yalnızca biri olduğunu unutmayın. Hızın bu kadar önemli olmasının nedeni, sitenizdeki kullanıcı deneyimini geliştirmesidir.

Daha iyi 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 videolardan oluşan ilgi çekici içerik sunmanız gerekir.

Amacınız harika bir kullanıcı deneyimi sunan hızlı bir web sitesi oluşturmak olmalıdır.

Son WPBeginner yeniden tasarımı sırasında, kullanıcı deneyimini iyileştirmenin yanı sıra hıza da odaklandık.

Öneri olarak Google Pagespeed kurallarını kullanmanızı öneririz ve bunları kullanıcı deneyimini bozmadan kolayca uygulayabiliyorsanız, bu harika. Aksi takdirde, elinizden gelenin en iyisini yapmaya çalışmalı ve gerisi için endişelenmemelisiniz.

Bunu söyledikten sonra, WordPress'te oluşturmayı engelleyen JavaScript ve CSS'yi düzeltmek için neler yapabileceğinize bir göz atalım.

WordPress'te oluşturmayı engelleyen JavaScript ve CSS'yi düzeltecek iki yöntemi ele alacağız. Web siteniz için en uygun olanı seçebilirsiniz.

1. WP Rocket ile Oluşturma Engelleme Komut Dosyalarını ve CSS'yi Düzeltin

Bu yöntem için WP Rocket eklentisini kullanacağız. Piyasadaki en iyi WordPress önbelleğe alma eklentisidir ve herhangi bir teknik beceri veya karmaşık kurulum olmadan web sitenizin performansını hızla artırmanıza olanak tanır.

Öncelikle WP Rocket eklentisini kurmanız ve etkinleştirmeniz gerekiyor. 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 kurulacağı ile ilgili eksiksiz kılavuzumuzda bununla ilgili 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 Roket 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 Dağıtımını Optimize Et seçeneklerinin yanındaki kutuları işaretleyin.

Not: WP Rocket, tüm CSS dosyalarınızı küçültmeye, birleştirmeye ve yalnızca web sitenizin görünen kısmı için gereken CSS'yi yüklemeye çalışacaktır. Bu, web sitenizin görünümünü etkileyebilir, bu nedenle web sitenizi birden fazla cihaz ve ekran boyutunda kapsamlı bir şekilde test etmeniz gerekir.

Ardından, JavaScript Dosyaları bölümüne gitmeniz 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. WordPress'in eski jQuery sürümlerini kullanan eklentiler ve temalar için uyumluluk sağlamak için yüklediği bir komut dosyasıdır.

Çoğu web sitesi bu dosyaya ihtiyaç duymaz, ancak yine de onu kaldırmanın temanızı veya eklentilerinizi etkilemediğinden emin olmak için web sitenizi kontrol etmek istersiniz.

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

Bu seçenekler, gerekli olmayan JavaScript'lerin yüklenmesini geciktirir ve jQuery güvenli modu, onu satır içi kullanabilecek temalar için jQuery yüklemenize olanak tanır. 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 Page Speed ​​Insights ile tekrar test etmeden önce WP Rocket'te önbelleği temizlemek isteyebilirsiniz.

Test sitemizde Masaüstünde %100 puan elde edebildik ve hem mobil hem de masaüstü puanlarında render engelleme sorunu çözüldü.

2. Autoptimize ile Oluşturma Engelleme Komut Dosyalarını ve CSS'yi Düzeltin

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

Yapmanız gereken ilk şey, Autoptimize eklentisini kurmak 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.

Öncelikle, JavaScript Seçenekleri bloğunun altındaki 'JavaScript Kodunu Optimize Et' seçeneğinin yanındaki kutuyu işaretlemeniz gerekir. 'JS dosyalarını toplayın' 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. 'CSS dosyalarını topla' seçeneğinin işaretli olmadığından emin olun.

Artık ayarlarınızı saklamak için 'Değişiklikleri Kaydet ve Önbelleği Boşalt' düğmesine tıklayabilirsiniz.

Devam edin ve Sayfa Hızı Öngörüleri aracıyla web sitenizi test edin. Demo sitemizde, oluşturma engelleme sorununu bu temel ayarlarla düzeltebildik.

Hala oluşturmayı engelleyen komut dosyaları varsa, eklentinin ayarlar sayfasına geri dönmeniz ve hem JavaScript hem de CSS seçenekleri altındaki seçenekleri gözden geçirmeniz gerekir.

Örneğin, eklentinin satır içi JS'yi dahil etmesine ve seal.js veya jquery.js gibi varsayılan olarak hariç tutulan komut dosyalarını kaldırmasına izin verebilirsiniz.

Değişikliklerinizi kaydetmek ve eklenti önbelleğini boşaltmak için 'Değişiklikleri Kaydet ve Önbelleği Boşalt' düğmesini tıklayın.

İşiniz bittiğinde, devam edin ve Sayfa Hızı aracıyla web sitenizi tekrar kontrol edin.

O nasıl çalışır?

Autoptimize, kuyruğa alınmış tüm JavaScript ve CSS'leri toplar. Bundan sonra, küçültülmüş CSS ve JavaScripts dosyaları oluşturur ve önbelleğe alınmış kopyaları zaman uyumsuz veya ertelenmiş olarak web sitenize sunar.

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

Sorun giderme

Eklentilerin ve WordPress temanızın JavaScript ve CSS'yi nasıl kullandığına bağlı olarak, oluşturmayı engelleyen tüm JavaScript ve CSS sorunlarını tamamen düzeltmek oldukça zor olabilir.

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

Google, ekranın üst kısmındaki içerik için CSS dağıtımını optimize etme gibi belirli sorunları size göstermeye devam edebilir. WP Rocket, temanızın üst katlama alanını görüntülemek için gereken Kritik CSS'yi manuel olarak ekleyerek bunu düzeltmenize olanak tanır.

Ancak, ekranın üst kısmında hangi CSS kodunu görüntülemeniz gerektiğini bulmak oldukça zor olabilir.

Bu makalenin, WordPress'te oluşturmayı engelleyen JavaScript ve CSS'yi nasıl düzelteceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, yeni başlayanlar için WordPress performansının nasıl hızlandırılacağına ilişkin nihai kılavuzumuzu ve en iyi yönetilen WordPress barındırma şirketlerini karşılaştırmamızı görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook'ta da bulabilirsiniz.