Render Engelleme JavaScript – Bu nedir?Ve nasıl düzeltilir?

Bir web sitesine sahip olmak, mükemmel durumda tutmak ve ziyaretçiler, müşteriler ve hatta Google tarafından sitenizi kontrol etmek için kullanılan gezginler için eğlenceli olduğundan emin olmak anlamına gelir. Bu, WordPress sitenizi optimize etmek için, “engelleme javascript” bulmuş olabilirsiniz ve kendinizi düşünmüş olabilirsiniz, woah … bu nedir? Basitçe söylemek gerekirse, JavaScript tema işlevlerinizi veya eklentilerinizi etkinleştirmek için web sitenizde olabilecek bir kod parçasıdır. Ve “Render’ı Engelleme”, bu JavaScript kodunun, web sitenizin tarayıcınız tarafından görüntülenme veya yönlendirildiğini yavaşlattığı anlamına gelir.
Ancak endişelenmeyin, bu makalede, bu sorunun üstesinden nasıl geleceğinizi tartışacağız ve size nasıl düzeltileceğine dair en iyi seçeneği sunacağız. Başlayalım.
İçindekiler
Render Engelleme JavaScript – Genel Bakış
JavaScript engelleme oluşturma işleminden nasıl kurtulur?
JavaScript engelleme oluşturma işlemini ortadan kaldırmak için en iyi 3 eklentisi
Paketlemek
JavaScript’i Engelleme Oluşturma-Genel Resim JavaScript’in bu render’ı engelleme sorununun üstesinden nasıl geleceğimizi tartışmaya başlamadan önce, her şeyden önce ne olduğu hakkında daha fazla bilgi edelim. Oluşturma engelleme nedir? JavaScript? Çoğu durumda, WordPress sitesinde kullandığınız temalar ve eklentiler, ön uç için JavaScript (JS) ve basamaklı stil sayfası (CSS) dosyalarını ekleyeceksiniz. Şimdi, kullanıcılar web sitenize tarayıcıdan erişmeye çalıştıklarında, tüm bu komut dosyaları siteniz görünür olmadan yüklenecektir.
Genel olarak, tarayıcının, kullanıcı ana içeriği görmeden önce JS, CSS ve HTML dosyalarının kuyruğunu yüklemesi gerekir. Şimdi, ana HTML içeriğinin yüklenmesini geciktirecek çok fazla JS komut dosyası varsa. Bu da web sitenizi yavaşlatır ve kullanıcıları beklemeye zorlar. Şimdi, sitenizi yükleme hızı JavaScript’ten etkileniyorsa, bu kod snippet’e JavaScript oluşturma engelleme denir. Neden onu silmelisiniz? Render Engelleme JavaScript, sitenizi sadece kullanıcı deneyimini (UX) ortadan kaldıran değil, aynı zamanda SEO performansınızı da etkiler. Biliyorsunuz, insanlar beklemekten hoşlanmaz. Bir sitenin tamamen yüklenmesi 3 saniyeden fazla sürerse, Pentira’nın%11 oranında bir oran geçirebilir. Site yükleme süreniz 5 saniyeden fazlaysa, miktar% 38’e kadardır. Web sitenizden sıçrayan daha fazla kişi ile, nihayet Google gibi arama motorları sitenizi, sitenizde daha az trafiğe ve daha az kişiye yol açan arama sonuçları altında daha da ileriye taşıyacaktır. Şimdi, sadece JavaScript problemini düzeltmenin, oluşturma işleminizi engellemesi sizi Google’ın ön sayfasına götürmez. Ayrıca yükleme hızını büyük ölçüde artırmanıza yardımcı olmaz. Aslında, sitenizi açarken etkisi olabilecek birçok faktör vardır. Ancak, ileri adım atmanıza yardımcı olacaktır.
Genel kural, site kodunuzu mümkün olduğunca minimum ve temiz tutmaktır. Ayrıca, üst yarı içeriğin (web sitenizin ziyaretçileriniz tarafından hemen görülen bir kısmı) engelsiz yüklendiğinden emin olun. Bu nedenle, optimum yükleme süresinin tadını çıkarmak ve daha iyi bir UX vermek için, renderinizi mümkün olan en kısa sürede engelleyen JavaScript problemini çözmeniz önerilir. Web sitenizi rahatsız etmemek için JavaScript engelleme oluşturmayı tamamlamanın birçok farklı yolu vardır. Bazıları biraz kodlamayı içerir. Bununla birlikte, WordPress’te olduğu gibi, size yardımcı olmak için eklentileri de kullanabilirsiniz. Ama önce, sadece ne yaptığınızı ve zaten ne yaptığınızı zaten biliyorsanız, manuel olarak yapabileceğimiz şeyleri kontrol edelim. Bu dosyaları değiştirmek, özellikle WordPress’te, sitenize zarar vermek yadsınamaz olduğundan, dikkatli olmanızı öneririz. JS’yi diğer kaynaklardan indirin. Tahmin edebileceğiniz gibi, bu yükleme sürenizi artırır. Şimdi, harici komut dosyası küçükse, doğrudan HTML belgenizde kullanabilirsiniz. Bu, tam ağ isteklerinin gecikmesini ortadan kaldırır.
İşte nasıl yapılacağına bir örnek. HTML belgenizde harici bir js dosyası içerdiğini söyleyin – ve anotheriource.js’nin aşağıdaki js kodunu içerdiğini varsayalım:/* küçük bir javascript içeriği Dosya */Yapmanız gereken tek şey JS kodunu ikinci kaynaktan kopyalamak ve orijinal belgenize şuna eklemektir: / *küçük bir javascript dosyasının içeriği */ Yükleme sürenizi artırmak için başka birRSource.js için harici istekler gönderme ihtiyacını ortadan kaldıran basit bir tekniktir. Ancak, lütfen hizalamanın dosya boyutunda bir artış üreteceğine dikkat edin, bu da sadece yükleme süresini artıracaktır. Küçük bir JS dosyası sırada. JS’nin birçok sayfasına sahip büyük bir dosya görürseniz, başka bir çözüm görürseniz. Bu gerçekleştiriliyor Kullanıcılarda – özellikle en iyi yarı yaşam içeriği. Bu nedenle, bu sorunun üstesinden gelmenin bir yolu, JS’nin yüklenmesini geciktirmektir, böylece web sitenizin önemli kısmı yüklemeyi bitirdikten sonra yüklenir. Bu, kaynak anlaşmazlıklarını önlemeye ve performansı iyileştirmeye yardımcı olabilir.
Şimdi, JS yüklemesini ertelemenin bir yolu onu altbilgiye taşımaktır. Bu manuel olarak yapılabilir veya aşağıda listelenen eklentilerden birini kullanabilirsiniz. A> 1. Temizleme Temizleme AsetAsset, tüm WordPress yayınlarınızı ve sayfalarınızı tarayan ve tüm JS ve CSS dosyalarını algılayan ücretsiz bir WordPress eklentisidir. yüklendi. Bu daha sonra size ihtiyaç duyulmayan JS ve CSS dosyalarını devre dışı bırakma seçeneği sunar, böylece ek yükleri kaldırır.
Sadece bu değil, eklentiler JS/CSS dosyalarının yüklenmesi daha kısa ve daha kolay (daha hızlı) azaltılmasına ve birleştirilmesine yardımcı olabilir. Aşağıda, eklentiyi kullanmak için bir adım -by -adım kılavuzu: Adım 1: WordPress Gösterge Tablonuzu girin. Sonra sol yan çubuktan eklentileri aç> yeni ekleyin. Varlık Temizleme eklentisini arayın ve şimdi Yükle düğmesine basın ve ardından etkinleştirin. Adım 2: Şimdi, bir kez daha sol kenar çubuğundan, Varlık Temizliği> CSS/JS yük yöneticisine gidin. Burada tüm web sitesi içeriğinizi verandadan başlayarak yayınlara, sayfalara ve özel yayın türlerine bulacaksınız. Optimize etmek istediğiniz kişiyi seçin.
Adım 3: Seçeneklerden birinin seçilmesi, web sayfasında çalışan tüm etkin CSS/JS dosyalarını görüntüler. Artık web sitesinin oluşturulması sırasında yükü azaltmanız gerekmeyen dosyaları seçici olarak devre dışı bırakabilirsiniz.
Adım 4: Bittiğinde, güncelleme ve sonraki sayfaya, yayın veya özel yazı tipine geçin ve 3. adımı tekrarlayın ve Voila!Tüm istenmeyen JavaScript’i veya web sitenizden engelleme oluşturma işlemini başarıyla devre dışı bıraktınız.Not: Bu eklenti ayrıca varsayılan bir test modu ile donatılmıştır.İlk olarak, web sitenize zarar vermemesini sağlamak için JS dosyalarını test modunda devre dışı bırakın. Varlıkları temizleyerek başlayın