minify css html

Jak minifikovat: Redukce CSS, HTML a JavaScript

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 všechny prvky vytvořené pro čitelnost kódu (tj. konce řádků, mezery, odsazení, nadbytečné středníky a komentáře) jsou ze souboru odstraněny, aby se zmenšila jeho velikost. Což zahrnuje i převod složitějších výrazů na jednodušší výrazy. Dokonce i identifikátory proměnných lze zkrátit například nahrazením proměnné numberOfButtons za n. Účinek minifikace se pochopitelně velmi liší v závislosti na tom, kolik z těchto prvků bylo začleněno při psaní kódu, ale velikost souboru se obvykle sníží o 20 a 40 procent, což může být v každém případě relevantní pro vaše hodnocení ve vyhledávačích. Minifikace je vždy užitečná a jen zřídka způsobuje potíže.

Co znamená komprese?

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

gzip u Raidboxes

U Raidboxes se používá místo gzip Brotli. Jaký je v tom rozdíl, vysvětlujeme v tomto článku.

Ř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ý:

Jak minifikovat: Redukce CSS, HTML a JavaScript

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

Jak minifikovat: Redukce CSS, HTML a JavaScript

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.

Sloučení souborů

Čím více požadavků" je odesláno, tím delší je doba načítání. Aby byl počet dotazů, a tím i doba načítání webových stránek co nejnižší, měli byste soubory sloučit.

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. kombinací pluginů a šablon – může sloučení css souborů a zejména JavaScriptu bohužel také vést k problémům. Hodnota LCP nebo jiné hodnoty Web Vitals mohou být pak negativně ovlivněny. Ať už má sloučení pozitivní vliv na vaše stránky nebo vede k potížím, je potřeba prostě testovat. Ale žádný strach, nastavení můžete kdykoli vrátit zpět.

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. 

Pluginy a mezipaměť

Cache stránky byste měli vymazat po instalaci nových pluginů nebo provedení změn v nastavení.

#1 Autoptimize

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.

Autoptimize u Raidboxes

Po dlouhou dobu nebyla funkce Autoptimize kompatibilní s jinými mezipamětmi, včetně Raidboxes server cache. Tento problém byl nyní napraven – Autoptimize může opět bez problémů spolupracovat s Raidboxes.

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

Automatická optimalizace WordPressu

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

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.

WP Super Minify WordPress

Hlavní rysy WP Super Minify Plugins : 

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

#3 Fast Velocity Minify

Rychlé minifikace rychlosti

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.

Rychlá rychlost Minify WordPress

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

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.

WP Rychlost světla WordPress

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
AutoptimizeRychlost WP
světla
Zdarmaanoanoanoanoano
Vhodné proZačátečníkZačátečníkPokročilí + profesionálovéZačátečník + PokročilýZačátečník + Pokročilý
Komprese HTMLneneanoanoano
Komprese CSSanoanoanoanoano
Komprese Javascriptuanoanoanoanoano
Hodnocení4/53/54/55/54/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.

Líbil se vám tento článek?

Svou recenzí nám pomůžete zlepšit náš obsah.

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena *.