Opravit Google PageSpeed ​​Odstraňte JavaScript a CSS blokování renderování v obsahu, který se skládá ze skladeb

Vyřešte blokování vykreslení Javascript a CSS

Test  Google PageSpeed   ​​[1] Odstranit JavaScript a CSS blokující renderování ve vyšším obsahu navrhuje, aby jste dodali soubory JS a CSS svých webových stránek poté, co byl HTML plně načten - a proto nepokládat pozastavení načítání kódu HTML stáhnout je.

Definice skriptu blokujícího vykreslení: Skripty, které se načtou před analýzou celého DOM DOM v HTML. Například skripty obsažené v záhlaví nebo v obsahu, bez konkrétních pokynů pro prohlížeče, aby odložily načítání skriptu až po malování HTML.

Odstraňte JavaScript a CSS blokující vykreslování v obsahu nad okrajem: ukažte, jak to opravit

1. Požádejte externí systém, aby vám optimalizoval web
   
2. Použijte síť CDN, která provede všechny možné optimalizace vaším jménem, ​​včetně tří následujících optimalizací nezbytných k odstranění zdrojů blokujících vykreslení:
   
3. Odložit načítání souborů Javascript
   
4. Načíst CSS po načtení HTML
   
5. Použijte plugin WordPress
   

Existuje spousta optimalizací nutných k odstranění eliminace zdrojů blokujících vykreslování a může být zdlouhavé je implementovat sami - navíc budete muset neustále hledat nové testy obsažené v Chrome LightHouse a  Google PageSpeed   ​​mimo jiné testy rychlosti stránky.

Neexistuje žádné existující řešení, které by eliminovalo zdroje blokující vykreslení v kódu htaccess, protože problém souvisí s DOM, což znamená obsah webových stránek a pořadí, ve kterém jsou načteny zahrnuté zdroje, například Javascript a CSS, ale nejen to. Nelze je spustit v Htaccess, ale pouze v obsahu HTML DOM.

Pokud vyřešíte tyto problémy pro stolní počítače, současně odstraníte zdroje blokující vykreslování pro mobilní zařízení, protože oba jsou přesně stejné!

Did you know that you can even have all these steps executed automatically for you by using an external Akcelerátor rychlosti webu 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!

Odložit načítání souborů Javascript

Pro odložení načítání vašich souborů JS [2] můžete buď přidat příkazy async nebo odložit instrukce k odkazům na skripty. Async nezaručuje, že jsou načteny ve stejném pořadí - a proto, pokud máte několik skriptů, které by měly běžet po sobě, je vhodné upřednostňovat, aby byla zaručena sekvence:

Načíst CSS po načtení HTML

Chcete-li načíst CSS po přenesení celého kódu HTML, Google navrhne [3] tento kód, který chcete přidat na konci kódu HTML, například po zaškrtnutí zápatí a před značkou pro zavření těla:

Aby bylo možné optimalizovat své webové stránky, je také dobrý nápad odstranit nepoužívaný kód CSS, operaci, která může být únavná, pokud nemáte znalosti v návrhu webu. Pokud jste nevytvořili téma webových stránek sami, může to být moudřejší použít externí systém odstranit nepoužívaný kód CSS na vašich stránkách ve vašem zastoupení, například Ezoic Leap například nový (a zcela zdarma) verzi jejich úžasné stránky Urychlovač rychlosti.

Absolvujte test rychlosti webu Google!

To mi umožnilo předat test  Google PageSpeed   ​​[1] Odstranit blokování renderování JavaScript a CSS v obsahu vyšším než složku (spolu s využitím paměťového šifrování prohlížeče Leverage browser [4]) na webové stránce, která se pohybuje od skóre 51 v mobilu ( Obr. 1) až 72 (obr. 2) a od 59 (obr. 3) do 79 na pracovní ploše (obr. 4).

Jak odstranit prostředky blokující vykreslení v aplikaci WordPress

Chcete-li v aplikaci WordPress odstranit prostředky blokující vykreslení, je nutné nainstalovat plugin, jako je například JetPack.

Pak přejděte k možnostem, pro které musíte být správcem, a přejděte na možnosti JetPack> Psaní> Výkon a rychlost> zkontrolovat Povolte akcelerátor stránek, zrychlete časy načítání obrázků, urychlete časy načítání statických souborů a povolte líné načítání snímky.

Naučte se základny SEO: Zaregistrujte se ještě dnes!

Zvyšte viditelnost a provoz vašeho webu zvládnutím základů SEO pomocí našeho snadno sledovatelného základního kurzu.

Začněte se učit SEO

Tímto způsobem odstraníte prostředky blokující vykreslení v aplikaci WordPress a načtete stránky rychleji tím, že umožníte JetPacku optimalizovat obrázky a sloužit obrázky a statické soubory (například CSS a JavaScript) z jejich globální sítě serverů.

Nezapomeňte také odložit načítání snímků mimo obrazovku pomocí funkce Lazy Load. I když to bylo obtížné a vyžaduje externí knihovnu odložit načítání snímků mimo obrazovku, je nyní možné nativně v HTML5!

Chcete-li implementovat líný načítání snímků na webových stránkách, jednoduše přidejte hodnoty líné na atributy načítání obrázků webových stránek a nedávné prohlížeče pochopí, že tyto snímky by měly být požadovány a načteny, pokud se zobrazí, což znamená, že uživatel se posouvá dolů zástupných symbolů obrazu.

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

Kromě toho, líný nakládání také pracuje s IFRAMES a je důležitou implementací pro odstranění zdrojů blokování vykreslování z vašich webových stránek.

Jakmile budou mít zdroje blokování vykreslování pokyny pro načtení po hlavním obsahu, což znamená, že HTML DOM, budete mít již vydělat spoustu bodů na technickém testu Google Lighthouse, test Rychlost stránky Insights, nebo vitals Google Core Web Vitals.

Mají externí systém optimalizovat vaše webové stránky pro vás

Víte, že byste mohli ve skutečnosti vyřešit všechny problémy služby  Google PageSpeed   ​​vaším jménem bez velkého úsilí ze svého webu - kromě registrace na bezplatnou zkušební verzi a změny DNS?

S využitím technologie Ezoic Platform Speed ​​Accelerator budou všechny obvyklé problémy  Google PageSpeed   ​​vyřešeny jejich systémem, který bude prostředníkem mezi vaším webem a návštěvníky. Než webovou stránku zobrazují vašemu návštěvníkovi, optimalizují ji.

Zůstaňte ekologičtí jednoduše zaregistrováním bezplatné zkušební verze na platformě Ezoic a vyzkoušejte si to sami - vaše webové stránky během několika dní dosáhnou nejvyšších standardů optimalizace rychlosti stránky: vykreslí obrázky webové generace nové generace, optimalizuje CSS a JavaScript odstraněním nevyužitého CSS a JS, líné načítání obrázků, změna velikosti obrázků, ukládání stránek do mezipaměti, optimalizace písem, předběžné připojení ke všem zahrnutým webům a mnoho dalšího.

Není vyžadována žádná kreditní karta - stačí se zaregistrovat zdarma a vyzkoušet. Navíc, pokud váš web vydělává peníze z grafických reklam, kromě toho, že vaše webové stránky výrazně zrychlují, mohou vám také vydělat několikanásobně více peněz než s programem Google AdSense optimalizací reklam pomocí strojového učení a pokročilé umělé intelence.

Často Kladené Otázky

Jak eliminovat javascript blokující Render a CSS v nadřazeném obsahu?

Chcete-li eliminovat JavaScript s blokováním Render a CSS pro obsah nad složením, měli byste zajistit, aby byly soubory JS a CSS načteny po plném načtení HTML. To znamená, že se nezmizí proces načítání HTML ke stažení těchto souborů. Soubory JavaScript můžete odložit pomocí atributu Async nebo Defer a pro CSS můžete použít konkrétní kód k jeho načtení po HTML. Externí optimalizační systém, jako je Ezoic, to také zvládne automaticky.

Jak mohou vývojáři webových stránek řešit doporučení Google PageSpeed ​​k odstranění javascriptu blokujícího Render a CSS?

Vývojáři webových stránek mohou optimalizovat své stránky minifikací souborů JavaScriptu a CSS pomocí asynchronního zatížení pro JavaScript, vložením kritického CSS přímo do HTML a odložením načítání nekritických souborů CSS a JavaScript. Implementace těchto strategií může výrazně zlepšit dobu načítání a skóre PageSpeed.

Perfect Chrome Lighthouse skóre: Co se stane?