Scopri come velocizzare i siti Web utilizzando Nginx e il modulo Gzip

Anche in un momento in cui sono disponibili velocità Internet significative in tutto il mondo, ogni sforzo per ottimizzare i tempi di caricamento del sito Web è benvenuto a braccia aperte.

In questo articolo discuteremo un metodo per aumentare la velocità di trasferimento riducendo le dimensioni dei file tramite la compressione. Questo approccio offre un ulteriore vantaggio in quanto riduce anche la quantità di larghezza di banda utilizzata nel processo e lo rende più economico per il proprietario del sito Web che lo paga.

Per raggiungere l'obiettivo indicato nel paragrafo precedente, useremo Nginx e il suo built-in gzip modulo in questo articolo. Come il documentazione ufficiale afferma, questo modulo è un filtro che comprime le risposte utilizzando il noto metodo di compressione gzip. Ciò garantisce che la dimensione dei dati trasmessi venga compressa della metà o anche di più.

Lettura consigliata:La guida definitiva per proteggere, rafforzare e aumentare le prestazioni dei siti Web Nginx

Quando raggiungerai la fine di questo post, avrai un altro motivo per considerare l'utilizzo Nginx per servire i tuoi siti Web e le tue applicazioni.

Installazione del server Web Nginx

Nginx è disponibile per tutte le principali distribuzioni moderne. Anche se useremo a CentOS 7 macchina virtuale (IP 192.168.0.29) per questo articolo.

Le istruzioni fornite di seguito funzioneranno con piccole (se presenti) modifiche anche in altre distribuzioni. Si presume che il tuo VM è una nuova installazione; in caso contrario, dovrai assicurarti che non ci siano altri server web (come Apache) in esecuzione sulla tua macchina.

Installare Nginx insieme alle sue dipendenze richieste, usa il seguente comando:

Su CentOS/RHEL 7 e Fedora 22-24 # yum update && yum installa nginx Su distribuzioni Debian e Ubuntu # apt update && apt install nginx. 

Per verificare che l'installazione sia stata completata correttamente e che Nginx può servire file, avviare il server web:

# systemctl avvia nginx. # systemctl abilita nginx. 

e quindi apri un browser web e vai a http://192.168.0.29 (non dimenticare di sostituire 192.168.0.29 con l'indirizzo IP o il nome host del tuo server). Dovresti vedere la pagina di benvenuto:

Pagina di benvenuto predefinita di Nginx
Pagina di benvenuto predefinita di Nginx

Dobbiamo tenere presente che alcuni tipi di file possono essere compressi meglio di altri. File di testo normale (come HTML, CSS, e JavaScript file) si comprimono molto bene mentre altri (.iso File, tarball, e immagini, per citarne alcuni) no, in quanto già compressi dalla natura.

Quindi, ci si può aspettare che la combinazione di Nginx e gzip ci consentirà di aumentare le velocità di trasferimento del primo, mentre il secondo potrebbe mostrare miglioramenti minimi o nulli.

È anche importante tenere presente che quando il gzip il modulo è abilitato, HTML i file sono SEMPRE compresso, ma altri tipi di file che si trovano comunemente nei siti Web e nelle applicazioni (vale a dire, CSS e JavaScript) non lo sono.

Test della velocità del sito Web Nginx SENZA il modulo gzip

Per iniziare, scarichiamo un completo Bootstrap modello, un'ottima combinazione di HTML, CSS, e JavaScript File.

Dopo aver scaricato il file compresso, lo decomprimeremo nella directory principale del nostro blocco server (ricorda che questo è il Nginx equivalente di DocumentRoot direttiva in an Host virtuale Apache dichiarazione):

# cd /var/www/html. # wget https://github.com/BlackrockDigital/startbootstrap-creative/archive/gh-pages.zip. # unzip -a gh-pages.zip. # mv startbootstrap-creative-gh-pages tecmint. 

Dovresti avere la seguente struttura di directory all'interno /var/www/html/tecmint:

# ls -l /var/www/html/tecmint. 
Nginx DocumentRoot Content
Nginx DocumentRoot Content

Ora vai a http://192.168.0.29/tecmint e assicurati che la pagina venga caricata correttamente. La maggior parte dei browser moderni include una serie di strumenti per sviluppatori. Nel Firefox, puoi aprirlo tramite il Strumenti → Sviluppatore Web menù.

Siamo particolarmente interessati al Rete sottomenu, che ci consentirà di monitorare tutte le richieste di rete in corso tra il nostro computer e la rete locale e Internet.

Lettura consigliata:Installa Mod_Pagespeed per accelerare le prestazioni di Nginx fino a 10 volte

Una scorciatoia per aprire il Rete il menu negli strumenti per sviluppatori è Ctrl + Maiusc + Q. Premi quella combinazione di tasti o usa la barra dei menu per aprirla.

Poiché siamo interessati ad esaminare il trasferimento di HTML, CSS, e JavaScript file, fare clic sui pulsanti in basso e aggiornare la pagina. Nella schermata principale vedrai il dettaglio del trasferimento di tutti i HTML, CSS, e JavaScript File:

Controlla che Nginx utilizzi la compressione
Controlla che Nginx utilizzi la compressione

A destra di Dimensione colonna (che mostra le dimensioni dei singoli file) vedrai i singoli tempi di trasferimento. Puoi anche fare doppio clic su un dato file per vedere maggiori dettagli nel tempi scheda.

Assicurati di prendere nota dei tempi mostrati nell'immagine sopra in modo da poterli confrontare con lo stesso trasferimento una volta abilitato il gzip modulo.

Abilitazione e configurazione del modulo gzip in Nginx

Per abilitare e configurare il gzip modulo, aperto /etc/nginx/nginx.conf, individua il blocco del server principale come mostrato nell'immagine sottostante e aggiungi o modifica le seguenti righe (non dimenticare il punto e virgola alla fine o Nginx restituirà un messaggio di errore al riavvio in seguito!)

radice /var/www/html; gzip su; gzip_types testo/immagine semplice/immagine jpeg/testo png/testo css/javascript; 
Abilita il modulo Gzip in Nginx
Abilita il modulo Gzip in Nginx

Il gzip turni direttivi sopra o spento il modulo gzip, mentre gzip_types è usato per elencare tutti i tipi MIME che il modulo dovrebbe gestire.

Per saperne di più su MIMO tipologie e visualizzare le tipologie disponibili, vai a Basics_of_HTTP_MIME_types.

Test della velocità del sito Web Nginx con il modulo di compressione Gzip

Una volta completati i passaggi precedenti, riavviamo Nginx e ricaricare la pagina premendo Ctrl + F5 (di nuovo, questo funziona in Firefox, quindi se stai usando un browser diverso consulta prima la documentazione corrispondente) per sovrascrivere la cache e osserviamo i tempi di trasferimento:

# systemctl riavvia nginx. 

La scheda Richieste di rete mostra alcuni miglioramenti significativi. Confronta i tempi per vedere di persona, tenendo presente che si tratta dei trasferimenti tra il nostro computer e 192.168.0.29 (i trasferimenti tra i server di Google e i CDN sono al di fuori della nostra portata):

Test e verifica della compressione Nginx Gzip
Test e verifica della compressione Nginx Gzip

Ad esempio, consideriamo i seguenti esempi di trasferimento di file prima/dopo l'abilitazione di gzip. I tempi sono dati in millisecondi:

  1. index.html (rappresentata da /tecmint/ in cima alla lista): 15 / 4
  2. Creativo.min.css: 18 / 8
  3. jquery.min.js: 17 / 7

Questo non ti fa amare? Nginx ancora di più? Per quanto mi riguarda, lo fa!

Riepilogo

In questo articolo abbiamo dimostrato che è possibile utilizzare il modulo gzip di Nginx per accelerare i trasferimenti di file. La documentazione ufficiale per modulo gzip elenca altre direttive di configurazione a cui potresti voler dare un'occhiata.

Inoltre, il sito Web di Mozilla Developer Network ha una voce sul Monitor di rete che spiega come utilizzare questo strumento per capire cosa sta succedendo dietro le quinte in una richiesta di rete.

Come sempre, sentiti libero di utilizzare il modulo di commento qui sotto se hai domande su questo articolo. Non vediamo l'ora di sentire da voi!

Teachs.ru