WordPress’te oluşturmayı engelleyen JavaScript ve CSS nasıl kaldırılır

Web sitenizin performansını Google PagesPeed Insights’da test ettiyseniz, sadece silinmeyi bloke eden JavaScript ve CSS’yi silin veya kaldırmaya aşina olabilirsiniz. Ama eğer değilseniz, sorun değil. Bu yazıda, oluşturmayı derinlemesine engelleyen kaynakların nasıl ortadan kaldırılacağını araştıracağız. Web sitelerini yükleme hızı SEO’da büyük bir etki faktörüdür; Web siteniz ne kadar hızlı yüklenirse, arama sayfasında sıralama olasılığı o kadar yüksek olur. İyi bir web ana bilgisayarını kullanmak çok önemli olsa da, web sitenizi daha hızlı yüklemenin bir yolu, JavaScript ve CSS gibi kaynak oluşturmayı serbest bırakmaktır.
Basitçe söylemek gerekirse, Web sayfası ziyaretçiler tarafından görülmeden önce tarayıcı tarafından tamamen yüklenmesi gereken komut dosyaları ve stillerdir. Web kullanıcıları ve arama motorlarının çok sabırlı olmadığını biliyorsunuz. Bu nedenle bu sorunu çözmek önemlidir. Bu yazıda, WordPress’te oluşturmayı engelleyen JavaScript’i nasıl düzelteceğinizi öğreneceksiniz. WordPress ile yeni başlasanız bile, bu öğreticinin takip edilmesinin oldukça kolay olduğunu göreceksiniz.
Bu makalede:
Oluşturmayı engelleyen JavaScript ve CSS nedir?
Google PagePeed Insights Testi
JavaScript kaynakları oluşturma yöntemi
Çözüm
Oluşturmayı engelleyen JavaScript ve CSS nedir? Ziyaretçiler web sitenizi açtıklarında, tarayıcıları önce HTML yüklemeden önce destekleyen JavaScript ve CSS dosyalarını yüklemelidir. Genellikle, böyle yapmalıyız – stil sayfası veya komut dosyası olmayan bir web sayfası çirkin görünecek ve kullanılamaz
Ancak sorun, bu dosyalar tamamen yüklenmedikçe, Web sayfalarının tarayıcıda oluşturulmayacağıdır. Bu nedenle, oluşturmayı engelleyen JavaScript adı. Tarayıcının oluşturmadan önce web sayfasının stilini ve komut dosyasını yüklemesi önemli olsa da, bu ekstra gecikme, web sayfasının görünümüne zarar vermeden önlenebilir. Dahası, bunu yapmak yükleme süresini de en aza indirecektir. İşin püf noktası, ziyaretçilerin inişten hemen sonra gördüğü web sayfalarını etkilemeyen komut dosyasının ve stil sayfasının yüklenmesini geciktirmektir. Başka bir deyişle, tarayıcının önlenmesi, kullanıcının aşağı kaydırmadan önce göreceği web sayfasının üst kısmını etkilemeyen herhangi bir dosya içerir, bu sorunu çözecektir. Bu web sayfası bölümü en iyi paro içeriği (ATF) olarak adlandırılır. Bu makaleyi keşfetmeden önce Google Pagespeed Insight aracına alışmanız önemlidir. Google PagesPeed’in Insight Testi JavaScript ve CSS render’ı engellemek için adımlar atmadan önce, en iyisi önce testi çalıştırmaktır. Ve Google PagePeed Insights dışındaki web sitelerinin performansını test etmek için daha iyi bir araç yoktur. Öyleyse oraya git ve birkaç test yapalım.
URL bölümüne web sitenizin bağlantısını yazın. Bundan sonra analiz düğmesini tıklayın. Testi çalıştırmayı bitirdikten sonra, web sitesi performans puanı ekranda görüntülenir.

En iyi performans gösteren site, 90-100 arasında puan alan bir sitedir. Zor bir çağrı mı? Bahis, ama bu başarılabilir. Web siteniz performansı azalırsa, Google daha iyi performans göstermesi için bazı öneriler sunacaktır. Büyük olasılıkla, önerilerden biri, oluşturmayı engelleyen kaynakları ortadan kaldırmaktır. Bu sekmeyi açık bırakın çünkü daha sonra tekrar ziyaret edeceğiz. JavaScript ve CSS’yi kaldırma yöntemi, tek bir kod satırı yazmak zorunda kalmadan bu sorunu çözebilecek bir eklenti olduğunu tahmin ediyor mu? Eğer sen, yeterince haklısın.
Bir uyarı: Google tarafından test sonuçlarında uyarıldığı gibi, JavaScript ve CSS’yi silerseniz, oluşturmayı bloke eden temanıza zarar verebilir. Devam etmeden önce WordPress sitenizin bir yedeklemesini yapmak akıllıca olacaktır. Hız optimizasyon hizmetimizi de isteyebilirsiniz ve sitenizde tanımlanan tüm sorunları ele alacağız. Oluşturmayı engelleyen JavaScript sorunlarını işleyebilen birkaç WordPress eklentisi vardır. Ancak, iki büyük isim göreceğiz: W3 Total Cache ve AutoPtimize. Toplam W3 W3 önbellek toplam önbellek, WordPress için harika bir performans geliştirmenin bir eklentisidir. Önbelleğe alma problemleriyle başa çıkmanın yanı sıra, bu aynı zamanda stil sayfalarının ve komut dosyalarının neden olduğu yükleme sorunlarını düzeltmek için harika bir araçtır.

Yani yapmak istediğiniz ilk şey eklentiyi yüklemek ve etkinleştirmektir. Kurulum ve aktivasyondan sonra performansa gidin >> Genel Ayarlar
Ardından, Minify’a gidin. Burada, Minify’ı etkinleştirin ve Minify modunu kılavuza ayarlayın.
Ardından tüm ayarları kaydet düğmesini tıklayın. Minify seçeneği etkinleştirildiğinde, JavaScript ve CSS oluşturmayı silmek için yapılacak bir sonraki şey, web sayfalarınızın tam oluşturulmasını geciktiren stillere ve komut dosyalarına bağlantılar almaktır. Google PagePeed Insights aracının tekrar yararlı olduğu yer burasıdır. Daha önce açık bıraktığınız sekmeye geri dönün. Oraya kadar, yüzdeyi engelleyen kaynakları kaldırarak sekmeyi tıklayın.

Azaltılması gereken komut dosyalarına ve CSS dosyalarına bağlantılar görüntülenir.

Gördüğünüz gibi, dosyanın bağlantısı kesildi. Tam bir URL almak için imleci herhangi bir bağlantıya yönlendirin, sağlayın ve bağlantı adresini kopyalayın. Önce JS dosyasını küçülteceğiz, bu yüzden .JS’den birini kopyalayın. Kopyalanan bağlantı ile WordPress kontrol panelinizi tekrar açın. Bu sefer performansa gidin >> Minify
JS bölümünü bulana kadar aşağı kaydırın. JS Minify Ayarları bölümünde, etiket alanının alanını göreceksiniz. “Async” kullanarak gömme türünü bloke etmemeye ayarlayın.

Ardından, dikkatinizi JS Dosya Yönetimi alt bölümüne çevirin. Komut Dosyası Ekle düğmesini tıklayın.

Daha önce sağlanan alanlarda kopyaladığınız JS kaynaklarına bağlantıyı yapıştırın.

Tüm URL’leri JavaScript kaynaklarınıza gönderene kadar bu işlemi tekrarlayın. JS komut dosyasını ekledikten sonra, aynı sayfadayken CSS bölümüne gidin. Minify CSS ayarları etkinleştirildiğinde, Stil Sayfası Ekle düğmesine tıklayın.

JS bölümünde tam olarak yaptığınız şeyi yapın. CSS stiline bir bağlantıyı yalnızca Google PagePeed Insights’tan kopyaladığınızdan emin olun ve JS Resources’a bir bağlantı değil.

Kopyalamayı ve yapıştırmayı bitirdikten sonra Ayarlar Kaydet düğmesini tıklayın ve önbelleği temizleyin. Şimdi Google PagePeed Insights’a ve web sitenizin yeniden analizine dönün.Önemli bir artış göreceksiniz.Şimdi JavaScript ve CSS render’ı engellememize yardımcı olabilecek ikinci eklentiye bakalım.Otomatik optimize beklediğiniz gibi, yapmanız gereken ilk şey eklentiyi yüklemek ve etkinleştirmektir.Kurulum ve aktivasyondan sonra, doğrudan gösterge tablonuzdan, >> Otomatik Olan Ayarlarına gidin.

Ardından, JavaScript kodunu optimize etme seçeneğini kontrol edin.Ardından aşağı kaydırın ve CSS için de aynısını yapın.Son olarak, aşağı kaydırın ve Değişik Kaydet ve Önbellek düğmesini tıklayın.

Web sitenizin performansını görmek için Google’ın hız test ekipmanlarında bir kez daha test edin. Kesinlikle bir artış olacak. Sonuç Web sitenizin performansını iyileştirme konusunda gerçekten ciddiyseniz, yalnızca web sitenizin daha hızlı yüklenmesi için denemeniz gerekir. Bu yazıda, Render’ı engelleyen kaynakları ortadan kaldırmanızı gösterdik – JavaScript ve CSS. Ayrıca, bu sorunu çözmek için kullanabileceğiniz iki eklentiyi göstermeye daha fazla gidiyoruz: W3 Total Cache ve AutoPtimize. Yükleme hızı, web sitesinin SEO’sunu etkileyen birçok faktörden biridir. Bu nedenle, sadece buna odaklanırken, diğer faktörleri göz ardı etmek istediğiniz sonuçları vermeyebilir. SEO kılavuzumuzda, web sitenizin daha iyi sıralaması için atabileceğiniz yükleme hızını artıran adımları tartışıyoruz. Sizi tartışmanızı öneririz. Daha fazla Kaynak: Statik Kaynaklardan Kuyruk Dizesini Sil – 2 Yöntem
Hasarlı Bağlantılar Yapma Kılavuzu: Manuel ve Ahref Araçları ile

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir