Oglas

Če imate spletno mesto, bi morali že vedeti, kako to storiti uporabite prave oblike slik in optimizirajte svoje slike za splet 10 brezplačnih spletnih paketnih orodij za spreminjanje velikosti, pretvorbo in optimizacijoPotrebujete orodja za urejanje paketov, ko imate veliko fotografij za obdelavo in zelo malo časa. Predstavljamo vam najboljše reziserje, optimizatorje ali pretvornike, ki so na voljo v spletu. Preberi več . Kljub temu, da je stiskanje slik dobro znano, pa je stiskanje HTML običajno prezrto, kar je škoda, ker so koristi vredne.

V tem članku bomo preučili dve glavni metodi za krčenje datotek HTML, zakaj je treba datoteke HTML skrčiti in kako to storiti.

Stiskanje vs. Zmanjšanje

Kar zadeva optimizacijo datotek HTML, obstajata dva glavna načina: stiskanje in minifikacija. Na površini zvenijo podobno, a so dejansko dve različni tehniki, zato jih ne zmedite.

Zmanjšanje

Minifikacijo si lahko omislite kot odstranitev nepotrebnih znakov in vrstic v izvorni kodi. Pomislite na vdolbine, komentarje, prazne vrstice itd. V HTML-ju tega ni potrebno - obstajajo za lažjo branje datoteke. Obrezovanje teh podrobnosti lahko obrije velikost datoteke, ne da bi to vplivalo na nič.

Vzorec HTML strani:

To je Glava
Pošljite mi pošto na [email protected].
To je nov odstavek!
To je nov odstavek, krepko in poševno.

Vzorčna HTML stran, izpopolnjena:

To je Glava
Pošljite mi pošto na [email protected].
To je nov odstavek!
To je nov odstavek, krepko in poševno.

Originalna velikost: 354. Zmanjšana velikost: 272. Prihranki: 82 (23,16%).

Številni spletni razvijalci in lastniki spletnih mest rezervirajo minification samo za datoteke JS in CSS, vendar je ta zastarela praksa napaka. Pomembno je tudi miniranje HTML.

Še v 2000-ih so bila orodja za minifikacijo redka. Vsako spremembo datotek ste morali ročno pomnožiti. Ker se datoteke HTML spreminjajo pogosteje kot datoteke JS in CSS, je bilo preprosto preveč dolgočasno, da bi jih vsakič takrat spreminjali. Dandanes je to vprašanje sporno.

Stiskanje

Ko uporabniki obiščejo vaše spletno mesto, to storijo s protokolom HTTP. Brskalnik pošlje vašemu spletnemu strežniku zahtevo za določeno stran, vaš spletni strežnik najde stran, nato pa vsebino te strani vrne nazaj v brskalnik obiskovalca.

Ker HTTP protokol podpira stiskanje, lahko vaš spletni strežnik stran stisne, preden jo pošlje obiskovalcu (ob predpostavki stiskanje je omogočeno v nastavitvah vašega strežnika), nato pa lahko brskalnik obiskovalca stran razveže v prvotno stanje.

Najpogostejša shema stiskanja je GZIP, ki je oblika datoteke, ki uporablja algoritem stiskanja brez izgub Kako deluje stiskanje datotek?Kako deluje stiskanje datotek? Naučite se osnov stiskanja datotek in razlike med stiskanjem izgub v primerjavi z izgubo. Preberi več imenovano RAZLIČNO.

Algoritem poišče ponavljajoče se pojave besedila v datoteki HTML, nato pa te ponavljajoče se dogodke nadomesti s sklici na prejšnji pojav. Vsaka referenca je preprosto dve številki: kako daleč je referenca in koliko znakov navajamo.

Razmislite o nizu besedila, kot je to (primer s spletnega mesta GZIP):

Bla bla bla bla bla bla.

Algoritem prepozna naslednje ponavljanje:

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

Prvi pojav je naša referenca, zato pustite:

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

Drugi pojav se nanaša na prvi pojav, ki je za pet znakov in dolg pet znakov:

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

Toda v tem primeru algoritem prepozna, da je naslednji pojav isto zaporedje znakov, zato referenčno dolžino podaljša za nadaljnjih pet:

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

In spet:

Blah b [5,15] lah.

In algoritem je dovolj pameten, da se zaveda, da so naslednji trije znaki prvi trije znaki v referenci, zato se razširi za tri:

Blah b [5,18].

Zdaj razmislite o tipični datoteki HTML in o številu ponovitev. Skoraj vsako oznako, kot je, ima ustrezno zaključno oznako, npr. Poleg tega se številne oznake ponavljajo po vsem, npr, , , itd. Tudi atributi se pogosto ponavljajo, tudi razred, href, in src. Zlahka je razbrati, zakaj je stiskanje GZIP tako učinkovito z HTML.

Edina slabost je, da spletni strežnik potrebuje malo več CPU-ja, da izvede stiskanje vsakič, ko zahteva stran. Ker pa CPU v današnjem času ne vznemirja veliko skrbi, je skoraj vedno bolje omogočiti GZIP kot pa iti brez, tudi če imate spletno gostovanje na začetni ravni Najboljše storitve spletnega gostovanja: Shared, VPS in DedicatedIščete najboljšo spletno gostovanje za vaše potrebe? Tu so naša najboljša priporočila za vaš blog ali spletno mesto. Preberi več .

Zakaj bi morali stisniti in skrčiti

Dve glavni prednosti sta obe, ki sta danes ključni v današnjem mobilnem in težkem spletnem prostoru.

Hitrejše nalaganje strani

V povprečju lahko HTML minifier z osnovnimi nastavitvami zmanjša velikost datoteke za približno tri odstotke. Z izbirnimi naprednimi nastavitvami lahko datoteko HTML zmanjšate za nadaljnjih 3 do 7 odstotkov, kar lahko zmanjša do 10 odstotkov. To neposredno pomeni hitrejše nalaganje strani.

Manj uporabljene pasovne širine

Recimo, da imate 10 datotek, od katerih je vsaka spremenjena iz 50 KB na 45 KB in skupno skrčenje 50 KB. Recimo, da vaše spletno mesto vsak dan v povprečju obišče 1.000 obiskovalcev, kjer vsak obisk znaša deset strani. Samo minifikacija HTML zmanjša porabo pasovne širine za 50 MB na dan (1,5 GB na mesec).

Stiskanje + zmanjšanje

Kot lahko vidite, je miniranje HTML koristno samo po sebi, zlasti ko se vaše spletno mesto povečuje, datoteke se povečajo in promet poveča. Upoštevajte, da Googlove smernice za hitrost strani Priporočite, da spremenite HTML, zato če ste skeptični, naj vas prepriča v drugače.

Kar pa je pri optimizaciji HTML najboljše, je, da vam ni treba izbrati niti mešanja niti stiskanja. Lahko naredite oboje! Pravzaprav ti naj bi naredite oboje.

V povprečju lahko pričakujete, da bo stiskanje GZIP skrčilo HTML datoteko za 70 do 90 odstotkov. Z uporabo zgornjega primera z konzervativno oceno stiskanja bi spremenjene datoteke HTML znašale od 45 KB do 13,5 KB, za skupno krčenje 365 KB. V primerjavi z neminificirano / nekomprimirano je pasovna širina vašega spletnega mesta zdaj zmanjšana za 365 MB na dan (11 GB na mesec).

Poleg prihranka pri pasovni širini se vsaka stran naloži dramatično hitreje, ker brskalnik končnega uporabnika potrebuje le 13,5 KB v primerjavi s 50 KB na stran.

Kako stisniti in minimizirati HTML

Na srečo niti v teh dneh niti ni zelo težko in za njihovo nastavitev ne potrebujete veliko tehničnega znanja.

WordPress Vtičniki

Če imate spletno mesto WordPress, morate samo vstaviti en vtičnik in izkoristiti lahko prednosti stiskanja in zmanjševanja.

Večina vtičnikov za predpomnjenje naredi več kot preprosto predpomnjenje strani. Na primer WP najhitrejši predpomnilnik in W3 Skupaj predpomnilnik oba imata nastavitve z enim klikom, ki vam omogočajo, da vklopite mešanje HTML in stiskanje GZIP, med drugimi funkcijami, ki še pospešijo nalaganje strani in zmanjšajo pasovno širino.

Če ti samo želite minifikacijo, priporočamo Zmanjšajte HTML vključiti. Je preprost, podpira HTML / CSS / JS in vam omogoča, da malo prilagodite način minifikacije (npr. Ali odstranite http: in https: iz naslovov URL).

Statični HTML Minifiers

Če so vaše datoteke HTML statične (to je, da jih dinamično ne ustvarja CMS ali spletni okvir), lahko vzdržujete dva niza datotek HTML: "izvorni" niz, ki ni spremenjen za enostavno urejanje, in "minificiran" niz, ki ga ustvarite kadar koli spremenite izvorno datoteko.

Če želite spremeniti, uporabite eno od teh orodij:

• HTMLCompressor
• HTML Minifier
• HTML Minifier (različna od zgoraj)

To je izvedljiva tehnika, če ste se oddaljili od CMS-ov, kot je WordPress, in zdaj uporabljate generatorji statičnih strani 7 razlogov, da se osvobodite CMS-a in razmislite o statičnem spletnem mestuDolga leta je bilo objavljanje spletnega mesta mnogim uporabnikom težko. CMS-ji, kot je WordPress, so to spremenili, vendar so še vedno lahko zmedeni. Druga možnost je statični generator. Preberi več .

Omogoči stiskanje GZIP

Koraki za omogočanje stiskanja GZIP se lahko razlikujejo glede na to, katero programsko opremo za spletni strežnik uporabljate. Ker je Apache najbolj priljubljena možnost, bomo opisali, kako jo omogočiti z uporabo .htaccess.

Povežite se s spletnim strežnikom s pomočjo FTP in ustvarite datoteko, imenovano .htaccess v korenskem imeniku. Uredite datoteko .htaccess in nastavite naslednje:

 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 ^ text /.* mod_gzip_item_include mime ^ aplikacija / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Kodiranje vsebine:. * Gzip. *
 SetOutputFilter DEFLATE. 

Niste prepričani, ali stiskanje deluje na vašem spletnem mestu? Preizkusite ga s tem orodjem.

Za največjo učinkovitost bi morali tudi vi preberite, kako preverite, očistite in optimizirate CSS 11 Uporabna orodja za preverjanje, čiščenje in optimizacijo datotek CSSŽelite izboljšati svojo kodo CSS? Ti CSS preverjevalci in orodji za optimiziranje bodo pomagali izboljšati kodo CSS, sintakso in minificirati vaše spletne strani. Preberi več .