WordPress'te Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırma (CSS + Javascript)

Bir WordPress kullanıcısıysanız, web sitesi performansını bir öncelik haline getirmenizi şiddetle tavsiye ederim. Ziyaretçilere hızlı yüklenen sayfalar sunarak, arama motoru sıralamalarınızı iyileştirecek, web sitesi trafiğini artıracak ve okuyuculara harika bir kullanıcı deneyimi sunacaksınız.

Bir web sitesini optimize etmenin önemli bir parçası, Google PageSpeed ​​Insights, GTmetrix ve Pingdom Web Sitesi Hız Testi gibi performans kıyaslama araçlarını kullanarak web sayfalarını analiz etmektir. Bu hizmetler, bir URL'nin performansını derecelendirecek, sayfanın boyutunu onaylayacak ve sayfanın yüklenmesinin ne kadar sürdüğünü onaylayacaktır.

Performans kıyaslama araçları sadece web sayfalarınızı analiz etmekle kalmaz, aynı zamanda sayfa yükleme sürelerini iyileştirmek için nelerin ele alınması gerektiğini de gösterir. Örneğin, kullanılmayan CSS kodunu kaldırmanız veya web sitenizdeki resimlerin ağırlığını azaltmanız önerilebilir.

Sıklıkla göreceğiniz bir öneri, WordPress'te oluşturmayı engelleyen kaynakları ortadan kaldırmaktır . Bu yazıda, WordPress'te oluşturmayı engelleyen kaynakların ne olduğunu açıklayacağım ve bunları kaldırarak web sitenizin sayfa yükleme sürelerini nasıl iyileştirebileceğinizi göstereceğim.

WordPress'te Oluşturmayı Engelleyen Kaynaklar nelerdir?

Web sitesi optimizasyonu, web sitenizin sayfalarını ziyaretçilere mümkün olan en hızlı sürede ulaştırmakla ilgilidir. Tipik bir sayfa birçok farklı öğe içerir.

Birisi web sitenizdeki bir sayfayı ziyaret ettiğinde, tarayıcısı sayfanın kodunu yukarıdan aşağıya işleyecektir. Bu genellikle “ Sayfayı Oluşturma ” olarak adlandırılır.

Tarayıcı, harici CSS veya Javascript dosyalarına yönelik çağrılarla karşılaşırsa, işlenmeden önce sayfayı oluşturmayı durdurması ve bu CSS ve Javascript dosyalarını indirmesi gerekir. Bu nedenle, bu kaynaklar, sayfa oluşturma sürecini durdurdukları için “ Oluşturmayı Engelleyen ” olarak kabul edilir.

Oluşturmayı engelleyen kaynaklar, tarayıcının birincil içeriği kullanıcıya göstermesi için geçen süreyi artırır; bu, Google'ın İlk Anlamlı Boya (FMP) olarak adlandırdığı önemli bir performans ve arama motoru sıralama metriğidir.

Metin ve resimlerin oluşturmayı engellemediğini ve tüm CSS ve Javascript dosyalarının da oluşturmayı engellemediğini unutmayın. Sayfa oluşturmayı yavaşlatan daha büyük CSS ve Javascript dosyaları olma eğilimindedir.

WordPress'te Oluşturmayı Engelleyen Kaynaklar Nasıl Belirlenir

WordPress'te işlemeyi engelleyen kaynaklar, performans kıyaslama araçları kullanılarak kolayca tanımlanabilir. Tek yapmanız gereken test etmek istediğiniz sayfanın URL'sini girmek.

Google PageSpeed ​​Insights, oluşturmayı engelleyen kaynakların sayfanızın ilk boyasına eklediği toplam süreyi vurgular. Altında, oluşturmayı engelleyen her kaynağın URL'sini ve dosyanın boyutunu gösteren bir döküm göreceksiniz. Ayrıca, oluşturmayı engelleyen kaynak ortadan kaldırılırsa sayfanızın ne kadar hızlı yüklenebileceğini de gösterir.

GTmetrix ayrıca oluşturmayı engelleyen her kaynağı, dosyanın boyutunu ve dosyayı indirmek için geçen süreyi listeler.

Pingdom Web Sitesi Hız Testi, oluşturmayı engelleyen kaynakları vurgulayan belirli bir bölüme sahip olmasa da, “ Dosya İstekleri ” alanından sayfaların yavaşlamasına neyin neden olduğunu görebilirsiniz.

Simgeler, yazı tipleri ve Javascript dosyaları gibi oluşturmayı engelleyen kaynakları vurgulayacaktır. Her kaynak için dosya URL'si, dosya boyutu ve indirme süresi görüntülenir. Dosya istekleri alanı, hangi resimlerin sayfa yükleme sürelerini artırdığını görmek için de kullanışlıdır.

WordPress, web sitenizde farklı CSS ve Javascript dosyalarını çağırdığından, tüm oluşturmayı engelleyen kaynakların algılanması için birden çok sayfa için performans testleri yapmak önemlidir. Örneğin, ana sayfanız, blog dizini, blog gönderisi, hakkında sayfası ve iletişim sayfası gibi web sitenizin önemli alanları için performans testleri çalıştırabilirsiniz.

Kritik Kaynakları Belirleme

Bir web sayfasının ilk boyasını göstermesi gerekiyorsa, bir kaynak kritik kabul edilir. Diğer tüm kaynaklar kritik olmayan olarak kabul edilir.

Kritik kaynakları belirlemenin en kolay yollarından biri, Chrome Geliştirici Araçları'ndaki Kapsam sekmesini kullanmaktır. İlk sayfa yüklemesini doğru şekilde görüntülemek için tam olarak yüzde kaç dosya gerektiğini vurgular. Kritik stil yeşil, kritik olmayan stil ise kırmızı olarak gösterilir.

Aşağıdaki ekran görüntüsünde, WordPress.org'da, oluşturmayı engelleyen CSS ve Javascript dosyalarındaki kodun büyük bir yüzdesinin kullanılmadığını görebilirsiniz. Bu durum, birçok WordPress web sitesinde daha kötüdür; kapsam testi, her dosyanın %100'ünün kullanılmadığı birkaç dosyayı vurgular.

Satır İçi Çağrıları Kullanarak WordPress'te Oluşturmayı Engelleyen CSS'yi Ortadan Kaldırma

Google, tüm kritik kodları, oluşturmayı engelleyen kaynaklardan HTML sayfanızdan bir satır içi aramaya taşımanızı önerir. Bir sayfanın ilk boyanması için kritik olan stil, sayfanızın baş bölümündeki bir stil bloğu kullanılarak tanımlanabilirken, kritik Javascript işlevleri, Komut Dosyası etiketleri kullanılarak sayfanızın içinde satır içi olarak çağrılabilir.

Temalar ve eklentiler aracılığıyla bir web sitesine CSS ve Javascript kodunun eklendiği WordPress gibi dinamik bir platformda, kritik stili manuel olarak taşımak pratik olmayabilir. Bu nedenle, birçok WordPress kullanıcısı NitroPack ve Critical CSS gibi hizmetleri kullanır, böylece kritik stil sayfaları otomatik olarak çıkarılır ve baş bölümünde satır içi görüntülenir.

Web sitesi stili küçük CSS dosyalarında bulunuyorsa, küçük stil sayfalarından otomatik olarak satır içi stil oluşturmak için WordPress eklentisi Varlık Temizleme performansını kullanabilirsiniz.

Async ve Defer Kullanarak WordPress'te Oluşturmayı Engelleyen Javascript'i Kaldırın

WordPress'teki oluşturmayı engelleyen Javascript kaynakları, Async ve Defer adlı iki teknik kullanılarak ortadan kaldırılabilir. Her iki yöntem de tarayıcının sayfayı oluşturmaya devam etmesine izin verirken, wordpress'te ekranın üst kısmındaki içerikte oluşturmayı engelleyen CSS ve Javascript dosyaları arka planda indirilir.

Bir sayfada Async veya Erteleme kullanmak tercih edilebilir, bu nedenle her ikisini de test etmek ve hangi tekniğin en iyi sonuçları sağladığını görmek önemlidir. Bununla birlikte, hangi yöntemi kullanırsanız kullanın, sayfa yükleme sürelerinde bir azalma göreceksiniz.

Async ve Defer, bir WordPress performans eklentisi kullanarak tüm web sitenize uygulanabilir.

Kişisel blogumda, sayfalarda Javascript'i ertelemek için Async JavaScript eklentisini kullanıyorum. Autoptimize yaratıcısı Frank Goossens tarafından geliştirilen Async Javascript, kritik olmayan Javascript dosyalarına Async ve Defer uygulamanıza izin verir ve size JQuery dosyalarına farklı ayarlar uygulama seçeneği sunar.

Eklentinin kurulum sihirbazı, web siteniz için en iyi ayarları belirlemek için GTmetrix üzerinde birden fazla test çalıştıracaktır.

Web sitemde otomatik olarak Async veya Defer uyguladığı için Async JavaScript'i seçtim. Bu, şüphesiz WordPress'teki oluşturmayı engelleyen kaynakları ortadan kaldırmanın en basit yaklaşımıdır, ancak WordPress eklentisi HTTP/2 Push Preload ile daha iyi sonuçlar görebilirsiniz.

Chrome'un kapsama aracını veya GTmetrix veya Google PageSpeed ​​Insights gibi bir performans kıyaslama hizmetini kullanarak WordPress web sitenizde oluşturmayı engelleyen kaynakları belirledikten sonra, dosya bazında HTTP/2 Push Preload kullanarak Async ve Defer uygulayabilirsiniz.

Her dosya için Async ve Defer'ın performansını test etmeye istekliyseniz, her kaynak için en iyi tekniği bulabileceksiniz. Bu, sayfa yükleme sürelerinde daha büyük bir azalmaya yol açabilir.

Async ve Defer'ı uygulamak için hangi WordPress eklentisini kullanırsanız kullanın, hiçbir şeyin bozulmadığından emin olmak için web sitenizin tasarımını daha sonra kontrol ettiğinizden emin olun.

Bu konuya daha kapsamlı bir genel bakış için lütfen “ WordPress'te Javascript Ayrıştırmasını Erteleme ve Async Kullanarak Nasıl Ertelenir ” başlıklı makalemi okuyun.

Son düşünceler

WordPress'teki Render-Engelleme Kaynakları, sayfa yükleme sürelerini büyük ölçüde artırır. Ziyaretçiler, tüm oluşturmayı engelleyen kaynaklar indirilip çalıştırılana kadar boş bir sayfa göreceğinden, web sitenizin kullanıcı deneyimini de etkiler.

Chrome'un kapsama aracı ve Google PageSpeed ​​Insights ve GTmetrix gibi hizmetleri, oluşturmayı engelleyen kaynakları tanımlamayı kolaylaştırır. Ardından, Async JavaScript ve HTTP/2 Push Preload gibi WordPress eklentilerini kullanarak oluşturmayı engelleyen kaynakları ortadan kaldırabilirsiniz.

Okuduğunuz için teşekkürler.

Kevin