minify css html

Jak minify: Snížit CSS, HTML a JavaScript

Snížení HTML, CSS a JavaScriptu je jedním z mnoha malých nastavovacích šroubů pro optimalizaci rychlosti načítání vašich webových stránek. Pokud se dnes podíváte na různé stránky na internetu, rychle si uvědomíte, ž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ý se často skládá z HTML, CSS a JavaScriptu. Na jedné straně je to způsobeno řadou funkcí, které jsou nyní k dispozici pro webové stránky, ale také stále rozsáhlejšími návrhy a šablonami, které se používají ve webovém designu. 

Není tedy neobvyklé, že soubory HTML, CSS nebo JavaScript mají rychle velikost stovek kilobajtů. Aby bylo možné zpracovat celý tento kód v souborech a být schopen zobrazit webovou stránku, webový prohlížeč odesílá na server četné požadavky (tzv. HTTP požadavky). 

Zejména WordPress není známý tím, že poskytuje nástroje pro optimalizaci doby načítání. To je důvod, proč byste měli pravidelně kontrolovat výkon svých webových stránek WordPress.

Čí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í webových stránek, měli byste soubory komprimovat a v případě potřeby sloučit.

Co znamená minificizing?

Minifikace znamená, že všechny prvky vytvořené pro čitelnost kódu (tj. konce řádků, mezery, odsazení, zbytečné středníky a komentáře) jsou ze souboru odstraněny, aby se zmenšila velikost souboru. To také zahrnuje 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. Samozřejmě, že účinek minifikace se velmi liší v závislosti na tom, kolik z těchto prvků bylo začleněno při psaní kódu, ale velikost souboru je obvykle snížena o hodnotu mezi 20 a 40 procenty, což může být v každém případě relevantní pro vaše hodnocení ve vyhledávačích. Minificing je vždy užitečný a zřídka vede k problémům.

Co znamená komprese?

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

gzip ve společnosti Raidboxes

U Raidboxes se používá místo gzip Brotli. Jaký je rozdíl, vysvětlíme v našem článku.

Řetězce, 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ězec, ale odkaz 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 je PageSpeed Insights od společnosti Google, určitě zná tento návrh optimalizace: "Minimalizovat CSS"

Toto opatření provádí PageSpeed Insights doporučeno, pokud 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 může snížení CSS ovlivnit dobu načítání vašich webových stránek, rád bych vám ukázal pomocí vodopádového grafu z mého blogu bloggiraffe.de . Příklady jsou jen malé výňatky, ale již jasně ukazují, jak lze zkrátit dobu načítání.

Příklad 1 – Nekomprimovaný:

Jak minify: Snížit CSS, HTML a JavaScript

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

Jak minify: Snížit CSS, HTML 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 slučování souborů CSS a JavaScript? 

Jak je stručně zmíněno v článku, sloučení souborů CSS a JS kombinuje jednotlivé soubory do jednoho souboru. 

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.

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í: Supermarketu předem sdělíte, které produkty potřebujete. To vám poskytne vaše produkty v regálu, takže je musíte pouze vložit do nákupního košíku a zaplatit u pokladny. 

Výsledek: Tím, že dáte dohromady všechny produkty v polici, musíte projít supermarketem pouze jedním směrem a ušetřit neuvěřitelné množství času. To je podobné shrnutí jednotlivých kódů a skriptů vašeho webu. Abyste viděli, jak celá věc funguje v praxi, rád bych vám to ukázal na malých příkladech. 

Datová ekonomika pomáhá nejen s optimalizací výkonu.
Protože vědomé využívání zdrojů také přispívá k tomu, aby vaše webové stránky byly 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 motivů – 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 také negativně ovlivněny. Ať už má sloučení pozitivní vliv na vaše stránky nebo vede k problémům, je nakonec snadné testovat. Nebojte se, 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 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>

Minified:

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

Minified:

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

Minified:

 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 je linkcode-generator.de . Speciální "Minify Plugins" nebo Minifier může tuto práci udělat za vás. To nejen šetří čas, ale také funguje plně automaticky.

4 Minify Plugins pro WordPress

V níže uvedeném seznamu jsem uvedl pět populárních minifikačních pluginů, které budou dělat práci komprese HTML, CSS a JavaScriptu. 

Pluginy a mezipaměť

Mezipaměť stránky byste měli vymazat po instalaci nových pluginů nebo provedení změn 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 funkce Autoptimize přesune skripty do zápatí a zpozdí načítání souborů, jako jsou HTML, CSS a JavaScript, nebo mnoha dalších souborů, například Písem Google.

Autoptimize na Raidboxes

Po dlouhou dobu nebyla funkce Autoptimize kompatibilní s jinými mezipamětmi, včetně Raidboxes Mezipaměť serveru. Tento problém byl nyní opraven - Autoptimize může opět spolupracovat s Raidboxes lze použít.

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 "Nástroje" lze provést další automatické optimalizace, například pro písma Google, pro emodži a 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

#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 o tomto pluginu je, že se jedná o software s otevřeným zdrojovým kódem. Zdrojový kód nástroje je proto otevřený a může být dále rozvíjen každým.

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ě mohou některé přemoci. 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é 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
  • WP-CLI Podpora
  • Kompatibilní s různými pluginy ukládání do mezipaměti

#4 WP Rychlost světla

WP Rychlost světla

Plugin WP Speed of Light je také plugin WordPress, který kombinuje soubory HTML, CSS a JavaScript. Výkonný plugin má také kompresi mezipaměti a Gzip, systém čištění databáze a také optimalizaci 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 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 cache a gzip
  • Nástroje pro skupiny
  • Vyčištění databáze
  • Optimalizace obrazu

Pluginy ve srovnání

 Sloučit + Minify
+ Aktualizovat
WP Super
Minify
Fast Velocity
Minify
AutoptimizeRychlost WP
světla
Freeanoanoanoanoano
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 JavaScript může prodloužit dobu načítání vašeho webu o několik milisekund. K tomu máte ve WordPressu několik velmi užitečných a bezplatných pluginů. 

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.

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.