Jak Minifikovat CSS, HTML a JavaScript vašeho webu WordPress

Minifikace je jednoduchý koncept, který se často doporučuje jako krok k urychlení vašeho webu. Realita je však taková, že mnoho majitelů stránek frustruje, když se pokusí minifikovat své soubory a nakonec poruší své stránky.

tak co dává?

Minifikace často vyžaduje hodně experimentování. I když je k dispozici mnoho řešení, jak se chovají, se bude lišit od místa k webu v závislosti na tom, jaké téma a pluginy používáte.

v tomto příspěvku prozkoumáme, co je to Minifikace, její výhody a některá z populárnějších dostupných minifikačních řešení-ruční i pluginy -, která vám pomohou nasměrovat vás na správné řešení pro váš web.

co je to Minifikace?

webové stránky se skládají z mnoha různých souborů. Pokud testujete rychlost svého webu pomocí Google PageSpeed Insights, můžete získat doporučení minifikovat soubory HTML,CSS a JavaScript.

problém? Jako lidé píšeme kód obsažený v těchto souborech, abychom je mohli číst, ale počítače se nestarají o znaky, jako jsou komentáře, formátování, prázdné místo a nové řádky. Takže když narazí na tyto zbytečné znaky v souborech webových stránek, ignorují je.

to je místo, kde Minifikace přichází do obrazu. Minifikace je programovací termín, který v podstatě znamená odstranění nepotřebných znaků, které nejsou nutné pro spuštění kódu. Minifikace funguje tak, že analyzuje a přepisuje kód, aby se snížila celková velikost souborů, čímž se sníží celková velikost vašeho webu, takže se v prohlížeči uživatele načítá rychleji.

zde je například několik CSS, které můžete najít v šabloně stylů:

a:link { color: gray;}a:visited { color: green;}a:hover { color: rebeccapurple;}a:active { color: teal;}

a tady je minifikovaná verze výše uvedeného příkladu CSS:

a:link{color:gray}a:visited{color:green}a:hover{color:#663399}a:active{color:teal}

podívejte se, o kolik je Kód komprimován?

Minifikace se provádí na webovém serveru před odesláním odpovědi. Po minifikaci používá webový server menší minifikované – a mnohem rychlejší-soubory místo původních, což má za následek nižší šířku pásma bez obětování funkčnosti.

jak vysvětluje SEO expert Yoast, minifikační soubory mohou v některých případech ušetřit až 30-40% nebo dokonce 50% velikosti souboru.

proč byste měli Minifikovat soubory HTML, CSS a JavaScript

díky rychlému webu je Google nejen šťastný – a pomáhá vašemu webu ve vyhledávání vyšší-ale poskytuje lepší uživatelský zážitek pro návštěvníky vašich stránek.

existuje mnoho statistik, které objasňují, proč je rychlost webu zásadní: 40% lidí nebude čekat 3 sekundy, než se načte vaše domovská stránka, a Google doporučuje, aby se weby načetly během 2-3 sekund.

Minifikace má mnoho výhod:

• menší soubory znamená, že celková velikost stahování vašeho webu je snížena,
• návštěvníci webu budou moci načítat a přistupovat k Vašim stránkám rychleji,
• návštěvníci webu budou mít stejný uživatelský zážitek, aniž by museli stahovat větší soubory, a
• majitelé stránek získají nižší náklady na šířku pásma, protože méně dat je přenášeno přes síť.

jak Minifikovat soubory HTML, CSS a JavaScript

před minifikací souborů vašeho webu je vhodné spustit zálohu. Ještě lepší je, minifikovat soubory na staging webu, takže si můžete zkontrolovat vše je v provozuschopném stavu před provedením změn na vašem živém webu.

je také důležité porovnat rychlost stránky před a po minifikaci souborů, abyste mohli porovnat výsledky a zjistit, zda má Minifikace nějaký dopad.

Můj oblíbený web pro testování rychlosti je GTmetrix. Analyzuje výkon rychlosti vaší stránky pomocí Google PageSpeed Insights a YSlow, nástroje pro testování výkonu s otevřeným zdrojovým kódem. Poté generuje skóre a poskytuje doporučení pro vylepšení Optimalizace webu.

Mezi další skvělé nástroje pro testování rychlosti, které mohu doporučit, patří Pingdom website Speed Test a WebPageTest a otestujte svou mobilní rychlost.

ruční Minifikace souborů

ruční Minifikace souborů vyžaduje značné množství času a úsilí. Chci říct, kdo má čas odstranit jednotlivá bílá místa, řádky a nepotřebný kód ze souborů? Nuda! Také to umožňuje větší prostor pro lidské chyby. Takže bych nedoporučoval tuto metodu pro minifikaci souborů.

Naštěstí Existuje mnoho bezplatných online minifikačních nástrojů, které vám umožňují kopírovat a vkládat kód z a na váš web. Zde je stručný seznam nástrojů a doporučuji vám prozkoumat další možnosti, které by mohly pro váš web fungovat lépe.

1. Will Peavy ‚s HTML Minifier

HTML Minifier je bezplatný online nástroj pro HTML minifikaci postavený s PHP. Chcete-li tento nástroj použít, jednoduše vložte HTML do textové oblasti, včetně CSS JavaScriptu ve značce, a klikněte na tlačítko“ Minify“. Chcete-li zajistit, aby vaše skripty fungovaly po minifikaci, doporučujeme ukončit příkazy JavaScriptu středníkem a pro Komentáře použít syntaxi**.

2. CSS Minifier

další bezplatný nástroj, CSS Minifier funguje tak, že minifikuje CSS, které zkopírujete a vložíte do textové oblasti „Input CSS“. Existují možnosti pro stažení minifikovaného výstupu jako souboru. Pro vývojáře tento nástroj také poskytuje API.

3. JSCompress

JSCompress je on-line JavaScript kompresor, který vám umožní komprimovat a minifikovat JS soubory až o 80% jejich původní velikosti. Chcete-li jej použít, zkopírujte a vložte kód nebo nahrajte a zkombinujte více souborů a poté klikněte na „komprimovat JavaScript“. Tento nástroj je založen na UglifyJS 3 a babili-standalone.

ruční Minifikační nástroje pro vývojáře

pro vývojáře, kteří hledají pokročilejší možnosti, Google doporučuje tyto zdroje pro MINIFIKACI HTML, CSS a JavaScript:

• HTMLMinifier-Javascript-based HTML kompresor / minifier (s uzlem.podpora js).
• CSSNano-modulární minifier, postavený na vrcholu postcss ekosystému.
• csso-CSS minifier se strukturálními optimalizacemi.
• UglifyJS-JavaScript parser, mangler, kompresor a“ beautifier “ toolkit.

kompilátor uzavření Google je optimalizační nástroj pro JavaScript. Místo kompilace ze zdrojového jazyka do strojového kódu se kompiluje z JavaScriptu, aby se zlepšil JavaScript. Analyzuje váš kód, analyzuje jej, odstraňuje mrtvý kód a přepisuje a minimalizuje to, co zbylo. Tento nástroj také kontroluje syntaxi, odkazy na proměnné a typy a varuje před běžnými nástrahami JavaScriptu.

Minifikace souborů pomocí pluginů

k dispozici jsou některé úžasné pluginy, bezplatné i Prémiové, které mohou vaše soubory minifikovat, aniž byste museli provádět ruční kroky.

Poznámka: pro tento seznam jsem zahrnul pouze bezplatné pluginy, které jsou k dispozici v úložišti pluginů WordPress, které jsou aktuální a testované kompatibilní s nejnovějšími verzemi WordPress. Pro prémiové možnosti přejděte dolů./

1. HTML Minify

tento jednoduchý, lehký a bez potíží plugin umožňuje minifikovat HTML výstup vašeho webu. Chcete-li jej použít, vše, co musíte udělat, je nainstalovat a aktivovat plugin a automaticky minifikuje vaše označení bez nutnosti konfigurovat nastavení.

2. Minify HTML

miluji WordPress.org popis tohoto pluginu: „někdy se podívejte na značku HTML vašeho webu a všimněte si, jak nedbalý a amatérský to vypadá?“Tento plugin vyčistí a minifikuje nedbalé značení.

na rozdíl od HTML Minify plugin, tento nástroj poskytuje více možností. Obsahuje volitelnou minifikaci pro JavaScript a CSS, i když to není nepořádek s textovými oblastmi nebo Předformátovaný text. Existují také možnosti pro odstranění HTML, CSS a JavaScript Komentáře (opouštět MSIE podmíněné Komentáře), odstranění nepotřebných XHTML zavírání tagy z HTML5 prázdných prvků, a odstranění nepotřebných relativní schémata a domény z odkazů.

3. Merge + Minify + Refresh – pluginy WordPress

tento plugin dělá víc než jen minifikovat kód. Kombinuje vaše soubory CSS a JavaScript a poté minifikuje generované soubory pomocí Minify (pro CSS) a uzavření Google (pro JavaScript). Minifikace se provádí pomocí WP-Cron, takže to nemá vliv na rychlost vašeho webu.

když se změní obsah vašich souborů CSS nebo JS, jsou znovu zpracovány, takže není třeba vyprázdňovat mezipaměť. Uživatelé více stránek budou rádi vědět, že tento plugin funguje dobře v sítích.

4. JCH Optimize

JCH Optimize má spoustu pěkných funkcí pro bezplatný plugin: kombinuje a minifikuje CSS a JavaScript, minifikuje HTML, je zde komprese GZip pro kombinování souborů, generování sprite pro obrázky na pozadí a můžete vyloučit určité soubory z kombinace pro řešení konfliktů.

k dispozici je verze pro s více optimalizačními funkcemi, včetně načítání JavaScriptu asynchronně, optimalizace doručení CSS k odstranění blokování vykreslení, podpora domény CDN/cookie-less a líné načítání a optimalizace obrázků.

5. CSS Minify

Minifikace CSS s tímto pluginem nemůže být jednodušší-stačí nainstalovat, aktivovat, jít do Nastavení > CSS Minify povolit pouze jednu možnost: Optimalizovat a minifikovat CSS kód.

kód v tomto pluginu byl vidlicový z populárního pluginu Autoptimize (více o tomto pluginu níže). Autor pluginu Peter Pfeiffer má podobný plugin k dispozici pro JavaScript, Minify JavaScript.

6. Fast Velocity Minify

s více než 20 000 aktivními instalacemi a pětihvězdičkovým hodnocením je to jedna z nejoblíbenějších možností pro minifikaci souborů. Chcete-li jej použít, nainstalujte a aktivujte plugin a přejděte do Nastavení > Rychlá rychlost Minify. Tam, najdete hromadu možností konfigurace pluginu, včetně pokročilých možností pro vývojáře výjimky JavaScript a CSS, možnosti CDN,stejně informace o serveru. Výchozí nastavení však pro většinu webů funguje dobře.

plugin provádí minifikaci v reálném čase na front-endu a pouze během prvního nezasazeného požadavku. Jakmile je zpracován první požadavek, budou všechny ostatní stránky, které vyžadují stejnou sadu CSS a JavaScript, obsluhovány stejným statickým souborem mezipaměti.

7. Autoptimize

s více než 400 000 aktivními instalacemi je Autoptimize snadno nejoblíbenějším nástrojem pro minifikaci v úložišti pluginů WordPress.

Autoptimize může agregovat, minifikovat a cache skripty a styly, vložit CSS do záhlaví stránky ve výchozím nastavení a také přesunout a odložit skripty do zápatí. Existuje spousta pokročilých možností pro vývojáře a rozsáhlé API k dispozici, takže si můžete přizpůsobit Autoptimize, aby vyhovovaly specifickým potřebám vašeho webu.

8. Hummingbird Page speed Optimization

Hummingbird je relativně nový plugin do úložiště pluginů WordPress, který začal jako prémiový plugin. Bezplatná verze obsahuje velkou sbírku nástrojů pro optimalizaci webu, včetně Minifikace, což vám umožní minifikovat, umístit a kombinovat soubory pro nejvyšší výkon.

k dispozici je také skvělá funkce skenování, která vám umožní otestovat výkon vašeho webu a získat doporučení pro zlepšení vašeho webu přímo z pluginu.

Minifikace jako funkce v pluginech pro ukládání do mezipaměti WordPress

Minifikace je obecně standardní funkcí, kterou najdete v pluginech pro ukládání do mezipaměti. Zde jsou pluginy, které jsem testoval a mohu doporučit:

• WP Rocket
• W3 Total Cache
• WP Super Cache

závěr

doufám, že tento článek pro vás demystifikoval minifikaci a poskytl solidní pochopení toho, co to je a jak ji můžete použít na svůj web.

je důležité mít na paměti, že Minifikace je spíše krokem jemného doladění – můžete vidět malé zlepšení rychlosti vašeho webu, ale nebude to významné. To znamená, že je to osvědčený postup, který stojí za to implementovat kromě jiných technik výkonu a optimalizace, jako je kombinace souborů.

při minifikaci souborů se také ujistěte, že jste nakonfigurovali, otestovali, překonfigurovali, znovu otestovali, vyladili a zkontrolovali, co nejlépe funguje pro váš web, protože každý web je jiný.

pokud se vám tento příspěvek líbil, podívejte se na 6 nejlepších pluginů pro ukládání do mezipaměti WordPress ve srovnání s dalšími radami, jak urychlit váš web.