Pochopení WordPress CSS
Než se ponoříme do toho, pojďme pochopit, jak funguje běžný CSS ve WordPressu.
Každé téma WordPress se skládá ze souboru style.css, který obsahuje veškerý kód potřebný ke stylování vašeho webu. Vývojáři motivů by měli podporovat všechny funkce WordPress, které zahrnují blogové příspěvky, komentáře, stránku produktů, stránku členství, formuláře atd. Další pluginy, které nainstalujete, mohou také přidat podobné šablony stylů css.
Díky tomu mohou být soubory css nafouklé a velké o velikosti 200 kb nebo dokonce více.
Co je Critical Path CSS?
Jak vaše soubory CSS rostou, váš prohlížeč potřebuje stáhnout tyto velké soubory, analyzovat je a vykreslit. Také známé jako blokování vykreslování. Také zvýší první smysluplné vykreslení a první smysluplné vykreslení.
CSS Critical Path je CSS potřebné k vykreslení výše uvedeného obsahu na každé webové stránce. Jak název napovídá, „kritické“ CSS, které pomáhá prohlížeči rychle jej vykreslit a vykreslit před načtením úplných souborů CSS.
Obvykle je css kritické cesty vložen do záhlaví a zdrojový soubor css je načten asynchronně nebo v zápatí pro snadné použití.
Proč je Critical Path CSS tak důležité?
Určitě jste již viděli varování od nástrojů jako Google PageSpeed Insights nebo GTmetrix s nápisem „optimize css delivery“ nebo „defer unused css“.
Kritické CSS nemá nic společného s dobou načítání stránky. Neprodlužuje/nezkracuje dobu načítání. Poskytuje ale mnohem lepší uživatelský zážitek. Pomáhá rychle "vykreslit" nebo "vybarvit" webovou stránku.
- Vylepšuje First Content Draw (FCP)
- Zlepšuje první významnou platbu (FMP)
- Odstraňte nepoužívané CSS (technicky je neodstraňujte, ale upřednostněte „užitečné“ CSS)
Zde jsou dva snímky obrazovky mého blogu s kritickým CSS a bez něj.
Jak můžete vidět v sekci „žádná kritická css cesta“, trvalo téměř 5 sekund, než se uživateli ukázalo něco užitečného na mobilním zařízení. Prohlížeč musí provést další HTTP požadavek na soubor css, stáhnout jej, analyzovat, aby mohl začít vykreslovat. Ale při použití kritického css musí být všechny potřebné css vloženy a prohlížeč může začít vykreslovat okamžitě po načtení souboru HTML během sekundy nebo méně.
Jak vytvořit kritické CSS ve WordPressu?
Existuje několik způsobů, jak generovat kritické CSS ve WordPressu.
Použití zásuvných modulů pro ukládání do mezipaměti
WP Rocket je prémiový plugin pro ukládání do mezipaměti, který funguje opravdu dobře.
Jedním z důvodů, proč používám WP Rocket na každém webu, je samotná kritická generace CSS. Generují kritické CSS samostatně pro domovskou stránku, stránku s příspěvky, stránku kategorie, stránku produktu atd. a vloží je. Pokud dojde ke změnám motivu nebo nastavení, obnoví kritické CSS.
Vše lze provést stisknutím tlačítka.
Další moduly pro ukládání do mezipaměti, které mohou generovat kritické CSS
Swift Performance a LiteSpeed (vyžaduje server LiteSpeed/OpenLiteSpeed ) jsou podobné pluginy, které mohou generovat kritické CSS. Oba tyto pluginy mají na svých serverech zabudovanou cloudovou a úplnou mezipaměť.
Použití Autoptimize + Free Critical CSS Generator
Existují online nástroje třetích stran, které poskytují důležité css zadáním adresy URL vašeho webu. pegasaas je skvělý bezplatný nástroj.
Jak na to:
Krok 1. Přejděte na https://pegasaas.com/critical-path-css-generator/ a zadejte svou adresu URL. Zkopírujte vygenerovaný „CSS kritické cesty“.
Krok 2 V nastavení automatické optimalizace (povolit pokročilá nastavení) v části „Možnosti CSS“ zaškrtněte „Inline and Defer CSS“ a vložte zkopírované CSS.
Klady:
- Je zdarma
mínusy:
- Žádné samostatné kritické CSS pro různé typy stránek (např.: domovská stránka, stránka s příspěvky, stránka kategorie, stránka produktu atd.)
- Nepřestavujte automaticky při změně motivu/nastavení
Proč nemůže WordPress sám generovat kritické CSS?
Jak jste si možná všimli, vytvoření kritické cesty css umožňuje externí služby. Proč to tedy nemůže vygenerovat sám WordPress?
Vytváření kritických CSS je možné díky open source projektům, jako jsou Critical (od Google), CriticalCSS nebo penthouse. Všechny tyto projekty jsou založeny na NodeJS, nikoli na PHP. Musíte tedy nainstalovat NodeJS na svůj server. Většina poskytovatelů sdíleného/spravovaného hostingu to z několika důvodů neumožňuje.
