Ak vaša stránka WordPress používa platenú tému WordPress alebo populárnu tému z oficiálneho úložiska tém WordPress, je pravdepodobné, že téma bude vyvinutá pre rôzne prípady použitia. A možno používate len malú množinu všetkých funkcií dostupných v téme.
V takom prípade váš web načítava veľa nepoužívaných CSS, ktoré nie sú potrebné na úpravu štýlu stránok vášho webu. Napríklad téma WordPress, ktorú používate, môže mať štýly aj pre stránky WooCommerce, ale ak na svojom webe WordPress prevádzkujete iba blog, potom nepoužívate CSS zahrnuté pre stránky WooCommerce na vašom webe, a teda slúžite nevyužitým CSS používateľom.
Ak ste svoj web otestovali pomocou nástroja Google Pagespeed, pravdepodobne už viete, že váš web má nevyužité problémy s CSS. V tejto príručke vám ukážeme, ako najskôr skontrolovať nepoužívaný CSS a potom použiť bezplatný nástroj na odstránenie nepoužívaného CSS z vášho webu WordPress.
Ako skontrolovať nepoužívané CSS
Google Chrome DevTools (ten, ktorý sa zobrazí po kliknutí na možnosť „Skontrolovať“ v kontextovej ponuke) má na karte Zdroje funkciu Pokrytie. Pomocou možnosti Pokrytie môžete nájsť nepoužívané CSS a JS, ktoré načítava váš web.
- Otvorte svoj web v prehliadači Chrome na pracovnej ploche.
- Kliknite pravým tlačidlom myši na prázdne biele miesto na vašej lokalite a vyberte Skontrolujte z kontextového menu.
- Klikni na Zdroje tab, stlačte Ctrl + Shift + P otvorte príkazové okno a zadajte pokrytie a vyberte Začnite s prístrojovým pokrytím a znova načítajte stránku z dostupných príkazov.
- Na karte Pokrytie kliknite na položku URL filter a zadajte sem koreňovú doménu svojho webu, aby sa zobrazili iba interné súbory CSS/JS.
└ Skontrolujte Nepoužité bajty stĺpec, aby ste videli percento údajov načítaných v súbore CSS/JS z vašej témy.
- Kliknutím na súbor CSS zobrazíte nepoužívané CSS (označené červenými pruhmi) načítané vašou stránkou. CSS, ktorý sa používa na aktuálnej stránke, sa zobrazí so zelenými pruhmi.
Keď ste analyzovali všetky nepoužívané CSS, ktoré sa načítavajú na váš web, je čas ich odstrániť. Na odstránenie nepoužívaných CSS z webových stránok je k dispozícii niekoľko bezplatných nástrojov. Nižšie je jeden z populárnych nástrojov, ktoré som testoval a používal na svojich vlastných projektoch.
Na odstránenie nepoužívaných CSS použite PurifyCSS Online
Zvyčajne môžete vo WordPresse nájsť doplnok takmer na všetko. Ale na odstránenie nepoužívaného CSS, žiaľ, nie je k dispozícii jediný doplnok. Na odstránenie nepoužívaných štýlov CSS z vášho webu teda použijeme manuálne nástroje, ktoré nie sú špecifické pre wordpress.
PurifyCSS je najviac priateľský nevývojársky nástroj môžete nájsť riešenie s nepoužívaným CSS. Tento nástroj má jednoduché používateľské rozhranie, ktoré umožňuje používateľom zadať adresu URL webovej stránky ALEBO kód HTML a CSS. V prípade WordPress použijeme možnosť URL a poskytneme odkazy na všetky druhy stránok na vašom webe, aby sme umožnili nástroju získať CSS od všetkých a optimalizovať pre nepoužívané CSS.
Tu je rýchly zoznam stránok, ktoré by ste mali vložiť do nástroja:
- Adresa URL domovskej stránky
- Viaceré adresy URL stránok príspevkov z každej kategórie na vašej lokalite
└ Tým sa zabezpečí, že CSS budú zahrnuté vo všetkých prvkoch príspevku.
- Kontakt, Informácie, Súkromie a všetky druhy rôznych stránok, ktoré môžete mať na svojom webe.
- Stránka archívu, stránka vyhľadávania, stránky autora
- Vlastné stránky typu príspevku
Horúci tip: Vytvorte príspevok/stránku „funkcie“ so všetkými prvkami tém, ktoré používate alebo môžete použiť v budúcnosti, ako sú tabuľka, galéria obrázkov, kód, predbežné, usporiadané zoznamy, nezoradené zoznamy, formuláre, karty, akordeóny, Gutenbergove bloky, ktoré bežne používate , atď.
Použite túto webovú adresu príspevku „funkcií“ v nástroji PurifyCSS Online, aby ste sa uistili, že obsahuje CSS pre bežne používané prvky.
Zasiahnite Vyčistite CSS po pridaní všetkých relevantných typov adries URL z vašej lokality do nástroja PurifyCSS Online.
Skopírujte nový CSS vygenerovaný týmto nástrojom a použite ho na svojom webe. Presvedčte sa zálohujte pôvodný štýl.css a ďalšie CSS súbory vo vašej téme pred nahradením nového CSS vygenerovaného PurifyCSS.
Tip: Na úpravu súborov CSS svojej témy môžete použiť buď vstavaný editor tém WordPress, alebo môžete použiť program FTP/SFTP na pripojenie k serveru a pohodlne upravovať súbory pomocou editora Poznámkový blok.