İşleme Engelleme Kaynakları Nedir ve İşleme Engelleme Sorunları Nasıl Düzeltilir

Oluşturmayı engelleyen kaynaklar, web sitelerinin yavaş yüklenmesinin en yaygın nedenlerinden biridir. Web siteniz yeterince hızlı değilse, yalnızca ziyaretçilerinizin kullanıcı deneyimine zarar vermekle kalmaz, aynı zamanda arama motorunuzun sıralamasına da zarar verirsiniz. Kötü haber şu ki, web siteniz yavaşsa, müşteri ve gelir kaybediyorsunuz.

Bununla birlikte, iyi haberler de var - oluşturmayı engelleyen kaynakları ortadan kaldırarak web sitenizin hızını artırabilirsiniz. Bu makalede, oluşturmayı engelleyen kaynakların yükleme sürelerinizi nasıl etkilediğini açıklayacağız ve bunları nasıl düzelteceğinizi göstereceğiz.

Oluşturmayı Engelleyen Kaynaklar Nelerdir?

En yaygın oluşturma engelleme kaynakları, web sayfanızın başında bulunan JavaScript ve CSS dosyalarıdır. Ekranın üst kısmına (veya içeriğin geri kalanını görmek için aşağı kaydırmadan önce normalde bir web sitesinde gördüğünüz alana) yüklenirler ve bir web tarayıcısı tarafından kullanılan kritik işleme yolunun bir parçasıdırlar.

Layman'ın terimleriyle, bu, tarayıcınızın herhangi bir web sayfasının ilk görünümünü düzgün bir şekilde görüntülemesi (oluşturması) için belirli olayların gerçekleşmesi gerektiği anlamına gelir. Aşağıda, temel bir oluşturma yolunun nasıl çalıştığına dair bir örnek verilmiştir:

• Tarayıcı, web sayfasının yapısını tutan bir HTML dosyasından oluşan bir web sayfası indirir.
• Tarayıcı daha sonra HTML'yi okur ve 3 ek dosya fark eder: bir css dosyası, bir javascript dosyası ve bir resim
• Tarayıcı önce resmi indirecek
• Tarayıcı daha sonra CSS ve JavaScript'i almadan sayfayı görüntülemeye devam edemeyeceğini anlar.
• Tarayıcı, CSS dosyasını indirir ve başka hiçbir şeyin çağrılmadığından emin olmak için onu okur.
• Tarayıcı JavaScript dosyasını indirir ve başka hiçbir şeyin çağrılmadığından emin olmak için onu okur.
• Tarayıcı sonunda web sayfasını görüntüleyebilir

Tarayıcı, CSS ve JavaScript dosyalarının her birini yüklemek ve okumakla meşgulken, ziyaretçileriniz boş bir ekrana bakıyor ve sitenizin yüklenmesini bekliyor. WordPress gibi bir CMS kullanıyorsanız, tarayıcınız bir süre meşgul olabilir, çünkü yalnızca temanızın stil ve komut dosyası dosyalarını değil, aynı zamanda WordPress'in kendisiyle birlikte gelen komut dosyası ve stil dosyalarını da yüklemesi gerekir. kullandığınız tüm eklentiler ve widget'larla birlikte gelenler.

Web sitenizin hızını optimize etmek söz konusu olduğunda, listenizdeki ilk görev, kullanıcılarınızın içeriğinizi görüntülemesi ve içerikle etkileşim kurması için geçen süreyi azaltmak olmalıdır. Bunu yapmanın en kolay yolu, kritik işleme yolunuzu optimize etmektir.

Oluşturma Engelleme Sorunları Nasıl Onarılır

Artık oluşturmayı engelleyen sorunların nedenini ve sitenizin hızını nasıl etkilediğini bildiğinize göre, bu sorunları nasıl çözeceğiniz hakkında konuşalım.

Oluşturmayı Engelleyen CSS

Oluşturmayı engelleyen CSS sorunlarını düzeltmenin üç yolu vardır:

• CSS dosyalarınızı düzgün bir şekilde çağırın – CSS dosyanız HTML dosyanıza şu şekilde bağlanmalıdır: @import yöntemini @import yerine <link rel="style.css" href=“style.css"> . genellikle normal stil sayfanızın en üstüne yakın olur ve tarayıcının geri dönüp içe aktarılan dosyayı CSS dosyasının geri kalanını okumadan önce bulmasına ve web sayfanızın oluşturulması söz konusu olduğunda daha da büyük bir gecikmeye neden olmasına neden olur
• Kritik yoldaki CSS dosyalarının sayısını azaltın – mümkünse, tüm farklı CSS dosyalarını tek bir dosyada birleştirin ve bu dosyalara yapılan çağrıyı HTML'nizden kaldırın

Oluşturmayı Engelleyen JavaScript

Oluşturmayı engelleyen JavaScript'i kaldırmak için, kaç tane JavaScript dosyasının yüklendiğini ve HTML'nizde nerede çağrıldıklarını bilmeniz gerekir. Bunu bulmanın iyi bir yolu, Google PageSpeed ​​Insights aracını kullanmaktır. Avustralya merkezli temizlik şirketi This Is Neat Cleaning, web sitelerini oluştururken, hem mobil hem de masaüstü için tam olarak neye ihtiyaç duyduklarını bulmak için çeşitli senaryoları test ederek karşılaştırmalı değerlendirme olarak Google'ın PageSpeed ​​Insights'ını kullandılar.

Testlerden, komut dosyalarının çoğunu HTML dosyalarının altına eklemenin en iyi sonuçları verdiği açıkça görülüyordu. Komut dosyalarının sayfanın altına taşınmasının kaldırılmasının ana nedeni, javascript'in kullanıcı deneyimini durdurmasını engellemesidir. Kritik CSS ekranın üst kısmına yüklenmeye devam ederken, etkileşimler ve işlevsellik arka planda yüklenmeye devam ederken, kullanıcı siteyi temel olarak kullanmaya devam edebilir.

Eklenti Kullanmak

Elbette, WordPress ile ilgili herhangi bir şeyde olduğu gibi, oluşturma engelleme sorunlarını gidermek için bir eklenti kullanabilirsiniz. Toplamda bir milyondan fazla aktif kurulumla, This is Neat Cleaning'in önbelleğe alma, küçültme ve performans optimizasyonu için W3 Total Cache'i kullanması hiç de kolay değildi.

Oluşturmayı engelleyen sorunları düzeltmek için W3 Total Cache'i nasıl kullanabileceğiniz aşağıda açıklanmıştır.

WordPress kontrol panelinizde Performans > Ayarlar'a gidin ve Küçült bölümüne gidin. Etkinleştir yazan kutuyu işaretleyin ve ardından küçültme modunun yanındaki açılır menüden Manuel'i seçin. Ayarları kaydedin . Ardından, küçültmek istediğiniz tüm komut dosyalarını ve stilleri eklemeniz gerekir.

Oluşturmayı engelleyen komut dosyalarının ve stil sayfalarının nerede olduğunu öğrenmek için Google Page Speed ​​Insights Aracına gidin ve web sitenizi analiz edin. Ardından, öneriler sekmesine bakın ve yazan bölümü bulun: Ekranın üst kısmındaki içerikte oluşturmayı engelleyen JavaScript ve CSS'yi kaldırın . Nasıl düzeltileceğini göster'e tıklayın ve dosyanın URL'sini seçip kopyalayın.

WordPress kontrol panelinize geri dönün ve W3 Total Cache > Performance > Minify'a gidin. JavaScript bölümüne gidin ve Alanlardaki işlemler altında, <head> bölümü için yerleştirme türünün Engellemeyen kullanarak erteleme olarak ayarlandığından emin olun. Ardından, Komut dosyası ekle düğmesini tıklayın ve Google PageSpeed ​​aracından kopyaladığınız URL'yi yapıştırın.

Tüm komut dosyalarını ekledikten sonra, CSS bölümüne gidin, Stil sayfası ekle'yi tıklayın ve Google PageSpeed ​​Insights'tan kopyalanan stil sayfası dosyalarının URL'lerini ekleyin.

İşiniz bittiğinde, Ayarları kaydet ve önbelleği temizle düğmesini tıklayın.

Son düşünceler

Web sitesi hızı söz konusu olduğunda, oluşturmayı engelleyen kaynaklar hasara neden olabilir. Neyse ki, bu sorunları düzeltmenin birkaç yolu vardır, bu nedenle web sitenizin hızını artırmak ve ziyaretçilerinizin mümkün olan en iyi kullanıcı deneyimini yaşamasını sağlamak için burada verilen ipuçlarını kullanın.