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

Sven Scheuerle Naposledy aktualizováno 21.10.2020
9 min.
minifikace css
Naposledy aktualizováno 21.10.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.

Zkraťte dobu načítání

Každý provozovatel webových stránek, který kdy použil nástroj, jako je PageSeepd Insights od Googlu, jistě bude znát tento návrh optimalizace: "Omezit CSS"

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

Jak snížení CSS může ovlivnit dobu načítání vašeho webu, rád bych vám ukázal s vodopádovým diagramem z mého blogu bloggiraffe.de.  Příklady jsou pouze malé sekce, ale již jasně ukazují, jak zkrátit dobu načítání.

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

css znovu komprimováno
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 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á strašně dlouho, než najdete každý produkt a dáte ho do nákupního košíku. 

Řešení: Se supermarketem se předem podělíte o produkty, které potřebujete. To vám poskytne vaše produkty v poličce, takže je musíte dát pouze do nákupního košíku a zaplatit u pokladny. 

Výsledek: Tím, že dáte dohromady všechny produkty v poličce, stačí projít jedním směrem supermarketem a ušetřit tolik času. Tak to funguje s minifikací jednotlivých kódů a skriptů vašich webových stránek. Abyste viděli, jak to celé funguje v praxi, rád bych vám to ukázal malými příklady. 

Datová ekonomika nepomáhá pouze s optimalizací výkonu.
Protože vědomé využívání zdrojů také pomáhá učinit váš web udržitelnějším. Přečtěte si příspěvky k tématům Jak je zelená WordPress ? a Zelený 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. 

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>

Komprimované: 

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

Komprimované:

 /* 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 rozšířené HTML a CSS. 

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

Komprimované: 

 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 funguje minifikace kódu HTML, CSS a JavaScript. Jako pokročilý a profesionální můžete tuto kompresi provádět také ručně pomocí nástroje, jako je linkcode-generator.de. Jako WordPress -Uživatelé vám mohou dát speciální "Minify Plugins " vzít tuto práci. 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čit aktualizaci minify

Jak název Plugins Merge + Minify + Refresh říká, že tento nástroj se zaměřuje na kompresi kódu CSS a JavaScriptu. 

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 do WordPress vám nabízí Plugin Sloučit + Minify + Aktualizovat některá nastavení pro optimalizaci doby načítání vašeho webu.

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 merge + minify + refresh Plugins : 

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

#2 WP Super Minify

wp super minify

S Plugin WP Super Minify lze škálovat a ukládat do mezipaměti v souborech CSS a JavaScript. 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 není pro uživatele mnoho možností. Zde můžete vidět pouze nastavení pro kompresi JavaScriptu a CSS.

wp super minif wordpress

Hlavní rysy WP Super Minify Plugins : 

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

#3 Fast Velocity Minify

rychlá rychlost minify

Tá 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 pomocí 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 mnoho her a 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í rysy 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

automatická optimalizace

Tá WordPress - Plugin Autoptimize vám poskytuje 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. 

Tím autoptimizuje- Plugin Skripty například v zápatí a zpožďují načítání souborů, jako jsou HTML, CSS a JavaScript, nebo mnoha dalších souborů, jako jsou Písma Google.

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

Autoptimizace není kompatibilní s jinými mezipamětmi, např. RAIDBOXES Mezipaměť serveru. Proto důrazně nedoporučujeme použí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é.

automatická optimalizace wordpressu

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í rysy 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

rychlost světla wp

V případě Plugin Rychlost světla WP je také WordPress - Plugin , který shrnuje soubory HTML, CSS a JavaScript. Mocní Plugin má také mezipaměť a kompresi Gzip, systém vyčištění databáze a optimalizaci htacces. 

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

wp rychlost lehkého wordpressu

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

Kromě čisté komprese souborů nabízí WP Speed of Light mnoho dalších funkcí, které můžete snadno použít prostřednictvím jasného back-endu. 

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í

 Sloučit + Minify
+ Aktualizovat
WP Super
Minify
Rychlá rychlost
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
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 *.