Programare

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

Cum funcționează HTML comprimat și de ce aveți nevoie de el / Programare

Dacă rulați un site web, ar trebui să știți deja cum să utilizați formatele de imagine potrivite și să vă optimizați imaginile pentru web 10 Instrumente grafice online gratuite pentru a redimensiona, converti și optimiza 10 instrumente grafice online gratuite pentru redimensionare, conversie și optimizare de care aveți nevoie unelte de editare batch atunci când aveți o mulțime de fotografii pentru a procesa și foarte puțin timp. Vă prezentăm cele mai bune soluții de redimensionare a loturilor, optimizatoare sau convertoare disponibile online. Citeste mai mult . Cu toate acestea, în timp ce compresia imaginilor este o practică bine-cunoscută, compresia HTML tinde să fie trecută cu vederea, ceea ce este o rușine deoarece avantajele merită.

În acest articol, vom trece peste cele două metode principale de reducere a fișierelor HTML, de ce ar trebui să fie reduse fișierele HTML și cum să procedați.

Compresie vs. minificare

În ceea ce privește optimizarea fișierelor HTML, există două metode principale pentru aceasta: comprimare și minification. Ele sună asemănătoare pe suprafață, dar sunt de fapt două tehnici distincte, așa că nu le confundați.

minification

Vă puteți gândi la minificare ca la îndepărtarea caracterelor și liniilor inutile din codul sursă. Gândiți-vă la indentare, comentarii, linii goale, etc. Niciunul dintre acestea nu este necesar în HTML - acestea există pentru a face fișierul mai ușor de citit. Decuparea acestor detalii poate să scadă dimensiunea fișierului fără a afecta nimic.

Pagina HTML exemplu:

  Titlul dvs. aici   
 
Acesta este un antet
 
Trimiteți-mi e-mail la [email protected].
 
Acesta este un nou paragraf!
 
Acesta este un nou paragraf cu caractere aldine și italice.

Exemplul paginii HTML, miniat:

Titlul dvs. aici
Acesta este un antet
Trimiteți-mi e-mail la [email protected].
Acesta este un nou paragraf!
Acesta este un nou paragraf cu caractere aldine și italice.

Dimensiune original: 354. Dimensiune minime: 272. Economii: 82 (23.16%).

Mulți dezvoltatori web și proprietari de site-uri minime rezervă numai pentru fișierele JS și CSS, dar această practică depășită este o greșeală. HTML minification este importantă, de asemenea.

Înapoi în anii 2000, instrumentele de minificare erau rare. A trebuit să micșorați manual fișierele de fiecare dată când ceva sa schimbat. Deoarece fișierele HTML se modifică mai frecvent decât fișierele JS și CSS, a fost pur și simplu prea dificil să fie miniat de fiecare dată în acel moment. În zilele noastre, este un punct interesant.

Comprimare

Când utilizatorii vizitează site-ul dvs. Web, aceștia fac acest lucru folosind protocolul HTTP. Browserul trimite o solicitare serverului dvs. web pentru o anumită pagină, serverul dvs. web găsește pagina, apoi trimite conținutul acelei pagini înapoi în browser-ul vizitatorului.

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

Cea mai obișnuită schemă de comprimare este GZIP, care este un format de fișier care utilizează un algoritm de compresie fără pierderi Cum funcționează compresia fișierelor? Cum funcționează compresia fișierelor? Comprimarea fișierelor se află în centrul modului în care funcționează webul modern, se poate argumenta, deoarece ne permite să împărtășim fișiere care altfel ar lua prea mult timp pentru a fi transferate. Dar cum funcționează? Citește mai mult numit DEFLATE.

Algoritmul caută apariția repetată a textului în fișierul HTML, înlocuind apoi acele repetări cu referințe la o apariție anterioară. Fiecare referință este pur și simplu două numere: cât de mult înapoi este referința și câte caractere se referă.

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

Blah bla bla bla bla.

Algoritmul recunoaște următoarea repetiție:

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:

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.

Și 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 de mult există repetiția în cadrul acestuia. Aproape fiecare etichetă, cum ar fi , are o etichetă de închidere corespunzătoare, cum ar fi . În plus, multe etichete se repetă pe tot parcursul paginii, cum ar fi

,

, ,
  • , etc. Atributele sunt, de asemenea, repetate adesea, inclusiv clasă, 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 CPU mai mic pentru a executa compresia de fiecare dată când o pagină este solicitată. Dar, din moment ce CPU-ul nu este o mare preocupare în zilele noastre, este aproape întotdeauna mai bine să activați GZIP decât să mergeți fără, chiar dacă aveți nivel de intrare pe web hosting Cele mai bune servicii de gazduire web Cele mai bune servicii de gazduire web Caută cele mai bune servicii de gazduire web pentru nevoile tale? Fie că este vorba despre un mic blog sau despre un site important corporativ, aici sunt cele mai bune recomandări. Citeste mai mult .

    De ce ar trebui să comprimați și să micșorați

    Există două avantaje principale, ambele fiind cruciale în peisajul web actual de telefonie mobilă.

    Încărcări mai rapide ale paginilor

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

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

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

    Comprimare + minificare

    După cum puteți vedea, minifierea HTML este utilă singură, mai ales că site-ul dvs. crește, fișierele devin mai mari și crește traficul. Rețineți că recomandările Google PageSpeed ​​recomandă minimizarea codului HTML, deci, dacă sunteți sceptici, permiteți-vă să vă convingă altfel.

    Dar ceea ce este minunat în ceea ce privește optimizarea HTML este că nu trebuie să alegeți nici minificarea, nici comprimarea. Puteți face și amândouă! De fapt, tu ar trebui să faceti ambele.

    În medie, vă puteți aștepta la compresia GZIP pentru a micșora un fișier HTML cu 70 până la 90%. Folosind exemplul de mai sus cu o estimare de compresie conservativă, fișierele HTML miniate ar merge de la 45 KB la 13,5 KB fiecare, pentru o contracție totală de 365 KB. Comparativ cu unminified / necomprimat, lățimea de bandă a site-ului dvs. este acum redusă cu 365 MB pe zi (11 GB pe lună).

    Și în plus față de economiile de lățime de bandă, fiecare pagină se încarcă dramatic mai repede, deoarece browserul utilizatorului final trebuie doar să descarce 13.5 KB versus 50 KB pe pagină.

    Cum de a comprima și minimiza HTML

    Din fericire, în zilele noastre nu sunt foarte dificile și nu aveți nevoie de prea multe cunoștințe tehnice pentru a le înființa.

    Pluginurile WordPress

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

    Cele mai multe pluginuri de cache fac mai mult decât pur și simplu paginile cache. De exemplu, WP Fastest Cache și W3 Total Cache au ambele setări cu un singur clic care vă permit să activați minifierea HTML și compresia GZIP, printre alte caracteristici care accelerează în continuare încărcarea paginilor și reduc utilizarea lățimii de bandă.

    daca tu numai doriți minificare, vă recomandăm pluginul Minify HTML. Este simplu, suportă HTML / CSS / JS și vă permite să optimizați puțin metoda de minimizare (de ex., Dacă doriți să eliminați http: și https: de la adresele URL).

    Micsoratoare static HTML

    Dacă fișierele HTML sunt statice (adică nu sunt generate în mod dinamic de un CMS sau de un cadru web), puteți menține două seturi de fișiere HTML: o “sursă” set, care este unminim pentru editare ușoară, și a “minimizat” set, pe care îl creați oricând efectuați o modificare a unui fișier sursă.

    Pentru a micșora, utilizați unul dintre aceste instrumente:

    • HTMLCompressor
    • HTML Minifier
    • HTML Minifier (diferit de cel de mai sus)

    Aceasta este o tehnică viabilă dacă v-ați mutat departe de CMS, cum ar fi WordPress și folosiți acum generatoare statice de site-uri 7 Motive pentru a vă scufunda CMS și ia în considerare un generator de site-ul static 7 motive pentru a vă scufunda CMS și ia în considerare un generator de site-ul static De mulți ani, un site web a fost dificil pentru mulți utilizatori. CMS, cum ar fi WordPress, au schimbat acest lucru, dar pot fi în continuare confuze. O altă alternativă este un generator de site-uri statice. Citeste mai mult .

    Activați compresia GZIP

    Pașii pentru a permite compresia GZIP pot diferi în funcție de software-ul serverului web pe care îl utilizați. Din moment ce Apache este cea mai populara optiune, vom acoperi modul in care se va permite utilizarea lui .htaccess.

    Conectați-vă la serverul dvs. web folosind 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 Da mod_gzip_dechunk Da mod_gzip_item_include fișier.html $ 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 ^ imagine /.* mod_gzip_item_exclude rspheader ^ Content-Encoding:. * gzip. *   SetOutputFilter DEFLATE

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

    A fost de ajutor articolul? Acum, când comprimați și minificați, paginile dvs. Web ar trebui să se încarce mai repede și să utilizeze mai puțină lățime de bandă. Dacă aveți întrebări, nu ezitați să le întrebați mai jos!

    Explorați mai multe despre: HTML, Dezvoltare Web.