Oluşturmayı Engelleyen Kaynakları WordPress Web Sitenizden Nasıl Kaldırabilirsiniz?

Hiç bir WordPress web sitesi oluşturmayı bitirdiniz, onunla ilgili her şeyi sevdiniz ve yüklenmesinin sonsuza kadar sürdüğünü fark ettikten sonra hemen ondan nefret etmeye başladığınız oldu mu? Oluşturmayı engelleyen kaynakların ortadan kaldırılmasında uzmanlaşmak, bu sorunun teşhis edilmesine yardımcı olacaktır. Ama nasıl?

Yavaş yükleme hızları yalnızca siz ve ziyaretçileriniz için bir baş belası olmakla kalmaz, aynı zamanda SEO söz konusu olduğunda size önemli ölçüde mal olabilir. 2010'dan beri, Google algoritmaları sıralama kararlarında yükleme hızını hesaba katıyor, bu nedenle yavaş sayfalar sonuç sayfalarında daha düşük görünüyor.

Kötü sayfa performansının yaygın suçlularına aşina olabilirsiniz — aşırı içerik, sıkıştırılmamış görüntü dosyaları, yetersiz barındırma ve önbelleğe alma eksikliği bunlardan birkaçıdır. Ancak oyunda genellikle gözden kaçan başka bir fail daha var: işlemeyi engelleyen kaynaklar.

Beni yanlış anlamayın — CSS ve JavaScript harikadır. CSS olmadan, web siteleri düz metin duvarları olurdu. Ja=ooovaScript olmadan, web sitelerimize dinamik, etkileşimli, ilgi çekici öğeler ekleyemezdik. Ancak, yanlış zamanda çalıştırılırsa, hem CSS hem de JavaScript, web sitenizin performansına zarar verebilir.

Nedeni şu: Bir web tarayıcısı bir web sayfasını ilk kez yüklediğinde, ekranda bir ziyaretçiye göstermeden önce sayfanın tüm HTML'sini ayrıştırır. Tarayıcı bir CSS dosyasına, bir JavaScript dosyasına veya bir satır içi komut dosyasına (yani, HTML belgesinin kendisindeki JavaScript kodu) bir bağlantıyla karşılaştığında, kodu getirmek ve yürütmek için HTML ayrıştırmasını duraklatır, bu da her şeyi yavaşlatır.

Sayfa performansınızı WordPress'te optimize ettiyseniz ve hala sorun yaşıyorsanız, suçlu, oluşturmayı engelleyen kaynaklar olabilir. Bazen bu kodun ilk yüklemede çalıştırılması önemlidir, ancak çoğu zaman kaldırılabilir veya kuyruğun sonuna kadar itilebilir.

Bu gönderide, bu sinir bozucu kodu WordPress web sitenizden nasıl kaldıracağınızı ve performansınızı nasıl artıracağınızı göstereceğiz.

Bir video ile devam etmeyi tercih ederseniz, WP Casts tarafından oluşturulan bu izlenecek yolu inceleyin:

1. Oluşturmayı engelleyen kaynakları tanımlayın.

Herhangi bir değişiklik yapmadan önce, işlemeyi engelleyen kaynakları bulmanız gerekir. Bunu yapmanın en iyi yolu, Google'ın PageSpeed ​​Insights aracı gibi ücretsiz bir çevrimiçi hız testidir. Sitenizin URL'sini yapıştırın ve Analiz Et 'i tıklayın.

Tarama tamamlandığında, Google web sitenize 0 (en yavaş) ile 100 (en hızlı) arasında bir toplam hız puanı atar. 50 ila 80 aralığındaki bir puan ortalamadır, bu nedenle bu aralığın üst kısmına veya üstüne inmek isteyeceksiniz.

Sayfanızı yavaşlatan işlemeyi engelleyen dosyaları belirlemek için, Fırsatlar'a gidin , ardından işlemeyi engelleyen kaynakları ortadan kaldır akordeonunu açın.

Görüntü Kaynağı

Sayfanızın "ilk boyasını" yavaşlatan dosyaların bir listesini göreceksiniz — bu dosyalar, ilk sayfa yüklemesinde tarayıcı penceresinde görünen tüm içeriğin yüklenme süresini etkiler. Buna "ekranın üst kısmı" içeriği de denir.

.css ve .js uzantılarıyla biten dosyaları not alın, çünkü odaklanmak isteyeceğiniz dosyalar bunlardır.

2. Oluşturmayı engelleyen kaynakları manuel olarak veya bir eklenti ile ortadan kaldırın.

Artık sorunu tanımladığınıza göre, sorunu WordPress'te düzeltmenin iki yolu vardır: manuel olarak veya bir eklentiyle. Önce eklenti çözümünü ele alacağız.

Birkaç WordPress eklentisi, oluşturmayı engelleyen kaynakların WordPress web sitelerindeki etkisini azaltabilir. İki popüler çözümü ele alacağım, Autoptimize ve W3 Total Cache.

Autoptimize Eklentisi ile Oluşturmayı Engelleyen Kaynakları Nasıl Ortadan Kaldırırsınız?

Autoptimize, daha hızlı sayfalar sunmak için web sitesi dosyalarınızı değiştiren ücretsiz bir eklentidir. Autoptimize, dosyaları toplayarak, kodu küçülterek (yani, fazlalık veya gereksiz karakterleri silerek dosya boyutunu küçülterek) ve işlemeyi engelleyen kaynakların yüklenmesini geciktirerek çalışır.

Sitenizin arka ucunu değiştirdiğiniz için, bu eklenti veya benzeri herhangi bir eklenti konusunda dikkatli olmayı unutmayın. Autoptimize ile işlemeyi engelleyen kaynakları ortadan kaldırmak için:

1. Autoptimize eklentisini yükleyin ve etkinleştirin.

2. WordPress panonuzdan, Ayarlar > Otomatik Optimize Et öğesini seçin.

3. JavaScript Seçenekleri altında, JavaScript kodu optimize edilsin mi? 'nin yanındaki kutuyu işaretleyin. .

4. Toplu JS dosyalarının yanındaki kutu? işaretli, işaretini kaldırın.

5. CSS Seçenekleri altında, CSS Kodu Optimize Edilsin mi? .

6. Toplu CSS dosyalarının yanındaki kutu? işaretli, işaretini kaldırın.

7. Sayfanın alt kısmında Değişiklikleri Kaydet ve Önbelleği Boşalt'a tıklayın.

8. Web sitenizi PageSpeed ​​Insights ile tarayın ve bir gelişme olup olmadığını kontrol edin.

9. PageSpeed ​​Insights, oluşturmayı engelleyen JavaScript dosyalarını hâlâ rapor ediyorsa, Ayarlar > Otomatik optimize et'e geri dönün ve JS dosyaları toplansın mı? 'in yanındaki kutuları işaretleyin. ve Toplu CSS dosyaları? . Ardından, Değişiklikleri Kaydet ve Önbelleği Boşalt'a tıklayın ve tekrar tarayın.

W3 Total Cache Eklentisi ile Oluşturmayı Engelleyen Kaynakları Nasıl Ortadan Kaldırırsınız?

W3 Total Cache, gecikmeli kodu ele almaya yardımcı olan, yaygın olarak kullanılan bir önbellekleme eklentisidir. Oluşturmayı engelleyen JavaScript'i W3 Total Cache ile ortadan kaldırmak için:

1. W3 Total Cache eklentisini yükleyin ve etkinleştirin.

2. WordPress pano menünüze yeni bir Performans seçeneği eklenecektir. Performans > Genel Ayarlar'ı seçin.

3. Küçült bölümünde Küçült öğesinin yanındaki kutuyu işaretleyin , ardından Küçült modunu Manuel olarak ayarlayın.

4. Küçült bölümünün altındaki Tüm ayarları kaydet'i tıklayın.

5. Pano menüsünde Performans > Küçült öğesini seçin.

6. JS küçültme ayarları yanındaki JS bölümünde, Etkinleştir kutusunun işaretli olduğundan emin olun. Ardından, Alanlardaki işlemler altında, ilk Gömme türü açılır menüsünü açın ve "ertele" kullanarak engellemeyi kaldırmayı seçin.

7. JS dosya yönetimi altında, Tema açılır menüsünden aktif temanızı seçin.

8. Önceki taramanızdaki PageSpeed ​​Insights sonuçlarınıza geri dönün. .js ile biten işlemeyi engelleyen kaynakları kaldır altındaki her öğe için Komut dosyası ekle'yi tıklayın. Ardından, JavaScript kaynağının tam URL'sini PageSpeed ​​Insights'tan kopyalayın ve Dosya URI'si alanına yapıştırın.

9. PageSpeed ​​Insights tarafından bildirilen, oluşturmayı engelleyen tüm JavaScript kaynaklarını yapıştırdıktan sonra, JS bölümünün altındaki Ayarları Kaydet ve Önbellekleri Temizle'ye tıklayın .

10. CSS küçültme ayarları öğesinin yanındaki CSS bölümünde, CSS küçültme ayarları öğesinin yanındaki kutuyu işaretleyin ve Küçültme yönteminin Combine & Minify olarak ayarlandığından emin olun.

11. CSS dosya yönetimi altında, Tema açılır menüsünden aktif temanızı seçin.

12. PageSpeed ​​Insights tarama sonuçlarınızda .css ile biten işlemeyi engelleyen kaynakları ortadan kaldırın altındaki her öğe için Stil sayfası ekle'ye tıklayın. Ardından, CSS kaynağının tam URL'sini PageSpeed ​​Insights'tan kopyalayın ve Dosya URI'si alanına yapıştırın.

13. PageSpeed ​​Insights tarafından bildirilen, oluşturmayı engelleyen tüm CSS kaynaklarını yapıştırdıktan sonra, CSS bölümünün altındaki Ayarları Kaydet ve Önbellekleri Temizle'ye tıklayın .

14. Web sitenizi PageSpeed ​​Insights ile tarayın ve bir gelişme olup olmadığını kontrol edin.

Oluşturmayı Engelleyen JavaScript'i Manuel Olarak Ortadan Kaldırma

Eklentiler, arka uç işini sizin yerinize halledebilir. Sonra tekrar, eklentilerin kendileri web sunucunuza eklenen dosyalardan başka bir şey değildir. Bu fazladan dosyaları sınırlamak istiyorsanız veya programlamayı kendiniz halletmeyi tercih ediyorsanız, oluşturmayı engelleyen JavaScript'i manuel olarak ele alabilirsiniz.

Bunu yapmak için, PageSpeed ​​Insights taramanızda tanımlanan kaynaklar için web sitesi dosyalarınızdaki <script> etiketlerini bulun. Bunun gibi görünecekler:

 
<script src="https://blog.hubspot.com/marketing/resource.js">

<script> etiketleri, tarayıcıya src (kaynak) özniteliği tarafından tanımlanan komut dosyasını yüklemesini ve çalıştırmasını söyler. Bu işlemle ilgili sorun, bu yükleme ve çalıştırmanın, tarayıcının web sayfasını ayrıştırmasını geciktirmesi ve bunun da genel yükleme süresini etkilemesidir:

Görüntü Kaynağı

Bunu çözmek için, oluşturmayı engelleyen kaynaklar için komut dosyası etiketlerine eşzamansız (eşzamansız) veya erteleme özniteliğini ekleyebilirsiniz. zaman uyumsuz ve erteleme şu şekilde yerleştirilir:

 
<script src="https://blog.hubspot.com/marketing/resource.js" async>
 <script src="https://blog.hubspot.com/marketing/resource.js" defer>

Yükleme süreleri üzerinde benzer etkileri olsa da, bu özellikler tarayıcıya farklı şeyler yapmasını söyler.

Async özniteliği, tarayıcıya sayfanın geri kalanını ayrıştırırken JavaScript kaynağını yüklemesi için sinyal verir ve bu betiği yüklendikten hemen sonra çalıştırır. Komut dosyasının çalıştırılması HTML ayrıştırmasını duraklatır:

Görüntü Kaynağı

Erteleme özniteliğine sahip betikler de sayfa ayrıştırılırken yüklenir, ancak bu betiklerin yüklenmesi ilk işleme sonrasına veya daha önemli kısımlar yüklenene kadar ertelenir :

Görüntü Kaynağı

Erteleme ve eşzamansız nitelikler aynı kaynakta birlikte kullanılmamalıdır, ancak biri diğerinden belirli bir kaynak için daha uygun olabilir. Genel olarak, gerekli olmayan bir komut dosyası kendisinden önce çalışacak bir komut dosyasına ihtiyaç duyuyorsa, erteleme öğesini kullanın. erteleme özniteliği, komut dosyasının önceki gerekli komut dosyasından sonra çalışmasını sağlar. Aksi takdirde, async kullanın.

3. Bir site taramasını yeniden çalıştırın.

Değişikliklerinizi yaptıktan sonra, PageSpeed ​​Insights aracılığıyla web sitenizde son bir kez tarama yapın ve değişikliklerin puanınız üzerindeki etkisini görün.

Umarım gözle görülür bir gelişme vardır, ancak değilse endişelenmeyin. Birçok faktör sayfa performansını engelleyebilir ve düşük performansın kaynağını bulmak için biraz daha araştırma yapmanız gerekebilir.

4. Web sitenizde hatalar olup olmadığını kontrol edin.

Yeniden taramaya ek olarak, sitenizin çalıştığından emin olmak için sayfalarınızı kontrol edin. Sayfa düzgün yükleniyor mu? Tüm unsurlar görünüyor mu? Bir şey bozulursa veya düzgün şekilde yüklenemezse, değişikliklerinizi geri alın ve sorunu giderin.

Minimum hız artışıyla çeşitli önlemleri defalarca denediğiniz bir noktaya ulaştıysanız, sitenizi bozma riskini almak yerine sayfalarınızı hızlandırmanın başka yollarını düşünmek en iyisi olabilir.

Performans için WordPress Sitenizi Optimize Etme

Kullanıcılarınızın web sitenizdeki deneyimine birçok faktör katkıda bulunur, ancak bunlardan birkaçı yükleme süresinden daha önemlidir. WordPress sitenizin içeriğinde veya görünümünde büyük değişiklikler yaptığınızda, bu tür değişikliklerin performansı nasıl etkilediğini her zaman düşünmelisiniz.

Oluşturmayı engelleyen kaynakları ortadan kaldırdığınıza göre, performansı yavaşlattığı bilinen diğer özellikleri analiz ederek web sitenizin hızını optimize etmeye devam etmelisiniz. Düzenli hız testini site bakım programınıza dahil etmeye çalışın; olası sorunların bir adım önünde olmak başarınız için kritik öneme sahip olacaktır.