Come migliorare la velocita’ del vostro sito, gzip compression, browser caching, expires headers e altri trucchi.

Blog Problem Solving Tutorial

Come velocizzare il tuo sito attraverso la consiguratione del server e .htaccess in modo da migliorare il SEO del sito.

La velocita’ di un sito e il tempo di caricamento di un sito e’ una prerogativa per migliorare il SEO del sito stesso e per rendere il sito piu’ user-friendly. Apparentemente questi aspetti sono importanti per la classifica di Google quanto la meta-description e il titolo della pagina.

Il seguente tutorial vi insegna come migliorare certi aspetti del sito in modo da renderlo piu’ veloce attraverso la configurazione del file .htaccess, questo file solitamente si trova nella cartella principale del sito. Per editare .htaccess dovreste avere un accesso FTP al vostro sito o accesso SSH.

Prima di tutto dovreste assicurarvi che i seguenti moduli siano installati e funzionanti nel server:

  • mod_deflate
  • mod_expires
  • mod_rewrite
  • mod_gzip

Se avete accesso al sito tramite SSH vi consiglio di lanciare i seguenti comandi nella bash di Linux in serie per attivare i moduli sopra citati. Se non avete accesso alla bash di Linux vi consiglio di mettervi in contatto con il vostro amministratore di server o con il vostro hosting space provider e assicuratevi che i moduli sopra sono installati e attivatti.

Prima di tutto installare il pacchetto apache2-utils con i seguenti comandi:

sudo apt-get update
sudo apt-get install apache2-utils

Installare i moduli con i comandi:

sudo a2enmod cache
sudo a2enmod cache_disk
sudo a2enmod expires
sudo a2enmod headers

Riavviare il server per rendere le modifiche attive:

sudo systemctl restart apache2

Ora che i moduli sono installati e abilitati possiamo editare il file .htaccess con la seguente riga

sudo nano .htaccess

Le seguenti linee di codice servono per aiutare server e browser a cachare i diversi file e a definire la vita massima dei file, questo processo si chiama cache validator. Ogni risorsa del sito dovrebbe avere una Last-Modified o ETag header e per ogni tipo di file elencato sotto si definisce una data di scadenza. Questo processo viene chiamato anche Expires headers il quale aiuta il browser di beneficiare del caching. Copiate e incollate il codice seguente nel vostro file .htaccess:

<IfModule mod_expires.c>
  ExpiresActive On

  # Images
  ExpiresByType image/jpeg "access plus 1 year"
  ExpiresByType image/gif "access plus 1 year"
  ExpiresByType image/png "access plus 1 year"
  ExpiresByType image/webp "access plus 1 year"
  ExpiresByType image/svg+xml "access plus 1 year"
  ExpiresByType image/x-icon "access plus 1 year"

  # Video
  ExpiresByType video/mp4 "access plus 1 year"
  ExpiresByType video/mpeg "access plus 1 year"

  # CSS, JavaScript
  ExpiresByType text/css "access plus 1 month"
  ExpiresByType text/javascript "access plus 1 month"
  ExpiresByType application/javascript "access plus 1 month"

  # Others
  ExpiresByType application/pdf "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"
</IfModule>

La parte seguente attiva la compression gzip per ridurre la grandezza dei file e migliorare la velocita’ con cui i files vengono mandati al browser. Questo puo’ aumentare la velocita’ del sito di addirittura il 70%. Copiate e incollate il codice seguente nel vostro file .htaccess:

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Se la compressione create dalle righe precedenti non dovrebbe bastare il seguente codice aiuta a comprimere i file immagine e testo in base alla loro estensione. Questo codice non fa niente di piu’ che il codice precedente non aveva gia’ fatto, ma lo applica a immagini e file di testo:

<ifModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

Se tutto e’ andato correttamente il vostro sito dovrebbe essere stato aumentato del 30% / 60%, per testare i processi di velocizazzione del sito viconsiglio di usare gtmetrix.com che potete trovare in questo link.

NOTA: Questo tutorial di consente di velocizzare il sito migliorando le risorse del vostro sito stesso, se il vostro sito ha molti collegamenti esterni o risorse esterne questa guida non puo’ aiutare, per esempio se importate risorse come librerie javascript esterne o font di google ecc, queste ultime non possono essere ottimizzate. Ovviamente vi e’ consentito cambiare e modificare le risorse del vostro server e non di server altrui, di conseguenza consiglio di copiare le tutte le risorse esterne nel vostro server e cambiare i collegamenti.

You May Like

I built a WordPress plugin that gives the possibility to make the background image clickable, I have worked on this plugin with the idea in mind that a plugin has to be the more possible standard in order to work with any existing WordPress theme, but I realized that making such plugin is virtually impossible as long as any […]

November 12, 2020
Read More...

Siccome ho notato che c’e’ molta confusione sulla gestione e la creazione di Shortcode in Stackoverflow e in generale su internet ho deciso di fare questa guida per spiegare in modo semplice come creare e gestiore un Shortcode in Wordpree e a che cosa serve. Prima di tutto … Cos’e’ uno Shortcode in WordPress e a […]

October 10, 2020
Read More...

Oggi vediamo di analizzare un errore che appare ultimamente spesso nell’ispector e che e’ molto difficile da individuare e risolvere. L’errore appare come “Failed to load resource: net::ERR_BLOCKED_BY_CLIENT” o anche come “Impossibile caricare la rete: net :: ERR_BLOCKED_BY_CLIENT” se il vostro browser e’ in italiano. Questo errore e’ sempre seguito da un url, l’url in […]

May 23, 2020
Read More...

Click to Leave a Comment