Abilitare la compressione Gzip o Brotli in WordPress

Quando un browser richiede una pagina dal tuo sito WordPress, il server restituisce HTML, CSS, JavaScript e altri file basati su testo. Senza compressione, questi file vengono inviati nelle loro dimensioni originali. Abilitando la compressione, queste dimensioni dei file possono essere ridotte del 70-90%, il che si traduce direttamente in tempi di caricamento delle pagine più rapidi e costi di banda inferiori.

Come funziona la compressione dietro le quinte

La compressione si basa su una negoziazione tra browser e server. Quando il browser invia una richiesta, include un header Accept-Encoding che elenca gli algoritmi di compressione che supporta, tipicamente gzip, deflate, br. Il server controlla questo header, comprime la risposta utilizzando il miglior algoritmo disponibile e la rispedisce con un header Content-Encoding che indica quale metodo è stato utilizzato. Il browser quindi decomprime il contenuto prima di renderizzarlo. L'intero processo è trasparente per l'utente finale.

Esistono due principali algoritmi di compressione che incontrerai:

• Gzip: lo standard del settore da oltre due decenni. Supportato da ogni browser e server web. Rapporti di compressione del 70-80% sono tipici per i file basati su testo.
• Brotli: sviluppato da Google e rilasciato nel 2015. Offre rapporti di compressione migliori del 15-25% rispetto a Gzip con un utilizzo CPU simile. Supportato da tutti i browser moderni. Funziona solo su connessioni HTTPS.

Quali tipi di file devono essere compressi

La compressione funziona meglio su contenuti testuali e ripetitivi. Dovresti abilitarla per i seguenti tipi MIME:

• File di testo: text/html, text/css, text/javascript, text/xml, text/plain
• File di applicazione: application/javascript, application/json, application/xml, application/rss+xml, application/atom+xml
• Font e SVG: image/svg+xml, font/ttf, font/otf (i font WOFF e WOFF2 sono già compressi)

Non comprimere file binari come JPEG, PNG, WebP, GIF, MP4 o PDF. Questi formati utilizzano già i propri algoritmi di compressione e la ri-compressione spreca CPU senza ridurre la dimensione del file.

Risparmi di dimensione attesi

Per darti un'idea concreta di ciò che la compressione realizza, ecco alcuni esempi reali:

• Una tipica pagina HTML WordPress (80 KB): si comprime a circa 15-20 KB con Gzip o 12-16 KB con Brotli.
• Libreria jQuery (90 KB minificata): si comprime a circa 30 KB con Gzip o 25 KB con Brotli.
• Bootstrap CSS (160 KB): si comprime a circa 25 KB con Gzip o 20 KB con Brotli.
• Una grande risposta JSON API (500 KB): si comprime a circa 50-80 KB con Gzip.

Su un intero sito WordPress, abilitare la compressione riduce tipicamente la dimensione totale di trasferimento del 60-80%.

Apache: abilitare Gzip con mod_deflate

Se il tuo sito WordPress funziona su Apache (come accade con la maggior parte dei provider di hosting condiviso), aggiungi quanto segue al tuo file .htaccess. Posizionalo prima delle regole di riscrittura di WordPress:

<IfModule mod_deflate.c>
    # Compress HTML, CSS, JavaScript, Text, XML and fonts
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/json
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom+xml
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/woff

    # Remove browser bugs for older browsers
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html

    # Make sure proxies deliver the correct content
    Header append Vary Accept-Encoding
</IfModule>

Il wrapper IfModule garantisce che questa configurazione venga applicata solo se mod_deflate è installato. Nella maggior parte dei provider di hosting è abilitato per impostazione predefinita. Se ricevi un errore 500 Internal Server Error dopo aver aggiunto questo codice, contatta il tuo host per confermare che mod_deflate sia disponibile.

Nginx: abilitare la compressione Gzip

Se il tuo server funziona su Nginx, aggiungi le seguenti direttive al tuo blocco server o al blocco http nel tuo file nginx.conf:

gzip on;
gzip_vary on;
gzip_proxied any;
gzip_comp_level 6;
gzip_min_length 256;
gzip_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/x-javascript
    application/xml
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf;

Alcune note su queste impostazioni: gzip_comp_level 6 offre un buon equilibrio tra rapporto di compressione e utilizzo CPU. Livelli superiori a 6 producono rendimenti decrescenti aumentando significativamente il carico CPU. La direttiva gzip_min_length 256 evita la compressione di file molto piccoli in cui l'overhead della compressione supera il risparmio. La direttiva gzip_vary on dice ai proxy di caching di memorizzare versioni separate per contenuti compressi e non compressi.

Nginx: abilitare la compressione Brotli

Brotli non è incluso nel pacchetto Nginx standard. Devi installare il modulo ngx_brotli separatamente o utilizzare una distribuzione che lo includa (molte distribuzioni Linux moderne lo offrono come pacchetto opzionale). Dopo l'installazione, aggiungi questo alla tua configurazione Nginx:

brotli on;
brotli_comp_level 6;
brotli_min_length 256;
brotli_types
    text/plain
    text/css
    text/xml
    text/javascript
    application/json
    application/javascript
    application/x-javascript
    application/xml
    application/xml+rss
    application/atom+xml
    image/svg+xml
    font/ttf
    font/otf;

Puoi eseguire Gzip e Brotli contemporaneamente. Nginx servirà Brotli ai browser che lo supportano e ricadrà su Gzip per gli altri. Questa è la configurazione consigliata per la massima compatibilità.

Plugin WordPress che gestiscono la compressione

Se non hai accesso ai file di configurazione del server (comune con hosting condiviso), diversi plugin di caching WordPress possono abilitare la compressione per te:

• WP Rocket: aggiunge automaticamente le regole di compressione Gzip al tuo file .htaccess al momento dell'attivazione. Nessuna configurazione aggiuntiva necessaria. È un plugin premium.
• LiteSpeed Cache: se il tuo host utilizza il server web LiteSpeed, questo plugin abilita la compressione a livello di server, che è più efficiente di mod_deflate di Apache. Gratuito e disponibile nel repository plugin WordPress.
• W3 Total Cache: offre la compressione Gzip come parte delle impostazioni Browser Cache. Abilitala in Performance > Browser Cache > HTTP compression. Gratuito, ma con una curva di apprendimento più ripida.
• WP Super Cache: include un'opzione "Compress pages" che serve file statici pre-compressi. Più semplice di W3 Total Cache ma con meno opzioni.

Tieni presente che se il tuo provider di hosting abilita già la compressione a livello di server, aggiungerla nuovamente tramite un plugin non avrà alcun effetto aggiuntivo. Verifica prima di apportare modifiche.

Come testare se la compressione funziona

Dopo aver abilitato la compressione, devi verificare che venga effettivamente applicata. Ecco diversi metodi:

• DevTools del browser: apri il tuo sito, premi F12 per aprire DevTools, vai alla scheda Rete e ricarica la pagina. Fai clic su una richiesta HTML, CSS o JS e guarda l'header della risposta. Dovresti vedere Content-Encoding: gzip o Content-Encoding: br. Puoi anche confrontare la colonna "Size" (dimensione di trasferimento compressa) con la colonna "Content" o "Resource" (dimensione effettiva decompressa).
• Strumenti online: siti web come GTmetrix, Google PageSpeed Insights e il compression checker di KeyCDN possono verificare che il tuo sito stia servendo contenuti compressi. Segnalano risorse non compresse se trovate.
• Riga di comando: se hai accesso a un terminale, puoi usare curl -H "Accept-Encoding: gzip" -I https://tuosito.it per vedere gli header della risposta. Cerca l'header Content-Encoding nell'output.
• Scansione InspectWP: esegui una nuova scansione InspectWP dopo aver abilitato la compressione. La sezione prestazioni mostra il valore di Content-Encoding. Dovrebbe mostrare gzip o br (Brotli) invece di essere vuoto o mancante.

Risoluzione dei problemi comuni

Se la compressione sembra non funzionare dopo le modifiche, controlla quanto segue:

• Sovrascrittura CDN: se utilizzi un CDN come Cloudflare, il CDN può gestire la compressione indipendentemente dalle impostazioni del server. Cloudflare abilita Gzip per impostazione predefinita e offre Brotli come interruttore nelle impostazioni Speed.
• Modulo server non caricato: su Apache, mod_deflate deve essere abilitato. Contatta il tuo provider di hosting se non sei sicuro. Su Nginx, il modulo Brotli richiede l'installazione separata.
• Regole in conflitto: più plugin o regole .htaccess che tentano di impostare la compressione possono entrare in conflitto. Controlla i blocchi mod_deflate duplicati nel tuo file .htaccess.
• Livello di proxy o cache: i reverse proxy come Varnish possono rimuovere o modificare gli header di compressione. Assicurati che ogni livello del tuo stack sia configurato correttamente.