Jak mohu pomocí LWS Optimize přednačíst soubory CSS na svém webu WordPress?

Procédure

Co je přednačítání CSS?

Při načítání webové stránky se soubory CSS, které jsou s ní spojeny, načítají průběžně v pořadí, v jakém jsou v kódu vyvolány. Přednačítání souboru znamená, že se soubor spustí jako první, aby byl připraven na počáteční načtení stránky, místo aby se muselo krátce čekat na přirozené načtení souboru.

Přednačítání se nejčastěji používá pro textová písma, protože se často načítají až po zobrazení stránky, což má za následek, že se text po načtení stránky několik okamžiků nezobrazuje nebo se nezobrazuje správným písmem. Předběžné načtení těchto písem umožňuje jejich načtení současně se stránkou: písmo se zobrazí přímo, čímž se načtení zdá být rychlejší.

Aby bylo přednačítání účinné, neměly by se přednačítat všechny soubory CSS, jinak se výkon webu spíše zhorší, než zlepší.

Může být obtížné určit, které prvky webu by měly být přednačteny, abyste dosáhli nejlepšího výkonu; to bude do značné míry záviset na vašem webu, nainstalovaných zásuvných modulech a struktuře stránky, ale obecně platí, že to budou zdroje, které jsou nezbytné pro počáteční načtení stránky, tj. soubory, které načtou prvky, které uživatel uvidí ihned po načtení stránky: písma, hlavní prvky CSS (barvy, pozadí atd.), obrázky atd.

Zlepšete počáteční zobrazení svých stránek pomocí funkce přednačítání CSS , kterou nabízí nástroj LWS Optimize a která upřednostňuje načítání souborů, které jsou nezbytné pro okamžité zobrazení, jako jsou kritické styly a písma. Díky intuitivnímu rozhraní můžete na kartě Front-End (pokročilý režim) aktivovat možnost "Přednačíst soubory CSS", přidat přesné adresy URL, které se mají přednačíst, a uložit nastavení několika kliknutími. Pro kompletní optimalizaci, kterou lze snadno nainstalovat, si osvojte nejlepší plugin cache pro WordPress. Stejný plugin je v rozšířeních uveden jako nejlepší bezplatný plugin cache WordPressu.

Jak přednačíst soubory CSS svého webu?

Můžete přednačíst značky , které se používají hlavně k načítání písem nebo stylů, ale lze je použít i k načítání obrázků. K tomu je třeba nahradit atribut "rel" a přidat do tagu atribut "as". To vám musí připadat nepochopitelné, pokud o vývoji víte jen málo nebo vůbec nic. Podívejme se na to podrobněji na příkladu:

Chcete-li přednačíst tento list stylu, můžete značku upravit následujícím způsobem:

Jak vidíte, stačí změnit 'stylesheet' na 'preload', ale je důležité nezapomenout přidat atribut 'as', jinak se váš soubor načte dvakrát, což by mělo neblahý vliv na výkon, což je v rozporu se samotným účelem přednačítání.

V případě obrázku načteného z adresy , je manipulace stejná, pouze se z atributu 'style' stane 'image':

Konečně v případě písem je postup podobný až na jeden detail: atribut "crossorigin" musí být přidán do :

<link rel='preload' as='font' href='https://example.fr/mafont.woff2' corssorigin='anonymous' />

Smyslem atributu "crossorigin" je sdělit prohlížeči, že toto písmo musí být načteno anonymně. Ve skutečnosti se takto musí načítat všechna písma; zapomeňte na tento atribut a prohlížeč toto písmo nezpracuje a nebude brát v úvahu přednačítání.

Ať už je váš web jakýkoli, přednačítáním souborů CSS můžete získat vše. Pro začátečníky však může být nastavení složité, proto doporučujeme používat rozšíření WordPressu, které přednačítá soubory za vás, například naše rozšíření LWS Optimize, vyvinuté společností LWS.

Přednačítání souborů CSS pomocí LWS Optimize

Kromě standardnějších optimalizací, jako je minifikace a kombinace, vám LWS Optimize umožňuje minifikovat soubory CSS a písma podle vašeho výběru na několik kliknutí. Za tímto účelem přejděte do nastavení rozšíření, do Rozšířeného režimu a poté na kartu Front-End:

Zde aktivujte možnost "Přednačíst soubory CSS". Poté klikněte na tlačítko "Přidat soubory" naproti této možnosti, čímž se otevře modální okno:

Do pole nově otevřeného modálního okna zadejte úplnou adresu URL souboru, který chcete zahrnout. Kliknutím na zelené tlačítko "+" můžete přidat další adresy URL nebo na červené tlačítko "-" je můžete odebrat. Můžete zahrnout libovolný počet adres URL, ale bezpodmínečně musíte zadat přesnou adresu URL souboru, jinak se přednahrávání neprovede. Po dokončení klikněte na tlačítko "Save" (Uložit), čímž změny uložíte.

Zopakujte předchozí akce s možností "Preload Fonts" (Přednačíst písma), abyste zahrnuli písma, která chcete přednačíst. Opět se ujistěte, že jste zadali správnou a úplnou adresu URL, jinak se písmo předem nenačte.

Nezapomeňte kliknout na zelené tlačítko v pravém dolním rohu "Uložit novou konfiguraci", abyste potvrdili změny.

Závěr

Nyní již víte, jak :

• Určit základní zdroje, které je třeba přednačíst, abyste optimalizovali zobrazení své stránky od prvního načtení 🌐.
• Použít tag k efektivnímu přednačtení souborů CSS, obrázků a písem, přičemž dbejte na to, abyste nepřetížili prohlížeč 🖥️.
• Využijte rozšíření LWS Optimize, které usnadňuje přednačítání na stránkách WordPress, aniž by vyžadovalo pokročilé technické dovednosti 🔧.

Doufáme, že vám tento článek osvětlil výhody a implementaci přednačítání zdrojů na vašich stránkách. Mnohokrát děkujeme za pozorné čtení! Pokud máte nějaké dotazy nebo se chcete podělit o své zkušenosti s přednačítáním CSS, neváhejte zanechat komentář. Vaší zpětné vazby si vždy ceníme a díky ní pro vás můžeme naše služby nadále zlepšovat 🌟.