Jak odstranit nepoužívané CSS a JS ve WordPressu (velmi snadné)

Mnoho nevyužitých CSS a JS na vašem webu může snížit dobu načítání vašeho webu. Pokud provozujete svůj web prostřednictvím a nástroje pro testování rychlosti jako Google PageSpeed ​​Insight, můžete obdržet varování, abyste odstranili nepoužívané CSS.

Naštěstí existuje velmi snadný způsob, jak to udělat. Nemusíte mít žádné speciální technické znalosti, abyste mohli odstranit nepoužívané CSS a JS ze svého webu WordPress.

Je to kvůli úžasnému pluginu známému jako Asset CleanUp: Page Speed ​​Booster. S tímto pluginem je odstranění nepoužívaných CSS stejně snadné jako kliknutí na několik tlačítek. Případně, pokud vám nevadí utratit pár babek ročně, s WP Rocket, je odstraněno nepoužívané tlačítko CSS, stačí jej aktivovat a plugin automaticky odstraní všechny nepoužívané CSS.

Pokladna: Top 7 spravovaný hosting Google Cloud WordPress

Co je nepoužívané CSS?

Nepoužitý CSS je soubor CSS, který je na stránce přítomen, ale většinou není potřeba k načtení stránky. Když návštěvník otevře webovou stránku, prohlížeč obvykle musí stáhnout, analyzovat a zpracovat všechny externí šablony stylů na navštívené stránce, než bude moci zobrazit obsah stránky návštěvníkovi. Pokud na takové stránce existuje nějaký CSS, který není na stránce použit, prohlížeč na něm bude ztrácet čas.

Klasickým příkladem toho je většina pluginů pro kontaktní formuláře, které se používají. Tyto pluginy, i když se většinou používají pouze na stránce Kontaktujte nás, načítají její CSS na celém webu. Nezáleží na tom, zda se jedná o domovskou stránku, kde se nepoužívá, CSS se načte.

Pokud je příliš mnoho CSS, které nejsou potřeba, ale načítají se a zpomalují prohlížeč na čtení a zobrazení stránky, může to být problém.

Kromě pluginů píší vývojáři témat do style.css spoustu věcí, které většinou nejsou potřeba. Ale ať už je to potřeba nebo ne, načtou se vždy, když se načte váš web!

Jeden nevyužitý CSS nemusí být problém, ale spousta nevyužitých CSS může ovlivnit dobu načítání vašeho webu.

Pokladna: Top 10 nejrychlejších a nejlepších témat WordPress 

Jak identifikovat nepoužívané CSS

Najít nepoužívané CSS a JS je velmi snadná věc. Jsou dva přístupy, které doporučuji.

Jedním z nich je analýza vašeho webu prostřednictvím Google PageSpeed ​​Insight. Zkontrolujte, zda váš web nemá problém s odstraněním nepoužívaných CSS. Klikněte na něj a budete moci identifikovat součást vašeho webu, která je za to zodpovědná.

Shora můžete vidět, že je zaznamenán jeden případ nepoužitého CSS. Když se na to podívám, mohu vidět plugin a umístění nepoužitého CSS.

Druhou možností je získat podrobnější analýzu. Toho lze dosáhnout pomocí nástrojů Chrome Dev.

V prohlížeči Chrome otevřete nástroje Chrome Dev a přejděte na pokrytí. Poté klikněte na tlačítko znovu načíst uvnitř oblasti pokrytí. Můžete najít a komplexního průvodce, jak to provést v nástroji Google Developers.

Další možností je použít jitbit pro vyhledání nepoužitých selektorů CSS. Můžete také použít PurifyCSS najít nepoužívané CSS

Jak odstranit nepoužívané CSS

Chcete-li odebrat nepoužívané CSS z WordPressu, postupujte takto:

1. Nainstalujte Asset CleanUp

Přejděte na plugin a poté na Přidat nový. Poté do vyhledávacího pole na stránce Přidat nový plugin zadejte „Asset CleanUp“. Nainstalujte a aktivujte plugin.

2. Přejděte do nastavení pluginu

Chcete-li získat přístup k nastavení pluginu, z řídicího panelu WordPress klikněte na nastavení a poté klikněte na Asset CleanUp.

3. Uvolněte nežádoucí CSS a JS

Pokud jde o nastavení pluginu, možná budete muset přijmout, že víte, jak plugin funguje pod klepnutím na odstranění tuku, než začnete.

Chcete-li uvolnit CSS a JS, klikněte na Správce CSS a JSS. Odtud můžete odstranit jakékoli CSS a JS, které nepotřebujete. Můžete jej odstranit pouze pro domovskou stránku, pro celý web nebo pro konkrétní URL. Můžete také odstranit pro příspěvky, stránky nebo kategorie.

Příkladem je uvolnění libovolného kontaktního formuláře z načítání pro celý web kromě stránky Kontaktujte nás

Udělejte si čas a uvolněte všechny CSS a JS, o kterých víte, že nejsou potřeba. Ujistěte se, že po dokončení otestujete své stránky, abyste se ujistili, že je vše v pořádku.

Odstraňte nepoužívané pluginy CSS WordPress

Zde jsou některé pluginy, které můžete použít k odstranění nepoužívaných CSS ve WordpPress:

1. Asset CleanUp: Page Speed ​​Booster

Asset CleanUp: Page Speed ​​Booster usnadňuje odstranění nepoužívaných CSS a JSin WordPress i pro začátečníky. Jediné, co musíte udělat, je deaktivovat konkrétní CSS, které pro konkrétní stránku není potřeba.

Můžete také deaktivovat pro jednotlivé příspěvky samostatně. S prémiovou verzí můžete pomocí pluginů deaktivovat nepoužívané CSS/JS.

Tento plugin je kompletní výkonnostní plugin s mnoha dalšími možnostmi, jak urychlit WordPress. Odstranění nepoužívaných CSS/JS je jen součástí.

V tomto příspěvku jsem použil tento plugin má průvodce.

2. WP Rocket

WP Rocket je prvotřídní výkonný plugin WordPress. Pokud jste noob, mám na mysli, pokud nemáte zkušenosti nebo se necítíte s WordPressem, pak WP Rocket je nejjednodušší způsob, jak odstranit nepoužívané CSS.

Musíte si zakoupit plugin, jakmile to uděláte, můžete si jej stáhnout ze svého účtu nebo zkontrolovat svůj e-mail pro odkaz ke stažení.

Nainstalujte plugin přes Dashboard>plugins>Add new>Upload.

Stačí přejít na nastavení WP Rocket a poté kliknout na záložku „File Optimization“. Poté přejděte dolů a uvidíte „Odstranit nepoužívané CSS“, zaškrtněte políčko, uložte a vymažte mezipaměť.

3. Perfmatters

Perfmatters je prémiový plugin vyvinutý Brianem Jacksonem a jeho bratrem Brettem Jacksonem. Tento plugin může pomoci velmi snadno odstranit nepoužívané CSS.

Nejprve si musíte zakoupit plugin. Poté jej nainstalujte. Aktivovat licenci. Když přejdete do nastavení, zapněte správce skriptů.

Stačí přejít na libovolnou stránku nebo příspěvek na vašem webu, v nabídce řídicího panelu se zobrazí ikona správce skriptů, klikněte na ni. Budete moci odstranit nepoužívané CSS a JS ze stránky nebo globálně.

Tento plugin je výkonný plugin, přichází s mnoha dalšími možnostmi, jak urychlit WordPress. Součástí je odstranění nepoužívaných CSS/JS.

4. Správce CSS JS

Správce CSS JS může konkrétně odstranit CSS nebo JS z mobilu nebo počítače. Podle toho, čeho chcete dosáhnout.

Tento plugin může také odložit načítání souborů CSS nebo JS.

Proč investovat do čističky vzduchu?

Pokud máte hodně nepoužívaných CSS a JS, zaznamenáte velké zlepšení skóre rychlosti a výkonu.

Může být nemožné odstranit všechny nepoužívané CSS, ale můžete je snížit na minimum. K odstranění nepoužívaných CSS používám Asset CleanUp TargetTrend.

Pamatujte, optimalizujte, ale nebuďte tím příliš posedlí, pokud nechcete, aby váš web vypadal nejrychlejší web na světě.

Přečtěte si také:

Jak odstranit zdroje blokující vykreslování ve WordPressu

Jak udělat WordPress velmi rychle

Jak zvýšit návštěvnost vašeho blogu