Reklama

Ak prevádzkujete webovú stránku, mali by ste už vedieť, ako na to použite správne formáty obrázkov a optimalizujte svoje obrázky pre web 10 bezplatných online obrazových nástrojov na zmenu veľkosti, prevod a optimalizáciuAk máte veľa fotografií na spracovanie a veľmi málo času, potrebujete nástroje na dávkové úpravy. Predstavujeme vám tie najlepšie šarže, ktoré sú k dispozícii online, optimalizátory alebo konvertory. Čítaj viac . Aj keď je kompresia obrazu všeobecne známou praxou, kompresia HTML má tendenciu byť prehliadaná, čo je škoda, pretože výhody sa oplatia.

V tomto článku sa zameriame na dve hlavné metódy zmenšovania súborov HTML, prečo by sa súbory HTML mali zmenšovať a ako na to.

Kompresia vs. Minification

Pokiaľ ide o optimalizáciu súborov HTML, existujú dve hlavné metódy: kompresia a minifikace. Na povrchu znejú podobne, ale v skutočnosti ide o dve odlišné techniky, takže si ich nenechajte zmiasť.

Minification

Minifikáciu môžete považovať za odstránenie nepotrebných znakov a riadkov v zdrojovom kóde. Pomyslite na odsadenie, komentáre, prázdne riadky atď. Žiadne z nich nie sú potrebné v HTML - existujú, aby uľahčili čítanie súboru. Orezaním týchto podrobností môžete oholiť veľkosť súboru bez toho, aby to malo vplyv na čokoľvek.

Vzorová stránka HTML:

Toto je hlavička
Pošlite mi e-mail na adresu [email protected].
Toto je nový odsek!
Toto je nový odsek tučným písmom a kurzívou.

Vzorová stránka HTML, minifikovaná:

Toto je hlavička
Pošlite mi e-mail na adresu [email protected].
Toto je nový odsek!
Toto je nový odsek tučným písmom a kurzívou.

Pôvodná veľkosť: 354. Minimálna veľkosť: 272. Úspory: 82 (23,16%).

Mnoho webových vývojárov a vlastníkov stránok vyhradzuje minifikáciu iba pre súbory JS a CSS, ale táto zastaraná prax je chyba. Dôležitá je aj minimalizácia HTML.

Už v roku 2000 boli nástroje na minifikáciu zriedkavé. Súbory ste museli ručne minifikovať zakaždým, keď sa niečo zmenilo. Pretože súbory HTML sa menia častejšie ako súbory JS a CSS, bolo vždy príliš únavné ich raz zmenšovať. V dnešnej dobe je to priekopa.

kompresia

Keď používatelia navštívia váš web, urobia tak pomocou protokolu HTTP. Prehliadač odošle vášmu webovému serveru žiadosť o konkrétnu stránku, webový server ju nájde a potom obsah tejto stránky odošle späť do prehliadača návštevníka.

Ale pretože protokol HTTP podporuje kompresiu, váš webový server môže stránku pred odoslaním návštevníkovi skomprimovať (za predpokladu, že kompresia je povolená v nastaveniach servera) a potom prehliadač návštevníka môže stránku dekomprimovať späť do pôvodného stavu.

Najbežnejšou kompresnou schémou je GZIP, čo je formát súboru, ktorý používa bezstratový kompresný algoritmus Ako funguje kompresia súborov?Ako funguje kompresia súborov? Naučte sa základy kompresie súborov a rozdiel medzi stratovou a bezstratovou kompresiou. Čítaj viac s názvom DEFLATE.

Algoritmus hľadá opakované výskyty textu v súbore HTML a potom tieto opakované výskyty nahradí odkazmi na predchádzajúci výskyt. Každá referencia je jednoducho dve čísla: ako ďaleko je referencia a koľko znakov odkazujeme.

Zvážte reťazec textu, ako je tento (príklad z webovej stránky GZIP):

Blah bla bla bla bla.

Algoritmus rozpoznáva nasledujúce opakovanie:

B {lah b} {lah b} {lah b} {lah b} lah.

Prvý výskyt je náš odkaz, takže nechajte:

Blah b {lah b} {lah b} {lah b} lah.

Druhý výskyt sa týka prvého výskytu, ktorý má päť znakov za sebou a päť znakov:

Blah b [5,5] {lah b} {lah b} lah.

V tomto prípade však algoritmus zistí, že nasledujúci výskyt je rovnaká postupnosť znakov, takže rozširuje referenčnú dĺžku o ďalších päť:

Blah b [5,10] {lah b} lah.

A znova:

Blah b [5,15] lah.

Algoritmus je dostatočne inteligentný na to, aby si uvedomil, že ďalšie tri znaky sú prvé tri znaky v odkaze, takže sa rozširuje o tri:

Blah b [5,18].

Teraz premýšľajte o typickom súbore HTML a o tom, koľko opakovaní existuje. Takmer každá značka, napríklad, má zodpovedajúcu uzatváraciu značku, napr. Okrem toho sa v celom texte opakuje veľa značiek, napríklad, , ,, atď. Atribúty sa často opakujú, vrátane trieda, hrefa src. Je ľahké pochopiť, prečo je kompresia GZIP s HTML taká účinná.

Jedinou nevýhodou je, že webový server potrebuje trochu viac CPU na vykonanie kompresie zakaždým, keď sa požaduje stránka. Keďže však CPU v súčasnosti nie je problémom, je takmer vždy lepšie povoliť GZIP ako ísť bez toho, aj keď máte webhosting na základnej úrovni Najlepšie webhostingové služby: zdieľané, VPS a určenéHľadáte najlepšiu webhostingovú službu pre vaše potreby? Tu sú naše najlepšie odporúčania pre váš blog alebo web. Čítaj viac .

Prečo by ste mali komprimovať a minifikovať

Existujú dve hlavné výhody, ktoré sú v dnešnom mobilnom webovom prostredí kľúčové.

Rýchlejšie načítanie stránky

V priemere môže HTML minifikátor pri základných nastaveniach zmenšiť veľkosť súboru asi o 3 percentá. Pri voliteľnom rozšírenom nastavení je možné súbor HTML znížiť o ďalšie 3 až 7 percent, čo predstavuje potenciálne zníženie až o 10 percent. To sa priamo premieta do rýchlejšieho načítania stránky.

Menšia využitá šírka pásma

Povedzme, že máte 10 súborov, z ktorých každý je zmenšený z 50 KB na 45 KB, čím sa zmenší celková veľkosť 50 kB. Povedzme, že váš web obsluhuje každý deň v priemere 1 000 návštevníkov, pričom každá návšteva má v priemere desať stránok. Samotná minifikácia HTML zníži využitie šírky pásma o 50 MB za deň (1,5 GB za mesiac).

Kompresia + minifikácia

Ako vidíte, minifikácia HTML je užitočná sama o sebe, najmä keď sa váš web zväčšuje, súbory sa zväčšujú a zvyšuje sa návštevnosť. Poznač si to Pokyny spoločnosti Google pre aplikáciu PageSpeed odporúčame minifikovať HTML, takže ak ste skeptickí, presvedčte sa, že vás presvedčia inak.

Čo je však na optimalizácii HTML skvelé, je to, že nemusíte vyberať minifikáciu ani kompresiu. Môžete urobiť oboje! V skutočnosti ste mali by urobiť oboje.

V priemere môžete očakávať, že kompresia GZIP zmenší súbor HTML o 70 až 90 percent. Použitím vyššie uvedeného príkladu s odhadom konzervatívnej kompresie by zmenšené súbory HTML prešli každý z 45 KB na 13,5 KB, čo predstavuje celkové zmenšenie 365 KB. V porovnaní s nekominifikovaným / nekomprimovaným je šírka pásma vašej stránky znížená o 365 MB za deň (11 GB za mesiac).

A okrem úspory šírky pásma sa každá stránka načíta dramaticky rýchlejšie, pretože v prehliadači koncového používateľa je potrebné iba stiahnuť 13,5 KB oproti 50 KB na stránku.

Ako komprimovať a minifikovať HTML

Našťastie ani dnes nie sú veľmi ťažké a na ich nastavenie nepotrebujete veľa technického know-how.

Doplnky WordPress

Ak prevádzkujete web WordPress, všetko, čo musíte urobiť, je nainštalovať jeden doplnok a môžete ťažiť z výhod kompresie a minifikácie.

Väčšina doplnkov pre ukladanie do vyrovnávacej pamäte robí viac ako len ukladanie stránok do vyrovnávacej pamäte. Napríklad, Najrýchlejšia vyrovnávacia pamäť WP a Celková medzipamäť W3 obaja majú nastavenia na jedno kliknutie, ktoré vám umožňujú zapnúť minifikáciu HTML a kompresiu GZIP, okrem iných funkcií, ktoré ďalej zrýchľujú načítanie stránky a znižujú využitie šírky pásma.

Ak ty iba Ak chcete minifikáciu, odporúčame Minifikujte HTML zapojiť. Je to jednoduché, podporuje HTML / CSS / JS a umožňuje trochu vylepšiť metódu minifikácie (napr. Či chcete odstrániť http: a https: z adries URL).

Statické HTML minifikátory

Ak sú vaše súbory HTML statické (t. J. Nie sú dynamicky generované prostredníctvom CMS alebo webového rámca), môžete si ponechať dve sady súborov HTML: „zdrojová“ súprava, ktorá je nesminifikovaná pre ľahkú editáciu, a „minifikovaná“ súprava, ktorú vytvoríte vždy, keď zmeníte zdrojový súbor.

Ak chcete minifikovať, použite jeden z týchto nástrojov:

• HTMLCompressor
• HTML Minifier
• HTML Minifier (odlišné od vyššie uvedeného)

Toto je realizovateľná technika, ak ste sa vzdialili od CMS, ako je WordPress, a teraz ich používate statické generátory stránok 7 dôvodov, prečo priekopať svoj CMS a zvážiť generátora statických stránokPo mnoho rokov bolo publikovanie webovej stránky pre mnohých používateľov zložité. CMS ako WordPress to zmenili, ale stále môžu byť mätúce. Inou alternatívou je generátor statických stránok. Čítaj viac .

Povoliť kompresiu GZIP

Kroky na povolenie kompresie GZIP sa môžu líšiť v závislosti od toho, aký softvér webového servera používate. Keďže Apache je najobľúbenejšou možnosťou, budeme sa zaoberať tým, ako to povoliť pomocou .htaccess.

Pripojte sa k svojmu webovému serveru pomocou FTP a potom vytvorte súbor s názvom .htaccess v koreňovom adresári. Upravte súbor .htaccess tak, aby mal nasledujúce nastavenia:

 mod_gzip_on Áno mod_gzip_dechunk Áno mod_gzip_item_include file. (html? | txt | css | js | php | pl) $ mod_gzip_item_include handler ^ cgi-script $ mod_gzip_item_include mime ^ text /.* mod_gzip_item_include mime ^ application / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Content-Encoding:.. * * Gzip.  SetOutputFilter DEFLATE. 

Nie ste si istí, či na vašom webe funguje kompresia? Otestujte ho pomocou tohto nástroja.

Ak chcete dosiahnuť najvyššiu efektívnosť, mali by ste tiež Naučte sa, ako skontrolovať, vyčistiť a optimalizovať svoj CSS 11 Užitočné nástroje na kontrolu, čistenie a optimalizáciu súborov CSSChcete vylepšiť svoj kód CSS? Tieto kontroléry a optimalizátory CSS pomôžu vylepšiť kód CSS, syntax a minimalizovať vaše webové stránky. Čítaj viac .