Tento článok vás zavedie do témy známej ako Minify In a tiež vám poskytne podrobnú praktickú ukážku. V tomto článku sa budeme zaoberať nasledujúcimi ukazovateľmi,
- Čo je minifikácia?
- Prečo je potrebná minifikácia?
- Ako minifikujete CSS, JS, HTML kód?
- Kedy by ste to mali urobiť?
- Výhody minifikácie?
Ako už názov napovedá, minifikácia je o minimalizácii veľkosti súboru. V kódovej základni máme slobodu minifikovať súbory HTML, CSS alebo Javascript. Tu budeme diskutovať o minifikácii súboru CSS.
Keď vývojár kóduje, ubezpečuje sa, že je kód v najlepšie čitateľnom formáte, aby sa zjednodušil proces ďalších zmien. Názvy premenných sú teda vo formáte, ktorý je ľahko zrozumiteľný a zaberajú veľa znakov. Potom tiež pridajú dostatočné množstvo prázdnych medzier, aby boli dostatočne čitateľné.
Ale v celom procese máme tendenciu uvoľňovať reťazce, ktoré zväčšujú veľkosť nášho súboru, čo zase zvyšuje čas načítania webových stránok. Najmä pri webových stránkach, ktoré majú veľkú časť funkcií a doplnkov, dlhšia kódová základňa webové stránky iba zhoršuje.
Google má aj tak obmedzený formát na hodnotenie webových stránok na svojej vyhľadávacej stránke na základe optimálneho používateľského zážitku, ktorý webové stránky poskytujú. Čím lepšie sa vaše webové stránky načítajú, tým lepšie sa vaše webové stránky umiestnia na vyhľadávacej stránke.
Ak máte o toľko záujem, nechcete, aby vaši používatelia trpeli zlou dobou načítania stránok a prešli na ďalšiu. Preto je minifikácia kódu mimoriadne dôležitá.
Pri vytváraní webových stránok vieme, čo sa skladá z maximálnej kódovej základne?
Všetko je o CSS, HTML a Javascript. Dnešná súťaž o to, aby vaša webová stránka vyzerala vizuálne príťažlivo, veľmi zdôrazňuje súbor CSS a bez toho, aby sme si uvedomovali, že náš web využívame s ťažkým kódom.
Vstupy, minifikácia ..
Pokračujeme v tomto článku o Minify CSS
Čo je minifikácia ?
Minifikácia vám umožňuje zredukovať váš kód na minimálnu veľkosť súboru, čo neovplyvní kód a ešte zmenší veľkosť súboru. V tomto procese môžete odstrániť nepotrebné medzery a znaky, ktoré nikde neovplyvnia originalitu vášho webu. Kódexu by ste sa mali vyhnúť:
- Medzery
- Nové riadkové znaky
- Blokovať oddeľovače
- Pripomienky
- Skrátenie názvov premenných
Tieto faktory nezahŕňajú to, aby sa vaša webová stránka spustila, iba aby bol súbor ťažší a predĺžil sa čas načítania webovej stránky.
Čitateľnosť kódu je úplne vylúčená z toho, čomu stroj rozumie. Webový prehliadač nepotrebuje na pochopenie a spustenie medzi riadkami ďalšie medzery. Skúste ich teda zmenšiť a minimalizovať CSS a HTML kód.
Uveďme si príklad:
argumenty príkazového riadku v príklade kódu Java
#myContent {font-family: Montserrat} #myContent {font-size: 90%}Minifikujte moje CSS
V pôvodnom a minifikovanom súbore takmer rozdiel 48%. Znížené o 178 bajtov. Po minifikácii
#myContent {font-family: Arialfont-size: 90%}Ahoj svet!
Pokračujeme v tomto článku o Minify CSS
Prečo je minifikácia treba?
Aby sa zlepšila doba načítania webových stránok. Nikto nemá rád čakanie na načítanie webových stránok podľa pohodlia. Keďže je k dispozícii toľko možností, ľudia majú tendenciu prechádzať na iné. Je teda lepšie zmenšiť veľkosť súboru.
Pokračujeme v tomto článku o Minify CSS
Ako sa máš minifikovať CSS, JS, HTML kód?
Na minimalizáciu je k dispozícii online množstvo nástrojov, ktoré vám môžu pomôcť znížiť základňu kódov. Môžete sa tiež prihlásiť na manuálnu registráciu, ale pre väčšiu kódovú základňu je vhodné použiť ktorýkoľvek z nasledujúcich nástrojov na minifikáciu vášho súboru CSS:
CSSminifier.com: Mimoriadne jednoduchý nástroj na používanie. Stačí skopírovať kód na ľavú stranu, vygenerovať minifikovaný súbor a stiahnuť ho. Minifikovaný súbor bude mať príponu .min.
Váš minifikovaný súbor CSS bude mať príponu demo.min.css.
Smallseotools.com: Buď skopírujte kód, alebo nahrajte súbor s kódom. Minifikuje váš kód a umožní vám ho skopírovať alebo stiahnuť.
Automatická optimalizácia: Toto je doplnok, ktorý môžete pridať do svojich nástrojov WordPress. Ako doplnok sa môžete rozhodnúť, že svoj kód CSS kde-tu minifikujete.
Pre vývojárov je jednoduchšie pochopiť, kedy je súbor minifikovaný a kedy nie. Minifikovaný súbor bude mať príponu .min.
Pokračujeme v tomto článku o Minify CSS
Kedy by ste to mali urobiť?
Minifikácia by sa mala robiť predovšetkým vtedy, keď ste napísali kód a musíte ho na odpoveď poslať na server. Po minifikácii súborov sa tieto verzie používajú na distribúciu používateľom.
Výhody minifikácia ?
Zmenšenie veľkosti súboru: Odstránením zvláštnych medzier, zmenšením názvov premenných a odstránením komentárov sa veľkosť súboru takmer zníži o 30 - 60%. Rýchlejšie načítanie: Vďaka menšiemu počtu údajov na odoslanie cez sieť sa web načítava rýchlejšie ako predtým. Nižšie náklady na šírku pásma: Keď sa odstránia nepotrebné údaje, potrebná šírka pásma je oveľa menšia, rovnako ako náklady.
Na čo treba pamätať:
Ešte pred pokusom o minifikáciu sa uistite, či váš kód neznižuje limity. Tok by sa nemal narušiť a funkčnosť by mala zostať bez tváre. Musíte skontrolovať, či aj po minifikácii beží váš kód podobným spôsobom.
Najlepšie je, že vždy môžete mať pripravenú šablónu. Vykonajte zmeny v zabudovanej šablóne, ktorá vám ušetrí štedré množstvo času.
Je to podobné ako kompresia?
No, dôrazne NIE. minifikácia je iná ako kompresia. Vďaka kompresii sa zmenšený súbor zmenšuje viac, ale neovplyvňuje to štýl a štruktúru kódu.
Súbor sa minifikuje a potom komprimuje ako súbor zip a odošle sa po sieti, keď klient požaduje prístup na web. Súbor je potom nekomprimovaný a použitý.
Príklady:
Pred minifikáciou:
Portfólio
- Domov
Po minifikácii:
Portfólio
- Domov
Tento kód je pre človeka určite ťažšie čitateľný a zrozumiteľný, ale rovnako pravdepodobné je aj pre vykreslenie stroja. Stroj sa naozaj nestará o krásu kódu a medzery, rozumie podstate a pracuje podľa toho.
Dostatočne zaujatý technikou minifikácie?
Potom vyskúšajte sami. Znížte zaťaženie svojho súboru a nechajte svoj web voľne plynúť všetkým používateľom!
Týmto sa dostávame na koniec tohto článku o službe Minify In CSS.
Ak sa chcete dozvedieť viac informácií o vývoji webu, pozrite si stránku od Edureka. Osvedčenie o školení v oblasti vývoja webových stránok vám pomôže Naučte sa, ako vytvárať pôsobivé webové stránky pomocou HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a ako ich nasadiť do služby Amazon Simple Storage Service (S3).
Ak stále máte záujem Ak máte akékoľvek otázky, môžete ich uverejniť v sekcii komentárov tohto blogu „Minify In CSS“ a my sa vám ozveme čo najskôr.