WordPress'te JavaScript ve CSS oluşturmanın engellenmesini ortadan kaldırmak istiyor musunuz?

Web sitenizi Google PageSpeed ​​içgörülerinde test ediyorsanız, muhtemelen komut dosyası ve CSS oluşturma bloklarını ortadan kaldırmak için bir öneri göreceksiniz. Ancak, WordPress web sitenizde bunun nasıl yapılacağına dair ayrıntılar sağlamaz.

Bu makalede, Google PageSpeed ​​puanınızı iyileştirmek için WordPress'teki JavaScript ve CSS oluşturma engellemesini nasıl kolayca düzeltebileceğinizi göstereceğiz.

Ama daha önce, birlikte keşfedelim Bir WordPress blog 7 adımlarını nasıl yüklenir et Nasıl bulmak yüklemek ve blogunuzda bir WordPress tema etkinleştirmek için.

JavaScript ve CSS Oluşturma Engelleme nedir?

JavaScript ve CSS oluşturmalarını engellemek, bir web sitesinin yüklemeden önce bir web sayfasını görüntülemesini engelleyen dosyalardır.

Her WordPress web sitesinde, web sitenizin ön ucuna JavaScript ve CSS dosyaları ekleyen bir tema ve eklentiler vardır. Bu komut dosyaları, web sitenizin sayfa yükleme süresini artırabilir ve ayrıca sayfanın görüntülenmesini engelleyebilir.

Javascript oluşturucuları engelleme css wordpress blogpascher 1 nasıl düzeltilir

Bir kullanıcının tarayıcısının, sayfaya HTML kodunun geri kalanını yüklemeden önce bu komut dosyalarını ve CSS'yi yüklemesi gerekecektir. Bu, daha yavaş bir bağlantıya sahip kullanıcıların sayfayı görüntülemek için birkaç milisaniye daha beklemesi gerektiği anlamına gelir.

Bu komut dosyalarına ve stil sayfalarına JavaScript ve CSS oluşturma engelleyicileri denir.

100 Google PageSpeed ​​puanına ulaşmaya çalışan web sitesi sahiplerinin, bu mükemmel puanı elde etmek için bunu düzeltmeleri 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 hız test aracıdır. Bu araç, web sitenizi Google'ın hız yönergelerine göre test eder ve web sitenizin sayfa yükleme sürelerini iyileştirmek için öneriler sunar.

Web sitenizin geçtiği kuralların sayısına göre bir puan gösterir. Çoğu web sitesi 50 ila 70 arasındadır. Ancak, bazı web sitesi sahipleri 100'e ulaşma konusunda baskı hissediyor.

Google PageSpeed'de gerçekten "100" puana ihtiyacınız var mı?

Amacı Google PageSpeed ​​analizleri web sitenizin hızını ve performansını iyileştirmek için size yönergeler sağlamaktır. Bu kurallara kesinlikle uymanız gerekmiyor.

Unutmayın, hız, Google'ın web sitenizi nasıl sıralayacağını belirlemesine yardımcı olan birçok SEO ölçümünden sadece biridir. Hızın bu kadar önemli olmasının nedeni, gelişmesidir kullanıcı deneyimi Web sitenizde.

Daha iyi bir kullanıcı deneyimi, hızdan çok daha fazlasını gerektirir. Ayrıca yararlı bilgiler de vermelisiniz, daha iyi kullanıcı arayüzü metin, resim ve videolar içeren içerikle etkileşim kurun.

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

En son BlogPasCher yeniden tasarımı sırasında, kullanıcı deneyimini iyileştirmenin yanı sıra hıza odaklanmaya devam ettik.

Google Pagespeed kurallarını bir öneri olarak kullanmanızı öneririz ve bunları kullanıcı deneyimini bozmadan kolayca uygulayabiliyorsanız, bu harika. Değilse, elinizden geldiğince yapmaya çalışmalısınız ve geri kalanı için endişelenmeyin.

Bununla birlikte, WordPress'te JavaScript ve CSS oluşturma engellemesini düzeltmek için neler yapabileceğinize bir göz atalım.

Bu sorunu çözecek iki yöntemi ele alacağız. Web sitenizde en iyi sonucu vereni seçebilirsiniz.

1. Oluşturmayı engelleyen komut dosyalarını ve CSS'yi WP Rocket ile düzeltin

Bu yöntem için WP Rocket eklentisini kullanacağız. Bu en iyi WordPress önbellek eklentisi piyasada bulunur ve herhangi bir teknik veya karmaşık beceri ayarlanmadan web sitenizin performansını hızlı bir şekilde artırmanıza olanak tanır.

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

WP Rocket, önbelleğini optimum ayarlarla etkinleştirir. Varsayılan olarak, JavaScript ve CSS optimizasyon seçeneklerini etkinleştirmez. Bu optimizasyonlar potansiyel olarakweb sitenizin görünümü veya belirli özellikler, bu nedenle eklenti bu ayarları bir seçenek olarak etkinleştirmenize izin verir.

Bunu yapmak için devam etmelisin Ayarlar »WP Rocket, sonra 'Dosya Optimizasyonu '. Oradan bölüme ilerleyin CSS Dosyaları ve kutuları işaretleyin  CSS'yi minify, CSS Dosyalarını Birleştirin et CSS Yayınlamayı Optimize Edin.

Javascript oluşturucuları engelleme css wordpress blogpascher 2 nasıl düzeltilir

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 gerekli CSS'yi yüklemeye çalışacaktır. Bu etkileyebilirweb sitenizin görünümü, bu nedenle web sitenizi birden fazla cihazda ve ekran boyutunda kapsamlı bir şekilde test etmelisiniz.

O zaman bölüme gitmen gerekiyor JavaScript Dosyaları. Buradan maksimum performans iyileştirmesi için tüm seçenekleri işaretleyebilirsiniz.

Javascript oluşturucuları engelleme css wordpress blogpascher 3 nasıl düzeltilir

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

WordPress'in dosyayı yüklemesini de engelleyebilirsiniz. jQuery Geçişi. Bu, 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 kaldırılmasının temanızı veya eklentilerinizi etkilemediğinden emin olmak için web sitenizi kontrol etmek iyi bir fikirdir.

Sonra biraz daha aşağı kaydırın ve seçenekleri kontrol edin 'JavaScript Defered Yükle've'JQuery için Güvenli Mod'.

Javascript oluşturucuları engelleme css wordpress blogpascher 4 nasıl düzeltilir

Bu seçenekler, gerekli olmayan JavaScript'in yüklenmesini geciktirir ve jQuery Güvenli Mod, onu satır içi kullanabilen temalar için jQuery'yi yüklemenize olanak tanır. 

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'teki önbelleği de temizleyebilirsiniz.

Test web sitemizde masaüstü bilgisayarlarda% 100 puan almayı başardık ve oluşturma takılma sorunu hem mobil hem de masaüstü puanlarında çözüldü.

Javascript oluşturucuları engelleme css wordpress blogpascher 5 nasıl düzeltilir

2. JavaScript ve CSS oluşturma engellemesini autoptimize ile 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ış farklı bir eklenti kullanacağız. Bu eklenti işi hallederken, WP Rocket'ın sunduğu diğer güçlü özelliklerden yoksundur.

Yapmanız gereken ilk şey, eklentiyi yüklemek ve etkinleştirmek. Autoptimize. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağı ile ilgili adım adım kılavuzumuza bakın.

Etkinleştirirken sayfayı ziyaret etmelisiniz Ayar »Otomatik Optimize Et Eklenti ayarlarını yapılandırmak için

Her şeyden önce, seçeneği işaretlemelisiniz 'JavaScript Kodunu Optimize Edinbloğun altında JavaScript Opsiyonlar. 'Tüm bağlantılı JS dosyalarını topla' seçeneğinin işaretli olmadığından emin olun.

Javascript oluşturucuları engelleme css wordpress blogpascher 6 nasıl düzeltilir

Ardından alana kaydırın CSS Seçenekleri ve seçeneği kontrol edin ' CSS Kodu optimize edilsin mi?'. Emin olun 'seçeneğininTüm bağlantılı CSS dosyalarını toplayın'işaretli değil.

Javascript oluşturucuları engelleme css wordpress blogpascher 7 nasıl düzeltilir

Artık ayarlarınızı saklamak için 'Değişiklikleri kaydet ve önbelleği temizle' düğmesine tıklayabilirsiniz.

Devam edin ve web sitenizi Page Speed ​​Insights ile test edin. Demo web sitemizde, bu temel ayarlarla sıkışmış oluşturma sorununu çözmeyi başardık.

Javascript oluşturucuları engelleme css wordpress blogpascher 9 nasıl düzeltilir

Hala render engelleme komut dosyaları varsa, eklentinin ayarlar sayfasına geri dönmeniz ve JavaScript ve CSS seçeneklerine bakmanız gerekir.

Örneğin, eklentinin JS Inline'ı içermesine 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 temizlemek için 'Değişiklikleri kaydet ve önbelleği temizle' düğmesine tıklayın.

İşiniz bittiğinde devam edin ve Page Speed ​​Insights aracıyla web sitenizi tekrar kontrol edin.

Nasıl çalışır?

Autoptimize, tüm JavaScript ve CSS dosyalarını bir araya getirir. Ondan sonra yaratır küçültülmüş CSS ve JavaScripts dosyaları ve web sitenizin önbelleğe alınmış kopyalarını senkronize veya ertelenmiş olarak sunar.

Bu, engelleme sorununu çözmenize olanak tanır kaplamalar komut dosyaları ve engelleme stilleri. Ancak bunun aynı zamanda performansı da etkileyebileceğini lütfen unutmayın.web sitenizin görünümü.

yardım

Eklentilerin ve WordPress temanızın JavaScript ve CSS'yi nasıl kullandığına bağlı olarak, tüm sorunları tamamen çözmek oldukça zor olabilir. bloke etme arasında JavaScript ve CSS oluşturmaları.

Yukarıdaki araçlar yardımcı olabilirken, 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 eklentilerin işlevselliğini bozabilir veya beklenmedik şekilde davranabilir.

Google yine de size CSS teslim optimizasyonu gibi bazı sorunlar gösterebilir. WP Rocket, WordPress temanızı mükemmel şekilde görüntülemek için gereken kritik CSS'yi manuel olarak ekleyerek bunu düzeltmenizi sağlar.

Ancak, hangi CSS kodunu görüntülemeniz gerektiğini bilmek oldukça zor olabilir.

Ayrıca bazı temaları ve premium WordPress eklentilerini keşfedin  

Modern bir görünüm kazandırmak ve blogunuzun veya web sitenizin rahatlığını artırmak için diğer WordPress eklentilerini kullanabilirsiniz.

Size, bu konuda yardımcı olacak bazı premium WordPress eklentileri sunuyoruz.

1. WordPress Hız Optimizasyon Eklentisi

Birden fazla web sitesi hız optimizasyonu eklentisini yönetmekte zorlanıyor musunuz? Web sitenizin yürütme hızını düşürdüklerinden endişeleniyor musunuz? o zaman, bu WordPress eklentisi tüm endişeleriniz için nihai çözüm olacaktır.Wordpress hız optimizasyonu eklentisi

Bu eklenti, size neredeyse 6-8 farklı WordPress eklentisinin işlevselliğini sağlamak için tasarlanmıştır. Sayfalarınızın yüklenmesinde belirgin bir gelişme görmek için onu yüklemeniz ve yapılandırmanız yeterlidir.

Bunun bir olmadığını belirtmek isteriz önbellek eklentisi veya CDN, ancak sunduğu sonuç yine de etkileyici. Bu yüzden, neler yapabileceğini görmek için bu WordPress eklentisini denemekten çekinmeyin.

Indir | gösteri | Web hosting

2. Sosyal Paylaşım ve Locker Pro

Social Share & Locker Pro uzantısı, web sitenizin sosyal ağlarda daha görünür olmasına yardımcı olmak için tasarlanmıştır. Yalnızca birkaç tıklama ile sosyal simgelerinizin konumunu belirleyebilir veya sizin tarafınızdan sunulan sosyal ağlardan birinde paylaşım gerektirerek içeriğinizi kilitleyebilirsiniz.

Sosyal paylaşım dolabı pro wordpress eklentisi

10'in önceden tanımlanmış temalarına sahipsiniz ve bu en yaygın dilekleri kapsamalıdır. Tüm temaları Retina ve çalışma harikaları. 

Ayrıca Social Share & Locker Pro ile sosyal ağların tam adını veya yalnızca simgeyi görüntüleyebileceksiniz. Tasarımınıza, mevcut alana veya isteklerinize bağlı olacaktır.

Indir | gösteri | Web hosting

3. WordPress PDF Görüntüleri Lightbox

WordPress PDF Lightbox bir WordPress uzantısı bu, PDF dosyalarının görüntüleyicilerini oluşturmanıza olanak tanır. Bir PDF görüntüleyici, PDF olarak kaydedilebilecek bir fotoğraf koleksiyonudur.Wordpress görüntüleri pdf lightbox eklentisi wordpress

Bu uzantı ile istediğiniz kadar PDF görüntüleyici oluşturabilirsiniz. Yönetici, her görüntüleyen için aşağıdaki gibi bazı seçenekler ayarlayabilir:

  • Kapak resmi: kullanıcı tarafından oluşturulan PDF'nin ilk sayfası olarak eklenecek
  • İzleyici başına maksimum görüntü
  • Bir filigran görüntüsü: PDF sayfalarına uygulanacak
  • E-posta ile gönderme: Bu özellik etkinleştirilirse, bir İletişim formu resim galerisinden hemen sonra sunulacaktır. Bu form aracılığıyla, kullanıcılar oluşturulan PDF'yi herhangi birine e-posta ile gönderebilecek.

Indir | gösteri | Web hosting

Önerilen Kaynaklar

Web sitenizi oluşturmanıza ve yönetmenize yardımcı olacak diğer önerilen kaynaklar hakkında bilgi edinin.

Sonuç

Buraya ! Bu eğitim için bu kadar. Bu makalenin, WordPress'te JavaScript ve CSS oluşturma engellemesini nasıl düzelteceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca bizim Yeni başlayanlar için WordPress performansını nasıl hızlandıracağınıza dair nihai kılavuz.

Bununla birlikte, ayrıca bize danışabilirsiniz kaynakların bulunduğuİnternet siteleri oluşturma projelerinizi yürütmek için daha fazla elemana ihtiyacınız varsa, WordPress blog oluşturma.

Çekinme En sevdiğiniz sosyal ağlarda arkadaşlarınızla paylaşın. Herhangi bir öneriniz veya görüşünüz varsa, bunları bölümümüze bırakın. Yorumlar.

...