Snížení HTML, CSS a JavaScriptu: Tak snadně to funguje ve WordPressu

9 min.
css minifikace
Naposledy aktualizováno 02/09/2020

Minifikování HTML, CSS a JavaScript souborů je jedním z mnoha malých šroubků pro nastavení optimalizace rychlosti načítání vašich webových stránek. V tomto článku se dozvíte, co to je zmenšení CSS, HTML a spol., kolik času načítání ušetříte prostřednictvím štíhlého kódu a které WordPress pluginy vám pomohou s implementací.

Pokud se v dnešní době podíváte na webové stránky World Wide Webu, rychle si uvědomíte, že nejsou v žádném případě srovnatelné se stránkami před 10 lety. Na začátku stačil jednoduchý HTML kód a malý text. V současné době se však webové stránky skládají z rozsáhlého kódu, který se často skládá z jazyka HTML, CSS a JavaScriptu. To je částečně způsobeno řadou funkcí, které jsou nyní k dispozici pro webové stránky, ale také stále rostoucím počtem návrhů a šablon používaných ve webovém designu. 

Takže to není neobvyklé, že mají HTML, CSS nebo dokonce JavaScript soubory stovky kilobajtů. Za účelem zpracování všech těchto kódů v souborech, a aby bylo možné zobrazit webovou stránku, odesílá webový prohlížeč na server četné požadavky (tzv. HTTP requests). 

Čím více "requests" je odesíláno, tím delší je doba načítání. Chcete-li zachovat počet dotazů co nejnižší, a tedy čas načítání webových stránek, měli byste sloučit a komprimovat soubory.  

Co je to minifikace HTML, CSS a JavaScriptu?

Minifikace – to znamená co nejsilnější zmenšení velikosti souboru HTML, CSS a spol. – je součástí jakékoli dobré optimalizace OnPage. I když to představuje jen malou část doby načítání, může to být také rozhodující pro vaše hodnocení ve vyhledávačích. 

Právě WordPress není znám tím, že by poskytoval nástroje pro optimalizaci doby načítání. Proto byste měli zlepšovat výkon svých WordPress stránek v pravidelných intervalech.

RB Výkon E Kniha Newsletter 02

Zkraťte dobu načítání

Každý provozovatel webových stránek, který někdy používal nástroj jako PageSeepd Insights od Googlu, jistě zná návrh optimalizace: "snížit CSS"

Toto opatření je doporučeno od PageSpeed Insights, pokud dotazy (požadavky) načítání souborů CSS výrazně ovlivňují dobu načítání webu. Podrobné vysvětlení a objasnění dalších zpráv v nástroji lze nalézt v článku "Google Pagespeed - Nejdůležitější chybové zprávy". 

Jak snížení CSS může ovlivnit dobu načítání vašich webových stránek, bych vám chtěl ukázat na vodopádovém grafu z mého blogu bloggiraffe.de . Příklady jsou pouze malé výňatky, ale již jasně ukazují, jak lze zkrátit dobu načítání.

Příklad 1 – Nekomprimované (nesnížené):

css rekomprimované
Vodopádový graf - bez komprese souborů HTML, CSS a JavaScript

Příklad 2 - Komprimované (snížené):

css komprimované
Vodopádový graf - s kompresí souborů HTML, CSS a JavaScript

Dokonce už při načítání hlavní domény jze 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 kompresi souborů HTML, CSS a JavaScript? 

Jak je v článku krátce uvedeno, při kompresi souborů, jako je HTML, CSS a JavaScript, jsou jednotlivé soubory sloučeny do jednoho souboru. 

V důsledku toho musí prohlížeč – jehož prostřednictvím přistupujete na určitou webovou stránku – odesílat na server méně požadavků, aby mohl zobrazit webové stránky a načíst potřebné skripty.

Každodenní příklad k porozumění

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

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

Řešení: Budete sdílet se supermarketem předem, které produkty potřebujete. Ten vám připraví vaše produkty na jednu polici, takže stačí je dát do nákupního košíku a zaplatit na pokladně. 

Výsledek: Tím, že máte všechny produkty na jedné polici, stačí projít rovnou supermarketem a ušetřit spoustu času. Podobně to funguje při minifikování jednotlivých kódů a skriptů vašich webových stránek. Abyste viděli, jak celá věc funguje v praxi, ukázal bych vám to rád na malých příkladech. 

Ekonomika dat nepomáhá pouze s optimalizací výkonu.
Protože vědomé využívání zdrojů také pomáhá k udržitelnosti vašich webových stránek. Můžete si přečíst příspěvky k tématům Jak zelený je WordPress? a Green Hosting .

HTML

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

Standardní kód HTML vypadá například takto:

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

Komprimováno:

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

Standardní kód CSS vypadá například takto:

 /* 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;
}

Komprimováno:

 /* 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 skriptovací jazyk, který byl původně vyvinut pro výstup dynamického HTML ve webových prohlížečích (wikipedia.org). Dnes mají provozovatelé webových stránek možnost používat HTML a CSS. 

Standardní kód JavaScriptu (wiki.selfhtml.org) vypadá například takto:

 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);

Komprimováno:

 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); 

Pomocí výše uvedených příkladů můžete velmi pěkně vidět, jak minifikování HTML, CSS a JavaScript kódu funguje. Jako pokročilý a profesionál můžete tuto kompresi provést také ručně a k tomu použít nástroj, jako je linkcode-generator.de . Jako WordPress uživatelům vám mohou speciální "minify plugins" tuto práci odebrat. To nejen šetří čas, ale také funguje plně automaticky.

5 pluginů pro minifikaci pro WordPress

V následujícím seznamu mám pět populárních minifikačních pluginů, které práci s kompresí HTML, CSS a JavaScriptu převezmou. 

#1 Merge + Minify + Refresh

sloučení minify refresh

Jak název pluginu Merge + Minify + Refresh (sloučit + minimalizovat + aktualizovat) již říká, je zaměření tohoto nástroje na kompresi CSS a JavaScript kódu. 

Tento plugin shrnuje Cascading Style Sheets (CSS) a Javascript soubory do jednotlivých skupin. Ty jsou zase minimalizovány s Minify pro CSS a Google Closure pro JavaScript. 

Po instalaci ve WordPress vám plugin Merge + Minify + Refresh nabízí některá nastavení pro optimalizaci doby načítání vašich webových stránek.

merge minify refresh wordpresspng

Můžete například zvolit, zda chcete sloučit soubory CSS a soubory JS. Také, zda by komprese měla probíhat přes WP-Cron a zda by data měla být uložena venku nebo komprimovány v rámci souboru Gzip. 

Velmi užitečnou funkcí je tzv. „HTTP2 Server Push”. Odešle několik odpovědí na dotaz do příslušného prohlížeče najednou. 

3 nejdůležitější funkce pluginu Merge + Minify + Refresh

  • Sloučení/komprese CSS a JavaScriptu
  • HTTP2 Server Push
  • Multisiteschopný

#2 WP Super Minify

wp super minify

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

To zvláštní 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 každým uživatelem dále rozvíjen.

V nastavení WP Super Minify nemají uživatelé moc na výběr. Zde lze vidět pouze nastavení pro kompresi JavaScriptu a CSS.

wp super minif WordPress

Hlavní funkce pluginu WP Super Minify

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

#3 Fast Velocity Minify

rychlá rychlost minify

Plugin Fast Velocity Minify umožňuje optimalizaci doby načítání pro vývojáře a pokročilé uživatele. Na jedné straně snižuje požadavky HTTP sloučením souborů CSS a Javascript, a na druhé straně minimalizuje soubory s PHP Minify. 

Ve WordPress backendu najdete po instalaci minifikačního pluginu četné možnosti nastavení, které mohou jistě vyvést z míry nejednoho uživatele. Dobrá věc je, že mnoho výchozích nastavení jsou již instalovány, takže je pro laiky dostačující, aby plugin aktivovali. 

Pro pokročilé uživatele a vývojáře plugin Fast Velocity Minify nabízí mnoho možností optimalizace.

rychlá rychlost minify WordPress

Kromě toho nabízí tento plugin také pro verzi. To vám umožní vyloučit různé soubory CSS a JavaScriptu. 

Hlavní funkce Fast Velocity Minify

  • Komprese / redukce souborů HTML, CSS a JavaScript
  • PHP Minify
  • Vyloučení souborů a skriptů
  • Statické soubory mezipaměti
  • Podpora WP CLI
  • Kompatibilní s různými pluginy ukládání do mezipaměti

#4 Autoptimize

optimalizace aut

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

Přitom posouvá plugin autoptimize skripty například do zápatí a opožďuje načítání souborů, jako je HTML, CSS a JavaScript, nebo mnoho dalších souborů, jako jsou Google Fonts.

Důležité pro zákazníky od RAIDBOXES

Autoptimize není kompatibilní s jinými mezipamětěmi, např. mezipamětí serveru RAIDBOXES. Proto důrazně doporučujeme nepoužívat Autoptimize v našem systému!

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

optimalizace aut WordPress

V kartě "JS, CSS & HTML" si můžete vybrat z různých možností optimalizace pro soubory JavaScript, CSS a HTML. ''Obrázky'' umožňuje automaticky optimalizovat obrázky a zpozdit načítání obrazových souborů. 

Pod položkou menu "Extra" lze provést další automatické optimalizace, například pro Google Fonts, pro emoji a také pro načítání souborů prostřednictvím domén třetích stran. 

Hlavní funkce Autoptimize: 

  • Minimalizace / ukládání souborů HTML, CSS a JavaScript
  • Optimalizace obrázků
  • Odstranění Google Fonts
  • Odstranění emoji
  • Synchronizace JavaScriptu
  • Kompatibilní s různými pluginy ukládání do mezipaměti

#5 WP Speed of Light

wp rychlost světla

U pluginu WP Speed of Light se jedná také o WordPress plugin, který shrnuje soubory HTML, CSS a JavaScriptu. Tento výkonný plugin má také kompresi mezipaměti a Gzip, vyčištění systémové databáze, a optimalizaci htacces. 

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

wp rychlost světla WordPress

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

WP Speed of Light vám kromě čisté komprese souborů nabízí mnoho dalších funkcí, které můžete snadno používat prostřednictvím přehledného backendu. 

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

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

Pluginy v přímém srovnání

 Merge + Minify
+ Refresh
WP Super
Minify
Fast Velocity
Minify
Optimalizace autWP Speed
of Light
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
Recenzi4/53/54/55/54/5

Závěr

Snížení souborů HTML, CSS nebo JavaScriptu vám může pomoci zkrátit dobu načítání webu o několik milisekund. K tomu máte ve WordPressu na výběr některé velmi užitečné a bezplatné pluginy. 

I když je to ohledně optimalizace OnPage jen pomyslné dotahování šroubků, měl byste to znovu a znovu kontrolovat. Tím je zajištěno, že doba načítání vašich webových stránek není negativně ovlivněna výše uvedenými soubory.

Obrázek příspěvku: Paula Schmidt | Unsplash

Sven Scheuerle - Freelancer a vášnivý affiliate marketer, který je již dlouhá leta aktivní v online marketingu. Kromě toho bloguje a referuje na svém blogu BLOGGiraffe.de o samostatně výdělečné činnosti v online podnikání a dává svým čtenářům tipy a triky.

Podobné články

Komentáře k tomuto článku

Napsat komentář

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