Co je kritický CSS a jak pracovat? (Techniky pro zatížení webu rychle)

Skutečný problém v životě

Cítili jste se někdy takto? Kliknete na zajímavý web. Ale co je vítáno, je ... Bílá obrazovka s hladkou ikonou, která se zdá, že nikdy nekončí sekundu, druhý, že čekáte ... až do konce, ztratí trpělivost a pak vypne! Tento druh podrážděnosti je to, s čím se vaši zákazníci setkávají každý den, a je to „zabití“, který tiše zničil míru konverze a vaše hodnocení SEO. Což možná nevíte

Symptomy „webu s pomalým stahováním“, zejména první viditelné (nad záhybem), nejen o pocitech. Jedná se však o technický problém nazývaný „Zdroje blokování vykreslování“ nebo zdroje, které zablokovaly zobrazení webové stránky. Což důležitým faktorem je náš těžký soubor CSS Tento problém je naléhavá záležitost, kterou je třeba vyřešit. , jak opravit zdroje vykreslení, se můžete dozvědět přímo.

Výzva pro ilustrace: Obrázek uživatele zobrazuje podrážděný výraz, zatímco zírá na obrazovku smartphonu, která je stále bílá. Uprostřed je pouze symbol načítání. Přináší pocit čekání na stažení webové stránky příliš dlouho

Proč k tomuto problému došlo?

Chcete -li jasně vidět obrázek, představte si, že prohlížeč (jako je Google Chrome) funguje jako velmi pečlivý doručovací personál. Když někdo zavolá na váš web, bude spuštěn, aby předtím získal soubor HTML (struktura webové struktury). Jakmile jsem si přečetl příkaz v HTML, zjistil, že příkaz „Hej! Předtím, než ukážete cokoli, musíte si předtím stáhnout všechny soubory CSS!“ Soubor CSS je jako příručka k oblékání, která říká, jakou barevný web musí mít, ale bod je ... Prohlížeč „zastaví vše“ , aby čekal na celý soubor CSS, aby nejprve dokončil. Přestože některé styly jsou určeny pro spodní obsah webu, který uživatel neviděl.

Proces, který „musí čekat na dokončení, než začneme pokračovat“. Toto je původ slova blokování , větší a komplikované soubory CSS. Čekání je jen delší. Způsobit uživatel, aby se na bílou obrazovku díval déle, zbytečně, navzdory důležitému obsahu, který by měl vidět jako první, může potřebovat pouze CSS.

Výzva pro ilustrace: Snadné obrázky deníku ukazují proces normálního prohlížeče: 1. požadavky na prohlížeč HTML -> 2. Viz CSS -> 3. Přestaňte fungovat (se symbolem červeného zastavení) a stáhněte si všechny soubory CSS -> 4.

Pokud to odejde, jak to ovlivní?

S výhledem na problém s webovými stránkami pomalého načítání, protože CSS se neliší od otevření krásného obchodu. Ale zamkli dveře z toho, že zákazníkům vstoupili do důsledků, jsou mnohem intenzivnější, než se očekávalo.

• Uživatelská zkušenost (UX) zničena: Nikdo nemá rád čekání. Výzkum ukazuje, že pouze 1-3 sekundy zpomaluje web, přidává více než 32% šancí na hranice.
• Míra převodu. Měřítko: Zákazníci, kteří jsou frustrovaní, jsou zákazníci, kteří si věci nekupují. Příležitost pro vás uzavřít prodej, získat vedení nebo přimět lidi kliknout na důležitá tlačítka. Zmizí v mrknutí oka pomalejší rychlostí
• SEO pozice. Drop: Google připevňuje velký význam uživatelskému prostředí, přičemž jeden z hodnotících faktorů je základní webové vitality. Pomalé webové stránky budou mít přímo přímý negativní dopad na hodnotu LCP (největší obsahová barva). Jedna z důležitých metrik se vaše základní webové vitály A konečně padl
• Ztráta důvěryhodnosti: Pomalé webové stránky odrážejí neprofesionální. A způsobit, že zákazníkům chybí důvěra, aby s vámi mohli provádět transakce, může místo toho rychle uniknout konkurentům na webu.

Výzva pro ilustrace: 2 obrázky grafů porovnávací první lišta má zamračenou ikonu nahoře. Graf spadl se zprávou „Míra konverze“ a druhý má ikonu úsměvu. Graf se zvyšuje se zprávou „míra okamžitého opuštění“, aby zprostředkovala negativní účinky.

Existuje nějaké řešení? A kde by to mělo začít?

Dobrou zprávou je ... máme „dálnici“ k vyřešení tohoto problému. Tato technika se nazývá „kritický CSS“ nebo „CSS, který je naprosto nezbytný“.

Jeho princip je velmi snadný. Místo toho, aby prohlížeč donutil stáhnout všechny CSS před zobrazením, se změníme na novou hru od:

1. Najít a extrahovat (extrakt): Najdeme pouze styl CSS, který je potřebný pro obsah „nad záhybem“.
2. Pohřben v HTML (inline): Přiveďte extrahované CSS (což je velmi malé), vložte do značky ภายในส่วน ของไฟล์ HTML โดยตรง
3. Načíst zbytek později (async/defer): Všechny soubory CSS, které si objednáme ke stažení. „Neblokujte displej“ (asynchronně) je postupně stahovat za stránkou po zobrazení webové stránky.

Jaký je výsledek? Prohlížeč obdrží soubor HTML s kritickým CSS, zabudovaným a může „zabarvit“ nebo zobrazit první webovou stránku pro uživatele. Téměř okamžitě! Uživatel bude mít pocit, že váš web je rychlý, zatímco ostatní CSS se postupně načítá později. Aniž by někdo rušil někoho, je to jedna z důležitých technik, které časopis Smashing dává srdce optimalizace výkonu.

Výzva pro ilustrace: Snadno pochopitelné Vysvětlete koncept kritického CSS: 1. „Identifikujte CSS pro nadřazené textové pole“. 2. Vložte kód CSS vložte do souboru HTML (inline). 3. zbývající soubory CSS jsou načtěny později (asynchronická zatížení).

Příklady ze skutečné věci, která bývala úspěšná

Představte si „The Chic Décor“ Online Home Decor Shop. Existuje velmi krásný web. Místo toho se však s velkým problémem setkal s velkým problémem, prodej na mobilních telefonech je mnohem nižší než cíl, který tým zjistil, že skóre Google PageSpeed Insights je velmi špatné, s LCP (největší obsahovou barvou) až 4,8 sekundy, což znamená, že zákazníci musí na bílé obrazovce zírat téměř 5 sekund, aby viděli první obrázek produktu!

Otočení mise: Vývojový tým se rozhodl použít kritické techniky CSS. Extrahují potřebné CSS pro hlavičku, HERO banner a první 4 položky zobrazené v HTML a později nastaví hlavní soubor CSS.

Hmatatelné výsledky: Po pouhých týdnech se hodnota webu LCP snížila z 4,8 sekundy na pouhých 1,6 sekundy! Uživatel má pocit, že web „rychlejší, jako jiný příběh“, sazba Bondce na mobilním telefonu se snížila o 25%, a co je nejdůležitější, míra konverze se zvýšila o 12%, aniž by musela střílet i jeden baht. Toto je síla zaměřit se na to, co uživatel vidí jako první. Což je v souladu s myšlenkou, že nad náklonností je stále velmi důležitá.

Výzva pro ilustrace: Srovnávací obrázky obrazovky/po obrazovce. Google PageSpeed Insights. Obrázek ukazuje červený výkon a vysoký LCP. Obrazový obrázek ukazuje zelené skóre a hodnoty LCP, které jsou výrazně nižší.

Pokud chcete následovat, co dělat? (Lze použít okamžitě)

Kritický CSS není příliš obtížný. V současné době existuje spousta nástrojů. Zkuste sledovat následující kroky:

Krok 1: Extrahování kritického CSS.
Nejlepší způsob je používat automatické nástroje. Protože to sám je ztráta času a je velmi snadné.

• Online nástroje: Existuje web, který poskytuje bezplatné kritické CSS. Stačí vložit adresu URL, například kritický generátor CSS Sitelocity.
• Balíčky NPM (pro vývojáře): Pokud jste vývojář, můžete použít knihovnu jako „Critical“ , která je velmi populární a výkonná. Může fungovat s vaším systémem procesu sestavení.
• Pluginy CMS (pro WordPress/Shopify): Většina platforem má automatické rychlostní zástrčky, které to dělají, jako je WP Rocket, PerfMatters (pro WordPress), což je pro obecné lidi nejjednodušší způsob.

Krok 2: Umístěte jej na svůj web.

1. Přineste kód CSS, který je extrahován z prvního kroku. Vložte to do značky ที่ส่วน ของหน้าเว็บคุณ
2. Upravte původní příkaz ke stažení CSS z:
   Aby se místo toho stal takto stahovat později:
   

Tento nový kód říká prohlížeči, že „Stáhněte si tento soubor předem bez naléhavého. A jakmile je zatížení dokončeno, použijte jej jako styl šablony.“ ZnačkaJe to ochrana v případě, že uživatelé vypnou JavaScript. Pokud potřebujete odborníky, zkontrolujte a vylepšujte tyto struktury. Audit optimalizace elektronického obchodu vám může pomoci.

Výzva pro ilustrace: Infovic, 3 kroky, kritické CSS, s ikonou: 1. Generujte (použijte počítač) 2. Inline (vložte kód na HTML) 3. Defer (původní soubor souboru CSS), který je snadno sledovatelný.

Otázky, které lidé mají tendenci divit a odpovědi, které jsou vymazány

Otázka: To bude náš soubor HTML větší? Existuje nějaký negativní účinek?
Odpověď: Ano, soubor HTML bude o něco větší. Ale to je výměna, která „velká hodnota“. Výhody uživatele vidí webovou stránku, která se má okamžitě zobrazit. Více hodnoty než velikost souboru HTML, která se jen trochu zvýšila, bude celková zkušenost uživatele obrovská. Což je náš hlavní cíl

Otázka: Musíme pro každou stránku vytvořit samostatný kritický CSS?
Odpověď: V teorii je nejlepší „ano“, protože každá šablona (první stránka, stránka produktu, stránka blogu) s rozvržením a nad stylem složení. Na začátku se však můžete zaměřit na důležité stránky, které mají nejprve nejvyšší provoz, jako je první stránka a hlavní vstupní stránka. Většina automatických nástrojů může pomoci vytvořit CSS.

Otázka: Pokud dojde k úpravě webového designu, jak se o něj postarat?
Odpověď: Toto je hlavní výzva. Pokaždé, když změníte design ve výše uvedeném záhybu, „vždy musíte“ vytvořit nový kritický CSS. To je důvod, proč je proces automatizovaného sestavení pro vývojáře. Nebo použití spolehlivých zástrček pro uživatele CMS jako nejdokonalejší metody, protože to pomůže znovu generovat se pokaždé, když dojde ke změně, mnohem snazší a také pomáhá propagovat i udržitelné pokyny pro webový design také

Výzva pro ilustrace: Obrázky osoby sedí vážně přemýšlející před počítačem. S otazníkem (?) Plovoucí kolem médií o tom, že má otázku, která vyžaduje jasnou odpověď

Shrnutí, které má být snadno pochopitelné + chtějí to zkusit udělat

Kritická CSS není jen technika pro programátory, ale „srdce“ vytvoření webu, který uživatelům poskytuje nejlepší zážitek. Je to způsob, jak změnit způsob myšlení z „nuceného čekat na všechno“ jako „nejprve doručit nejdůležitější věc“. Aby uživatel viděl obsah, který chce za sekundu, je rozdíl mezi „ztrátou zákazníků“ a „vytvářením běžných zákazníků“

Nenechte bílou obrazovku a nudné čekání na zničení vaší firmy je čas na to. Zkuste použít různé nástroje. Doporučujeme zkontrolovat váš web a začal se zlepšovat od dnešní investice, je dnes efektivní. Je v budoucnu vybudovat silný základ pro růst konverze a SEO

Váš web ... Jste připraveni být rychlejší? Udělejte to okamžitě a výsledky vás určitě ohromí!

Výzva pro ilustrace: Raketový obraz se rychle spěchá do oblohy. Na raketě je slovo „rychlost stránky“ a „konverze“ jako inspirace a povzbuzení pro čtenáře jednat.

‍