Cum să comprimați HTML și alt cod de site

Utilizatorii site-ului se așteaptă ca conținutul să fie de înaltă calitate și accesibil rapid. Acest lucru este important pentru o experiență optimă a utilizatorului. Vestea bună este că, cu câteva linii de cod și câteva trucuri mici, este perfect posibil să comprimați HTML și alte coduri de site cu 40% până la 70% (și în unele cazuri chiar mai mult). În acest articol, îți voi arăta cum să faci asta.

>> Optimizarea vitezei paginii: Cum să vă îmbunătățiți timpii de încărcare <<

De ce să comprimați codul site-ului?

Acum vă puteți pune întrebarea: De ce ar trebui să comprim codul sursă al site-ului meu? Necomprimat, are doar câteva sute de kiloocteți, până la urmă.

Răspunsul este foarte simplu: deoarece site-urile web cu încărcare mai rapidă oferă o experiență mai bună pentru utilizator, care, la rândul său, are un efect pozitiv asupra ratei de conversie, a timpului petrecut pe pagină, a afișărilor de pagină și a ratei de respingere. Rata de conversie este deosebit de importantă, deoarece aceasta are un impact direct asupra succesului în sectoare precum comerțul electronic.

De exemplu, pentru gigantul comerțului electronic Amazon, o întârziere de încărcare de 100 ms îi costă aproximativ 1% din vânzări. Proiectat pe un an fiscal complet, acest lucru ar avea ca rezultat costuri de aproximativ 245 milioane USD. Aceste cifre arată impactul drastic pe care îl poate avea viteza de încărcare a unui site web.

De asemenea, ar trebui să țineți cont de proporția utilizatorilor care navighează pe internet pe dispozitive mobile. Acoperirea rețelelor wireless LTE și 4G are încă mult loc de îmbunătățire aici. Aceasta înseamnă că internetul mobil este adesea destul de lent, ceea ce face ca vitezele mai mari ale paginilor să fie și mai importante.

O îmbunătățire semnificativă a timpului de încărcare poate fi obținută, de exemplu, prin utilizarea tehnologiilor de compresie Gzip sau Deflate. Acest lucru economisește bani și lățime de bandă.

Este posibil să comprimați HTML, CSS și JavaScript?

Comprimarea condensează datele solicitate către client pentru a reduce timpul de transfer. Cele mai comune două metode de compresie de pe web sunt Gzip și Deflate. Procesul de compresie localizează șiruri similare într-un document și le înlocuiește cu șiruri temporare cu același substituent.

Prin urmare, cele două metode sunt ideale pentru comprimarea fișierelor HTML, CSS și JavaScript, deoarece conțin adesea multe șiruri identice și, de obicei, multe linii și spații goale. Ambele metode pot fi implementate sau activate cu un efort relativ mic.

Cum funcționează compresia codului site-ului web

Pentru ca datele comprimate să fie transferate, browserul clientului trebuie să solicite mai întâi transmiterea comprimată a datelor. Acest lucru se face printr-o solicitare HTTP cu specificația „Accept-Encoding: gzip, deflate”. Pot fi specificate fie una, fie mai multe metode de compresie, iar exemplul acceptă atât date comprimate gzip, cât și deflate.

Este important ca aceasta să fie doar o cerere și nu o cerere – ca urmare, serverul nu trebuie să răspundă cu date comprimate. Dacă datele nu sunt disponibile sub formă comprimată, acestea vor fi pur și simplu trimise necomprimate către clientul solicitant.

Aproximativ 90% din toate browserele acceptă compresia. Influența asupra setării „Accept-Encoding” sau a metodelor de compresie permise ale browserului, de obicei, nu există. Fie browserul acceptă comprimarea datelor, fie nu.

Serverul răspunde la cererea HTTP a clientului cu așa-numitul „răspuns HTTP”. Dacă serverul acceptă compresia, datele sunt apoi transferate comprimate către client. În antetul răspunsului HTTP, serverul raportează apoi, de exemplu, „Codificarea conținutului: gzip”. În caz contrar, resursa solicitată este trimisă necomprimată către client.

Cum este activată compresia codului site-ului web?

În funcție de server, compresia codului poate fi activată folosind un fișier de configurare adecvat.

Figura 1: Diagrama compresiei Gzip

Activarea compresiei codului folosind .htaccess

Pe serverele web compatibile cu NCSA (de exemplu, Apache, care este cel mai utilizat server web), compresia Gzip poate fi instalată folosind fișierul de configurare .htaccess. Pentru a face acest lucru, în fișierul .htaccess trebuie introdus următorul cod:

<IfModule mod_deflate.c>
<FilesMatch „\\.(js|css|html|xml)$”>
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

În primul rând, folosind „<IfModule mod_deflate.c>” se rulează un test pentru a vedea dacă modulul de extensie mod_deflate este instalat. Dacă da, folosind „<FilesMatch”\\.(js|css|html|xml)$”>” va determina pentru ce tipuri de fișiere ar trebui aplicat filtrul.

Exemplul filtrează pentru fișierele JavaScript, CSS, HTML și XML. Cu „SetOutputFilter DEFLATE”, se stabilește apoi că toate fișierele care se potrivesc cu modelul specificat anterior sunt trimise cu filtrul DEFLATE. Ulterior, potrivirea și interogarea modulului sunt închise din nou.

Teoretic, acest filtru poate fi aplicat și altor tipuri de date (de exemplu fișiere imagine .jpg, .gif sau .png). Potrivirea fișierului ar trebui să fie adaptată după cum urmează:

„<FilesMatch”\\.(js|css|html|xml|png|jpg|gif)$”>”

Cu toate acestea, trebuie remarcat aici că aceste formate sunt de obicei deja comprimate și că recomprimarea duce adesea la pierderea calității fișierelor de imagine. Prin urmare, este recomandat să comprimați fișierele binare (cum ar fi imaginile) înainte de a le încărca și să vă abțineți de la a le comprima folosind gzip. Instrumente precum JPEGmini sau TinyPNG pot fi folosite pentru aceasta.

Activarea compresiei codului folosind PHP

Dacă nu aveți acces la fișierul .htaccess al serverului sau dacă doriți doar să transferați fișiere individuale comprimate cu gzip, aveți opțiunea de a activa compresia folosind următoarele coduri:

<?php ob_start("ob_gzhandler"); ?>

Dacă este posibil, această funcție ar trebui plasată înaintea primului cod HTML.

Exemplu:

<?php ob_start ( "ob_gzhandler" ); ?>
<html>
<corp>
<p>Aceasta ar trebui să fie o pagină comprimată.</p>
</corp>
</html>

5 capcane ale comprimării codului site-ului web

Comprimarea codului HTML și a altor site-uri web poate provoca, de asemenea, erori sau riscuri. Ar trebui să vă gândiți la următoarele puncte:

1. Când utilizați Gzip prin https, orice defecte de securitate pot fi exploatate. Acest lucru poate cauza probleme pentru fișierele care conțin informații sensibile. Prin urmare, nu este recomandată comprimarea tipurilor de fișiere care conțin informații sensibile cu Gzip.

2. Comprimarea ar trebui să fie aplicată numai tipurilor de fișiere sau fișierelor care nu sunt deja comprimate. Fișierele imagine sunt de obicei deja reduse și, prin urmare, nu ar trebui să fie comprimate suplimentar de gzip. Recomprimarea poate avea chiar efectul opus și puteți ajunge la o dimensiune mai mare a fișierului, sau procesul de comprimare va ocupa prea multă memorie.

3. Compresia trebuie aplicată numai fișierelor cu o dimensiune adecvată. Pentru fișierele care au o dimensiune de doar câțiva octeți, compresia poate face ca fișierul să devină și mai mare decât fișierul original.

4. În timpul etapei de compresie, aveți grijă să nu comprimați prea mult. Adesea, există o mică diferență în dimensiunea fișierului între fișierele slabe, normale și puternic comprimate. Cu toate acestea, compresia medie sau grea necesită mult mai multă putere de calcul.

5. Deoarece procesul de comprimare înlocuiește șiruri identice sau repetitive, utilizarea variabilelor și a numelor de clase (de exemplu, în fișierele CSS și HTML) are ca rezultat un succes de compresie mai mare decât dacă toate variabilele și clasele sunt denumite diferit și, prin urmare, are puțin potențial de a asigura compresia.

Măsuri suplimentare de optimizare pentru codurile subțiri

Minimizarea HTML și a altor strategii

Pentru a menține codul sursă clar și concis, dezvoltatorii lucrează de obicei cu întreruperi de linie, spații, indentări și alte caractere care fac codul sursă ușor de citit. Pentru a menține mai bine codul sursă mai târziu, constructele și secțiunile deosebit de complicate sunt adesea documentate cu ajutorul comentariilor.

Ceea ce este extrem de util pentru dezvoltator nu este nevoie de crawler-ul motorului de căutare și, prin urmare, ar trebui eliminat. Decuparea caracterelor inutile se numește „minimificare” și ajută la salvarea octeților valoroși. Cantitatea de octeți salvați prin minimizare este demonstrată impresionant în următorul exemplu folosind biblioteca JavaScript gratuită jQuery.

În timp ce fișierul original al cadrului din Versiunea 2.1.4 are o dimensiune de aproximativ 242 kb (jQuery 2.1.4.js (necomprimat)), dimensiunea redusă a fișierului după eliminarea caracterelor și comentariilor inutile este de numai aproximativ 82 kb (jQuery 2.1.4. min.js (comprimat)). Doar prin minimizarea – cu alte cuvinte, prin reducerea caracterelor inutile – dimensiunea fișierului poate fi redusă cu aproximativ 66%. Un rezultat remarcabil.

Cod sursă înainte și după procesul de minimizare

Minimizarea funcționează pentru fișierele HTML, CSS și JavaScript.

În plus, fișierul jQuery redus poate fi redus cu încă 65% folosind compresia Gzip. Din cei 242 kb inițiali, există până la urmă doar 29,5 kb incredibil.

Instrumente pentru reducerea codului CSS și JavaScript

Pentru a reduce codul CSS, puteți utiliza, de exemplu, YUI Compressor sau cssmin.js. Există, de asemenea, mai multe instrumente care pot fi utilizate pentru a reduce codul JavaScript. Google PageSpeed ​​Insights recomandă Closure Compiler, JSMin sau YUI Compressor.

Sfat: Întrucât rupturile de rând, spațiile și comentariile folosite sunt foarte importante pentru dezvoltator și pentru întreținerea rapidă, necomplicată, se recomandă păstrarea atât a fișierului în starea originală (cu caracterele inutile), cât și a fișierului de stare optimizat/redus. . Astfel, codul poate fi întreținut cu ușurință, dar pentru crawler-uri este și mult mai rapid de descărcat.

Combinarea fișierelor CSS și JavaScript

Este adesea cazul ca mai multe fișiere CSS și JavaScript sunt încărcate în antetul HTML al unui site web. De fiecare dată când acestea sunt apelate, aceasta este o solicitare HTTP care trebuie procesată de browser. Browserele moderne pot gestiona doar 2-8 solicitări HTTP de la același domeniu în același timp - toate celelalte solicitări vor trebui să aștepte.

Deoarece un singur site web poate necesita până la câteva sute de solicitări HTTP, acest lucru creează un blocaj uriaș. Acest lucru poate fi prevenit, de exemplu, combinând toate fișierele CSS într-un singur fișier și reprezentând astfel o singură solicitare HTTP.

Același lucru este valabil și pentru fișierele JavaScript încărcate prin elementul <script>. Și aici, ar trebui să vă asigurați că, dacă este posibil din punct de vedere tehnic, toate fișierele JavaScript sunt combinate într-un singur fișier.

Trebuie remarcat faptul că deseori fiecare tip de pagină (de exemplu partea de jos a unei reviste vs pagina cu detalii despre produs) necesită funcții JavaScript diferite și, prin urmare, fișiere JavaScript diferite. În acest caz, este logic să încărcați numai fișierele JavaScript și CSS care sunt de fapt necesare pentru fiecare tip de pagină. Gruparea tuturor fișierelor JavaScript într-unul singur poate avea dezavantaje în acest caz.

În plus, utilizarea subdomeniilor sau a unei rețele de livrare de conținut (CDN) poate avea sens. Scripturile și resursele care nu sunt necesare imediat pot fi reîncărcate cu AJAX.

Rezumat despre comprimarea codului site-ului web

Prin livrarea datelor site-ului web folosind Gzip sau Deflate, se poate obține o îmbunătățire semnificativă a timpului de încărcare. Ambele metode sunt excelente pentru comprimarea fișierelor HTML, CSS și JavaScript. În plus, minimizarea este o altă modalitate utilă de a menține codul subțire.

Deoarece crawlerele motoarelor de căutare nu au nevoie de rupturi de rând, indentări etc. utile ale dezvoltatorului în codul sursă, puteți reduce aceste caractere inutile. Există, de asemenea, instrumente utile care reduc codul CSS și JavaScript. Acest lucru poate salva, de asemenea, mulți octeți.

Pentru a preveni ca un site web să aibă nevoie de prea multe solicitări HTTP, fișierele CSS și JavaScript pot fi grupate împreună. Acestea constituie doar o solicitare HTTP, care economisește resurse suplimentare.

Drept urmare, chiar și cu doar câteva linii de cod și mici intervenții pe site, se poate obține o eficientizare optimă a codului. Deoarece timpul de încărcare a site-ului este un factor important de SEO și de clasare, fiecare webmaster ar trebui să se ocupe de această problemă în timp.

Comprimarea codului site-ului asigură o experiență îmbunătățită a utilizatorului, care are un impact pozitiv asupra altor valori, cum ar fi rata de conversie sau durata șederii. Acesta, la rândul său, reprezintă un aspect important pentru succesul întregii companii și conduce la utilizatori mulțumiți.