Kodėl verta susirūpinti GZIP kompresija
Kai pirmą kartą susidūriau su svetainės greičio optimizavimu, GZIP kompresija atrodė kaip kažkoks magiškas triukas. Įjungi vieną nustatymą serveryje ir staiga tavo svetainė kraunasi dvigubai greičiau. Skamba per gerai, kad būtų tiesa, tiesa? Bet iš tikrųjų tai veikia, ir veikia puikiai.
GZIP kompresija – tai būdas sumažinti duomenų kiekį, kuris keliauja tarp serverio ir naršyklės. Paprasčiausiai tariant, serveris suspaudžia failus prieš juos išsiųsdamas, o naršyklė juos išpakuoja vartotojo pusėje. Proceso metu tekstiniai failai – HTML, CSS, JavaScript, JSON ir panašūs – gali sumažėti net 70-90 procentų. Tai reiškia mažiau duomenų perdavimo, greitesnį puslapio įkėlimą ir laimingesnius vartotojus.
Dabar, kai mobiliojo interneto naudojimas viršija stacionarųjį, o Google vertina puslapio greitį kaip vieną iš svarbiausių SEO faktorių, GZIP kompresija nėra prabanga – tai būtinybė. Ypač jei tavo svetainė aptarnauja vartotojus su lėtesniais ryšiais ar mobiliaisiais įrenginiais.
Kaip GZIP veikia po gaubtu
GZIP algoritmas naudoja LZ77 algoritmą ir Huffman kodavimą. Bet nesijaudink, tau nereikia būti matematikos genijumi, kad tai suprastum ar įdiegtum. Esmė ta, kad GZIP ieško pasikartojančių simbolių sekų faile ir pakeičia jas trumpesnėmis nuorodomis.
Pavyzdžiui, jei tavo CSS faile dešimtis kartų pasikartoja background-color, GZIP sukuria šio žodžio „žodyną” ir vietoj to, kad siųstų visą žodį kiekvieną kartą, siunčia tik trumpą nuorodą. Kai naršyklė gauna suspausto failo, ji naudoja tą patį žodyną atstatyti originalų turinį.
Svarbu suprasti, kad GZIP geriausiai veikia su tekstiniais failais. Vaizdai (JPEG, PNG), video ir jau suspausti failai (ZIP, RAR) iš GZIP kompresijos beveik nieko nelaimi. Kartais jie net gali tapti šiek tiek didesni dėl papildomos kompresijos metaduomenų. Todėl serverio konfigūracijoje reikia nurodyti, kokius failo tipus kompresuoti.
Apache serverio konfigūravimas
Apache serveryje GZIP kompresija įjungiama per mod_deflate modulį. Pirmiausia reikia įsitikinti, kad šis modulis yra įjungtas. Daugelyje šiuolaikinių Apache instalacijų jis jau yra, bet patikrinti verta.
Debian/Ubuntu sistemose modulį galima įjungti taip:
sudo a2enmod deflate
sudo systemctl restart apache2
Dabar reikia sukonfigūruoti, ką tiksliai kompresuoti. Tai daroma .htaccess faile arba Apache konfigūracijos faile. Aš rekomenduoju naudoti konfigūracijos failą, nes tai efektyviau, bet .htaccess yra paprastesnis variantas, jei neturi root prieigos.
Štai patikrinta konfigūracija, kurią naudoju daugelyje projektų:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/json application/xml application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE font/ttf font/otf font/eot
# Išimtys seniems naršyklėms
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>
Ši konfigūracija kompresuoja visus pagrindinius tekstinius failus, įskaitant SVG vaizdus ir šriftų failus. Išimtys seniems naršyklėms yra daugiau istorinis reliktas, bet aš vis dar jas paliekų – geriau būti atsargiam.
Nginx serverio nustatymai
Nginx atveju viskas šiek tiek paprastesnis. GZIP modulis yra įtaisytas ir paprastai jau įjungtas pagal nutylėjimą, bet su minimaliais nustatymais. Reikia redaguoti nginx.conf failą arba konkretaus virtualaus hosto konfigūraciją.
Štai mano rekomenduojama konfigūracija:
gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_types text/plain text/css text/xml text/javascript
application/json application/javascript application/xml+rss
application/rss+xml application/atom+xml
image/svg+xml application/vnd.ms-fontobject
application/x-font-ttf font/opentype;
gzip_min_length 256;
gzip_disable "msie6";
Čia keli svarbūs parametrai, į kuriuos verta atkreipti dėmesį:
gzip_comp_level nustato kompresijos lygį nuo 1 iki 9. Didesnis skaičius reiškia geresnę kompresiją, bet daugiau serverio resursų. Aš rekomenduoju 6 – tai optimalus balansas tarp kompresijos efektyvumo ir serverio apkrovos. Praktikoje skirtumas tarp 6 ir 9 lygio yra vos keletas procentų failo dydžio, bet serverio procesorius dirba gerokai intensyviau.
gzip_min_length nurodo minimalų failo dydį baitais, kuriam taikoma kompresija. Labai mažus failus kompresuoti neapsimoka – kompresijos overhead gali būti didesnis už gautą naudą.
Po konfigūracijos pakeitimo nepamirštama patikrinti sintaksės ir perkrauti Nginx:
sudo nginx -t
sudo systemctl reload nginx
IIS serverio konfigūravimas Windows aplinkoje
Windows serveriuose su IIS kompresijos įjungimas vyksta per grafine sąsają arba PowerShell. Grafine sąsaja paprasčiau, bet PowerShell suteikia daugiau kontrolės ir yra lengviau automatizuojamas.
Per IIS Manager:
1. Atidaryk IIS Manager
2. Pasirink serverį kairiajame meniu
3. Du kartus spustelk „Compression”
4. Pažymėk „Enable dynamic content compression” ir „Enable static content compression”
5. Spausk „Apply”
Per PowerShell (reikia administratoriaus teisių):
Import-Module WebAdministration
Set-WebConfigurationProperty -Filter "/system.webServer/httpCompression" -Name "doDynamicCompression" -Value "True"
Set-WebConfigurationProperty -Filter "/system.webServer/httpCompression" -Name "doStaticCompression" -Value "True"
IIS pagal nutylėjimą kompresuoja daugumą tekstinių failų tipų, bet galima pridėti papildomų. Tai daroma per applicationHost.config failą arba PowerShell komandas. Pavyzdžiui, SVG failų pridėjimas:
Add-WebConfigurationProperty -Filter "/system.webServer/httpCompression/dynamicTypes" -Name "." -Value @{mimeType='image/svg+xml';enabled='True'}
Kaip patikrinti, ar kompresija veikia
Įjungus kompresiją, būtina patikrinti, ar ji tikrai veikia. Yra keletas būdų tai padaryti, ir aš rekomenduoju naudoti kelis, kad būtum tikras.
Paprasčiausias būdas – naršyklės Developer Tools. Chrome ar Firefox spausk F12, eik į Network tab, perkrauk puslapį ir pažiūrėk į bet kurį tekstinį failą. Skiltyje „Response Headers” turėtų būti Content-Encoding: gzip. Taip pat gali palyginti „Size” (suspaustas dydis) ir „Content” (originalus dydis) stulpelius.
Kitas patikimas būdas – online įrankiai. Mano mėgstamiausias yra GTmetrix arba Google PageSpeed Insights. Jie ne tik patikrina kompresiją, bet ir pateikia išsamią analizę su rekomendacijomis.
Jei mėgsti komandinę eilutę, gali naudoti curl:
curl -H "Accept-Encoding: gzip" -I https://tavo-svetaine.lt
Jei kompresija veikia, atsakyme matysi Content-Encoding: gzip.
Dar vienas naudingas patikrinimas – palyginti faktinį failo dydį. Pavyzdžiui, jei tavo main.css failas serveryje yra 150KB, o naršyklė gauna tik 30KB – kompresija veikia puikiai. Tai matyti Network tab’e, kur rodomas ir transfer size, ir resource size.
Dažniausios problemos ir jų sprendimai
Per metus, kai konfigūravau GZIP įvairiuose serveriuose, susidūriau su keletu pasikartojančių problemų. Čia pasidalinsiu dažniausiomis ir kaip jas išspręsti.
Kompresija neveikia su HTTPS
Kartais kompresija puikiai veikia HTTP, bet neveikia HTTPS. Dažniausiai tai susijęs su SSL proxy ar load balancer nustatymais. Jei naudoji CloudFlare ar panašų CDN, patikrink, ar jų pusėje kompresija nėra išjungta. CloudFlare, pavyzdžiui, turi savo kompresijos nustatymus, kurie gali perrašyti serverio nustatymus.
Kai kurie failai nekompresuojami
Jei pastebėjai, kad JavaScript ar CSS failai nekompresuojami, patikrink MIME tipus. Serveris turi žinoti, kokio tipo yra failas. Kartais problemos kyla dėl neteisingų MIME tipų konfigūracijoje. Pavyzdžiui, application/x-javascript vs application/javascript – abu turėtų būti įtraukti.
Serverio apkrova išaugo
Jei po kompresijos įjungimo serverio CPU naudojimas žymiai išaugo, greičiausiai kompresijos lygis per aukštas. Nginx atveju sumažink gzip_comp_level nuo 9 iki 5-6. Apache atveju gali naudoti DeflateCompressionLevel direktyvą.
Kitas sprendimas – cache’inti jau suspausto failus. Nginx turi gzip_static modulį, kuris leidžia iš anksto suspauti failus ir juos tiesiog atiduoti, vietoj to, kad kompresuotų kiekvieną kartą. Tai ypač naudinga dideliems, retai besikeičiantiems failams.
Seni naršyklės nesuprata kompresijos
Labai senos naršyklės (IE6 ir ankstesnės) kartais turėdavo problemų su GZIP. Šiuolaikinėse konfigūracijose tai beveik neaktualu, bet jei vis dar turi aptarnauti tokius klientus, naudok BrowserMatch direktyvas Apache ar gzip_disable Nginx.
Papildomi optimizavimo patarimai ir realybė
GZIP kompresija yra puikus startas, bet tai tik vienas iš daugelio optimizavimo žingsnių. Realybėje, kad svetainė tikrai greitai krautųsi, reikia kompleksinio požiūrio.
Pirmiausia, derink GZIP su Brotli kompresija. Brotli yra naujesnis algoritmas, kuris tekstiniams failams duoda dar geresnę kompresiją nei GZIP – vidutiniškai 15-20% geriau. Šiuolaikinės naršyklės palaiko Brotli, o senesnės automatiškai grįžta prie GZIP. Nginx ir Apache abu palaiko Brotli per papildomus modulius.
Antra, naudok CDN. Net su kompresija, fizinis atstumas tarp serverio ir vartotojo turi įtakos. CDN paskirstyti tavo turinį geografiškai arčiau vartotojų ir paprastai jau turi įjungtą kompresiją.
Trečia, optimizuok pačius failus. Kompresija nepadės, jei tavo JavaScript bundle yra 5MB. Minifikuok kodą, pašalink nenaudojamas bibliotekas, naudok code splitting. Kompresija turėtų būti paskutinis žingsnis, ne vienintelis.
Ketvirta, cache’ink agresyviai. Geriausias failas yra tas, kurio nereikia siųsti. Naudok tinkamus Cache-Control headers, versioning strategijas (pvz., failo pavadinime hash), ir naršyklės cache.
Praktikoje, įjungus GZIP kompresiją vidutinei svetainei, pastebėsi apie 60-70% tekstinių failų dydžio sumažėjimą. Tai gali reikšti puslapio įkėlimo laiko sumažėjimą nuo 3-4 sekundžių iki 1-2 sekundžių. Mobiliajame internete skirtumas dar ryškesnis.
Bet nesustok ties GZIP. Reguliariai testuok svetainės greitį, stebėk metrikas, eksperimentuok su skirtingais nustatymais. Kiekviena svetainė skirtinga, ir tai, kas veikia vienai, nebūtinai bus optimalu kitai. GZIP kompresija yra puikus fundamentas, ant kurio gali statyti greitą, efektyvią ir vartotojams patinkančią svetainę.