Redukce HTML, CSS a JavaScriptu je jedním z mnoha možných nastavení pro optimalizaci rychlosti načítání vašich webových stránek. Pokud se dnes zběžně podíváte na různé stránky na internetu, uvědomíte si, že nejsou v žádném případě srovnatelné s webovými stránkami před 10 lety. Na začátku stačil jednoduchý HTML kód a trocha textu. V dnešní době se však webové stránky skládají z rozsáhlého kódu, který často tvoří HTML, CSS a JavaScript. To je na jedné straně způsobeno řadou funkcí, které jsou nyní k dispozici pro webové stránky, ale také stále rozsáhlejšími designy a šablonami používanými ve web designu. 

Je teda obvyklé, že soubory HTML, CSS nebo JavaScript mají velikost stovek kilobajtů. Aby bylo možné zpracovat celý tento kód v souborech a přitom zobrazit webovou stránku, odesílá webový prohlížeč na server četné požadavky (tzv. HTTP requests). 

Zejména o WordPressu je známo, že neposkytuje nástroje pro optimalizaci doby načítání. Proto byste měli pravidelně kontrolovat výkon svého WordPress webu.

Čím více „požadavků" je odesláno, tím delší je doba načítání. Aby byl počet dotazů co nejnižší, a tím i doba načítání webu, měli byste soubory komprimovat a v případě potřeby sloučit.

Co znamená minifikace?

Minifikace znamená, že ze souboru jsou odstraněny všechny prvky vytvořené pro čitelnost kódu (tj. zalomení řádků, mezery, odsazení, zbytečné středníky a komentáře), aby se zmenšila velikost souboru. To zahrnuje také převod složitějších výrazů na jednodušší. Dokonce i identifikátory proměnných lze zkrátit, například nahrazením proměnné numberOfButtons proměnnou n.

Efekt miniaturizace se samozřejmě značně liší v závislosti na tom, kolik těchto prvků bylo při psaní kódu zahrnuto, ale velikost souboru se obvykle sníží o hodnotu mezi 20 a 40 procenty, což může být v každém případě důležité pro umístění ve vyhledávačích. Minifikace má vždy smysl a málokdy vede k problémům.

Co znamená komprese?

Kód je komprimován použitím kódování gzip na straně serveru. 

Řetězce (strings), které se již vyskytly předem, jsou nahrazeny ukazatelem. Tyto ukazatele se skládají z mnohem menšího obsahu než skutečný řetězec. Je  to proto, že prohlížeč již není  řetězcem (string), ale odkazem na předchozí řetězec. Hlavička HTTP odpovědi pak bude obsahovat "content-encoding: gzip". Účinek komprese je extrémní, můžete zmenšit velikost souboru na přibližně 20 procent původní velikosti.

Zkraťte dobu načítání

Pokud jste někdy použili nástroj jako PageSpeed Insights od společnosti Google, určitě znáte tento optimalizační návrh: „Minifikace CSS"

Toto opatření doporučuje PageSpeed Insights, pokud požadavky na načtení souborů CSS výrazně ovlivňují dobu načítání webu. Podrobné vysvětlení a popis dalších zpráv v nástroji naleznete v článku „Google Pagespeed – Nejdůležitější chybové zprávy". 

Jak může redukce CSS ovlivnit dobu načítání vašich webových stránek, bych vám rád ukázal pomocí vodopádového diagramu ze svého blogu bloggiraffe.de. Příklady jsou jen malé výňatky, ale jasně ukazují, jak lze zkrátit dobu načítání.

Příklad 1 – Nekomprimovaný:

Příklad 2 - Komprimovaný (redukovaný):

Dokonce už při načítání hlavní domény lze vidět, že jsem byl schopen snížit dobu načítání z 1233 milisekund na 860 milisekund. Časy načítání jednotlivých souborů by také mohly být zkráceny na minimum.

Co se stane při slučování souborů CSS a JavaScript? 

Jak je stručně zmíněno v článku, sloučení souborů CSS a JS znamená shrnutí jednotlivých souborů do jednoho jediného. 

Výsledkem je, že prohlížeč, přes který přistupujete na konkrétní webovou stránku, musí na server odesílat méně požadavků, aby bylo možné zobrazit webovou stránku a načíst potřebné skripty.

Jednoduchý příklad pro pochopení

Představte si, že půjdete do supermarketu a na svém nákupním seznamu máte 10 produktů. Ty se však nacházejí v různých uličkách a regálech. 

Důsledek: Trvá strašně dlouho, než najdete každý jednotlivý produkt a dáte ho do nákupního košíku. 

Řešení: V supermarketu předem sdělíte, které produkty potřebujete. On vám dá všechny vaše produkty do jednoho regálu, takže je už jen musíte vložit do košíku a zaplatit u pokladny. 

Výsledek: Tím, že budou všechny produkty seřazeny v jedné polici, musíte projít supermarketem pouze jedním směrem a ušetříte neuvěřitelné množství času. Podobně funguje i sloučení jednotlivých kódů a skriptů vašeho webu. Pro názornost, jak celá věc funguje v praxi, bych vám rád ukázal několik malých příkladů. 

Datová ekonomika pomáhá nejen s optimalizací výkonu.
Protože vědomé využívání zdrojů také přispívá k tomu, že jsou vaše webové stránky udržitelnější. Neváhejte a přečtěte si články na témata Jak zelený je WordPress? a Udržitelný webdesign.

U některých nastavení - tj. u kombinací pluginů a témat - může bohužel sloučení souborů CSS a zejména souborů JavaScript také vést k problémům. Tím může být negativně ovlivněna i hodnota LCP nebo jiné hodnoty Web Vitals.

Zda má sloučení na váš web pozitivní vliv, nebo vede k problémům, musíte nakonec jednoduše vyzkoušet. Nebojte se, nastavení můžete kdykoli změnit.

HTML

Hypertextový značkovací jazyk (HTML) je nezbytný pro základní rámec webu. Jde o to, jak se texty, odkazy nebo dokonce obrázky zobrazují. 

Například standardní kód HTML vypadá takhle: 

 <!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0">
    <title>HTML Code zur Komprimierung</title>
  </head>
  <body>
    <p>Dieser HMTL-Code soll komprimiert werden.</p>
  </body>
</html>

Minifikovaný:

 <!doctype html><html><head><meta charset="utf-8"><meta name="Beispiel-Code" content="width=device-width, initial-scale=1.0"><title>HTML Code zur Komprimierung</title></head><body><p>Dieser HMTL-Code soll komprimiert werden.</p></body></html>

CSS

CSS (Kaskádové šablony stylů) není žádný programovací jazyk. Takzvaný jazyk stylů se však používá ke změně vzhledu jednotlivých prvků webových stránek. 

Například standardní kód CSS vypadá takhle: 

 /* Add your CSS customizations below this line */

.post-content a:not([class*="button"]){
     color:#ff8c00;
}

.post-content a:not([class*="button"]):hover {
    text-decoration: underline;
    color: #ff8c00;
}

.widget-area a {
    color: #ff8c00;
}

.widget-area a:hover {
    text-decoration: underline;
    color: #ff8c00;
}

.main-navigation {
    font-size: 20px;
}

label.wp-comment-cookies-consent {
    float: none;
}

Minifikovaný:

 /* Add your CSS customizations below this line */.post-content a:not([class*="button"]){ color:#ff8c00;}.post-content a:not([class*="button"]):hover { text-decoration: underline; color: #ff8c00;}.widget-area a { color: #ff8c00;}.widget-area a:hover { text-decoration: underline; color: #ff8c00;}.main-navigation { font-size: 20px;}label.wp-comment-cookies-consent { float: none;}

Javascript

JavaScript je čistě skriptovací jazyk původně vyvinutý pro výstup dynamického HTML ve webových prohlížečích (wikipedia.org).

Například standardní kód JavaScriptu (wiki.selfhtml.org)vypadá takhle:

 function Quadrat() {
  var Eingabe  = document.getElementById('Eingabe');
  var Ergebnis = Eingabe.value * Eingabe.value;
  alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis);
  Eingabe.value = 0;
 }

var los  = document.getElementById('los');
los.addEventListener ('click', Quadrat, true);

Minifikovaný:

 function Quadrat() { var Eingabe = document.getElementById('Eingabe'); var Ergebnis = Eingabe.value * Eingabe.value; alert("Das Quadrat von " + Eingabe.value + " = " + Ergebnis); Eingabe.value = 0; }var los = document.getElementById('los');los.addEventListener ('click', Quadrat, true); 

S pomocí výše uvedených příkladů můžete velmi pěkně vidět, jak funguje minifikace kódu HTML, CSS a JavaScript. Pokročilí a profesionálové mohou také provést tuto kompresi ručně pomocí nástroje jako linkcode-generator.de. Speciální „minify pluginy" nebo „Minifier" může tuto práci udělat za vás. Ten nejen že ušetří čas, ale funguje plně automaticky.

4 minifikační pluginy pro WordPress

V níže uvedeném seznamu jsem uvedl pět populárních minifikačních pluginů, které za vás převezmou práci v podobě komprese HTML, CSS a JavaScriptu. 

#1 Autoptimize

WordPress plugin Autoptimize vám nabízí snadnou optimalizaci vašich webových stránek. Pomocí několika jednoduchých kroků můžete komprimovat soubory HTML, CSS a JavaScript a urychlit tak dobu načítání vašich webových stránek. 

Například  Autoptimize přesune skripty do zápatí a zpozdí načítání souborů jako HTML, CSS a JavaScript, nebo mnoha dalších souborů, například Google Fonts.

Jakmile je plugin ve WordPressu nainstalován, najdete různé registrační karty v nastavení jako „JS, CSS, HTML", „Obrázky" a „Extra". Jednotlivé možnosti a volby jsou zde popsány velmi dobře a jsou i pro laiky velmi dobře pochopitelné.

V registrační kartě „JS, CSS a HTML" si můžete vybrat z různých možností optimalizace pro soubory JavaScript, CSS a HTML. Registrační karta „Obrázky'' umožňuje automatickou optimalizaci obrázků a zpomalení načítání obrazových souborů. 

Pod položkou v menu s názvem „Nástroje" lze provést další automatické optimalizace, například pro Google Fonts, pro emotikony a pro načítání souborů prostřednictvím domén třetích stran. 

Nejdůležitější funkce u Autoptimize: 

• Minimalizace / meziukládání souborů HTML, CSS a JavaScript
• Optimalizace obrázků
• Odstranění Google Fonts
• Odstranění emotikonů
• Synchronizace JavaScriptu
• Kompatibilní s různými caching pluginy

#2 WP Super Minify

S pluginem WP Super Minify lze soubory CSS a JavaScript zmenšit a uložit do mezipaměti. Zrychlené načítání těchto souborů je pak možné prostřednictvím Minify PHP Framework. 

Zvláštní věc na tomto pluginu je, že se jedná o open-source-software. Zdrojový kód nástroje je proto otevřený a může být dále kýmkoliv rozvíjen.

V nastavení WP Super Minify není mnoho možností. Můžete zobrazit pouze nastavení pro kompresi JavaScriptu a CSS.

Hlavní rysy WP Super Minify Plugins : 

• Komprese / redukce souborů CSS a JavaScript
• Minify PHP Framework

#3 Fast Velocity Minify

Plugin Fast Velocity Minify umožňuje pokročilou optimalizaci doby načítání. Na jedné straně snižuje požadavky HTTP sloučením souborů CSS a JavaScript a na druhé straně minimalizuje soubory pomocí PHP Minify. 

V backendu WordPress najdete po instalaci pluginu Minify řadu možností nastavení, které jistě někoho mohou i zaskočit. Dobrá věc je: Mnoho výchozích nastavení je již předdefinováno, takže laikům stačí, pokud aktivují plugin. 

Pro pokročilé uživatele nabízí plugin Fast Velocity Minify mnoho triků a možností optimalizace.

Kromě toho nabízí tento plugin také profi verzi. Tato verze vám nabízí funkce pro vyloučení různých souborů CSS a JavaScriptu. 

Nejdůležitější funkce u Fast Velocity Minify: 

• Komprese / redukce souborů HTML, CSS a JavaScript
• PHP Minify
• Vyloučení souborů a skriptů
• Statické soubory cache
• WP-CLI Podpora
• Kompatibilní s různými caching pluginy

#4 WP Rychlost světla

U pluginu WP Speed of Light jde opět o WordPress plugin, který kombinuje soubory HTML, CSS a JavaScript. Tento výkonný plugin disponuje taky kompresí cache a Gzip, systémem čištění databáze a dokonce optimalizací htacces. 

V bezplatné verzi WP Speed of Light máte všechny standardní funkce pro optimalizaci vašich webových stránek. V nastavení pluginu můžete vybrat jednotlivé skupiny (HTML, CSS, JavaScript), které chcete minimalizovat a shrnout.

Kromě toho máte k dispozici v profi verzi pluginu některé další funkce, například vyloučení nebo přesun skriptů. 

WP Speed of Light nabízí vedle čisté komprese souborů i mnoho jiných funkcí, které můžete snadno použít prostřednictvím přehledného backendu. 

Nejdůležitější funkce pluginu: 

• Komprese souborů HTML, CSS a JavaScript
• Komprese cache a gzip
• Nástroje pro skupiny
• Vyčištění databáze
• Optimalizace obrazu

Pluginy ve srovnání

	Merge + Minify + Refresh	WP Super Minify	Fast Velocity Minify	Autoptimize	Rychlost WP světla
Zdarma	ano	ano	ano	ano	ano
Vhodné pro	Začátečník	Začátečník	Pokročilí + profesionálové	Začátečník + Pokročilý	Začátečník + Pokročilý
Komprese HTML	ne	ne	ano	ano	ano
Komprese CSS	ano	ano	ano	ano	ano
Komprese Javascriptu	ano	ano	ano	ano	ano
Hodnocení	4/5	3/5	4/5	5/5	4/5

Závěr

Redukce souborů HTML, CSS nebo JavaScript může prodloužit dobu načítání vašeho webu o několik milisekund. Proto máte ve WordPressu k dispozici několik velmi užitečných a bezplatných pluginů. 

I když je to ohledně optimalizace OnPage jen pomyslná „kapka v moři", měli byste to znovu a znovu zkoušet. Tak totiž zajistíte, že nebude doba načítání vašich webových stránek negativně ovlivněna výše uvedenými soubory.