Pokud váš web WordPress používá placené téma WordPress nebo oblíbené téma z oficiálního úložiště témat WordPress, je pravděpodobné, že téma bude vyvinuto pro různé případy použití. A možná používáte jen malou sadu všech funkcí dostupných v tématu.
V takovém případě váš web načítá spoustu nepoužívaných CSS, které nejsou nutné pro stylování stránek vašeho webu. Například motiv WordPress, který používáte, může mít styly i pro stránky WooCommerce, ale pokud na svém webu WordPress provozujete pouze blog, pak nepoužíváte CSS zahrnuté pro stránky WooCommerce na vašem webu, a proto sloužíte nevyužité. CSS uživatelům.
Pokud jste svůj web testovali pomocí nástroje Google Pagespeed, pravděpodobně už víte, že váš web má problémy s nevyužitými CSS. V této příručce vám ukážeme, jak nejprve zkontrolovat nepoužívané CSS, a poté pomocí bezplatného nástroje odstranit nepoužívané CSS z vašeho webu WordPress.
Jak zkontrolovat nepoužívané CSS
Google Chrome DevTools (ten, který uvidíte, když v kontextové nabídce kliknete na možnost „Prozkoumat“), má na kartě Zdroje funkci Pokrytí. Pomocí možnosti Pokrytí můžete najít nepoužívané CSS a JS, které váš web načítá.
- Otevřete svůj web v Chrome na ploše.
- Klikněte pravým tlačítkem na prázdné prázdné místo na vašem webu a vyberte Kontrolovat z kontextové nabídky.
- Klikněte na Zdroje tab, stiskněte Ctrl + Shift + P otevřete příkazové okno a zadejte Dosah a vyberte Začněte instrumentovat pokrytí a znovu načtěte stránku z dostupných příkazů.
- Na kartě Pokrytí klikněte na URL filtr a zadejte sem kořenovou doménu svého webu, aby se zobrazily pouze interní soubory CSS/JS.
└ Zkontrolujte Nepoužité bajty zobrazíte procento dat načítaných v souboru CSS/JS z vašeho motivu.
- Kliknutím na soubor CSS zobrazíte nepoužívané CSS (označené červenými pruhy) načtené vaším webem. CSS, který se používá na aktuální stránce, se zobrazí se zelenými pruhy.
Jakmile zanalyzujete všechny nepoužívané CSS, které se načítají na váš web, je čas je odstranit. K odstranění nepoužívaných CSS z webových stránek je k dispozici několik bezplatných nástrojů. Níže je jeden z oblíbených nástrojů, které jsem testoval a používal na svých vlastních projektech.
Použijte PurifyCSS Online k odstranění nepoužívaných CSS
Obvykle můžete ve WordPressu najít plugin téměř pro vše. Ale pro odstranění nepoužívaných CSS bohužel není k dispozici jediný plugin. K odstranění nepoužívaných CSS z vašeho webu tedy použijeme ruční nástroje, které nejsou specifické pro wordpress.
PurifyCSS je nejvíce přátelský nevývojářský nástroj můžete najít řešení s nepoužívaným CSS. Nástroj má jednoduché uživatelské rozhraní, které uživatelům umožňuje zadat buď adresu URL webových stránek, NEBO kód HTML a CSS. Pro WordPress použijeme možnost URL a poskytneme odkazy na všechny druhy stránek na vašem webu, abychom umožnili nástroji získat CSS ze všech a optimalizovat pro nepoužívané CSS.
Zde je rychlý seznam stránek, které byste měli do nástroje vložit:
- Adresa URL domovské stránky
- Více adres URL stránek příspěvku z každé kategorie na vašem webu
└ Tím je zajištěno, že CSS bude zahrnuto pro všechny prvky příspěvku.
- Kontakt, O aplikaci, Ochrana osobních údajů a všechny druhy různých stránek, které můžete mít na svém webu.
- Stránka archivu, stránka vyhledávání, stránky autora
- Vlastní stránky typu příspěvku
Horký tip: Vytvořte příspěvek/stránku „funkcí“ se všemi prvky motivu, které používáte nebo můžete použít v budoucnu, jako je tabulka, galerie obrázků, kód, předběžné, uspořádané seznamy, neuspořádané seznamy, formuláře, karty, akordeony, Gutenbergovy bloky, které běžně používáte , atd.
Použijte tuto adresu URL příspěvku „funkcí“ v nástroji PurifyCSS Online, abyste zajistili, že budou zahrnuty CSS pro běžně používané prvky.
Udeř Vyčistit CSS Jakmile přidáte všechny relevantní typy adres URL ze svého webu do nástroje PurifyCSS Online.
Zkopírujte nový CSS vygenerovaný nástrojem a použijte jej na svém webu. Ujisti se zálohujte původní styl.css a další soubory CSS ve vašem motivu, než nahradíte nový CSS vygenerovaný PurifyCSS.
Spropitné: K úpravě souborů CSS motivu můžete použít buď vestavěný editor témat WordPress, nebo můžete použít program FTP/SFTP pro připojení k serveru a pohodlně upravovat soubory pomocí editoru Poznámkový blok.