Google PageSpeed'i düzeltin Oluşturmayı önleyen JavaScript ve CSS'i ekranın üst kısmındaki içerikten kaldırın

Oluşturma engelleme Javascript ve CSS çözme

Google PageSpeed ​​[1] testi “Ekranın üst kısmındaki içeriğin oluşturulmasını engelleyen JavaScript ve CSS'yi ortadan kaldırın”, HTML'in tam olarak yüklenmesinden sonra sitenizin JS ve CSS dosyalarını dağıtmanızı ve dolayısıyla, HTML yüklemenizi duraklatmamanızı önerir onları indirmek için.

Oluşturmayı engelleyen komut dosyası tanımı: HTML DOM'un tamamı ayrıştırılmadan önce yüklenen komut dosyaları. Örneğin, tarayıcılara komut dosyası yüklemesini HTML boyamasına kadar geciktirmek için belirli bir talimat olmaksızın üstbilgiye veya içeriğe dahil edilen komut dosyaları.

Ekranın üst kısmındaki içerikte oluşturmayı engelleyen JavaScript ve CSS'yi ortadan kaldırın: nasıl düzelteceğinizi gösterin

1. Web sitenizi sizin için optimize eden harici bir sistem olsun
   
2. Oluşturmayı engelleyen kaynakları ortadan kaldırmak için gerekli olan aşağıdaki üç optimizasyon dahil olmak üzere, sizin adınıza tüm olası optimizasyonları gerçekleştirecek bir CDN kullanın:
   
3. Javascript dosyalarının yüklenmesini erteleyin
   
4. HTML yüklemesinden sonra CSS yükle
   
5. Bir WordPress eklentisi kullanın
   

Oluşturmayı engelleyen kaynakları ortadan kaldırmak için gerekli birçok optimizasyon vardır ve bunları kendi başınıza uygulamak yorucu olabilir - ayrıca, diğer sayfa hızı testlerinin yanı sıra Chrome LightHouse ve Google PageSpeed'e dahil edilen yeni testlere sürekli olarak dikkat etmeniz gerekecektir.

Sorun, DOM, yani web sitesi içeriği ve Javascript ve CSS gibi dahil edilen kaynakların yüklendiği sırayla ilgili olduğundan htaccess kodundaki oluşturmayı engelleyen kaynakları ortadan kaldıracak mevcut bir çözüm yoktur, ancak yalnızca değil. Bunlar, Htaccess'te tetiklenemez, ancak yalnızca HTML DOM içeriğinde tetiklenebilir.

Bu sorunları masaüstü için çözerseniz, aynı zamanda mobil cihazlar için oluşturmayı engelleyen kaynakları ortadan kaldıracaksınız, çünkü ikisi de tamamen aynı!

Did you know that you can even have all these steps executed automatically for you by using an external  Site Hız Hızlandırıcı   technology, which through artificial intelligence will preload your site, optimize it, and deliver it to your visitors? It is possible with tools such as Ezoic platform offering, with a free trial and no credit card required. Otherwise, implement below optimizations in your website!

Javascript dosyalarının yüklenmesini ertele

JS dosyalarınızın yükünü ertelemek için [2], komut dosyası bağlantılarınıza async veya erteleme talimatı ekleyebilirsiniz. Async, aynı sırada yüklendiklerini garanti etmeyecektir - bu nedenle, birbiri ardına koşması gereken birkaç betikiniz varsa, sıralamayı garanti etmek için ertelenmek tercih edilir:

HTML yüklendikten sonra CSS yükleyin

Tam HTML gönderildikten sonra yüklenecek CSS için Google, HTML kodunuzun sonuna ekleyebilmek için, örneğin altbilgi kapatma etiketinden sonra ve gövde kapatma etiketinden önce [3] bu kod parçasını önerir:

Web sitenizi optimize etmek için, kullanılmayan CSS kodunu, web tasarımında bilgi sahibi olmazsanız, sıkıcı olabilecek bir işlemi kaldırmak iyi bir fikirdir. Web sitenizi kendiniz kendiniz oluşturmadıysanız, örneğin Amazing sitelerinin yeni (ve tamamen ücretsiz) sürümleri gibi, sayfalarınızda kullanılmayan CSS kodunu sayfalarınızdaki kullanılmayan CSS kodunu kaldırmak için harici bir sistem kullanmak daha akıllı olabilir. Hız hızlandırıcısı.

Google site hız testini geç!

Bu,  Google PageSpeed   ​​[1] testini geçmeme olanak verdi. Bir web sitesindeki ekranın üst kısmındaki içeriğin (ekranın önbelleğe alınması [4] ile birlikte) JavaScript ve CSS oluşturmayı ortadan kaldırmasını sağlayın. Şekil 1) ila 72 (Şekil 2) ve masaüstünde 59'dan (Şekil 3) 79'a kadar (Şekil 4).

WordPress'te oluşturma engelleme kaynakları nasıl giderilir

WordPress'teki oluşturma engelleme kaynaklarını ortadan kaldırmak için JetPack gibi bir eklenti yüklemeniz gerekir.

Ardından, yönetici olmanız gereken seçeneklere gidin ve JetPack seçenekleri> Yazma> Performans ve Hız> kontrol edin Site hızlandırıcıyı etkinleştir, görüntü yükleme zamanlarını hızlandır, statik dosya yükleme zamanlarını hızlandır ve tembel yüklemeyi etkinleştir Görüntüler.

SEO Temel Bilgilerini Öğrenin: Bugün Kaydolun!

Takip etmesi kolay temeller kursumuzla SEO'nun temellerini yöneterek web sitenizin görünürlüğünü ve trafiğini artırın.

SEO öğrenmeye başlayın

Bu, WordPress'teki oluşturma engelleme kaynaklarını ortadan kaldıracak ve JetPack'in resimlerinizi optimize etmesine ve resimlerinizi ve statik dosyalarınızı (CSS ve JavaScript gibi) global sunucular ağından sunmasına izin vererek sayfaları daha hızlı yükleyecektir.

Ayrıca, bir tembel yük fonksiyonu kullanarak görüntüleri ekrandan yükleme uygulamasını ertelemeyi unutmayın. Zor olduğu ve harici bir kütüphaneyi ekleyen görüntüleri erteleme için ekranıp birleştirmeyi gerektirirken, şimdi HTML5'te yerel olarak mümkün!

Web sitelerinizdeki görüntülerin tembel yüklenmesini sağlamak için, web sitenizin görüntülerinizin yüklendiği özelliklere tembel değerleri ekleyin ve son tarayıcılar, bu görüntülerin sadece görüntülenirse istenirse istenirse istenirse ve yüklenmesi gerektiğini anlayacaktır. Görüntü yer tutucuları.

<img src=”SRC” alt=”ALT” loading=”lazy”></img>

Bunun üzerine, tembel yükleme ayrıca IFRAMES ile de çalışır ve web sayfalarınızdan render engelleme kaynaklarını ortadan kaldırmak için önemli bir uygulamadır.

Oluşturma engelleme kaynakları, ana içeriğin ardından yüklemek için talimatlar alacağından, HTML DOM'u, Google Deniz Feneri Testinde, Sayfa Hızı Insights testi veya Google Core Web Vitals'ta çok sayıda puan kazanacaksınız.

Harici bir sistemin web sitenizi sizin için optimize etmesini sağlayın

Ücretsiz bir deneme için kaydolmak ve DNS'nizi değiştirmek dışında, sitenizden fazla çaba sarf etmeden tüm  Google PageSpeed   ​​sorunlarının sizin adınıza çözülebileceğini biliyor musunuz?

Ezoic platform Site Speed ​​Accelerator teknolojisini kullanarak, her zamanki  Google PageSpeed   ​​sorunları, web siteniz ve ziyaretçiler arasında aracı olacak olan sistemleri tarafından çözülecektir. Ziyaretçinize göstermeden önce web sayfasını sizin için optimize ederler.

Ezoic platformunda ücretsiz deneme için kaydolarak yeşil olun ve kendiniz deneyin - birkaç gün içinde web sitenizin en yüksek sayfa hızı optimizasyonu standartlarına ulaşmasını sağlar: kullanılmayan CSS'yi kaldırarak yeni nesil webp görüntüleri oluşturun, CSS ve JavaScript'i optimize edin ve JS, tembel yükleme görüntüleri, resimleri yeniden boyutlandırma, site sayfalarınızı önbellekleme, yazı tiplerini optimize etme, dahil edilen tüm sitelere önceden bağlanma ve çok daha fazlası.

Kredi kartı gerekmez - tek yapmanız gereken ücretsiz kayıt olmak ve denemek. Ayrıca, web siteniz görüntülü reklamlardan para kazanıyorsa, web sitenizi çok daha hızlı hale getirmenin yanı sıra, reklamlarınızı makine öğrenimi ve gelişmiş yapay zeka ile optimize ederek Google AdSense ile yaptığınızdan birkaç kat daha fazla para kazanmanızı sağlayabilir.

Sık Sorulan Sorular

Yukarıdaki içerikte render engelleme JavaScript ve CSS'yi nasıl ortadan kaldırır?

Yukarıdaki içerik için işleme engelleme JavaScript ve CSS'yi ortadan kaldırmak için, HTML tamamen yüklendikten sonra sitenizin JS ve CSS dosyalarının yüklendiğinden emin olmalısınız. Bu, bu dosyaları indirmek için HTML yükleme işlemini duraklatmamak anlamına gelir. JavaScript dosyalarını Async veya erteleme özniteliğiyle erteleyebilirsiniz ve CSS için HTML'den sonra yüklemek için belirli kodu kullanabilirsiniz. Ezoic gibi harici bir optimizasyon sistemi de bunu otomatik olarak işleyebilir.

Web geliştiricileri Google PagePeed'in render engelleyen JavaScript ve CSS'yi ortadan kaldırmak için önerilerini nasıl ele alabilir?

Web geliştiricileri, JavaScript ve CSS dosyalarını mineralize ederek, JavaScript için eşzamansız yükleme kullanarak, kritik CSS'yi doğrudan HTML'ye yerleştirerek ve kritik olmayan CSS ve JavaScript dosyalarının yüklenmesini erteleyerek sitelerini optimize edebilir. Bu stratejilerin uygulanması, yükleme sürelerini ve sayfa skorlarını önemli ölçüde artırabilir.

Mükemmel krom deniz feneri puanı: Ne olur?