Cum funcționează HTML comprimat și de ce este posibil să aveți nevoie de el

Cum funcționează HTML comprimat și de ce este posibil să aveți nevoie de el

Dacă rulați un site web, ar trebui să știți deja cum să faceți acest lucru utilizați formatele de imagine potrivite și optimizați-vă imaginile pentru web. Cu toate acestea, în timp ce compresia imaginii este o practică bine cunoscută, compresia HTML tinde să fie ignorată, ceea ce este păcat, deoarece beneficiile merită.





În acest articol, vom trece în revistă cele două metode principale pentru micșorarea fișierelor HTML, de ce ar trebui micșorate fișierele HTML și cum să procedăm.



Compresie vs. Minificare

În ceea ce privește optimizarea fișierelor HTML, există două metode principale pentru aceasta: comprimare și minificare . Sună asemănător la suprafață, dar sunt de fapt două tehnici distincte, deci nu le confundați.





Minificare

Vă puteți gândi la minificare ca la eliminarea caracterelor și liniilor inutile din codul sursă. Gândiți-vă la indentare, comentarii, linii goale etc. Niciuna dintre acestea nu este necesară în HTML - există pentru a ușura citirea fișierului. Tunderea acestor detalii poate reduce dimensiunea fișierului fără a afecta nimic.

Exemplu de pagină HTML:





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

Dimensiune originală: 354. Dimensiune minimă: 272. Economii: 82 (23,16%).

Mulți dezvoltatori web și proprietari de site-uri își rezervă minificarea numai pentru fișierele JS și CSS, dar această practică învechită este o greșeală. Minificarea HTML este de asemenea importantă.



În anii 2000, instrumentele de minificare erau rare. Trebuia să minimizați manual fișierele de fiecare dată când s-a schimbat ceva. Întrucât fișierele HTML se schimbă mai frecvent decât fișierele JS și CSS, era pur și simplu prea obositor să se reducă de fiecare dată. În zilele noastre, este un punct discutabil.

Comprimare

Când utilizatorii vă vizitează site-ul web, fac acest lucru folosind protocolul HTTP. Browserul trimite o cerere către serverul dvs. web pentru o anumită pagină, serverul dvs. web găsește pagina, apoi trimite conținutul acelei pagini înapoi în browserul vizitatorului.



Dar, deoarece protocolul HTTP acceptă compresia, serverul dvs. web poate comprima pagina înainte de a o trimite vizitatorului (presupunând că compresia este activată în setările serverului dvs.) și apoi browserul vizitatorului poate decomprima pagina înapoi la starea inițială.

Cea mai comună schemă de compresie este GZIP , care este un format de fișier care folosește un fișier algoritm de compresie fără pierderi numită DEFLATE.

Algoritmul caută repetarea aparițiilor de text în fișierul HTML, apoi înlocuiește aceste repetări cu referințe la o apariție anterioară. Fiecare referință este pur și simplu două numere: cât de departe este referința și câte caractere facem trimitere.

Luați în considerare un șir de text ca acesta (exemplu preluat de pe site-ul web GZIP):

Blah blah blah blah blah.

Algoritmul recunoaște următoarea repetare:

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

Prima apariție este referința noastră, așa că lăsați-o să fie:

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

A doua apariție se referă la prima apariție, care are cinci caractere în spate și cinci caractere lungime:

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

Dar, în acest caz, algoritmul recunoaște că următoarea apariție este aceeași secvență de caractere, deci extinde lungimea de referință cu încă cinci:

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

Și din nou:

Blah b[5,15]lah.

Iar algoritmul este suficient de inteligent pentru a realiza că următoarele trei caractere sunt primele trei caractere din referință, deci se extinde cu trei:

Blah b[5,18].

Acum gândiți-vă la un fișier HTML tipic și la câtă repetare există în interior. Aproape fiecare etichetă, cum ar fi

, are o etichetă de închidere corespunzătoare, cum ar fi

. În plus, multe etichete sunt repetate în tot parcursul, cum ar fi

,

,

,

  • , etc. Atributele se repetă deseori, inclusiv

    class

    ,

    href

    , și

    src

    . Este ușor de văzut de ce compresia GZIP este atât de eficientă cu HTML.

    Singurul dezavantaj este că serverul web are nevoie de un pic mai mult CPU pentru a executa compresia de fiecare dată când este solicitată o pagină. Dar, întrucât CPU-ul nu este o problemă în zilele noastre, este aproape întotdeauna mai bine să activați GZIP decât să mergeți fără, chiar dacă aveți găzduire web la nivel de intrare.

    De ce ar trebui să comprimați și să reduceți

    Există două avantaje principale, ambele fiind esențiale în peisajul web de astăzi pe mobil.

    Încărcări mai rapide ale paginilor

    În medie, un minifier HTML poate reduce dimensiunea unui fișier cu aproximativ 3% cu setări de bază. Cu setări opționale avansate, un fișier HTML poate fi redus cu încă 3-7 procente, pentru o reducere potențială de până la 10 procente. Acest lucru se traduce direct în timpi de încărcare a paginii mai rapide.

    Mai puțină lățime de bandă utilizată

    Să presupunem că aveți 10 fișiere, fiecare micșorat de la 50 KB la 45 KB pentru o reducere totală de 50 KB. Și să presupunem că site-ul dvs. web servește în medie 1.000 de vizitatori în fiecare zi, unde fiecare vizită are în medie zece pagini. Minificarea HTML singură reduce utilizarea lățimii de bandă cu 50 MB pe zi (1,5 GB pe lună).

    Compresie + Minimizare

    După cum puteți vedea, minificarea HTML este utilă singură, mai ales că site-ul dvs. crește, fișierele se măresc și traficul crește. Rețineți că Regulile Google PageSpeed Recomandați reducerea codului HTML, așa că, dacă sunteți sceptic, lăsați acest lucru să vă convingă contrariul.

    ce să faci cu laptopul nou

    Dar ceea ce este grozav la optimizarea HTML este că nu trebuie să alegeți nici minificare, nici compresie. Puteți face ambele! De fapt, tu ar trebui să fă amândouă.

    În medie, vă puteți aștepta ca compresia GZIP să micșoreze un fișier HTML cu 70 până la 90 la sută. Utilizând exemplul de mai sus cu o estimare de compresie conservatoare, fișierele HTML reduse vor trece de la 45 KB la 13,5 KB fiecare, pentru o contracție totală de 365 KB. În comparație cu unminified / necomprimat, lățimea de bandă a site-ului dvs. este acum redusă cu 365 MB pe zi (11 GB pe lună).

    Și, pe lângă economiile de lățime de bandă, fiecare pagină se încarcă dramatic mai rapid, deoarece browserul utilizatorului final trebuie să descarce doar 13,5 KB față de 50 KB pe pagină.

    Cum se poate comprima și minimiza HTML

    Din fericire, niciuna dintre acestea nu este foarte dificilă în zilele noastre și nu aveți nevoie de prea multe cunoștințe tehnice pentru a le configura.

    Plugin-uri WordPress

    Dacă rulați un site WordPress, tot ce trebuie să faceți este să instalați un singur plugin și puteți profita de avantajele comprimării și ale reducerii.

    Majoritatea pluginurilor de cache fac mai mult decât pur și simplu cache pagini. De exemplu, Cea mai rapidă cache WP și W3 Total cache ambele au setări cu un singur clic care vă permit să activați minificarea HTML și compresia GZIP, printre alte caracteristici care accelerează și mai mult încărcarea paginii și reduc utilizarea lățimii de bandă.

    daca tu numai doriți reducere, vă recomandăm Minimizează HTML conecteaza. Este simplu, acceptă HTML / CSS / JS și vă permite să modificați puțin metoda de minimizare (de exemplu, dacă eliminați

    http:

    și

    https:

    din adrese URL).

    Minificatoare HTML statice

    Dacă fișierele dvs. HTML sunt statice (adică nu sunt generate dinamic de un CMS sau de un cadru web), atunci puteți menține două seturi de fișiere HTML: un set „sursă”, care nu este modificat pentru editare ușoară și un set „minimizat”, pe care le creați de fiecare dată când modificați un fișier sursă.

    Pentru a minimiza, utilizați unul dintre aceste instrumente:

    Aceasta este o tehnică viabilă dacă v-ați îndepărtat de CMS-uri precum WordPress și acum utilizați generatoare de site statice.

    Activați compresia GZIP

    Pașii pentru activarea compresiei GZIP pot diferi în funcție de software-ul serverului web pe care îl utilizați. Deoarece Apache este cea mai populară opțiune, vom analiza modul de activare folosind .htaccess.

    Conectați-vă la serverul dvs. web utilizând FTP, apoi creați un fișier numit

    .htaccess

    în directorul rădăcină. Editați fișierul .htaccess pentru a avea următoarele setări:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    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

    Nu sunteți sigur dacă compresia funcționează pe site-ul dvs. web? Testați-l cu acest instrument .

    Pentru o eficiență maximă, ar trebui, de asemenea aflați cum să vă verificați, să curățați și să vă optimizați CSS .

    Acțiune Acțiune Tweet E-mail Ar trebui să faceți upgrade la Windows 11 imediat?

    Windows 11 vine în curând, dar ar trebui să vă actualizați cât mai curând posibil sau să așteptați câteva săptămâni? Să aflăm.

    Citiți în continuare     Subiecte asemănătoare
    • Programare
    • HTML
    • Dezvoltare web
    Despre autor Joel Lee(1524 articole publicate)

    Joel Lee este redactor-șef al MakeUseOf din 2018. Are un B.S. în informatică și peste nouă ani de experiență profesională în redactare și editare.

    Mai multe de la Joel Lee

    Aboneaza-te la newsletter-ul nostru

    Alăturați-vă newsletter-ului pentru sfaturi tehnice, recenzii, cărți electronice gratuite și oferte exclusive!

    Faceți clic aici pentru a vă abona