Reklaam

Veebisaidi haldamisel peaksite juba teadma, kuidas seda teha kasutage õigeid pildivorminguid ja optimeerige oma pilte veebi jaoks 10 tasuta veebipõhist pakipildi tööriista suuruse muutmiseks, teisendamiseks ja optimeerimiseksKui teil on palju töödeldavaid fotosid ja väga vähe aega, vajate pakkimisredaktorit. Tutvustame teile parimaid veebipõhiselt pakutavaid partiide suuruse muutjaid, optimeerijaid või muundureid. Loe rohkem . Kuigi piltide tihendamine on üldlevinud praktika, kipub HTML-i tihendamine kahe silma vahele jääma, mis on häbi, sest eelised on väärt.

Selles artiklis käsitleme kahte peamist HTML-failide kahandamise meetodit, miks HTML-faile tuleks kahandada ja kuidas edasi minna.

Tihendus vs. Minimeerimine

HTML-failide optimeerimise osas on sellel kaks peamist meetodit: kokkusurumine ja minimeerimine. Need kõlavad pinnal sarnaselt, kuid on tegelikult kaks erinevat tehnikat, nii et ärge ajage neid segadusse.

Minimeerimine

Võite mõelda minimeerimisele kui tarbetud märkide ja ridade eemaldamisest lähtekoodis. Mõelge taandele, kommentaaridele, tühjadele ridadele jne. Ühtegi neist HTML-is ei nõuta - need on faili hõlpsamaks muutmiseks olemas. Nende detailide kärpimine võib faili mahtu vähendada, ilma et see midagi mõjutaks.

instagram viewer

HTML-lehe näidis:

Teie pealkiri siin

See on päis

Saada mulle kiri aadressil tugi@ettevõte.com.

See on uus lõik!

See on uus punkt paksus kaldkirjas.

Minimeeritud HTML-lehe leht:

Teie pealkiri siin

See on päis

Saada mulle kiri aadressil tugi@ettevõte.com.

See on uus lõik!

See on uus punkt paksus kaldkirjas.

Algne suurus: 354. Minimeeritud suurus: 272. Säästud: 82 (23,16%).

Paljud veebiarendajad ja saidiomanikud reserveerivad minimeerimise ainult JS- ja CSS-failidele, kuid see vananenud praktika on viga. Ka HTML-i minimeerimine on oluline.

2000ndatel aastatel olid minimiseerimisvahendid haruldased. Iga kord, kui midagi muudeti, pidite faile käsitsi minimeerida. Kuna HTML-failid muutuvad sagedamini kui JS- ja CSS-failid, oli tol korral iga kord minimeerimine lihtsalt liiga tüütu. Tänapäeval on see pöördeline punkt.

Tihendamine

Kui kasutajad külastavad teie veebisaiti, kasutavad nad seda HTTP-protokolli abil. Brauser saadab teie veebiserverile konkreetse lehe päringu, teie veebiserver leiab selle lehe ja saadab selle lehe sisu külastaja brauserisse tagasi.

Kuna HTTP-protokoll toetab tihendamist, saab teie veebiserver lehe enne külastajale saatmist tihendada (eeldusel, et: tihendamine on teie serveri seadetes lubatud) ja siis saab külastaja brauser lehe tagasi algsele olekule.

Kõige tavalisem tihendusskeem on GZIP, mis on failivorming, mis kasutab a kadudeta pakkimisalgoritm Kuidas failide tihendamine töötab?Kuidas failide tihendamine töötab? Siit saate teada failide pakkimise põhitõdesid ja erinevust kadudeta ja kadudeta pakkimise vahel. Loe rohkem mida nimetatakse DEFLATE.

Algoritm otsib HTML-failis teksti korduvaid esinemisi, seejärel asendab need korduvad esinemised viidetega varasemale esinemisele. Iga viide on lihtsalt kaks numbrit: kui kaugel on viide ja kui palju märke me viitame.

Vaatleme sellist tekstistringi (näide võetud GZIP-i veebisaidilt):

Blah blah blah blah blah.

Algoritm tunneb ära järgmise korduse:

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

Esimene esinemine on meie viide, nii et jäta:

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

Teine juhtum viitab esimesele sündmusele, mis on viis tähemärki taga ja viis tähemärki pikk:

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

Kuid sel juhul tuvastab algoritm, et järgmine esinemine on sama tähemärkide jada, nii et see pikendab võrdluspikkust veel viie võrra:

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

Ja jälle:

Blah b [5,15] lah.

Ja algoritm on piisavalt nutikas, et mõista, et järgmised kolm märki on viites kolm esimest tähemärki, seega laieneb see kolme võrra:

Blah b [5,18].

Mõelge nüüd tüüpilisele HTML-failile ja sellele, kui palju kordusi selles sees on. Peaaegu iga silt, näiteks, omab vastavat sulgemissilti, nagu. Lisaks korduvad paljud sildid kogu maailmas, näiteks, , ,, jne. Atribuute korratakse ka sageli, sealhulgas klass, hrefja src. On lihtne mõista, miks GZIP-i tihendamine HTML-iga nii tõhus on.

Ainus negatiivne külg on see, et veebiserver vajab iga lehe nõudmise korral tihendamise teostamiseks natuke rohkem CPU-d. Kuid kuna protsessor ei valmista tänapäeval suurt muret, on peaaegu alati parem lubada GZIP kui minna ilma, isegi kui teil on algtaseme veebimajutus Parimad veebimajutusteenused: jagatud, VPS ja pühendatudKas otsite oma vajadustele parimat veebimajutusteenust? Siin on meie parimad soovitused teie ajaveebi või veebisaidi kohta. Loe rohkem .

Miks peaksite tihendama ja minimeerima

Sellel on kaks peamist eelist, mis mõlemad on üliolulised tänapäeval mobiiltelefonidele mõeldud veebimaastikul.

Kiirem lehe laadimine

HTML-i minimeerija saab põhiseadetega vähendada faili suurust umbes 3 protsenti. Valikuliste täpsemate sätete korral saab HTML-faili vähendada veel 3–7 protsenti, võimaliku vähendamise korral kuni 10 protsenti. See tähendab otseselt kiiremat lehe laadimisaega.

Vähem ribalaiust kasutatud

Oletame, et teil on 10 faili, igaüks minimeerituna 50 kB-st 45 kB-ni, kokku kokku 50 kB. Ja oletame, et teie veebisait teenib päevas keskmiselt 1000 külastajat, kus iga külastuse keskmine on kümme lehekülge. Ainuüksi HTML-i minimeerimine vähendab ribalaiuse kasutamist 50 MB päevas (1,5 GB kuus).

Tihendamine + minimeerimine

Nagu näete, on HTML-i minimeerimine iseenesest kasulik, eriti kui teie sait kasvab suuremaks, failid suurenevad ja liiklus suureneb. Pange tähele Google'i PageSpeed ​​juhised soovitage HTML viimistleda, nii et kui olete skeptiline, laske sellel veenda teid teisiti.

Kuid HTML-i optimeerimise juures on suurepäraselt see, et te ei pea valima minimeerimist ega tihendamist. Saate teha mõlemad! Tegelikult sina peaks tee mõlemad.

Kuidas tihendatud HTML töötab ja miks teil seda vaja võib minna, proovige html-koodi

Keskmiselt võite oodata, et GZIP-i kokkusurumine kahandab HTML-faili 70–90 protsenti. Ülaltoodud näite kasutamisel koos konservatiivse pakkimisprognoosiga läheks minimeeritud HTML-failide suurus 45 kB - 13,5 kB, kokku kahanemise korral 365 kB. Võrreldes peenestamata / tihendamata on teie saidi ribalaius nüüd 365 MB päevas (11 GB kuus) vähenenud.

Lisaks ribalaiuse kokkuhoiule laadib iga leht dramaatiliselt kiiremini, kuna lõppkasutaja brauser peab alla laadima ainult 13,5 KB versiooni 50 KB lehe kohta.

Kuidas HTML-i tihendada ja minimeerida

Õnneks pole kumbki tänapäeval eriti keeruline ja nende seadistamiseks ei vaja te palju tehnilisi teadmisi.

WordPressi pistikprogrammid

Kui käitate WordPressi saiti, peate installima ainult ühe pistikprogrammi ja saate kasutada nii pakkimise kui ka minimeerimise eeliseid.

Enamik vahemälupistikprogramme teeb midagi enamat kui lihtsalt vahemälulehed. Näiteks, WP kiireim vahemälu ja W3 kogu vahemälu mõlemal on ühe klõpsuga seaded, mis võimaldavad teil HTML-i minimeerimise ja GZIP-i tihendamise sisse lülitada muude funktsioonide hulgas, mis kiirendavad veelgi lehe laadimist ja vähendavad ribalaiuse kasutamist.

Kui sa ainult soovite minimeerimist, soovitame Minimeeri HTML sisse panema. See on lihtne, toetab HTML / CSS / JS ja võimaldab teil minimeerimismeetodit natuke näpistada (nt kas eemaldada http: ja https: URL-idelt).

Staatilised HTML-minifikaatorid

Kui teie HTML-failid on staatilised (st pole CMS-i või veebiraamistiku abil dünaamiliselt loodud), saate säilitada kahte HTML-failide komplekti: "lähtekogumi" komplekt, mis on redigeerimata lihtsaks redigeerimiseks, ja "minimeeritud" komplekt, mille saate luua igal ajal, kui teete muudatusi lähtefailis.

Minimeerimiseks kasutage ühte järgmistest tööriistadest:

  • HTMLCompressor
  • HTML-i minimeerija
  • HTML-i minimeerija (erinev ülaltoodust)

See on elujõuline tehnika, kui olete eemaldunud CMSidest, nagu WordPress, ja kasutate nüüd staatilised saidigeneraatorid 7 põhjust, miks oma CMS-i kõrvale kalduda ja kaaluda staatilise saidigeneraatori kasutamistAastaid oli veebisaidi avaldamine paljude kasutajate jaoks keeruline. CMS-id nagu WordPress muutis seda, kuid need võivad siiski segadusse ajada. Teine alternatiiv on staatilise saidi generaator. Loe rohkem .

Luba GZIP tihendamine

GZIP-i tihendamise lubamise sammud võivad sõltuvalt kasutatavast veebiserveri tarkvarast erineda. Kuna Apache on kõige populaarsem valik, käsitleme, kuidas see .htaccessi abil lubada.

Ühendage FTP-ga oma veebiserveriga ja looge siis fail nimega .htaccess juurkataloogis. Redigeerige .htaccess-faili järgmiste sätetega:

 mod_gzip_on Jah mod_gzip_dechunk Jah mod_gzip_item_include file. (html? | txt | css | js | php | pl) $ mod_gzip_item_include handler ^ cgi-script $ mod_gzip_item_include mime ^ tekst /.* mod_gzip_item_include mime ^ application / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Sisu kodeerimine:. * Gzip. *
 SetOutputFilter DEFLATE. 

Kas pole kindel, kas pakkimine töötab teie veebisaidil? Testige seda selle tööriistaga.

Ülim efektiivsuse saavutamiseks peaksite ka seda tegema saate teada, kuidas oma CSS-i kontrollida, puhastada ja optimeerida 11 Kasulikud tööriistad CSS-failide kontrollimiseks, puhastamiseks ja optimeerimiseksKas soovite oma CSS-koodi täiustada? Need CSS-kabe ja optimeerijad aitavad parandada CSS-i koodi, süntaksit ja minimeerida teie veebilehti. Loe rohkem .

Joel Lee'l on B.S. arvutiteaduses ja üle kuue aasta kestnud erialase kirjutamise kogemus. Ta on MakeUseOfi peatoimetaja.