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.

7 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 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.

Zanechat komentář

Školení Divi šablona pro začátečníky a mírně pokročilé (Praha 20.6.2018)

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!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 3 roky. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.