WordPress'te Oluşturmayı Engelleyen JavaScript ve CSS: Düzeltmek için 5 Eklenti

Google'ın yüklenmesi üç saniyeden uzun süren web sitelerinin SEO dostu olmadığını duyurması uzun zaman önce olmadı.

İnternet ve dijital pazarlamanın hakim olduğu bu çağda, dünyanın dört bir yanındaki binlerce rakiple etkin bir şekilde rekabet etmek istiyorsanız en hızlı web sitesine sahip olmanız gerekiyor. Hiç şüphe yok ki, daha hızlı bir web sitesi, ziyaretçileri çekme ve içeriklerine olan katılımlarını artırma konusunda daha iyi şansa sahiptir.

Bir WordPress web sitesi çalıştırmak, sitenizi erişilebilir kılmak için aynı anda çalışan önemli sayıda komut dosyası anlamına gelir.

Ancak, bu öğelerin tümü yüklemek için her zaman gerekli değildir. Web sitenizin performansını şu şekilde kontrol ettiyseniz: Google Pagespeed Insights, muhtemelen hızını etkileyen oluşturmayı engelleyen JavaScript ve CSS seçeneğiyle karşılaşmışsınızdır.

Bugün bu gereksiz dosyalar hakkında konuşacağız ve sitenizi geliştirmek için onları nasıl kaldırabileceğiniz konusunda sizi aydınlatacağız.

 

Oluşturmayı Engelleyen JavaScript ve CSS Nedir?

Özetle, oluşturmayı engelleyen JavaScript ve CSS, bir site yüklenmeden ve görünür hale gelmeden önce tamamen çalıştırılması gereken bir dizi stil sayfası ve komut dosyasıdır.

WordPress web sitenize yüklediğiniz temalar ve eklentiler, web sitenizin ön uç bölümüne bu dosyalardan bol miktarda ekler. Ve tahmin edebileceğiniz gibi bazıları sayfa yükleme süresini yavaşlatır ve sayfalarınızın render edilmesini engeller.

Bir web sitesi ziyaretçisi web sitenizi açtığında, internet tarayıcısı HTML'den önce gerekli JavaScript ve CSS dosyalarını yükler.

Bu temel öğeler olmadan bir sayfa kullanılamaz olacağından, bu sıradan bir prosedürdür. Sorun şu ki, web tarayıcısı bu dosyalar tamamen yüklenmeden sayfayı işleyemiyor.

Buradaki hile, ziyaretçilerin bir sayfanızı açtığında gördükleri için herhangi bir sorun yaratmadan bazı komut dosyalarının yüklenmesini erteleyebilmenizdir.

Web sitesi sahipleri, web tarayıcılarının, kullanıcının hemen gördüğü sayfanın üst kısmı için gerekli olan kodlar dışında herhangi bir kod yüklemesini önlemek için sitelerinde değişiklik yapabilir.

Başka bir deyişle, tarayıcılar, kullanıcı sayfayı aşağı kaydırmadan önce yalnızca o bölüm için gerekli dosyaları yükler. Web sayfalarının bu alanına, Katlamanın Üstü anlamına gelen ATF denir. Kullanıcıların görebilmek için aşağı kaydırmasını gerektiren diğer kısımlar ATF olmayan kısımdır.

Bu nedenle, web siteniz ATF olmayan bölümlerle ilgili JavaScript ve CSS kodlarını yüklerse, sayfaların yüklenmesi daha uzun sürer. İşte bu yüzden Google, web sitenizin kodlarında gereksiz kaynakları çalıştırmayı bırakmanızı söylemeye çalışır.

 

Oluşturmayı engelleyen JavaScript ve CSS'yi bulun

Bu sorunu öğrenmenin en kolay yolu, Google PageSpeed ​​Insights'ı kullanarak bir hız testi yapmaktır. Sayfayı ziyaret ettiğinizde tek yapmanız gereken URL adresinizi gerekli alana girmek ve ardından 'Analiz Et' düğmesini tıklamaktır.

Sayfada bu sorunu yaşıyorsanız, ekranın üst kısmındaki içerikte oluşturmayı engelleyen JavaScript ve CSS'yi kaldırmanızı söyleyen bir öneri görürsünüz.

En çok bunu unutmasan iyi olur web siteleri puanı 70 ila 90 arasında bir yerde ve en iyi performans gösterenler bile nadiren 100'e yakın bir sayıya ulaşıyor. Bu nedenle sitenizi asla 100'e ulaşmaya zorlamamalısınız. Kullanıcı deneyimini etkilemeden en yüksek puanı elde etmek için elinizden gelenin en iyisini yapın olumsuz.

Sitenizde kullandığınız temaya ve araçlara bağlı olarak bazı komut dosyaları mükemmel UX için gerekli izleyicilerinize sunmanız gerekiyor. Bu nedenle, bu Google aracının sonuçlar sayfasında biraz daha yüksek puan almak amacıyla bunları kaldırmak tamamen akıllıca değildir.

 

Oluşturmayı engelleyen JavaScript ve CSS'yi düzeltin

Oluşturmayı engelleyen JavaScript'i ortadan kaldırmak için birçok strateji vardır. Ana yöntemler Async ve Defer'dir. İlk yöntem, kullanıcının tarayıcısının diğer HTML parçalarını ayrıştırırken JavaScript'i indirmesine izin verir.

Dosya indirilirken ayrıştırmayı tamamen durdurmasa da, HTML ayrıştırıcısı indirildiğinde betiği yürütmek için duraklar. Öte yandan Erteleme yaklaşımı, tarayıcının diğer HTML bölümlerini ayrıştırırken JavaScript'i indirmesine izin verir ve HTML ayrıştırması bitmeden komut dosyasını çalıştırmaz.

ATF içeriğini yüklemek için gerekli kodları geciktirebileceğinizden, oluşturmayı engelleyen CSS'yi ortadan kaldırmak daha zordur. Prosedür biraz karmaşıktır ve iyi bir web geliştirme anlayışı gerektirir.

Bununla birlikte, web sitelerini kendi başlarına çalıştıran ortalama kullanıcılara hitap ediyoruz.

WordPress'in ortalama kullanıcıların tek bir kod satırı yazmadan her şeyi değiştirmesine izin veren modüler bir sistem olduğunu hepimiz biliyoruz. Bu sorunu gidermek de aynıdır ve uygun eklentiyi yükleyerek sorunu hızlı bir şekilde çözebilirsiniz.

 

Oluşturmayı Engelleyen JavaScript ve CSS'yi Düzeltmek için En İyi WordPress Eklentileri

Sonraki paragraflarda, beş en iyi performans gösteren WordPress eklentileri bu sorunu en derinden çözmenize yardımcı olur.

Dikkat: Aşağıdaki araçlardan herhangi birini kullanmadan önce, olası veri kaybını önlemek için web sitenizi yedeklediğinizden emin olun.

 

Autoptimize

The Autoptimize eklenti, Google PageSpeed ​​Insights gibi web sitesi analiz araçları tarafından önerilen sorunları gidermek için açıkça yapılmıştır. Web sitesi performansının diğer yönlerine fazla odaklanmadan JavaScript ve CSS dosyalarının dağıtımını iyileştirir.

Temel optimizasyon özellikleri arıyorsanız, bu eklenti size ihtiyacınız olanı verecektir. Bu aracın iyi bir parçası, web sitenizin resimlerini optimize edilmiş WebP formatına dönüştürmesidir.

Autoptimize'ı kurup etkinleştirdikten sonra, eklentinin ayarlarında bulunan 'JavaScript Kodunu Optimize Et' ve 'CSS Kodunu Optimize Et' seçeneklerinin kutularını işaretlemeniz gerekir. CSS ve komut dosyası dosyalarını bir araya getiren bu iki seçeneğin altındaki kutuları işaretlememeye dikkat edin.

Bu eklenti ücretsiz olarak mevcut olsa da, web sitesi yapılandırmasında size yardımcı olan premium paketler de satın alabilirsiniz.

 

WP Rocket

WP Rocket JavaScript ve CSS modifikasyonu, tembel yükleme ayarları gibi farklı konularda size yardımcı olan WordPress optimizasyon araçları arasında bilinen bir isimdir. WP Rocket'in kurulum süreci oldukça basittir, ancak ilk etapta arayüzde işlerin nasıl yapıldığını anlamakta zorlanabilirsiniz.

Kutudan çıktığı anda hazırdır ve kurulumdan hemen sonra web sitenizde en uygun ayarları uygular. Betik değişiklikleri nedeniyle web sitesi arızalarının kaçınılmazlığı göz önüne alındığında, eklenti varsayılan olarak oluşturmayı engelleyen JavaScript ve CSS ayarlarını etkinleştirmez.

Ancak eklenti ayarlarına giderek ve 'CSS Dosyaları' ve 'JavaScript Dosyaları' bölümlerinde ilgili seçenekleri arayarak bu özelliği kolayca açabilirsiniz.

Ana eklenti, bir yıllık destekle birlikte gelen yılda 49 dolara mal oluyor. Ayrıca, birden fazla bulabilirsiniz ücretsiz ekstralar WordPress'teki çekirdek eklenti için de.

 

TavşanYükleyici

TavşanYükleyici bir web sitesinin daha hızlı, daha sorunsuz ve daha verimli çalışmasını sağlamak için tasarlanmış son teknoloji bir WordPress performans optimizasyon eklentisidir.

Yaygın olarak beğenilen WP Rocket'e benzer şekilde RabbitLoader, sitenizin performansını yalnızca daha yüksek seviyelere taşımakla kalmaz, aynı zamanda onu oyundaki diğer oyunculardan ayıran bazı yenilikçi özellikler de sunar.

Önbellek Büyüsü: RabbitLoader, sitenizdeki değişikliklere gerçek zamanlı olarak uyum sağlayan dinamik bir önbellekleme sistemi sunarak bir adım daha ileri giderek ziyaretçilerinizin hızdan ödün vermeden her zaman en yeni içeriği görmesini sağlar.

Görüntü Optimizasyonu: Resimler bir web sitesini önemli ölçüde yavaşlatabilir, ancak RabbitLoader'ın resim optimizasyon özelliği oyunun kurallarını değiştiriyor. Kaliteden ödün vermeden görüntüleri otomatik olarak sıkıştırıp yeniden boyutlandırarak, görsel çekicilikten ödün vermeden sitenizin hızlı bir şekilde yüklenmesini sağlar.

Yavaş yüklenme: Hem WP Rocket hem de RabbitLoader, görüntüler ve iframe'ler için yavaş yükleme sunar, ancak RabbitLoader, ertelenmiş JavaScript yüklemesi sunarak daha da ileri gider.

Uyumluluk: RabbitLoader, tıpkı WP Rocket gibi çok çeşitli WordPress temaları ve eklentileriyle kusursuz bir şekilde çalışacak şekilde tasarlanmıştır. İster basit bir blog'unuz ister karmaşık bir e-ticaret web siteniz olsun, RabbitLoader sitenizin performansını çakışmalar olmadan artırmak için tasarlanmıştır.

 

W3 Toplam Önbellek

W3 Toplam Önbellek yalnızca önbelleğe alma sorunlarını değil, aynı zamanda komut dosyaları ve stil sayfalarının neden olduğu sorunları da ele alan güçlü bir performans geliştiricidir.

Önce eklenti ayarlarından Küçült seçeneğini etkinleştirip manuel moda ayarlayarak, oluşturmayı engelleyen JavaScript ve CSS'yi kolayca kaldırabilirsiniz.

Ardından, 'Oluşturmayı engelleyen kaynakları ortadan kaldır' sekmesini tıklamalı ve komut dosyalarını ve stil sayfalarını engellemek için gerekli dosyaların tam bağlantı adresini kopyalamalısınız. Artık bu linkleri kullanabilir ve bunları 'JS bölümüne' girebilirsiniz. Performans>Küçült sekmesi.

W3 Total Cache bir milyondan fazla aktif kuruluma sahiptir ve WordPress.org web sitesinden sitenize ücretsiz olarak indirebilirsiniz.

 

Hız Yükseltici Paketi

Hız Yükseltici Paketi stil sayfalarını, JavaScript'leri, tembel yüklemeyi ve dağınıklığı gidermeyi optimize etmek için güvenilir bir araçtır. Geliştirici ekibi, en son güncellemeler ve güvenlik önlemleri ile güncel tutmak için bu eklentiyi sürekli olarak güncelliyor.

Çevrimiçi ürün ve hizmet satıyorsanız, WooCommerce'e özel optimizasyon Speed ​​Booster Pack'in özellikleri, mağazanızın internette görünürlüğünü artırmada size çok yardımcı olacaktır.

Yönetici panelinizin Hız Yükseltici Paketi menüsünden 'Gelişmiş' sekmesine tıklayarak WordPress web sitenizde oluşturmayı engelleyen JavaScript ve CSS'yi hızlı bir şekilde düzeltebilirsiniz.

JavaScript için, 'Komut dosyalarını altbilgiye taşı' ve 'JavaScript dosyalarının ayrıştırılmasını ertele' seçeneklerini etkinleştirin. Ardından, 'CSS Optimizasyonu' menüsüne gidin ve sitenizin performansını artırmak için mevcut seçenekler arasından seçim yapın.

Speed ​​Booster Pack, WordPress.org web sitesinde bulunan ücretsiz bir çözümdür.

 

JCH Optimize Etme

JCH Optimize Etme için yararlı araçlarla donatılmış olarak gelen bu önerilen eklentiler listesindeki son öğedir. sayfa yüklemeyi hızlandır. Örneğin, sayfalarınızı yüklemek için gereken HTTP isteği sayısını azaltmanıza ve aynı zamanda bu sayfaların boyutunu azaltmanıza yardımcı olur.

Sprite Oluşturucu Bu eklentide bulunan ve arka plan resimlerini yüklemek için HTTP isteklerinin sayısını azaltan bir başka heyecan verici özelliktir.

JCH Optimize'ı kullanarak, premium plana yükseltirseniz oluşturmayı engelleyen JavaScript ve CSS'yi kaldırabilirsiniz. Tek yapmanız gereken 'Otomatik ayarlar' bölümünden 'Premium' veya 'Optimum' seçeneklerini etkinleştirmek. CSS teslim ayarları da aynı şekilde yalnızca Pro sürümünde mevcuttur.

Bu eklentiyi WordPress.org'dan ücretsiz olarak yükleyebilirsiniz, ancak tam potansiyelini ortaya çıkarmak için premium bir plan satın almanız gerekir. Fiyatlandırma planları altı ay için 29 dolardan başlıyor ve ömür boyu erişim için 99 dolara ulaşıyor.

 

Özet

Web sitesi yükleme hızı, izleyicileri çekmek, meşgul etmek ve elde tutmak için en kritik unsurlardan biridir. Web sitenizi arama motorları için optimize ederken buna yüksek öncelik vermeli ve bu alanda ne kadar iyi performans gösterdiğinizi ölçmek için Google PageSpeed ​​Insights aracını kullanmalısınız.

Oluşturmayı engelleyen JavaScript ve CSS öğesi, Google'ın güçlü aracını kullanırken görebileceğiniz en yaygın önerilerden biridir. Bu makalede tanıttığımız beş eklentiden birini yükleyerek bu sorunu kolayca çözebilir ve sayfalarınızın yüklenme hızını artırın büyük oranda.

Bu öğreticiyi faydalı bulacağınızı ve mümkün olan en iyi sonuçlar için hızlı yüklenen bir web sitesinin keyfini çıkaracağınızı umuyoruz.