WordPress'te Oluşturmayı Engelleyen Kaynakları Ortadan Kaldırma

Birisi sitenizdeki bir sayfayı ziyaret etmeye çalıştığında, tarayıcılarına URL'yi girer ve hemen çalışmaya başlar. Sayfayı yüklemek için, o sayfayı oluşturan tüm öğeleri "render" etmesi gerekir.

Ancak bazen, bu işlemi duraklatan ve içeriğinizin oluşturulmasını engelleyen CSS veya JavaScript dosyaları vardır - bunlara oluşturmayı engelleyen kaynaklar denir. Bu, ziyaretçilerin uzun bekleme süreleri yaşayabileceği anlamına gelir; bu, insanların kuruluşunuzu nasıl algıladıklarını ve istediğiniz işlemleri yapıp yapmadıklarını olumsuz etkileyebilir.

Bu gönderide, oluşturmayı engelleyen kaynakların ne olduğunu açıklayacağız ve bunları sitenizden kaldırmanın faydalarını tartışacağız. Ardından, onları beş farklı şekilde nasıl ortadan kaldıracağınızı göstereceğiz.

Oluşturmayı engelleyen kaynaklar nelerdir?

Oluşturmayı engelleyen kaynaklara yakından bakmadan önce, bir web sitesinin normal yükleme sürecini anlamak önemlidir. Bir ziyaretçi sitenizin bağlantısını tıkladıktan sonra, tarayıcısının tüm içeriğini oluşturması (veya indirmesi) gerekir. Tüm HTML, CSS ve JavaScript dahil olmak üzere sitenizin kodunu yukarıdan aşağıya okur.

Tarayıcı bu komut dizisini tamamen okuyana kadar ziyaretçiler web sitenizi göremez. Oluşturmayı engelleyen kaynaklar varsa, uzun süre bekleyebilirler.

Esasen, oluşturmayı engelleyen bir kaynak, bir tarayıcının işlenene kadar diğer içeriği yüklemeyi durdurmasına neden olan bir CSS veya JavaScript dosyasıdır. Bu, oluşturma işlemini duraklatarak sayfanın boş veya eksik görünmesine neden olabilir.

Sitenizde oluşturmayı engelleyen kaynaklar olduğunda, kodunun en üstüne gereksiz dosyalar yükler. Ziyaretçiler, sayfayı görmeden önce bu dosyaların işlenmesini beklemek zorunda kalacaklar.

Oluşturmayı engelleyen kaynaklardan etkilenebilecek bazı web sitesi performans metrikleri şunlardır:

• En Büyük İçerikli Boyama : Bu, bir sayfanın ana içeriğinin yüklenmesinin ne kadar sürdüğünü ölçer.
• First Contentful Paint : Bu, tarayıcının sitenizdeki ilk Belge Nesne Modeli (DOM) içeriğini oluşturması için geçen süredir.
• Toplam Engelleme Süresi : Bu, İlk İçerikli Boyama ile Etkileşim Süresi arasındaki gecikmeyi ölçer (bir sayfanın tamamen etkileşimli hale gelmesi ne kadar sürer).

Oluşturmayı engelleyen kaynaklar, yükleme için kritik değildir, ancak oluşturma işlemini geciktirebilir. Bunun sitenizin Kullanıcı Deneyimi (UX) üzerinde olumsuz bir etkisi olabilir. Bu nedenle, ziyaretçilerin sayfalarınızdan ayrılmasını önlemek için bunları ortadan kaldırmanız önemlidir.

Oluşturmayı engelleyen kaynakları ortadan kaldırmanın faydaları

Genel olarak internet kullanıcıları sayfaların yüklenmesini beklemekten hoşlanmazlar. Hızlı bir site, ziyaretçileri içeriğinizi keşfetmeye teşvik edebilir ve bir rakibe dönüşmelerini engelleyebilir.

Oluşturmayı engelleyen kaynakları ortadan kaldırmak, web sitenizin kodunu mümkün olduğunca hafif hale getirdiğiniz için sayfa hızını artırmanın anahtarı olabilir.

Site performansı ve kullanıcı etkileşimi, Google gibi şirketlerin siteleri değerlendirirken kullandığı metriklerden bazıları olduğundan, oluşturmayı engelleyen dosyaları kaldırmak arama motoru sıralamalarınızı da iyileştirebilir.

Web sitenizi oluşturmayı engelleyen kaynaklar için nasıl test edebilirsiniz?

Dosyaları sitenizden kaldırmaya başlamadan önce, sitenin oluşturmayı engelleyen kaynaklara sahip olup olmadığını anlamanız gerekir. Yavaş yükleme süreleri, optimize edilmemiş görüntüler, düşük kaliteli barındırma veya çok fazla eklentiye sahip olma gibi diğer faktörlerden de kaynaklanabilir.

Web sitenizi oluşturmayı engelleyen kaynaklar için test etmek için Google'ın PageSpeed ​​Insights gibi bir aracı kullanabilirsiniz. Bu size sayfa performansınız hakkında ayrıntılı raporlar verebilir ve puanlarınızı artırmanıza yardımcı olacak öneriler sağlayabilir.

Başlamak için sitenizin URL'sini arama kutusuna girin ve Analiz et 'i tıklayın. Araç daha sonra sitenizin performansını test edecektir. Hazır olduğunda, sayfa hızınızla ilgili bir dizi ölçüm olan Önemli Web Verilerinizin bir değerlendirmesini görürsünüz.

PageSpeed ​​Insights, oluşturmayı engelleyen kaynakları kontrol etmeyi de kolaylaştırır. Bunu yapmak için, Fırsatlar bölümüne kaydırabilirsiniz. Burada, Oluşturmayı engelleyen kaynakları ortadan kaldır etiketli bir öneri aramanız gerekir.

Üzerine tıklarsanız, PageSpeed ​​Insights size test sırasında tanımladığı oluşturmayı engelleyen kaynakların bir listesini verecektir. Sayfanın sağ tarafında, bu dosyaları silerseniz veya ertelerseniz tahmini tasarrufları görürsünüz.

Oluşturmayı engelleyen kaynaklarınızı belirledikten sonra devam edebilir ve bunları sitenizden kaldırabilirsiniz. Bu şekilde sayfa hızınızı ve kullanıcı deneyiminizi iyileştirebilirsiniz.

WordPress'te oluşturmayı engelleyen kaynaklar nasıl ortadan kaldırılır

Artık WordPress'te oluşturmayı engelleyen kaynakları nasıl tanımlayacağınızı bildiğinize göre, bunları sitenizden nasıl kaldıracağınızı merak ediyor olabilirsiniz. Neyse ki, en kolay yöntemlerden başlayarak bunu yapabileceğiniz farklı yolların bir listesini derledik.

1. CSS yüklemesini optimize edin

Oluşturmayı engelleyen kaynakları ortadan kaldırmanın bir yolu, web sitenizin CSS yüklemesini optimize etmektir. Daha önce tartışıldığı gibi, bir tarayıcı web sitenizi yukarıdan aşağıya yükler. Belirli dosyaları işlemesi gerektiğinde, bu yükleme işlemini geciktirebilir.

Yükleme için yalnızca belirli CSS dosyalarının gerekli olduğunu unutmamak önemlidir. Bu nedenle, CSS yüklemesini optimize ettiğinizde, önce en önemli dosyaları görüntüleyebilirsiniz.

Oluşturmayı engelleyen CSS'yi manuel olarak kaldırabilseniz de, işlemi basitleştirmek için bir eklenti yükleyebilirsiniz. Jetpack Boost, sitenizi WordPress kontrol panelinizden optimize etmenizi sağlar.

Bu eklenti ile CSS yüklemesini optimize edebilir, gerekli olmayan JavaScript'i erteleyebilir ve birkaç basit adımda tembel yükleme uygulayabilirsiniz. Bu, WordPress'te oluşturmayı engelleyen kaynakları ortadan kaldırmanın en kolay yollarından biridir.

Başlamak için WordPress panonuzda Eklentiler → Yeni Ekle'ye gidin ve Jetpack Boost'u arayın. Ardından eklentiyi sitenize kurun ve etkinleştirin.

Jetpack zaten kuruluysa, Jetpack → My Jetpack'e gidebilirsiniz. Jetpack ürünleri listesinden Boost'u arayın ve Etkinleştir'e tıklayın.

Eklentiyi etkinleştirdikten sonra Jetpack Boost sekmesine tıklayın ve Başlayın'ı seçin.

Jetpack, web siteniz için size otomatik olarak bir performans puanı verecektir. Mobil ve masaüstü puanlarınızla ilgili ayrıntıların yanı sıra bir harf notu göreceksiniz.

Ardından, CSS Yüklemeyi Optimize Et'e gidin ve bu özelliği açın. Etkinleştirildiğinde, Jetpack Boost, web sitenizin kritik CSS'sini sayfalarınızın en üstüne taşıyacak ve böylece sayfalar daha hızlı yüklenecektir.

2. Gerekli olmayan JavaScript'i erteleyin

WordPress'te oluşturmayı engelleyen kaynakları ortadan kaldırmak için atabileceğiniz tek adım CSS yüklemesini optimize etmek değildir. Sitenizin yükleme sürelerini daha da iyileştirmek için gerekli olmayan JavaScript'i de erteleyebilirsiniz.

Gerekli olmayan JavaScript'i erteleyerek belirli görevleri içeriğiniz yüklenene kadar erteleyebilirsiniz. Bir sayfayı yüklemek için bazı JavaScript dosyaları gerekli değilse, tarayıcının bunları işlemesini engelleyebilirsiniz.

Neyse ki, Jetpack Boost eklentisi ile bunu uygulamak kolaydır. CSS yüklemesini optimize ettikten sonra, gerekli olmayan JavaScript'i de kolayca erteleyebilirsiniz.

Bunu yapmak için, CSS Yüklemeyi Optimize Et altındaki Temel Olmayan JavaScript'i Ertele bölümünü bulun ve geçiş anahtarını açın.

Bu ayarı etkinleştirdiğinizde, eklenti genel sayfa performansınızı yeniden hesaplayacaktır. Jetpack Boost'u kullanmadan önce ve sonra puanınızı görebileceksiniz.

Bu işlemi gerçekleştirmeden önceki ve sonraki ekran görüntülerindeki puanları karşılaştırın. CSS yüklemesini optimize etmenin ve gerekli olmayan JavaScript'i ertelemenin sayfa hızını artırmada etkili olduğunu göreceksiniz. Tarayıcılar, hacimli komut dosyalarını işlemek zorunda kalmadan içeriğinizi daha hızlı yükleyebilir.

3. Ekran dışı görüntüleri erteleyin

Resimler, oluşturmayı engelleyen bir kaynak değildir, ancak sayfa oluşturma işleminizi iyileştirmek için yükleme işlemlerini optimize etmeyi düşünebilirsiniz. Web siteleri genellikle, bir ziyaretçi kaydırma gibi bir etkileşim yapana kadar sayfada görünmeyen ekran dışı görüntüler içerir. Bunlar web sayfasının yüklenmesi için kritik olmadığı için tembel yükleme ile erteleyebilirsiniz.

Tembel resim yükleme, yalnızca ziyaretçilerin görebileceği resimlerin yüklenmesini içerir. Birisi kaydırmaya başladığında, bu resimler sayfada görünmeden hemen önce yüklenir.

Geç yükleme olmadan, bir tarayıcı bir sayfadaki tüm resimleri bir kerede yüklemeye çalışır. Bu, içeriğinizin yüklenmesinin daha uzun süreceği anlamına gelir ve bu da insanları sitenizden ayrılmaya sevk edebilir.

Bir ziyaretçi bir masaüstü bilgisayar kullanıyorsa, düzenli yükleme sorun olmayabilir. Öte yandan, akıllı telefonlar ve tabletler daha küçük ekranlara ve daha az bant genişliğine sahiptir. Web siteniz tüm resimlerini bir kerede tam olarak yüklerse, bu, bant genişliğini daha fazla zorlayabilir ve cep telefonu kullanıcıları için yükleme sürelerini artırabilir. Tembel yükleme bu sorunu çözer.

Sitenizde tembel yüklemeyi etkinleştirmek için Jetpack Boost'u kullanabilirsiniz. Tembel Görüntü Yükleme özelliğini bulun ve açın.

Bunu yaparak, web siteniz yalnızca ziyaretçi sayfayı aşağı kaydırdıkça resimleri yükler. Görüntüler oluşturmayı engelleyen bir kaynak olmasa da, geç yüklemeyi açmak sayfa hızınızı artırmanıza yardımcı olabilir.

4. Oluşturmayı engelleyen JavaScript'i manuel olarak kaldırın

Optimizasyon eklentisi yüklemek çok daha basit bir çözüm olsa da, oluşturmayı engelleyen kaynakları manuel olarak da kaldırabilirsiniz. İdeal olarak, bu seçeneği yalnızca deneyimli bir kodlayıcıysanız göz önünde bulundurmalısınız. Bu işlem, web sitenizdeki eklenti sayısını azaltmak istiyorsanız da faydalı olabilir.

JavaScript'i optimize ederken, dosyalarınıza bir zaman uyumsuz veya erteleme özelliği ekleyebilirsiniz. Bu, kritik olmayan komut dosyalarını işaretler ve tarayıcıya bunları ayrı olarak oluşturmasını söyler. Her iki özellik de HTML içeriğinin daha hızlı yüklenmesini sağlamak için kullanılabilir.

Normal bir komut dosyasında, HTML dosyası bir komut dosyasına ulaşana kadar ayrıştırılır. Ardından, komut dosyasını alırken ayrıştırma duraklayacaktır. İndirilip yürütüldükten sonra, ayrıştırma devam eder.

async özelliği, HTML'nin geri kalanını ayrıştırırken tarayıcının JavaScript'i indirmesine izin verir. İndirdikten sonra, komut dosyasını yürütmek için HTML ayrıştırmasını durdurabilir.

Benzer şekilde, erteleme özelliği, HTML'yi ayrıştırırken tarayıcının komut dosyasını indirmesine izin verir. Aradaki fark, betiği yürütmek için HTML ayrıştırmasının bitmesini de beklemesidir.

Bu niteliklerden herhangi birini uygulamak için, function.php dosyanıza bir kod parçacığı eklemeniz gerekir. İlk olarak, oluşturmayı engelleyen kaynak için <script> etiketini bulmanız gerekir. Ardından, bunun gibi bir zaman uyumsuz öznitelik ekleyebilirsiniz:

 <script src="resource.js" async></script>

Alternatif olarak, erteleme özniteliğine sahip bir komut dosyası şöyle görünebilir:

 http://resource.js

Bir eklenti bu özellikleri sizin için halledebilirken, bu görevi kendiniz gerçekleştirmeyi tercih edebilirsiniz. Eğer öyleyse, her bir özelliği ne zaman kullanacağınızı bilmeniz önemlidir. Başka bir komut dosyasına dayanan temel olmayan komut dosyaları için bir erteleme özniteliği kullanmanız gerekir. Diğer tüm komut dosyaları için async ile gidebilirsiniz.

5. Bir eklenti ile zaman uyumsuz veya erteleme öznitelikleri uygulayın

Komut dosyalarını manuel olarak düzenlemekte sorun yaşıyorsanız, Async JavaScript gibi bir eklenti kullanabilirsiniz. Bu araç, hangi komut dosyalarının zaman uyumsuz veya erteleme özelliğine sahip olduğunu tam olarak kontrol etmenizi sağlar.

Eklentiyi yükledikten sonra, Ayarlar → Eşzamansız JavaScript'e gidin ve Eşzamansız JavaScript'i Etkinleştir'i seçin.

Ardından, Zaman Uyumsuz JavaScript Yöntemi bölümüne gidin. Burada, zaman uyumsuz veya erteleme özniteliklerini etkinleştirmek isteyip istemediğinizi seçebilirsiniz.

Birçok eklenti jQuery'ye güvendiğinden, bu komut dosyalarını hariç tutmak iyi bir fikirdir. jQuery'ye zaman uyumsuz nitelikler uygulamaya çalışırsanız, web sitenizi bozabilirsiniz.

Şüpheye düştüğünüzde, defer niteliğini kullanabilirsiniz, ancak yapılacak en iyi şey jQuery'yi tamamen hariç tutmaktır.

Artık, ertelemek veya zaman uyumsuz hale getirmek istediğiniz belirli komut dosyalarını listeleyebilirsiniz. Her komut dosyasını doğru bölüme yerleştirdiğinizden emin olmanız önemlidir.

Komut Dosyası Hariç Tutma bölümünde, bu işlemden hariç tutmak istediğiniz komut dosyalarını listeleyebilirsiniz.

Sayfanın altında, eklentileri ve temaları hariç tutma seçeneklerini de göreceksiniz. Burada bir tema veya eklenti listelediğinizde, komut dosyaları zaman uyumsuz veya erteleme niteliklerine uygulanmaz.

Bu seçenekleri özelleştirdikten sonra devam edip Ayarları Kaydet seçeneğine tıklayabilirsiniz. Bu yöntem, komut dosyalarını manuel olarak düzenlemek ve bir eklentinin bu işlemi sizin için gerçekleştirmesine izin vermek arasında etkili bir orta yol olabilir. Alternatif olarak, bu ekstra adımları kaldırmak için Jetpack Boost gibi hepsi bir arada bir araç kullanabilirsiniz.

Sık Sorulan Sorular (SSS)

Gördüğünüz gibi, WordPress'te oluşturmayı engelleyen kaynakları ortadan kaldırmanın birkaç yolu vardır. Bu süreçle ilgili en sık sorulan sorulardan bazılarına bakalım.

WordPress sitemi oluşturmayı engelleyen kaynaklar için nasıl test edebilirim?

URL'sini PageSpeed ​​Insights'a girerek WordPress web sitenizi test edebilirsiniz. Sonuçlarınızda, Fırsatlar bölümü altında oluşturmayı engelleyen kaynakları arayın.

Oluşturmayı engelleyen kaynaklar Temel Web Verileriyle ilgili mi?

Evet, oluşturmayı engelleyen kaynaklar sitenizin Önemli Web Verileri puanlarını olumsuz etkileyebilir. Optimize edilmemiş herhangi bir komut dosyası, En Büyük İçerikli Boyamayı (LCP), Toplam Engelleme Süresini (TBT) ve İlk İçerikli Boyamayı (FCP) artırabilir. Web sitenizi PageSpeed ​​Insights gibi bir Önemli Web Verileri yazılımıyla test ederseniz, puanınızı artırmak için oluşturmayı engelleyen kaynakları kaldırmanızı önerebilir.

HTML, oluşturmayı engelleyen bir kaynak mı?

Evet, sayfa oluşturma sürecini geciktiren tüm HTML içe aktarmaları, komut dosyaları veya stil sayfaları, oluşturmayı engelleyen bir kaynak olabilir.

Görüntüler oluşturmayı engelliyor mu?

Hayır, resimler oluşturmayı engelleyen bir kaynak değildir, ancak yine de sayfa hızınızı artırmak için resimleri optimize etmek isteyebilirsiniz. Jetpack Boost'u kullanarak, yalnızca ekranda görünenleri yüklemek için ekran dışı görüntüleri erteleyebilirsiniz. Ardından, ziyaretçi sayfayı aşağı kaydırdıkça resimler yüklenir.

Daha hızlı yükleme süreleri için sitenizi optimize edin

Oluşturmayı engelleyen dosyaları kaldırdığınızda sitenizin yükleme sürelerini iyileştirebilirsiniz. Bu, ziyaretçileri web sitenizde daha uzun süre tutabilecek daha iyi bir kullanıcı deneyimine katkıda bulunabilir. Bu nedenle, oluşturmayı engelleyen kaynakları ortadan kaldırmak, sitenizi hedeflerinize daha iyi ulaşmak için optimize etmenin etkili bir yolu olabilir.

İncelemek için, WordPress'te oluşturmayı engelleyen kaynakları ortadan kaldırmanın beş yolu:

1. Jetpack Boost ile CSS yüklemesini optimize edin.
2. Gerekli olmayan JavaScript'i erteleyin.
3. Ekran dışı görüntüleri erteleyin.
4. Oluşturmayı engelleyen kaynakları manuel olarak kaldırın.
5. Async JavaScript eklentisi ile zaman uyumsuz veya erteleme öznitelikleri uygulayın.

Oluşturmayı engelleyen kaynakları kaldırdığınızda, ziyaretçileriniz daha hızlı yükleme sürelerinin keyfini çıkarabilir!