Gzip compression js / css / accelerazione del sito html - come abilitare in .htaccess

Stampa · Время на чтение: 9мин · di · Pubblicato · Aggiornato

riprodurreAscolta l'articolo

Compressione gzip js css html.Saluti, cari lettori! Oggi parleremo di compressione gzip js | css | htmlper velocizzare il caricamento del sito. Come abilitarlo con il file .htaccess. Ti dirò anche perché devi abilitare la compressione dei file sul lato server.

Questo argomento è direttamente correlato al tecnico ottimizzazione del sito. Consentendo manipolazioni abbastanza semplici, in modo significativo velocizzare il caricamento del sito web. Un sito veloce è un successo significativo nella promozione sui motori di ricerca.

Qual è lo scopo di abilitare la compressione dei file Gzip in .htaccess?

Come abilitare la compressione Gzip delle pagine del sito.

Come ho detto in molti dei miei articoli! Il sito nella fase iniziale ha un peso abbastanza elevato. E quelli. l'ottimizzazione è necessaria per ridurre il peso del nostro sito. Dobbiamo assolutamente ridurre la quantità di codice, il peso delle pagine, delle immagini e altro. Il compito generale è fornire all'utente una versione del sito a caricamento rapido e leggero.
Pertanto, forniamo informazioni rapidamente. La transizione tra pagine e sezioni avviene in una frazione di secondo. Allo stesso tempo, i visitatori vedranno rapidamente tutti gli elementi di design caricati e altri elementi interattivi di interazione.

Compressione GZIP: fornisce l'archiviazione ininterrotta dei file trasferiti. Pertanto, otteniamo una compressione senza perdita della qualità della sorgente. Tutti i dati tornano al loro stato originale dopo essere stati decompressi già nel browser dell'utente. L'implementazione stessa è dovuta a diversi algoritmi di lavoro. Questi includono DEFLATE di base utilizzando LZ77 e Huffman.

Naturalmente, questo tipo di compressione (compressione) non è una soluzione ideale. Ma l'implementazione di Gzip ci porta a un equilibrio tra velocità e rapporto di compressione. Questo metodo è il più popolare tra gli altri modi per velocizzare il sito. Inoltre, l'implementazione di un metodo più globale sul server richiederà molto tempo e test. E potrebbe non dare il risultato desiderato! La compressione Gzip a questo proposito è il modo più affidabile per velocizzare i download di file.

Compressione Gzip: per quali file è accettabile? Su quali server funziona?

In effetti la compressione gzip copre un ampio elenco di file. Ma ha un piccolo inconveniente! Quando un utente visita un sito, il server deve comprimere una grande quantità di dati al volo. Questo porta a un certo carico sul server. Ma non è critico nella maggior parte dei casi. Tutti i formati di file supportati dopo il trasferimento vengono visualizzati perfettamente nei browser più diffusi.

I principali includono:

  • testo/testo in chiaro/html;
  • testo/applicazione xml/applicazione xml/xhtml+applicazione xml/xml-dtd;
  • applicazione/rdf+xml applicazione/rss+xml applicazione/atom+xml immagine/svg+xml;
  • testo/testo css/applicazione javascript/applicazione javascript/x-javascript;
  • carattere/applicazione opentype/applicazione font-otf/x-font-otf;
  • font/applicazione truetype/applicazione font-ttf/x-font-ttf.
La compressione dei file Gzip viene utilizzata sui principali server Apache e Nginx. Con moduli di lavoro validi e capacità del server.

Ad esempio: Nginx - utilizzato per statico. Comprime ed elabora bene i file statici. La compressione avviene grazie ai moduli ngx_http_gzip_module e ngx_http_gzip_static_module. La compressione al volo ininterrotta viene eseguita con la sostituzione dell'estensione principale con ".gz".

Esempio di una configurazione standard:

gzippare;
gzip_min_length 1000;
gzip_types text/plain application/xml;

Apache è il server più richiesto. Naturalmente, la compressione su di esso sarà più ambiziosa e personalizzabile. La compressione Gzip su questo server viene eseguita utilizzando il modulo mod_deflate. Fornendo la compressione al volo prima di essere inviati al browser dell'utente.

Esempio di una configurazione standard:

# Abilita GZIP - abilita la compressione
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Compressione con un algoritmo lento per ridurre il carico sul server.

RewriteEngine On
AddEncoding gzip .gz
RewriteCond %{HTTP:Accept-encoding} gzip
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule ^(.*)$ $1.gz [QSA,L]

PHP è un'opzione meno popolare. Ma ha anche la capacità di organizzare la compressione usando il modulo zlib. Questo metodo non è raccomandato in quanto è estremamente lento.

Esempio di una configurazione standard:

1TP29OriginalFile = __DIR__ . '/jquery-1.11.0.min.js';
$gzipFile = __DIR__ . '/jquery-1.11.0.min.js.gz';

1TP29OriginalData = file_get_contents(1TP29OriginalFile);

$gzipData = gzencode($originalData, 9);
file_put_contents($gzipFile, $gzipData);

var_dump(dimensionefile($Fileoriginale)); // int(96380)
var_dump(dimensionefile($gzipFile)); // int(33305)

Naturalmente è possibile anche l'uso combinato di server Apache + Nginx + PHP. Pertanto, verrà fornita una certa distribuzione del carico tra i server. Ma questo è un compito molto difficile, che non dovrebbe essere svolto dagli utenti ordinari.

Ho configurato il mio server da solo, sfruttando tutti i principali vantaggi di Apache/Nginx/PHP. Pertanto, Nginx gestisce la statica, Apache gestisce il resto con PHP. Il risultato è molto positivo. Ma è stato speso molto tempo per organizzare questo metodo.

Come abilitare la compressione Gzip nel file .htaccess

In effetti, non è difficile farlo. Inoltre, ho già parlato di questo file.

Le regole di base rimangono le stesse:

  1. Assicurati di salvare il file .htaccess originale prima di modificarlo. In caso di errore 500, ci sarà qualcosa da ripristinare.
  2. Non dovrebbero esserci spazi tra le righe.
  3. Scriviamo tutti i commenti dopo il segno #.
  4. Assicurati di controllare l'integrità del codice dopo l'inserimento.

Diversi esempi di configurazione delle regole .htaccess standard sono già stati menzionati in precedenza. Ma secondo me questo non è abbastanza, quindi darò il mio esempio. Questo insieme di regole funziona su questo sito, come puoi vedere non ci sono problemi.

Allo stesso tempo, la compressione avviene al volo, il sito si carica rapidamente senza freni. Tutto quello che devi fare è incollare questo codice nel tuo file .htaccess. Se hai il tuo server, penso che tu sappia tutto da solo.

Per il pubblico principale, istruzioni per l'uso:

  1. Andiamo al server con qualsiasi client ftp popolare;
  2. Vai alla radice del sito (directory);
  3. Il file .htaccess si trova nella directory principale del sito;
  4. Lo apriamo con un editor di testo, in generale Sublime Text 3 è migliore;
  5. Successivamente, alla fine del file, incolla il codice che verrà mostrato di seguito.
  6. Si prega di controllare il codice, in quanto il sito è protetto dalla copia (potrebbe esserci un collegamento al sito alla fine del codice).

# Abilita GZIP
ifmodule mod_deflate.c deve essere racchiuso tra parentesi “<>”
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE testo/testo
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/flv
AddOutputFilterByType DEFLATE image/ico
AddOutputFilterByType DEFLATE image/swf
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/json
AddOutputFilterByType DEFLATE video/3gpp
AddOutputFilterByType DEFLATE video/3gpp2
AddOutputFilterByType DEFLATE video/x-flv
AddOutputFilterByType DEFLATE video/jpm
AddOutputFilterByType DEFLATE video/jpeg
AddOutputFilterByType DEFLATE video/x-m4v
AddOutputFilterByType DEFLATE video/mp4
AddOutputFilterByType DEFLATE video/ogg
AddOutputFilterByType DEFLATE video/webm
AddOutputFilterByType DEFLATE video/quicktime
AddOutputFilterByType DEFLATE audio/x-mpegurl
AddOutputFilterByType DEFLATE audio/midi
AddOutputFilterByType DEFLATE audio/mp3
AddOutputFilterByType DEFLATE audio/mp4
AddOutputFilterByType DEFLATE audio/mpeg
AddOutputFilterByType DEFLATE audio/webm
AddOutputFilterByType DEFLATE audio/basic
AddOutputFilterByType DEFLATE audio/x-wav
AddOutputFilterByType DEFLATE audio/wav
BrowserMatch ^Mozilla/4 gzip-solo-testo/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
ifmodule mod_gzip.c deve essere racchiuso tra parentesi “<>”
mod_gzip_on Sì
mod_gzip_item_include file \.js$
mod_gzip_item_include file \.css$
/ifmodule deve essere racchiuso tra parentesi “<>”
/ifmodule deve essere racchiuso tra parentesi “<>”

Se non racchiudi gli elementi richiesti tra parentesi, riceverai un errore. Il tuo sito smetterà semplicemente di funzionare e ti darà un errore del server interno 500. Anche il testo “deve essere racchiuso tra parentesi “<>”” deve essere rimosso dal codice. Successivamente, il file .htaccess deve essere salvato.

È anche una buona idea riavviare il server per applicare esattamente le nuove regole. Dopo tutte queste azioni, il tuo sito funzionerà molto più velocemente. La velocità di caricamento della pagina aumenterà in modo significativo.

Controlla la velocità di caricamento del sito web e la compressione Gzip

Dopo aver abilitato la compressione lato server. Puoi verificare il successo del lavoro svolto! Puoi farlo con diversi strumenti online popolari. Diamo un'occhiata a loro:

PageSpeed Insights - il principale e più popolare strumento online per il controllo del sito. Dopo le ultime modifiche nel 2018 da parte di Google. Fornisce un ampio elenco di dati per un'analisi dettagliata del sito.

Scopri di più su PageSpeed ​​Insights.

Che cosa può:

  1. Valutazione complessiva della velocità del sito;
  2. Specifica il tempo di caricamento del contenuto;
  3. Indice di velocità complessivo e tempo di interazione;
  4. Fornisce raccomandazioni per l'ottimizzazione;
  5. Mostra informazioni dettagliate sulle prestazioni;
  6. Indica se la compressione Gzip è abilitata o meno;
  7. Indica se l'hashing è abilitato o meno;
  8. Fornisce una grande quantità di informazioni per la correzione degli errori.

PageSpeed ti aiuterà a risolvere molti problemi di velocità del sito web. Grazie a questo strumento, molti errori del mio sito sono stati corretti.

Strumenti Pingdom è anche uno dei popolari strumenti di analisi dei siti web online. Fornisce informazioni abbastanza dettagliate su una varietà di criteri di valutazione del sito. È facile trovare cosa sta rallentando il download.

cos'è lo strumento pingdom?

Cosa ti darà:

  1. Valutazione delle prestazioni complessive del sito;
  2. Il numero di richieste al database del sito;
  3. Velocità di caricamento della pagina;
  4. Dimensione del contenuto per tipo di contenuto;
  5. Risposte del server 200/301/302/404/503 e altri;
  6. Query generali per domini;
  7. Rappresentazione grafica della situazione, ecc.;

Fornisce molte informazioni sulla velocità del sito. Ma non fornisce istruzioni dettagliate come Google.

Plugin di compressione GZIP per WordPress

Per quanto strano possa sembrare, ma i proprietari di siti sul CMS WordPress non devono preoccuparsi molto. La ragione di ciò è la varietà di plugin per abilitare la compressione sul sito. Tutto quello che devi fare è installare il plugin che ti piace. Quindi attivare e abilitare la compressione nelle impostazioni del plugin. Quindi farà tutto il lavoro per te. Descriverò un paio dei più popolari.

Page Speed Ninja è il plug-in con le migliori prestazioni per WordPress. Puoi rendere veloci i tuoi siti web su desktop e dispositivi mobili risolvendo i problemi rilevati da Google PageSpeed Insights in un clic. Consente di abilitare rapidamente la compressione sul sito.

Aumenta il tuo punteggio di Google PageSpeed ​​su Wordpress.

Cache WP più veloce è anche uno dei plugin di hashing più popolari. Ha un numero enorme di impostazioni raggruppate, una delle quali include la compressione.

WP Fastest Cache - Plugin per WordPress.

Deposito di comete Io stesso uso questo plugin. Poiché in combinazione con altri plugin, dà un risultato eccellente. Inoltre una delle sue impostazioni include la compressione gzip.

Comet Cache crea una cache di ogni pagina.

In generale, tutti i principali plugin di caching per Wordpress permettono di abilitare la compressione GZIP sul sito. Raccomando plugin multifunzionali a tutti gli effetti per il minor carico.

In conclusione, dirò quanto segue: assicurati di attivare la compressione. Ciò avrà un ottimo effetto sulle prestazioni e aumenterà il sito nella ricerca. Spero che questo articolo ti aiuti in questo.

Grazie per aver letto Nicola Top

Quanto è utile il post?

Clicca sulla faccina per votare!

voto medio 5 / 5. Numero di valutazioni: 52

Non ci sono ancora valutazioni. Valuta prima.

Potrebbero interessarti anche...

Una risposta

  1. Илья ha detto:

    Ho immediatamente copiato e incollato il codice, che ha causato un errore 500. Ora capisco cosa devo leggere attentamente. Vedo che hai anche la protezione dalla copia. E grazie al contenuto è adatto e funzionante.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

14 − 13 =