Come migliorare le prestazione e velocità del proprio sito web (con WordPress): file .htaccess e i suoi segreti

Pubblicato il 19/5/2011 • Blog , , , , , , , , ,

 


Attenzione: quanto segue funziona sui server di ARUBA. Non è detto che funzioni su tutti i server, dipende dalle impostazioni dei fornitori hosting.

Come molti web master mi sono interessato di velocità e prestazioni del mio sito web.
Per farlo ho utilizzato uno strumento fondamentale che di chiama GTMATRIX. Questo strumento fa un’analisi completa del vostro sito calcolando la Page Speed e Yslow grade.

Anche se sembrano separate queste due sezioni sono molto simili poiché migliorando le prestazioni della prima si va in genere a migliorare anche quelle della seconda e viceversa.

Se non siete molto pratici o non siete sicuri di quello che andrete a fare potete provare il plugin di Andrea Pernici:
WP Super Secure and Fast htaccess. Potete leggere sul suo articolo le funzioni del plugin.

Per prima cosa andremo a lavorare sul file di .htaccess.

 

 

COS’È UN FILE .HTACCESS?
I file .htaccess, sono dei semplici file che contengono le direttive di apache per la configurazione. Questi file possono essere modificati con programmi appositi o con gli editor di testo. Poi vanno opportunamente rinominati.

COME FUNZIONA?
I file htaccess di apache svolgono una funzione importante: quando apache riceve una richiesta, prima di eseguirla, verifica se esiste un file htaccess (che in è nella root del nostro sito), lo legge e lo interpreta e si configura in modo da rispettare le direttive presenti all’interno di quel file.

Modificando questo file si possono gestire tante variabili che contribuiscono a migliorare notevolmente la velocità del nostro sito nella risposta alla navigazione degli utenti.

 

 

HTACCESS CON WORDPRESS
Se utilizzate WordPress automaticamente durante l’istallazione verrà creato un file di htaccess nella root. Se ciò non dovesse accadere, cosa alquanto improbabile, WordPress ne crea uno se andiamo nella pagina Permalink del pannello di amministrazione e facciamo clic su Salva le modifiche, anche senza aver modificato nulla (anche se vi consiglio di scegliere come opzione Mese e nome).

Se il file esiste, aggiunge le sue regole in coda. Se il file non esiste, ne genera uno.
Il codice sarà una cosa di questo tipo:

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Se non avete nella vostra root di sistema il file htaccess dovremmo andare a crearlo manualmente. Se non avete editor che vi consentono di creare questo file create un file di testo normale ed una vota completato lo caricherete sul vostro spazio e lo rinominerete .htaccess.

 

 

PROTEGGERE FILE

Per prima cosa vediamo come proteggere i file (in particolare la config per WP).
nel file “wp-config.php” sono presenti infatti numerose informazioni importanti come per esempio:

  • i dati per l’autenticazione al database;
  • le informazioni relative all’Auth Key;
  • i prefissi delle tabelle;
  • i percorsi ad alcuni file.

Per mettere in sicurezza il file di configurazione è sufficiente inserire nel file htaccess le istruzioni:

<Files wp-config.php>
order allow,deny
deny from all
</Files>

Ovviamente essendo il file wp-config.php inserito nella root del sito e quindi nella stessa destinazione del file di htaccess non ho bisogno di specificare un percorso, ma allo stesso modo potete proteggere qualsiasi file inserendo nella prima linea di codice il percorso ex:

<Files sito/file/file_da_proteggere.php>

 

 

BLOCCARE L’HOTLINKING

L’hotlinking è, in parole dure, un furto di banda. Probabilmente è una cosa che avrete fatto anche voi inconsapevolmente. Quando qualcuno copia qualche pezzo di un nostro articolo con relative immagini e lo incolla nel nostro proprio sito o in un post non fa altro che appropriarsi sia del contenuto che delle immagini. Solo che ogni volta che qualcuno visiterà il sito che ci ha copiato l’articolo la richiesta di caricamento dell’immagine arriverà al nostro sito (rallentando noi e non chi ospita la nostra foto).  Così, quando si visualizza l’immagine nel suo blog, questa viene prelevata dal nostro sito, utilizzando dunque banda nostra.

Per impedirlo basta aggiungere questo codice al file .htaccess:

### bloccare l’hotlink ###
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteCond %{HTTP_REFERER}     !^$
RewriteCond %{REQUEST_FILENAME} -f
RewriteCond %{REQUEST_FILENAME} .(gif|jpe?g?|png)$ [NC]
RewriteCond %{HTTP_REFERER}     !^https?://([^.]+.)?dominio. [NC]
RewriteRule .(gif|jpe?g?|png)$ - [F,NC,L]
</ifModule>

Attenzione perché dovete sostituire nella settima riga la parola dominio con il vostro nome di dominio. Nel mio caso ho inserito 3nastri (da dominio www.3nastri.it).

Così però bloccheremo qualunque sito che tenta di prendere le nostre immagini, anche google, i servizi di feed ecc…
Conviene allora aggiungere questo codice:

RewriteCond %{HTTP_REFERER} !^url-sito$ [NC]

Sostituendo a url-sito l’indirizzo web dei siti che non vogliamo bloccare.
Eccovi alcuni esempi:

RewriteCond %{HTTP_REFERER} !^http://www.google.com/reader/view/.*$ [NC]
RewriteCond %{HTTP_REFERER} !^http://www.feedburner.com/.*$ [NC]

NB. Le righe vanno inserite dopo la settima riga.

 

 

LA COMPRESSIONE GZIP
Per capire bene cos’è la compressione Gzip vi rimando a questo articolo.
Questa compressione serve per diminuire il peso delle vostre pagine web.
Segue il codice per la compressione:

# Comincia compressione
SetOutputFilter DEFLATE
AddOutputFilter DEFLATE text/plain
AddOutputFilter DEFLATE text/html
AddOutputFilter DEFLATE text/xml
AddOutputFilter DEFLATE text/css
AddOutputFilter DEFLATE application/xml
AddOutputFilter DEFLATE application/xhtml+xml
AddOutputFilter DEFLATE application/rss+xml
AddOutputFilter DEFLATE application/javascript
AddOutputFilter DEFLATE application/x-javascript
AddOutputFilter DEFLATE application/x-httpd-php
AddOutputFilter DEFLATE application/x-httpd-fastphp
AddOutputFilter DEFLATE image/svg+xml
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
SetEnvIf User-Agent ".*MSIE.*" nokeepalive ssl-unclean-shutdown downgrade-1.0 force-response-1.0
# Don't compress images
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary

questo codice è quello rilasciato anche dagli amministratori Aruba, potrebbe non funzionare su tutti i server. Se così dovesse essere potete provare con questo codice alternativo:

AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
<FilesMatch ".(js|css|html|htm|php|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>

In breve questo codice non fa altro che specificare quali tipi di file andare a comprimere.

 

 

EXPIRE HEADER E ETAGS

Come sapete i browser come IE o Mozzilla utilizzano la cache per ridurre il numero di richieste HTTP e con esse il tempo di caricamento delle pagine.

Un server può utilizzare nella propria risposta HTTP il cosiddetto Expire Header, che indica al client (al tuo pc per capirci) per quanto tempo un componente deve essere conservato nella cache.

Gli ETags invece vengono utilizzati per determinare se il componente presente nella cache del tuo browser coincide con quello presente sul server remoto.

Perché gli ETags possono rappresentare un problema? Perché se il tuo sito è su più server, gli ETags per un medesimo file non coincidono. Quindi i tuoi utenti potrebbero ricaricare dei componenti già presenti in cache anche se non ve n’è alcun bisogno.

Inserendo il codice seguente andremo a specificare i tempi per ogni tipo di file.

Così facendo eviteremo di far ricaricare tutti quei file statici che non verranno modificati spesso sul nostro sito (ad esempio immagini di sfondo o file js per funzioni del sito ecc…)

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A31536000
ExpiresByType application/x-javascript A31536000
ExpiresByType text/html A31536000
ExpiresByType text/richtext A31536000
ExpiresByType image/svg+xml A31536000
ExpiresByType text/plain A31536000
ExpiresByType text/xsd A31536000
ExpiresByType text/xsl A31536000
ExpiresByType text/xml A31536000
ExpiresByType video/asf A31536000
ExpiresByType video/avi A31536000
ExpiresByType image/bmp A31536000
ExpiresByType application/java A31536000
ExpiresByType video/divx A31536000
ExpiresByType application/msword A31536000
ExpiresByType application/x-msdownload A31536000
ExpiresByType image/gif A31536000
ExpiresByType application/x-gzip A31536000
ExpiresByType image/x-icon A31536000
ExpiresByType application/vnd.ms-access A31536000
ExpiresByType audio/midi A31536000
ExpiresByType video/quicktime A31536000
ExpiresByType audio/mpeg A31536000
ExpiresByType video/mp4 A31536000
ExpiresByType video/mpeg A31536000
ExpiresByType application/vnd.ms-project A31536000
ExpiresByType application/vnd.oasis.opendocument.database A31536000
ExpiresByType application/vnd.oasis.opendocument.chart A31536000
ExpiresByType application/vnd.oasis.opendocument.formula A31536000
ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
ExpiresByType application/vnd.oasis.opendocument.text A31536000
ExpiresByType audio/ogg A31536000
ExpiresByType application/pdf A31536000
ExpiresByType image/png A31536000
ExpiresByType application/vnd.ms-powerpoint A31536000
ExpiresByType audio/x-realaudio A31536000
ExpiresByType application/x-shockwave-flash A31536000
ExpiresByType application/x-tar A31536000
ExpiresByType image/tiff A31536000
ExpiresByType audio/wav A31536000
ExpiresByType audio/wma A31536000
ExpiresByType application/vnd.ms-write A31536000
ExpiresByType application/vnd.ms-excel A31536000
ExpiresByType application/zip A31536000
</IfModule>
# Requires mod_expires to be enabled.
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType text/css "access plus 10 years"
ExpiresByType text/js "access plus 10 years"
ExpiresByType text/javascript "access plus 10 years"
ExpiresByType application/javascript "access plus 10 years"
ExpiresByType application/x-javascript "access plus 10 years"
#
FileETag MTime Size
#
# Cache all files for 2 weeks after access (A).
ExpiresDefault A1209600
#
# Do not cache dynamically generated pages.
ExpiresByType text/html A1
</IfModule>

Come potete vedere ho separato i file multimediali da css, js e applicazioni.

 

 

Dopo aver inserito queste righe di codice nel vostro file di  htaccess il nostro sito dovrebbe essere notevolmente migliorato.

Basta tornare su GTMATRIX e riprovare a fare una diagnosi.

Vi consiglio in ogni caso di spulciarvi bene GTMATRIX che fornisce anche spiegazioni sul significato di ogni problema riscontrato sul vostro sito.
Se avete domande o problemi lasciate un commento e cercherò di aiutarvi.

A breve pubblicherò un articolo su come usare GTmatrix e come sistemare gli errori dei siti web.

 

Contattaci

Scrivici e scopri come iniziare a valorizzare il tuo business.

    Accetto le condizioni espresse nella Privacy Policy e nei Termini e condizioni