Tento článek vás seznámí s tématem známým jako Minify In a také vám poskytne podrobnou praktickou ukázku. V tomto článku se budeme zabývat následujícími ukazateli,
- Co je minifikace?
- Proč je nutná minifikace?
- Jak minifikujete CSS, JS, HTML kód?
- Kdy byste to měli udělat?
- Výhody minifikace?
Jak nám název docela dobře naznačuje, minifikace je o minimalizaci velikosti souboru. V kódové základně máme možnost minifikovat soubory HTML, CSS nebo Javascript. Zde budeme diskutovat o zhuštění souboru CSS.
Když vývojář kóduje, ujistí se, že je kód v nejlépe čitelném formátu, aby se zjednodušil proces dalších změn. Názvy proměnných jsou tedy ve formátu, který je snadno srozumitelný, a zabírají spoustu znaků. Poté také přidají dostatečné množství mezer, aby byly dostatečně čitelné.
Ale v celém procesu máme tendenci uvolňovat řetězce, které zvětšují naši velikost souboru, což zase zvyšuje dobu načítání webových stránek. Zejména u webů, které mají velké množství funkcí a doplňků, delší kódová základna web jen zhoršuje.
Google má každopádně omezený formát pro hodnocení webů na stránce vyhledávání na základě optimálního uživatelského dojmu, který weby poskytují. Čím lépe se váš web načítá, tím lépe se váš web řadí na vyhledávací stránku.
S tak velkým sázením nechcete, aby vaši uživatelé trpěli kvůli špatné době načítání stránek a přesunuli se na další. Proto je minifikace kódu nesmírně důležitá.
Při vytváření webových stránek víme, co se skládá z maximální kódové základny?
Je to všechno o CSS, HTML a Javascript. Dnešní soutěž o to, aby váš web vypadal vizuálně přitažlivě, hodně zdůrazňuje soubor CSS, aniž bychom si uvědomili, že náš web využíváme s těžkým kódem.
Vstupy, minifikace ..
Pokračujeme tímto článkem o Minify CSS
Co je minifikace ?
Minifikace umožňuje snížit kód na minimální velikost souboru, což neovlivní kód a přesto zmenší velikost souboru. V tomto procesu můžete odstranit zbytečné mezery a znaky, které nikde neovlivní originalitu vašeho webu. Několik věcí, kterým by se měl kód vyhnout, je:
- Mezery
- Nové řádkové znaky
- Blokovat oddělovače
- Komentáře
- Zkrácení názvů proměnných
Tyto faktory nezahrnují to, aby se vaše webové stránky spouštěly, místo toho jen ztěžují soubor a prodlouží dobu načítání webu.
Čitelnost kódu zcela vylučuje to, čemu stroj rozumí. Webový prohlížeč nepotřebuje další mezery mezi znaky, aby jim porozuměl a fungoval. Zkuste je tedy zmenšit a minifikovat CSS a HTML kód.
Uveďme si příklad:
co dělá .innerhtml
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Minifikujte můj CSS
Téměř rozdíl 48% v původním a minifikovaném souboru. Sníženo o 178 bajtů. Po minifikaci
#myContent {font-family: Arialfont-size: 90%}Ahoj světe!
Pokračujeme tímto článkem o Minify CSS
Proč je minifikace potřeboval?
Pro zkrácení doby načítání webu. Nikdo nemá rád čekání na načtení webových stránek podle pohodlí. Když je k dispozici tolik možností, lidé mají tendenci přejít na jinou. Je tedy lepší zmenšit velikost souboru.
Pokračujeme tímto článkem o Minify CSS
Jak se máš minifikovat CSS, JS, HTML kód?
K minimalizaci je online k dispozici mnoho nástrojů, které vám mohou pomoci snížit základ kódu. Můžete se také přihlásit ručně, ale pro větší kódovou základnu je vhodné použít některý z následujících nástrojů k minifikaci souboru CSS:
CSSminifier.com: Velmi jednoduchý nástroj k použití. Stačí zkopírovat kód na levé straně, vygenerovat minifikovaný soubor a stáhnout jej. Minifikovaný soubor bude mít příponu .min.
Váš minifikovaný soubor CSS bude mít příponu demo.min.css.
Smallseotools.com: Buď zkopírujte svůj kód, nebo nahrajte soubor s kódem. Minifikuje váš kód a umožní vám jej zkopírovat nebo stáhnout.
Automatická optimalizace: Jedná se o plugin, který můžete přidat do svých nástrojů WordPress. Jako plugin se můžete rozhodnout, že svůj CSS kód minifikujete.
Pro vývojáře je snazší pochopit, kdy je soubor minifikován a kdy ne. Minifikovaný soubor bude mít příponu .min.
Pokračujeme tímto článkem o Minify CSS
Kdy byste to měli udělat?
Minifikace by měla být primárně provedena, když jste napsali kód a musíte jej poslat na server pro odpověď. Jakmile jsou soubory minifikovány, jsou minifikované verze použity k distribuci uživatelům.
Výhody minifikace ?
Zmenšení velikosti souboru: Odstraněním zvláštních mezer, zmenšením názvů proměnných a odstraněním komentářů se velikost souboru téměř sníží o 30-60%. Rychlejší načítání: S menším počtem dat pro odesílání po síti se web načítá rychleji než dříve. Nižší náklady na šířku pásma: Když jsou odstraněna nepotřebná data, potřebná šířka pásma je mnohem menší, stejně jako náklady.
Věci k zapamatování:
Ještě před pokusem o minifikaci se ujistěte, že váš kód nepřekračuje limity. Tok by neměl být narušen a funkce by měla zůstat anonymní. Musíte zkontrolovat, že i po minifikaci běží váš kód podobným způsobem.
Infact, jako osvědčený postup můžete vždy připravit šablonu. Proveďte změny ve vestavěné šabloně, což vám ušetří velkorysé množství času.
Je to podobné jako komprese?
No, silně NE. minifikace se liší od komprese. Díky kompresi se zmenšený soubor zmenší více, ale neovlivní styl a strukturu kódu.
Soubor je minifikován a poté komprimován jako zip a odeslán po síti, když klient požaduje přístup na web. Soubor je poté nekomprimován a použit.
Příklady:
Před minifikací:
Portfolio
- Domov
Po minifikaci:
Portfolio
- Domov
Tento kód je pro člověka rozhodně těžší čitelný a srozumitelný, ale je stejně pravděpodobný i pro vykreslení stroje. Stroj se opravdu nestará o krásu kódu a řádkování, rozumí podstatě a funguje podle toho.
Dostatečně dojatý technikou minifikace?
Pak zkuste sami. Snižte zátěž svého souboru a nechte své webové stránky volně plynout pro všechny uživatele!
Tím se dostáváme na konec tohoto článku o Minify In CSS.
Pokud se chcete dozvědět více o vývoji webu, podívejte se na podle Edureka. Osvědčení o školení pro vývoj webových aplikací vám pomůže Naučte se, jak vytvářet působivé webové stránky pomocí HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a jak je nasadit na Amazon Simple Storage Service (S3).
Pokud máte stále zájem Máte-li jakékoli dotazy, můžete je zveřejnit v sekci komentářů tohoto blogu „Minify In CSS“ a my se vám ozveme co nejdříve.