Oglas

Ako imate web mjesto, trebali biste znati kako to učiniti koristite prave formate slika i optimizirajte svoje slike za web 10 besplatnih internetskih alata za snimanje slika kako biste promijenili veličinu, pretvoriti i optimiziratiPotrebni su vam alati za uređivanje serija kada imate puno fotografija za obradu i vrlo malo vremena. Upoznajemo vas s najboljim resizerima, optimizatorima ili pretvaračima serije na mreži. Čitaj više . Iako je kompresija slike dobro poznata praksa, HTML kompresija ima tendenciju da se previdi, što je šteta jer su prednosti vrijedne.

U ovom ćemo članku istražiti dvije glavne metode za smanjivanje HTML datoteka, zašto se HTML datoteke trebaju smanjiti i kako to riješiti.

Kompresija vs. Reduciranje

Postoje dvije glavne metode za optimizaciju HTML datoteka: kompresija i Reduciranje. Zvuče slično na površini, ali zapravo su dvije različite tehnike, pa ih nemojte zbuniti.

Reduciranje

Minifikaciju možete smatrati uklanjanjem nepotrebnih znakova i linija u izvornom kodu. Razmislite o uvlačenju, komentarima, praznim redovima itd. Ništa od ovog nije potrebno u HTML-u - oni postoje kako bi datoteku lakše čitali. Obrezivanje ovih detalja može smanjiti veličinu datoteke bez utjecaja na bilo što.

Primjer HTML stranice:

Ovo je zaglavlje
Pošaljite mi poštu na [email protected].
Ovo je novi odlomak!
Ovo je novi odlomak podebljan i s karikom.

Uzorak HTML stranice, minimiziran:

Ovo je zaglavlje
Pošaljite mi poštu na [email protected].
Ovo je novi odlomak!
Ovo je novi odlomak podebljan i s karikom.

Izvorna veličina: 354. Minificirana veličina: 272. Ušteda: 82 (23,16%).

Mnogi web programeri i vlasnici web lokacija zadržavaju minifikaciju samo za JS i CSS datoteke, ali ova zastarjela praksa predstavlja grešku. Kombinacija HTML-a je također važna.

Još u 2000-ima alat za miniranje je bio rijedak. Morali ste ručno minificirati datoteke svaki put kada se nešto promijenilo. Budući da se HTML datoteke mijenjaju češće od JS i CSS datoteka, bilo je jednostavno previše naporno izmijeniti svaki put tada. Danas je to sporna stvar.

Kompresija

Kad korisnici posjete vašu web stranicu, to rade pomoću HTTP protokola. Preglednik šalje zahtjev vašem web poslužitelju za određenu stranicu, vaš web poslužitelj pronalazi stranicu, a zatim vraća sadržaj te stranice natrag u preglednik posjetitelja.

Ali budući da HTTP protokol podržava kompresiju, vaš web poslužitelj može komprimirati stranicu prije nego što ga pošalje posjetitelju (pod pretpostavkom komprimiranje je omogućeno u postavkama vašeg poslužitelja), a zatim preglednik posjetitelja može dekomprimirati stranicu natrag u izvorno stanje.

Najčešća je shema kompresije GZIP, koji je format datoteke koji koristi a algoritam kompresije bez gubitaka Kako funkcionira kompresija datoteke?Kako funkcionira kompresija datoteke? Naučite osnove kompresije datoteka i razliku između kompresije gubitaka u odnosu na gubitak. Čitaj više naziva DEFLATE.

Algoritam traži ponavljanja teksta u HTML datoteci, zatim zamjenjuje one ponovljene pojave s referencama na prethodnu pojavu. Svaka je referenca jednostavno dva broja: koliko je udaljena referenca i koliko znakova navodimo.

Razmotrite niz teksta poput ovog (primjer preuzet s web stranice GZIP):

Bla bla bla bla bla.

Algoritam prepoznaje sljedeće ponavljanje:

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

Prva pojava je naša referenca, pa neka to bude:

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

Druga pojava se odnosi na prvu pojavu, koja je pet znakova iza i pet znakova:

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

Ali u ovom slučaju, algoritam prepoznaje da je sljedeća pojava isti slijed znakova, pa proširuje referentnu duljinu za još pet:

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

I opet:

Blah b [5,15] lah.

A algoritam je dovoljno pametan da shvati da su tri prva znaka prva tri znaka u referenci, tako da se proteže za tri:

Bla b [5,18].

Sada razmislite o tipičnoj HTML datoteci i o tome koliko ponavljanja postoji. Gotovo svaka oznaka, kao što su, ima odgovarajuću završnu oznaku, kao što je. Nadalje, kroz njih se ponavljaju mnoge oznake, kao što su, , , itd. Atributi se također često ponavljaju, uključujući klasa, href, i src. Lako je shvatiti zašto je GZIP kompresija tako učinkovita s HTML-om.

Jedina mana je da web-poslužitelju treba malo više CPU-a da izvrši kompresiju svaki put kada se traži stranica. Ali budući da CPU danas ne brine previše, gotovo je uvijek bolje omogućiti GZIP nego bez ikakvog, čak i ako imate web hosting za ulaznu razinu Najbolje web hosting usluge: dijeljeno, VPS i namjenskiTražite najbolju web hosting uslugu za svoje potrebe? Evo naših najboljih preporuka za vaš blog ili web stranicu. Čitaj više .

Zašto biste trebali komprimirati i umanjivati

Dvije su glavne prednosti, a obje su ključne u današnjem mobilnom teškom web okruženju.

Brže opterećenje stranice

U prosjeku, HTML minifier može s osnovnim postavkama smanjiti veličinu datoteke za oko 3 posto. Uz opcionalne napredne postavke, HTML datoteka može se smanjiti za još 3 do 7 posto, a potencijalno smanjenje može biti i do 10 posto. To se izravno prevodi u brže vrijeme učitavanja stranica.

Manje propusne širine koristi

Recimo da imate 10 datoteka, svaka pomiješana s 50 KB na 45 KB, a ukupno skupljanje od 50 KB. Recimo da vaša web stranica svakodnevno posjeduje prosječno 1.000 posjetitelja, pri čemu svaki posjet u prosjeku ima deset stranica. Sama HTML minimizacija smanjuje vašu propusnost za 50 MB dnevno (1,5 GB mjesečno).

Kompresija + Minifikacija

Kao što vidite, minifikacija HTML-a je korisna sama po sebi, pogotovo kako se web mjesto povećava, datoteke postaju veće i promet se povećava. Primjetite to Googleove smjernice za brzu stranicu preporučite mijenjanje HTML-a, pa ako ste skeptični, dopustite da vas to uvjeri u suprotno.

No, ono što je sjajno u optimizaciji HTML-a je to da ne morate odabrati ni ublažavanje, niti kompresiju. Možete i jedno i drugo! U stvari, vi Treba li učiniti oboje.

U prosjeku, možete očekivati ​​da će kompresija GZIP-a smanjiti HTML datoteku za 70 do 90 posto. Korištenjem gornjeg primjera s konzervativnom procjenom kompresije, promijenjene datoteke HTML-a kretale bi se od 45 KB do 13,5 KB svaka, u ukupnom skupljanju od 365 KB. U usporedbi s neminificiranom / nekomprimiranom, sada je propusnost vašeg web mjesta smanjena za 365 MB dnevno (11 GB mjesečno).

I uz uštedu propusnosti, svaka se stranica učitava dramatično brže jer pregledač krajnjeg korisnika treba samo preuzeti 13,5 KB u odnosu na 50 KB po stranici.

Kako komprimirati i minimizirati HTML

Srećom, niti jedan od ovih dana nije jako težak, a za njihovo postavljanje ne trebate puno tehničkog znanja.

WordPress dodaci

Ako pokrenete web mjesto za WordPress, sve što trebate učiniti je instalirati jedan dodatak i možete iskoristiti prednosti kompresije i ublažavanja.

Većina dodataka za predmemoriranje čini više od jednostavnog predmemoriranja stranica. Na primjer, WP najbrži predmemorija i W3 Ukupan predmemorija obje imaju postavke jednog klika koje vam omogućuju uključenje minifikacije HTML-a i kompresije GZIP-a, među ostalim značajkama koje dodatno ubrzavaju učitavanje stranice i smanjuju korištenje propusnosti.

Ako ti samo želite minifikaciju, preporučujemo Umanjite HTML uključiti. To je jednostavno, podržava HTML / CSS / JS i omogućuje vam da malo prilagodite način minifikacije (npr. Da li ukloniti http: i https: s URL-ova).

Statički HTML Minifiers

Ako su vaše HTML datoteke statičke (tj. Ne generiraju ih dinamički CMS ili web okvir), tada možete održavati dva skupa HTML datoteka: skup "izvor", koji nije mininificiran za jednostavno uređivanje, i "minificirani" skup, koji kreirate svaki put kad napravite promjenu u izvornoj datoteci.

Za umanjivanje koristite jedan od sljedećih alata:

• HTMLCompressor
• HTML Minifier
• HTML Minifier (različito od gore navedenog)

Ovo je održiva tehnika ako ste se odmaknuli od CMS-a poput WordPress-a i sada ga koristite generatori statičkih stranica 7 razloga za ispadanje vašeg CMS-a i razmotrite statički generatorMnogo je godina objavljivanje web stranice bilo teško. CMS-ovi poput WordPressa to su promijenili, ali još uvijek mogu biti zbunjujuće. Druga alternativa je statički generator. Čitaj više .

Omogući kompresiju GZIP-a

Koraci za omogućavanje GZIP kompresije mogu se razlikovati ovisno o tome koji softver web poslužitelja koristite. Budući da je Apache najpopularnija opcija, opisat ćemo kako to omogućiti .htaccess.

Spojite se na svoj web poslužitelj pomoću FTP-a, a zatim stvorite datoteku pod nazivom .htaccess u korijenskom direktoriju. Uredite .htaccess datoteku da biste imali sljedeće postavke:

 mod_gzip_on Da mod_gzip_dechunk Da mod_gzip_item_include datoteka. (html? | txt | css | js | php | pl) $ mod_gzip_item_include handler ^ cgi-script $ mod_gzip_item_include mime ^ tekst /.* mod_gzip_item_include mime ^ aplikacija / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Content-Encoding:.. * Gzip *
 SetOutputFilter DEFLATE. 

Niste sigurni da li kompresija djeluje na vašoj web lokaciji? Testirajte ga ovim alatom.

Za krajnju učinkovitost, trebali biste i vi saznajte kako provjeriti, očistiti i optimizirati CSS 11 Korisni alati za provjeru, čišćenje i optimizaciju CSS datotekaŽelite poboljšati svoj CSS kôd? Ovi CSS ispitivači i alat za optimizaciju pomoći će poboljšati CSS kôd, sintaksu i umanjiti vaše web stranice. Čitaj više .