WordPress návody

Autoptimize – skvělý plugin pro minifikaci CSS, JS a HTML ve WordPress

počítač a stůl
Autor příspěvku Tomáš Cirkl

Pokud chcete zlepšit výkon svého WordPress webu, tak plugin Autoptimize je skvělá volba. Tento minifikační plugin dokáže zrychlit vaší stránku tak, že optimalizuje HTML, CSS a JS.

Autoptimize

Autoptimize

Jak ale Autoptimize pracuje? Plugin komprimuje, minifikuje, slučuje a cachuje všechny scripty a styly. Samotné HTML pak minifikuje.

Minifikace je, že se v HTML, CSS a JavaScriptu zredukuje nepotřebný kód. Díky tomu se tyto soubory stanou menší a rychleji se načítají. Minifikace z kódu odstraňuje:

  • Prázdné mezery
  • Znaky na začátku nové  řádky
  • Komentáře
  • Blokuje oddělovače

Tyto znaky nejsou potřebné pro běh kódu, ale spíše činí kód přehlednější a čitelnější pro lidi.

Jak nastavit plugin Autoptimize

Plugin Autoptimize se nachází v oficiálním katalogu pluginů a jeho instalace se může provést přímo z WordPress administrace.

Po instalaci a aktivaci se do nastavení dostanete tak, že v administraci WordPress vyberete Nastavení -> Autoptimize.

Zde najdete jednoduché nastavení, kde stačí zaškrtnout políčka u optimalizace pro HTML, CSS a JS a uložit nastavení.

Autoptimize Options - základní nastavení

Autoptimize Options – základní nastavení

V tuto chvíli už plugin pracuje a máte nastavený dobrý základ, vhodné pro méně zkušené WordPress administrátory.

Pokročilé nastavení Autoptimize

Autoptimize nicméně obsahuje ještě pokročilé nastavení, které si zobrazíte pomocí tlačítka Show advanced settings v pravém horním rohu. Vzorové nastavení s popisky najdete níže.

HTML Options

HTML Options

HTML Options

  • Optimize HTML Code?  – aktivuje optimalizaci HTML, určitě zaškrtněte.
  • Keep HTML comments? – zaškrtnutím vynutíte ponechání HTML komentářů.

JavaScript Options

JavaScript Options

JavaScript Options

  • Optimize JavaScript Code? – aktivuje optimalizaci JS, určitě zaškrtněte.
  • Force JavaScript in <head>? – vynutí načítání JS v hlavičce, doporučuji nechat vypnuté, protože chcete, aby se JS načítal v patičce stránky a nezpomaloval načítání.
  • Also aggregate inline JS? – plugin slučuje JS do jednoho souboru, zaškrtnutím aktivuje slučování i inline vložených JS.
  • Exclude scripts from Autoptimize: – seznam JS, které má plugin přeskočit.
  • Add try-catch wrapping? – funkce vylepšující kompatibilitu, doporučuji aktivovat.

CSS Options

CSS Options

CSS Options

  • Optimize CSS Code? – aktivuje optimalizaci CSS, určitě zaškrtněte.
  • Generate data: URIs for images? – aktivováním vložíte malé obrázky sloužící pro background-image přímo do stylů.
  • Remove Google Fonts? – aktivováním odstraníte načítání písma z Google Fonts.
  • Also aggregate inline CSS? – aktivováním zapnete slučování i inline stylů.
  • Inline and Defer CSS? – umožňuje vložit CSS kód pro rychlé načítání stránek, musíte však vědět, který CSS to je.
  • Inline all CSS? – vložení všech stylů jako inline.
  • Exclude CSS from Autoptimize: – seznam CSS, které má plugin přeskočit.

CDN Options

CDN Options

CDN Options

Jestli používáte CDN, tak sem vložte root URL.

Cache Info

Cache Info

Cache Info

Tabulka s informací o uložení cachovaných souborů.

Misc Options

Misc Options

Misc Options

  • Save aggregated script/css as static files? – globální nastavení pro slučování CSS a JS, doporučuji nechat aktivované.
  • Also optimize for logged in users? – optimalizovat zobrazování stránky i pro přihlášené uživatele, doporučuji nechat aktivované.

Nutno dodat, že nastavení se může lišit v závislosti na šabloně a použitých pluginech, a proto je vždy důležité po uložení nastavení také šablonu řádně otestovat.

Pro ještě lepší výkon webu doporučuji plugin Autoptimize použít v kombinaci s cachovacím pluginem. Výsledek by pak měl být velmi znát. Další důležitý plugin pro optimalizaci rychlosti je i WP Performance Score Booster.

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

11 komentářů

  • Ahoj nenarazil si u Autoptimize problém s cachováním? Stává se mi u Caldera form, že hlásí invalid token a musel jsem ho vypnout.

    Díky za info.

  • V tomhle pluginu pozor na problem s CSs. Kdyz to zapnu tak na sablone Enfold. To blbe zobrazuje v IE

  • V kombinaci s Divi a WooCommerce bohužel. Někde se přebíjí CSS a rozhodí se stylování tlačítek.

    • S obojím ho používám bez problémů. Nejspíše ale máte aktivované generování statického css v Divi, zkuste to vypnout.

  • Treba mi tento plugin – ak používam nejaké cachovacie pluginy napr. WP rocket?

    • Záleží, jestli ten plugin umí minifikaci a slučování. WP rocket to třeba umí sám.

  • Dobrý den, bohužel při použití tohoto pluginu přestanou funguvat defacto všechny „animační prvky“, jako např. SmartSlider3, Everest Counters, Essent Grid Gallery….prostě nic se nezobrazuje. Je potřeba něco přidat do nastavení? Zkoušela jsem i nastavení u SmartSlideru, které jsem našla na jednom foru, ale bezúspěšně. Díky za odpověd.

    • Zdravím,
      ano, může se stát, že dojde k nekompatibilitě a rozbití stylů nebo funkčnosti. Nejjednodušší je pak vypnout minifikaci nebo slučování CSS a otestovat, zda se problém neopravil.

    • U SmartSlider3 stačí v nastavení zaškrnout pole „Async“, „Combine“ a „Minify“ a poté už opět funguje…

  • Dobrý den,

    jako začátečník jsem začal používat tento plugin. A chtěl bych se zeptat, zda můžete více rozepsat „funkci“ Inline all CSS? – vložení všech stylů jako inline.

    Používám Divi builder(a šablonu), a když nemám zaškrtnuté: „Inline all CSS?“, tak se mi celá šablona rozbije.

    V nastavení DIVI builderu, mám vypnuté „Static CSS File Generation“. Další pluginy: WP Performance Score Booster, WP Super Cache, Yoast

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!