WordPress’te JavaScript ve CSS Render Engelleme Nasıl Düzeltilir
WordPress’i engelleyen JavaScript ve CSS’den kurtulmak ister misiniz? Web sitenizi Google PagesPeed’in içgörüsünde test ederseniz, büyük olasılıkla hedefi engelleyen komut dosyalarını ve CSS’yi ortadan kaldırmak için tavsiyeler göreceksiniz. Ancak, WordPress sitenizde nasıl yapılacağı hakkında herhangi bir ayrıntı sağlamaz. Bu makalede, Google PagePeed puanınızı artırmak için WordPress’i engelleyen JavaScript ve CSS’yi geliştirmenin kolay bir yolunu göstereceğiz.
JavaScript ve CSS engelleme render nedir? JavaScript ve CSS’yi engelleme, bu dosyaları yüklemeden önce web sitelerinin web sayfalarını görüntülemesini önleyen bir dosyadır.
Her WordPress sitesinde, web sitenize ön ucuna JavaScript ve CSS dosyaları ekleyen bir tema ve eklenti vardır. Bu komut dosyası, site sayfalarınızın açılış saatini artırabilir ve ayrıca oluşturma sayfalarını engelleyebilir.
Kullanıcı tarayıcısı, geri kalan HTML’yi sayfaya yüklemeden önce komut dosyasını ve CSS’yi yüklemelidir. Bu, daha yavaş bağlantısı olan kullanıcıların sayfayı görmek için birkaç milisaniye daha beklemesi gerektiği anlamına gelir. Bu komut dosyası ve stil sayfası, oluşturmayı engelleyen JavaScript ve CSS olarak adlandırılır. Google PagesPeed 100 puanına ulaşmaya çalışan web sitesi sahibinin bu sorunu bu mükemmel puana ulaşmak için düzeltmesi gerekiyor.
Google PagePeed puanı nedir? Google PagePeed Insights, web sitesi sahibinin web sitelerini optimize etmesine ve test etmesine yardımcı olmak için Google tarafından oluşturulan bir web sitesi hız test aracıdır. Bu araç, web sitenizi Google’ın hız için yönergelerini test eder ve site sayfalarınızın açılış süresini artırmak için tavsiyeler sunar. Bu, sitenizin geçtiği kural sayısına göre puanı gösterir. Çoğu web sitesi 50-70 arasındadır. Ancak, bazı web sitesi sahipleri 100’e (sayfa tarafından elde edilebilecek en yüksek değer) ulaşmaya teşvik edilmektedir. Gerçekten mükemmel bir Google PagePeed “100” puanı mı ihtiyacınız var? Google PagesPeed’in içgörüsünün amacı, web sitenizin hızını ve performansını artırmak için bir rehber vermektir. Bu kuralı sıkı bir şekilde takip etmeniz gerekmez. Hızın, Google’ın sitenizin sıralamasını nasıl belirleyeceğinizi belirlemesine yardımcı olan SEO web sitesinin birçok metrikinden sadece biri olduğunu unutmayın. Hızın çok önemli olmasının nedeni, bunun sitenizdeki kullanıcı deneyimini geliştirmesidir. Daha iyi bir kullanıcı deneyimi, hızdan daha fazlasını gerektirir. Ayrıca metin, resim ve videolarla yararlı bilgiler, daha iyi kullanıcı arayüzleri ve ilginç içerikler sunmanız gerekir.
Amacınız, olağanüstü kullanıcı deneyimi sunan hızlı bir web sitesi oluşturmak olmalıdır. Son WPBeginner yeniden tasarımında, hıza odaklanmaya ve kullanıcı deneyimini geliştirmeye devam ediyoruz. Google PagePeed kurallarını bir öneri olarak kullanmanızı öneririz ve kullanıcının deneyimine zarar vermeden kolayca uygulayabiliyorsanız, bu iyidir. Değilse, olabildiğince çok şey yapmaya çalışmalısınız ve sonra gerisi için endişelenmeyin. Bu nedenle, WordPress’te oluşturmayı engelleyen JavaScript ve CSS’yi geliştirmek için neler yapabileceğinizi görelim. WordPress’i engelleyen JavaScript ve CSS’yi geliştirecek iki yöntemi tartışacağız. Web siteniz için en uygun olanı seçebilirsiniz. 1. Bu yöntem için WP Roket ile Render Engelleme Komut Dosyalarını ve CSS’yi geliştirin, WP Roket eklentisini kullanacağız. Bu, piyasadaki en iyi WordPress önbellek eklentisidir ve teknik beceriler veya karmaşık ayarlar olmadan web sitenizin performansını hızlı bir şekilde geliştirmenizi sağlar. İlk olarak, WP roket eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla bilgi için, WordPress eklentilerinin nasıl yükleneceğine dair adım adım kılavuzumuza bakın.
WP roket kutunun dışında çalışır ve önbellekleri web siteniz için en uygun ayarlarla etkinleştirir. WordPress’e WP Rocket’in doğru şekilde nasıl kurulacağı ve yönetileceğine dair tam kılavuzumuzda bunun hakkında daha fazla bilgi edinebilirsiniz. Varsayılan olarak, bu JavaScript ve CSS’yi optimize etme seçeneğini etkinleştirmez. Bu optimizasyon, web sitenizin görünümünü veya çeşitli özellikleri etkileme potansiyeline sahiptir, bu nedenle eklenti bu ayarı isteğe bağlı olarak etkinleştirmenize izin verir. Bunu yapmak için Ayarlar sayfasını ziyaret etmeniz »WP roketini ziyaret etmeniz ve ardından ‘Dosya Optimizasyonu’ sekmesine geçmeniz gerekir. Buradan, CSS dosya bölümüne gidin ve Minify CSS seçeneğinin yanındaki kutuyu kontrol edin, CSS dosyalarını birleştirin ve CSS teslimatını optimize edin. Not: WP Roket, tüm CSS dosyalarınızı küçültmeye, birleştirmeye ve yalnızca CSS’yi yüklemeye çalışacaktır. Web sitesi bölümü için gerekli. Bu, web sitenizin görünümünü etkileyebilir, bu nedenle web sitenizi çeşitli cihazlarda ve ekran boyutlarında iyice test etmeniz gerekir. Ardından, JavaScript dosya bölümüne girmeniz gerekir. Buradan, maksimum performansı artırmak için tüm seçenekleri kontrol edebilirsiniz.
CSS için yaptığınız gibi JavaScript dosyalarını azaltabilir ve birleştirebilirsiniz. WordPress’in JQuery Impreat dosyalarını yüklemesini de durdurabilirsiniz. Bu, JQuery’nin eski sürümünü kullanarak eklentiler ve temalar için uyumluluk sağlamak için WordPress tarafından yayınlanan bir komut dosyasıdır.
Çoğu web sitesi bu dosyaya ihtiyaç duymaz, ancak bunları kaldırmanın temanızı veya eklentinizi etkilemediğinden emin olmak için web sitenizi kontrol etmek istersiniz. Ardından, biraz daha aşağı kaydırın ve ‘yük javascript ertelendi’ ve ‘jQuery için güvenli mod’ seçeneklerinin yanındaki kutuyu kontrol edin. Bu seçenek önemsiz JavaScript yüklemesini geciktirir ve Güvenli JQuery modu, JQuery’yi olabilecek tema için yüklemenizi sağlar. sırada kullanın. Temanızın hiçbir yerde bir jQuery satırı kullanmadığından eminseniz, bu seçeneğin kontrol edilmesine izin verebilirsiniz.
Ayarlarınızı kaydetmek için Değiştir düğmesini tıklamayı unutmayın. Bundan sonra, web sitenizi Google sayfası hız bilgileri ile tekrar test etmeden önce WP Rocket’teki önbellekleri silmek isteyebilirsiniz. Test sitemizde, masaüstünde% 100 puana ulaşabiliriz ve rendeyi engelleme sorunu hücresel skorlarda ve masaüstlerinde çözülür.
2. Render Engelleme Komut Dosyalarını ve CSS’yi geliştirin Bu yöntem için AutoPtimize ile CSS ve JS web sitesinin gönderimini artırmak için özel olarak oluşturulan ayrı bir eklenti kullanacağız. Bu eklenti çalışmasını tamamlasa da, bu eklentinin WP roketine ait başka gelişmiş özellikleri yoktur.
Yapmanız gereken ilk şey, AutoPtimize eklentisini yüklemek ve etkinleştirmektir. Daha fazla bilgi için, WordPress eklentilerinin nasıl yükleneceğine dair adım adım kılavuzumuza bakın. Etkinleştirmeden sonra, eklenti ayarlarını yapılandırmak için Ayarlar sayfasını ziyaret etmeniz »Otomatik Optimizasyonu. İlk olarak, JavaScript opsiyon bloğu altındaki ‘JavaScript Kodu Optimize Etme’ seçeneğinin yanındaki kutuyu kontrol etmeniz gerekir. ‘Toplam JS-Files’ seçeneğinin kontrol edilmediğinden emin olun. Ardından, CSS seçenek kutusuna gidin ve ‘CSS kodunu optimize etme’ kontrol edin. ‘Toplam dosyası CSS’ seçeneğinin kontrol edilmediğinden emin olun.
Artık ayarlarınızı kaydetmek için ‘Değiştir ve Elk Önbellek’i Kaydet’ düğmesine tıklayabilirsiniz. Lütfen web sitenizi sayfa hız içgörü araçlarıyla test edin. Demo sitemizde, bu temel ayarla oluşturma işlemini engelleme sorununu çözebiliriz.
Hala oluşturmayı engelleyen bir komut dosyası varsa, eklenti ayarı sayfasına geri dönmeli ve JavaScript ve CSS seçenekleri altındaki seçenekleri gözden geçirmelisiniz. Örneğin, eklentilerin JS çizgilerini eklemesine ve hariç tutulan komut dosyalarını Seal.js veya jQuery.js gibi silinmesine izin verebilirsiniz. ‘Değiştir ve Önbelleği Boş Kaydet’ düğmesini tıklayın
Değişikliklerinizi kaydetmek ve eklenti önbelleğini boşaltmak için. Bittiğinde, bir sayfa hız aracı ile web sitenizi tekrar kontrol edin. O nasıl çalışır?
Optimizasyon, teslim edilen tüm JavaScript ve CSS’yi otomatik olarak birleştirir. Bundan sonra, azaltılmış bir CSS ve JavaScript dosyası oluşturdu ve web sitenize eşzamansız veya askıya alınmış olarak bir önbellek kopyasını sunuyor. Bu, oluşturmayı engelleyen komut dosyası sorunlarını ve stilleri düzeltmenizi sağlar. Ancak, web sitenizin performansını veya görünümünü de etkileyebileceğini lütfen unutmayın. Problem çözme, WordPress eklentilerinizin ve temalarının JavaScript ve CSS kullandığına bağlıdır, oluşturmayı engelleyen tüm JavaScript ve CSS sorunlarını tam olarak iyileştirmek oldukça zor olabilir. Yukarıdaki araçlar yardımcı olsa da, eklentiniz düzgün çalışması için farklı bir öncelik düzeyinde belirli bir komut dosyası gerektirebilir. Bu durumda, yukarıdaki çözüm eklentinin işlevselliğine zarar verebilir veya beklenmedik bir şekilde davranabilirler. Google yine de CSS nakliyesini en üst yarı yaşam için optimize etme gibi bazı sorunları gösterebilir. WP Rocket, temanızın üzerindeki kat alanını görüntülemek için gereken kritik CSS ekleyerek düzeltmenizi sağlar. Bununla birlikte, en iyi gaga içeriğini görüntülemek için hangi CSS kodunu ihtiyaç duyduğunuzu bilmek oldukça zor olabilir. Bu makalenin, WordPress’i engelleyen JavaScript ve CSS’nin nasıl düzeltileceğini öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca, yeni başlayanlar için WordPress performansının nasıl hızlandırılacağı ve en iyi yönetilen WordPress barındırma şirketlerini karşılaştırmamızla ilgili ana yönergelerimizi de görmek isteyebilirsiniz. Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube kanalımıza abone olun.
