WordPress’te Render Engelleme Kaynaklarından Nasıl Kurtulur
“Render Engelleme Kaynakları” -Bu web sitenizin hızını test ederken veya yavaş yükleme hızının ortak bir nedeni olarak duyduğunuzda bunu görürseniz, kafanız karışabilir. Web sitenizi hızlandırmanın ve yavaşlayan yabancı kodlardan kurtulmanın yollarını arıyorsunuz, ancak nerede düzeltmeye başlıyorsunuz? Neyse ki sizin için, neyle karşılaştığınızı öğrendikten sonra renderlemeyi engelleyen kaynakları ortadan kaldırmak çok zor değil. Basit bir eklenti hile yapabilir veya yapmayı tercih ederseniz manuel olarak bile işleyebilirsiniz.
Gerçekten eksik mi? Sadece hangi kaynakların nöbeti engellediğini, sitenizin nasıl olup olmadığını ve bunların üstesinden gelmek için neler yapabileceğinizi açıklayacağız. Bir render engelleme kaynağı nedir? Birisi web sitenizdeki sayfaları ziyaret ettiğinde, tüm içeriği indirmeleri (veya “oluşturmaları”) gerekir. Bu, html, css ve javascript, kodu içerir. Ve onu değiştirmek için çok uğraşmazsanız, kullanıcının herhangi bir şey görebilmesi için her son komut dosyasının yüklenmesi gerekir. Bu oluşturmayı engelleyerek kastedilen şey budur: Bu, kullanıcı yüklemeyi bitirene kadar sayfanın görüntülenmesini durdurur. Tek aldıkları boş bir beyaz ekran.
Kaynak: Google, yükleme süresi açısından, her saniye çok anlamlı. Görüntülerini ve kodlarını nasıl sıkıştıracağını öğrenen giderek daha fazla web sitesi sahibi ve insanlar daha hızlı yükleme hızına güvenmeye başlar. Eğer takip etmezseniz, büyük olasılıkla, yalnızca diğer siteleri tıklar ve bulurlar. Ayrıca, daha az güçlü veya daha yavaş İnternet olan mobil cihazlar kullanan insanlar da vardır. Kendi sitenizi bir masaüstü bilgisayarda nispeten hızlı yükleyebilirsiniz, ancak cep telefonu veya tablet kullanan insanlar zor olabilir ve sadece beyaz ekranı geçmek için birkaç saniye bekleyin. Sitenizi engelleyebilir. Oluşturmayı engelleyen kaynakların kaldırılması gibi küçük optimizasyon bile bazı insanlar için büyük bir fark yaratabilir. Web sitenizin oluşturulmasını engelleyen kaynakları var mı? Burada olabilirsiniz, çünkü sitenizin el koymayı engelleyen ve nasıl düzeltileceğinden emin olmayan kaynaklara sahip olduğu söylendi. Ama test etmediyseniz, şimdi bunu yapma zamanı. Yükleme hızınızı etkileyen kamu sıkışıklığı gösterebilecek birkaç ücretsiz hizmet vardır ve sitenizde verimsiz bir komut dosyası olup olmadığını söyleyebilirler. PagePeed Insights, bu aracın en popüler olanıdır. Puanlarını görmek istediğiniz URL’yi girebilirsiniz. Lütfen ve şimdi site adresinizi girin.
Birkaç saniye sonra sonuçlar görünecektir. Aşağı kaydırın ve web sitenizin başarıyla yaptığı denetimle birlikte yükleme süresini artırmak için kullanabileceğiniz fırsatları bulacaksınız. Gerçekten nöbeti engelleyen bir kaynağınız varsa, Fırsat sekmesinin altında göreceksiniz. Merak ediyor olabilirsiniz: Mükemmel PageSpeed puanını elde etmek önemli mi? Cevap, bağlı olmasıdır. Bunun otomatik bir araç olduğunu ve yalnızca sizi doğru yola getirmek için bir rehber olarak tasarlandığını unutmayın. Mükemmel bir puan elde etmek için kullanıcının işlevselliğini veya deneyimini feda ederseniz, hiçbir şey alamazsınız. Ancak oluşturmayı engelleyen kaynaklar açıkça kurtulmak istediğiniz bir şeydir, bu yüzden bunları kaldırmak için birkaç yöntem girelim. CSS ve JavaScript oluşturma ve JavaScript’in manuel olarak ortadan kaldırılması, elbette, bu sorunu manuel olarak ele almaya gerek yoktur, çünkü orada kullanımı çok daha kolay olan birçok eklenti var ve aşağıda tartışacağız. Ancak, kodda gezinirken rahat hissediyorsanız ve eklentiyi mümkün olduğunca az kullanmayı tercih ediyorsanız, tüm bunları her zaman kendiniz yapabilirsiniz. JavaScript’i optimize etmek için, sayfadaki daha düşük bireysel komut dosyalarını seçebilir ve ASHNC veya Diver özniteliklerini ekleyebilirsiniz. Burada ve burada W3Scocols hakkında daha fazla bilgi.
Varsayılan oluşturma yükleme ile, tarayıcı bir JavaScript dosyası her bulduğunda, indirmek ve çalıştırmak için HTML yüklemeyi durdurur. Async özniteliği, HTML’yi JavaScript ile indirmeye devam etmesini sağlar, ancak komut dosyasını çalıştırmak için kısa bir süre indirmeyi bırakacaktır. DeFer özellikleri aynı şeyi yapar, ancak komut dosyasını yalnızca HTML bittikten sonra çalıştırmak. Özniteliklerden birini ne zaman kullanmalısınız? Async bazen jQuery gibi yükleme sırasına bağlı komut dosyasına zarar verebilir, bu nedenle şüphe varsa, erteleme kullanın; Komut dosyasını her zaman doğru sırada yürütür. Async’i yüklenecek başka şeylere bağlı olmayan bağımsız bir komut dosyasında kullanabilirsiniz. Oluşturmayı engelleyen CSS’nin onarılması biraz daha fazla çalışma gerektirebilir. Üst Paro’da oluşturulan CSS’yi HTML belgenizin bölümüne yerleştirerek hizalayabilirsiniz. Ancak, bunu sadece küçük dosyalarla ve yalnızca doğrudan izleyiciler tarafından görülecek stil ile yapın. Diğer CSS için, JavaScript gibi async veya erteleme nitelikleri ekleyebilirsiniz. Ayrıca, yalnızca belirli durumlarda yüklenecek şekilde belirli stillere medya sorguları ekleyebilirsiniz. Unutmayın: Bir tarayıcı geliştiricisindeki kapsama sekmesi, ziyaretçiler tarafından ilk olarak yüklenmesi gereken öğeleri hızlı bir şekilde tanımlamanıza ve silinebilecek kullanılmayan kodları belirlemenize yardımcı olabilir. WordPress eklentisine dokunmadan JavaScript ve CSS’nizi optimize etmek mümkün olsa bile, oluşturmayı engelleyen kaynakları ortadan kaldırmak için eklentiler, tüm işi yapmanız gerekmez. Belki hassas kodlarla çalışmaktan emin olmazsınız veya yalnızca süreci daha iyi aktaran bir araç istiyorsunuz. Sorun buysa, bu eklentilerden biri düzgün çalışacaktır. Ayrıca not: Bu eklentilerden birini kullanmadan önce, bir hata durumunda web sitenizin bir yedeklemesini yaptığınızdan emin olun. Optimizasyon ve eşzamansız JavaScript aynı geliştirici tarafından yapılır, bu eklentilerin her ikisi de sayfayı şişiren komut dosyasını durdurmanıza ve önemli kodu ilk içeren kafaya taşımanıza yardımcı olmayı amaçlamaktadır.
AutoPtimize, hepsi bir arada bir optimizasyon eklentisidir. Varalan görüntülere, HTML ve diğer komut dosyalarına ek olarak, CSS’yi de hizalayabilir ve önemsiz komut dosyalarını geciktirebilir. Tüm bunlar düğmeyi tıklayarak kullanılabilir. Geliştiriciler, eklentiyi ihtiyaçları için gelişmiş seçenekler ve ateşle ayarlayabilir. Ancak çoğu kullanıcının, engelleme sorununu çözmek için yalnızca iki kutuyu kontrol etmesi gerekir. Ayarları açın> arkanızdaki otomatik olarak optimize edin ve JavaScript kodunu optimize et ve CSS kodunu optimize edin.
Genellikle bunu yapar, ancak bir sorununuz varsa, seçeneği deneyebilir ve toplam JS/Agregate CSS dosyasını etkinleştirerek veya devre dışı bırakarak deneyebilirsiniz. Bu, otomatik olarak başlamak için iyi bir fikirdir ve kaynaklar bloku oluşturduğu için hala bir ceza alırsanız, gevşek ucu temizlemek için asyncjs deneyin. Bunu kullanmak aynı derecede kolaydır. Ayarlar> Async JavaScript’i ziyaret edin ve etkinleştirmek için kontrol edin. Burada Async veya Defer arasında seçim yapabilirsiniz. Test edin ve Async sayfanızın hasar görmesine neden olursa, ertelemeyi etkinleştirin. Ayrıca jQuery’yi geciktirmeniz veya hariç tutmanız gerekir, çünkü Async’i etkinleştirir, içinde sitenize neredeyse kesinlikle zarar verecektir.
Autoptimize etmenin bir zayıflığı, yapılandırmanın oldukça zor olabileceğidir. WP Rocket, uzmanlık seviyeniz ne olursa olsun, özellikle kullanım kolaylığı için tasarlanmış premium bir eklentidir. Önbellek, sıkıştırır, büzülür ve elbette oluşturmayı engelleyen kaynakları geciktirir. Yılda 49 $ ile (ve sonsuza dek destek veya güncellemeler olmadan kullanmaya devam edebilirsiniz), sunduğu tüm özellikler ve elbette kolay ayarlar için oldukça uygundur. WP Rocket, işleme engelleme komut dosyalarını ortadan kaldırmak için iki ayarla birlikte gelir: CSS teslimatını ve ertelenmiş JavaScript’i optimize edin. Etkinleştirmek için Ayarlar> WP Roket> Dosya Optimizasyonu. Yukarıda belirtilen iki ayarı etkinleştirin ve bunu yapmaya hazırsınız. Buradayken, daha hızlı yüklemek için JavaScript ve CSS’yi de küçültebilirsiniz. Önbellek toplamı w3 Bu son eklenti biraz daha ilgili. Bu, engelleme hatalarını manuel olarak oluşturmaya neden olan dosyaları tanımlamanızı ve engellemenizi gerektirecektir. Kutuyu kontrol etmeyi ve bitirmeyi tercih ederseniz, WP roketini denemelisiniz veya otomatiktimize etmelisiniz, ancak W3 Total Cache, hangi dosyaların W3 toplam önbelleğinin diğer avantajlarının diğer avantajlarını ertelemesi gerektiğini daha iyi kontrol etmenizi sağlar. BT. Bu, en popüler önbellek eklentilerinden biridir (ve her WordPress kurulumuna sahip olmalıdır), bu nedenle sitenizi ek eklenti ile yüklemenize gerek yoktur. Eklentiyi yükledikten sonra, yapmak istediğiniz ilk şey PagePeed Insights sayfanıza geri dönmektir. Oluşturma engellemesinin kaynağını kaldırma altında, sorunlara neden olan JavaScript ve CSS dosyalarının bir listesini göreceksiniz. Sayfanın daha sonra kopyalaması için açık kalmasına izin verin. WordPress Gösterge Tablonuza, Performans> Genel Ayarlar’a geri dönün ve Minify’ın etkinleştirildiğinden ve manuel moda ayarlandığından emin olun.
Şimdi Performans> Minify’a gidiyor. JS Minify ayarları altında, “Defert” kullanılarak Gömme Türü’nden önce ayarlanan alandaki işlem kutusunda.
Ardından JS dosyasının yönetimi altında, komut dosyasını ekleyin ve JavaScript dosyasını PagePeed’den bir teker teker neden olan yapıştırın. Ardından CSS Dosya Yönetimi’ne gidin ve bir stil sayfası ekleyin. Stil sayfası url’sini yapıştırın.
