Dokumentacija

Vklopite Brotli ali gzip

Vklopite Brotli ali gzip

HTML, CSS in JavaScript so navadno besedilo, besedilo pa se zelo dobro stisne: 300 KB velika skripta z gzipom običajno potuje kot 70–90 KB, z Brotlijem še malo manj. Brskalnik jo razpakira v delčku milisekunde. Brez stiskanja vsak obiskovalec prenese tri- do petkrat več, kot je treba, kar se najbolj pozna na telefonu s slabim signalom, in stran izgubi točke v Googlovih meritvah hitrosti.

Stiskanje je nastavitev strežnika, ne nekaj, kar naredi koda strani. Kontrolni seznam strani ga preveri na dveh mestih: na sami strani ter na datotekah CSS in JavaScript, ki jih stran nalaga z vaše domene.

Kaj naj bo stisnjeno

Stisnite Ne stiskajte
HTML (text/html) JPEG, PNG, WebP, AVIF, GIF
CSS (text/css) pisave WOFF2
JavaScript (application/javascript, text/javascript) video, zvok, ZIP, PDF
JSON, XML, SVG, navadno besedilo

Desni stolpec je že stisnjen; ponovno stiskanje samo porablja procesor. Brotli (br) je nekoliko manjši od gzipa in ga podpirajo vsi sodobni brskalniki, a za kontrolni seznam je dovolj že gzip.

Najpogostejši razlog za rumeno postavko "CSS and JavaScript compressed" je nginx: Debian in Ubuntu ga namestita z gzip on, vrstica, ki našteje druge vrste datotek, pa je zakomentirana, zato je stisnjen samo HTML.

Preverite sami

Namesto example.com vpišite svojo stran, namesto drugega naslova pa eno od svojih datotek CSS ali JS (kontrolni seznam našteje tiste, ki jih je našel nestisnjene):

curl -s -o /dev/null -D - -H 'Accept-Encoding: br, gzip' https://example.com/ | grep -i '^content-encoding'
curl -s -o /dev/null -D - -H 'Accept-Encoding: br, gzip' https://example.com/assets/app.css | grep -i '^content-encoding'

content-encoding: br ali content-encoding: gzip pomeni stisnjeno. Če ukaz ne izpiše ničesar, je bila datoteka poslana nespremenjena.

Kako popraviti

Izberite mesto, ki datoteke dejansko pošilja. Če je pred stranjo Cloudflare, stiska on; sicer je to spletni strežnik ali nadzorna plošča gostovanja.

nginx

Odprite /etc/nginx/nginx.conf (ista pot na Debianu, Ubuntuju, Rocky, Alma in CentOS) in se znotraj bloka http { … } prepričajte, da so vrstice gzip aktivne in ne zakomentirane:

http {
    gzip on;
    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 5;
    gzip_min_length 256;
    gzip_types text/css text/plain text/xml application/javascript text/javascript
               application/json application/xml application/rss+xml image/svg+xml;
}

text/html je stisnjen vedno, ko je nastavljen gzip on, zato ga na seznamu ni. gzip_vary predpomnilnikom pove, da je odgovor odvisen od tega, kaj brskalnik sprejme, gzip_proxied any pa ohrani stiskanje, ko zahtevek pride prek CDN-ja ali drugega proxyja.

Brotli potrebuje ločen modul ngx_brotli. Kjer ga distribucija ponuja kot paket (na novejših Debianu in Ubuntuju kot libnginx-mod-http-brotli-filter), ga namestite in poleg vrstic gzip dodajte:

brotli on;
brotli_comp_level 5;
brotli_types text/css text/plain text/xml application/javascript text/javascript
             application/json application/xml application/rss+xml image/svg+xml;

Preverite in uveljavite:

sudo nginx -t && sudo systemctl reload nginx

Apache in LiteSpeed

Z dostopom do strežnika (Apache). Stiskanje je mod_deflate. Na Debianu in Ubuntuju ga vklopite s sudo a2enmod deflate; na Rocky, Alma in CentOS je naložen privzeto. Nato v <VirtualHost> strani ali v .htaccess dodajte:

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
    AddOutputFilterByType DEFLATE application/javascript text/javascript
    AddOutputFilterByType DEFLATE application/json application/xml application/rss+xml image/svg+xml
</IfModule>
sudo apachectl configtest && sudo systemctl reload apache2

(Na Rocky, Alma in CentOS httpd namesto apache2.) Apache 2.4.26 in novejši ima tudi mod_brotli (sudo a2enmod brotli) s filtrom BROTLI_COMPRESS za iste vrste.

Brez dostopa do strežnika (deljeno gostovanje). Isti blok dodajte v .htaccess v korenu strani. Strežniki LiteSpeed stiskajo na ravni strežnika, običajno z že vklopljenima gzipom in Brotlijem; če preverjanje pri gostitelju z LiteSpeedom še vedno ne kaže stiskanja, podporo prosite, naj ga vklopi.

cPanel

  1. Odprite Software → Optimize Website.
  2. Izberite Compress All Content (ali Compress the specified MIME types in naštejte vrste iz zgornje tabele).
  3. Kliknite Update Settings.

cPanel zapiše pravila mod_deflate v .htaccess strani. Če zaslona ni ali preverjanje še vedno ne kaže stiskanja, je strežnik morda LiteSpeed ali nginx; vprašajte gostitelja, zanj je to nastavitev strežnika.

Plesk

V Plesku je nginx običajno pred Apachem in datoteke obiskovalcu pošilja on, zato stiskanje sodi tja. Websites & Domains → example.com → Apache & nginx Settings, v Additional nginx directives dodajte:

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 5;
gzip_types text/css text/plain text/xml application/javascript text/javascript
           application/json application/xml image/svg+xml;

Kliknite OK; Plesk preveri sintakso in znova naloži nginx. Če stran teče samo na Apachu (nginx izklopljen), namesto tega uporabite blok .htaccess iz zavihka Apache.

Cloudflare

Ko stran teče za Cloudflarom (oranžen oblak), Cloudflare na poti do obiskovalca stisne HTML, CSS, JavaScript in druge besedilne vrste z Brotlijem ali gzipom, na vseh paketih in ne glede na to, kaj naredi strežnik. Vklopiti ni treba ničesar.

Če preverjanje še vedno ne kaže stiskanja, poiščite eno od teh stvari:

  • Zapis je DNS only (siv oblak), zato promet ne gre skozi Cloudflare.
  • Strežnik pošilja Cache-Control: no-transform, kar Cloudflaru prepove spreminjati odgovor.
  • Datoteka se streže z druge domene, ki ni na Cloudflaru.

WordPress

WordPress sam ne stiska ničesar; to naredi spletni strežnik. Vtičniki za predpomnjenje lahko pomagajo s konfiguracijo: WP Rocket zapiše pravila mod_deflate v .htaccess, W3 Total Cache pa ima možnost gzip pod Performance → Browser Cache. Oba delujeta samo na Apachu ali LiteSpeedu, kjer se .htaccess bere. Na nginxu pravila ne naredijo ničesar.

Če stran uporablja LiteSpeed Cache, stiska strežnik LiteSpeed, ne vtičnik. Če je postavka po nastavitvi vtičnika in čiščenju predpomnilnika še vedno rumena, uporabite zavihek za vašo nadzorno ploščo gostovanja ali strežnik ali vprašajte gostitelja.

Node.js in Next.js

Next.js odgovore stisne z gzipom, ko ga poženete z next start (compress: true je privzeto). Če pred njim že stiska nginx ali CDN, ga izklopite v next.config.js, da se delo ne opravi dvakrat:

module.exports = {
    compress: false,
};

Express potrebuje middleware compression (npm install compression), registriran pred vašimi potmi in statičnimi datotekami:

const compression = require('compression');
app.use(compression());

Pri obremenjeni strani je ceneje, da stiska nginx ali CDN, Node pa ostane aplikaciji.

IIS in ASP.NET

IIS privzeto stiska statične datoteke (CSS, JS), stiskanje dinamičnih strani pa je ločena funkcija vloge. V Server Managerju namestite Dynamic Content Compression (Add Roles and Features → Web Server → Performance), nato oboje vklopite v web.config strani:

<configuration>
  <system.webServer>
    <urlCompression doStaticCompression="true" doDynamicCompression="true" />
  </system.webServer>
</configuration>

Za Brotli Microsoft ponuja brezplačno razširitev IIS Compression, ki poleg gzipa doda shemo Brotli.

Gostovane platforme

Shopify, Wix, Squarespace in Webflow stiskajo vse sami. Če kontrolni seznam tam poroča o nestisnjeni datoteki, ta običajno prihaja iz aplikacije tretje osebe ali z zunanjega gostitelja, ki ga lahko vprašate, ne s platforme.

Na kaj paziti

  • Predpomnjene kopije. CDN ali vtičnik za predpomnjenje lahko še naprej streže kopijo, ki jo je shranil pred spremembo. Po vklopu stiskanja počistite predpomnilnik.
  • Dvojno stiskanje. PHP-jev zlib.output_compression in spletni strežnik naj ne stiskata oba: to porablja procesor in pri nekaterih nastavitvah brskalnik dobi odgovor, ki ga ne zna prebrati. Naj to dela spletni strežnik.
  • Vnaprej stisnjene datoteke. Orodja za gradnjo lahko poleg izvirnika ustvarijo app.css.gz in app.css.br. nginx jih streže z gzip_static on; (in z modulom brotli_static on;), kar prihrani procesor pri vsakem zahtevku.

Potrdite popravek

Znova poženite oba ukaza curl iz razdelka Preverite sami, nato v PulseKeeperju odprite tarčo in na zavihku Kontrolni seznam kliknite Preveri zdaj. Obe postavki, za stran ter za CSS in JavaScript, se v nekaj minutah obarvata OK, ne šele ob naslednjem dnevnem preverjanju.