Publicitate

Dacă rulați un site web, ar trebui să știți deja cum să folosiți formatele de imagine potrivite și optimizați-vă imaginile pentru web 10 instrumente online gratuite de imagine pentru loturi pentru redimensionare, convertire și optimizareAveți nevoie de instrumente de editare a loturilor când aveți o mulțime de fotografii pentru a fi procesate și foarte puțin timp. Vă prezentăm cele mai bune redimensionări, optimizatoare sau convertoare de loturi disponibile online. Citeste mai mult . Cu toate acestea, în timp ce compresia de imagine este o practică binecunoscută, compresia HTML tinde să fie trecută cu vederea, ceea ce este o rușine, deoarece beneficiile sunt demne.

În acest articol, vom parcurge cele două metode principale de reducere a fișierelor HTML, de ce ar trebui să fie reduse fișierele HTML și cum să ne descurcăm.

Compresie vs. minification

În ceea ce privește optimizarea fișierelor HTML, există două metode principale pentru acesta: comprimare și minification. Sunt similare la suprafață, dar sunt de fapt două tehnici distincte, deci nu le confundați.

minification

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. Niciunul dintre acestea nu este necesar în HTML - există pentru a fi ușor de citit fișierul. Decuparea acestor detalii poate reduce dimensiunea fișierului fără a afecta nimic.

Exemplu de pagină HTML:

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

Exemplu de pagină HTML, redus:

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

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

Mulți dezvoltatori web și proprietarii de site-uri își rezervă minimizarea numai pentru fișierele JS și CSS, dar această practică depășită este o greșeală. Minificarea HTML este importantă și ea.

În anii 2000, instrumentele de minificare erau rare. A trebuit să minificați manual fișierele de fiecare dată când ceva s-a schimbat. Din moment ce fișierele HTML se schimbă mai frecvent decât fișierele JS și CSS, a fost pur și simplu prea obositor să se minimizeze de fiecare dată. În zilele noastre, este un punct moot.

Comprimare

Când utilizatorii vizitează site-ul dvs. web, îl fac folosind protocolul HTTP. Browserul trimite o solicitare 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) compresia este activată în setările serverului dvs.), apoi browserul vizitatorului poate decomprima pagina înapoi la starea inițială.

Cea mai frecventă schemă de compresie este GZIP, care este un format de fișier care folosește un Algoritmul de compresie fără pierderi Cum funcționează compresia fișierelor?Cum funcționează compresia fișierelor? Aflați elementele de bază ale comprimării fișierelor și diferența dintre compresia pierdută sau cea fără pierderi. Citeste mai mult numit DEFLATE.

Algoritmul caută apariții repetate de text în fișierul HTML, apoi înlocuiește acele apariții repetate cu referințe la o apariție anterioară. Fiecare referință este doar două numere: cât de îndepărtată este referința și câte caractere facem referire.

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

Bla bla bla bla bla bla.

Algoritmul recunoaște următoarea repetare:

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

Prima apariție este referința noastră, deci 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 urmă ș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.

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ă. Aproape fiecare etichetă, cum ar fi, are o etichetă de închidere corespunzătoare, cum ar fi. Mai mult, multe etichete sunt repetate pe parcurs, cum ar fi, , , etc. Atributele se repetă 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 pic mai mult procesor pentru a executa compresia de fiecare dată când se solicită o pagină. Însă, în prezent, CPU nu preocupă foarte mult, este aproape întotdeauna mai bine să permiteți GZIP decât să plecați fără, chiar dacă aveți găzduire web la nivel de intrare Cele mai bune servicii de găzduire web: partajate, VPS și dedicateCăutați cel mai bun serviciu de găzduire web pentru nevoile dvs.? Iată cele mai bune recomandări pentru blogul sau site-ul dvs. web. Citeste mai mult .

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

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

Încărcări mai rapide de pagină

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

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ă zicem că site-ul dvs. web servește o medie de 1.000 de vizitatori în fiecare zi, unde fiecare vizită are o medie de zece pagini. Numai prin minificarea HTML se reduce utilizarea lățimii de bandă cu 50 MB pe zi (1,5 GB pe lună).

Compresie + micșorare

După cum vedeți, minificarea HTML este utilă singură, mai ales că site-ul dvs. crește, fișierele cresc și traficul crește. Rețineți că Ghidul Google PageSpeed recomandă reducerea HTMLului, deci dacă ești sceptic, lasă asta să te convingă altfel.

Dar ceea ce este excelent în ceea ce privește optimizarea HTML este că nu trebuie să alegeți nici minificare, nici compresie. Puteți face ambele! De fapt, tu ar trebui să fă ambele.

Î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ă. Folosind exemplul de mai sus cu o estimare de compresiune conservatoare, fișierele HTML minificate ar merge de la 45 KB la 13,5 KB fiecare, pentru o contracție totală de 365 KB. Comparativ cu neimprimat / necomprimat, lățimea de bandă a site-ului dvs. este acum redusă cu 365 MB pe zi (11 GB pe lună).

Și pe deasupra economiilor 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 să comprimați și să minimalizați HTML

Din fericire, nici zilele acestea nu sunt foarte dificile și nu aveți nevoie de multe cunoștințe tehnice pentru a le configura.

Pluginuri 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 atât ale compresiunii, cât și ale măririi.

Majoritatea pluginurilor de memorie în cache fac mai mult decât simple pagini de memorie în cache. De exemplu, WP Fastest Cache și W3 Cache totală ambele au setări cu un singur clic care vă permit să activați minificarea HTML și compresia GZIP, printre alte funcții care accelerează în continuare încărcările paginii și reduc utilizarea lățimii de bandă.

daca tu numai doriți o minificare, vă recomandăm Minimizați HTML conecteaza. Este simplu, acceptă HTML / CSS / JS și vă permite să modificați puțin metoda de minifiere (de exemplu, dacă eliminați http: și https: de la adrese URL).

Minifiers HTML statici

Dacă fișierele dvs. HTML sunt statice (adică nu sunt generate dinamic de un CMS sau cadru web), atunci puteți menține două seturi de fișiere HTML: un set „sursă”, care nu este modificat pentru o editare ușoară și un set „minificat”, pe care îl creați oricând faceți o modificare la un fișier sursă.

Pentru a minimiza, 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 îndepărtat de CMS-uri precum WordPress și acum utilizați generatoare de site statice 7 motive pentru a vă deconecta CMS-ul și luați în considerare un generator de site-uri staticeTimp de mulți ani, publicarea unui site web a fost dificilă pentru mulți utilizatori. CMS-urile ca WordPress au schimbat asta, dar pot fi în continuare confuze. O altă alternativă este un generator de situri statice. Citeste mai mult .

Activați GZIP Compression

Pașii pentru a activa compresia 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 acoperi cum să o activăm folosind .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? | 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ă funcționează compresia pe site-ul dvs. web? Testează-l cu acest instrument.

Pentru eficiența finală, ar trebui, de asemenea aflați despre cum puteți verifica, curăța și optimiza CSS 11 Instrumente utile pentru verificarea, curățarea și optimizarea fișierelor CSSDoriți să vă îmbunătățiți codul CSS? Aceste verificatoare și optimizatoare CSS vor ajuta la îmbunătățirea codului CSS, a sintaxei și la minimizarea paginilor dvs. web. Citeste mai mult .