Come migliorare le prestazione e velocità del proprio sito web (con WordPress): file .htaccess e i suoi segreti
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.
21 commenti su “Come migliorare le prestazione e velocità del proprio sito web (con WordPress): file .htaccess e i suoi segreti”
lele
12 anni fa | 19-5-2011
Ciao, ma se io utilizzo joomla con mod_rewrite? dici che è possibile sfruttare i caching dei browser? pagespeed mi sollecita a farlo, ma a quando pare con questo modulo non è possibile farlo…. dimmi che mi sbaglio 🙂
Grazie
3Nastri
12 anni fa | 19-5-2011
Allora da quello che leggo in rete Joomla ha un file htaccess.txt nella root dell’istallazione, che va quindi rinominato in .htaccess.
Ma qui stiamo sempre parlando di .htaccess che è un file che interagisce con server apache.
Il mod_rewrite come l’ho impostato dovrebbe andare bene su quasi tutti i server, ma in ogni caso bisogna vedere da chi ti fornisci per hosting ed eventualmente chiedere all’assistenza.
Non capisco quando dici “con questo modulo”.
Io trovato questo post in giro.
Vedi se può esserti utile o dammi più informazioni sui servizi che utilizzi.
Ciao
Alexblog
12 anni fa | 19-5-2011
Ho cercato di installare gzip in diversi modi e appena attivato il plugin, alcune pagine del blog “WordPress” mi vanno in errore(Forbidden You don’t have permission to access / on this server)solo per l’uso dello scorrimento numerico in fondo pagina.???
Se apro altre pagine, senza l’utilizzo dello scorrimento “precedente, successivo e numerico” va tutto bene…
Grazie
3Nastri
12 anni fa | 19-5-2011
Non ho mai usato plugin.
Ti consiglio di non usarli, ma di creare un file .htaccess copiando e incollando la parte della compressione Gzip.
massimiliano
12 anni fa | 19-5-2011
Io un sito in html collegato ad un blog creato con worpdress e ho due file .htaccess, uno per il sito uno per il blog.
Come mi devo comportare in questo caso?
3Nastri
12 anni fa | 19-5-2011
l’unico file di .htaccess che viene letto è quello nella root.
Se hai questo file in sottocartelle non servirà per gestire i parametri descritti in questo post.
Emanuele Fucà
12 anni fa | 19-5-2011
Ciao 3Nastri complimenti per l’articolo, molto dettagliato e funzionale per chi lavora con wordpress. Volevo sapere se sai qualcosa riguardo la gestione degli .htaccess di register.it … visto che ho alcuni siti su questo hosting vedo la differenza tra di loro nei vari .htaccess. Alcuni siti quelli più recenti mi fa impostare il mod_rewrite e le prestazioni dovrebbero essere più veloci e funziona senza problemi, altri invece mi fa usare PHP per servire i file in cache. Devo inserire dei video mp4 e .ogv dentro il sito e ho letto che bisogna modificare .htaccess ma avendo il PHP server cache attivo di wp_super cache ho paura di rovinare tutto quanto il codice e non far funzionare per bene il sito. Ti ho allegato una screen del codice presente nell .htaccess. Ti ringrazio per l’attenzione e aspetto tue notizie.
SergioTrenna
12 anni fa | 19-5-2011
Non capisco perché parli di rovinare il codice. A limite se c’è un errore nel file .htaccess le cose non funzionano o il sito diventa bianco (a questo punto rimuovi le modifiche e tutto torna normale). wp_super cache ha il difetto che a volte conflitta con i siti e per comprimere blocca certe funzioni, ma se non ricordo male è customizabile su cosa comprimere e cosa non comprimere. La scree non la vedo.
Register l’ho usato per poco tempo quindi non so bene che problemi stai avendo
Salvatore
12 anni fa | 19-5-2011
Complimenti per l’articolo. sto cercando di inserire l’expire header così da migliorare il punteggio Yslow. Pur seguendo i tuoi consigli permangono i seguenti errori:
http://fonts.googleapis.com/css?family=Droid+Sans|Droid+Serif
http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js
http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js?ver=3.9.1
http://www.google.it/coop/cse/brand?form=cse-search-box&lang=it
http://s.gravatar.com/js/gprofiles.js?ver=2014Junaa
http://www.gstatic.com/pub-config/ca-pub-4023152107816796.js
http://www.google-analytics.com/analytics.js
http://pagead2.googlesyndication.com/pagead/expansion_embed.js
http://pagead2.googlesyndication.com/pagead/osd.js
http://www.google.it/cse/intl/it/images/google_custom_search_watermark.gif
http://fonts.googleapis.com/css?family=Roboto:300&lang=it
http://pagead2.googlesyndication.com/pagead/images/nessie_icon_tiamat_white.png
http://pagead2.googlesyndication.com/pagead/images/google-logo.png
http://pagead2.googlesyndication.com/pagead/images/x_button_blue2.png
Come potrei sistemare?
SergioTrenna
12 anni fa | 19-5-2011
Gli errori come me li hai messi non hanno molto senso, mi dovresti dare la url del sito. Da quello che capisco però ti segnala l’uso di tanti file java. Questo non lo puoi evitare se non riducendo il numero di richiami a file js esterni al sito o anche interni. Puoi migliorare la situazione spostando il caricamento di questi script nel footer del sito.
Salvatore
12 anni fa | 19-5-2011
Scusa, ho dimenticato a scriverti la parte principale dell’errore.
Quando faccio il test di performance con gtmetrix al mio sito (makingphoto.com) ottengo un buon punteggio per quanto riguarda il “Page Speed” ma dovrei migliorare la sezione relativa a “Yslow”. Tra i suggerimenti vi è Add Expires headers ed in particolare mi suggerisce di farlo con tutti gli elementi che ti ho elencato. Come potrei fare?
SergioTrenna
12 anni fa | 19-5-2011
Premessa: non è che se hai 100 su gtmetrix allora il sito fa faville. L’importante è non avere dei valori bassissimi che possano rallentare il caricamento del tuo sito su connessioni lente o sovraccariche.
Vedo che su google stai benissimo. Per yahoo il problema è che ti segnala tutti i file di css e js (e non solo) che non hanno expiration date (anche se i valori impostati vengono correttamente letti da google). Questo probabilmente è dovuto al server su cui ti appoggi.
Ma ripeto non me ne preoccuperei più di tanto. La cosa che ti consiglio di fare (e anche se gtmatrix non la legge sempre) è di spostare tutti i richiami al java nel fondo del sito (nel footer).
Così vengono caricati per ultimi e il sito va più veloce. (come ad esempio il codice di Analitycs io lo sposterei sotto.
In più ti direi di modificare i link (come quello che manda al form di contatto) per non farli aprire in una nuova pagina (i link esterni si aprono in una nuova pagina).
E ti direi anche di mettere un h1 in home perchè non c’è.
Per le altre cose non dargli troppo peso, non sono quelli i fattori che spingono veramente un sito, ma è un piano di comunicazione e marketing e anche qualche investimento in ads.
Spero di esserti stato utile.
Ciao
Salvatore
12 anni fa | 19-5-2011
grazie mille per le informazioni, per quanto riguarda il problema del server li contatto e vediamo cosa posso fare.
Non ho ben capito cosa intendi per modificare i link. Se clicco sul link “contattami” a me non si apre una nuova scheda a te si?
Sposterò analytics il prima possibile,
SergioTrenna
12 anni fa | 19-5-2011
Il link è in questa pagina: http://makingphoto.com/chi-sono/.
Non credo che gli amministratori ti staranno dietro per questa cosa, ma magari trovi qualcuno disponibile che sa suggerirti come migliorare quella parte su yahoo.
Ciao e buon lavoro
Salvatore
12 anni fa | 19-5-2011
ah ho capito a che link ti riferisci, grazie mille per la segnalazione.
grazie ancora per l’aiuto, spero di poter incrementare il mio punteggio Yslow il prima possibile.
SergioTrenna
12 anni fa | 19-5-2011
Di nulla. 😉
Salvatore
12 anni fa | 19-5-2011
Nel mio .htaccess ho già inserito la seguente sezione:
# BEGIN EXPIRES CACHING #
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault “access plus 1 month”
# My favicon
ExpiresByType image/x-icon “access plus 1 year”
# Images
ExpiresByType image/gif “access plus 1 month”
ExpiresByType image/png “access plus 1 month”
ExpiresByType image/jpg “access plus 1 month”
ExpiresByType image/jpeg “access plus 1 month”
# CSS
ExpiresByType text/css “access 1 month”
# Javascript
ExpiresByType application/javascript “access plus 1 year”
# ENA EXPIRES CACHING #
ma la situazione non migliora. Le cose non cambiano inserendo il codice da te suggerito.
Giuseppe Ino
12 anni fa | 19-5-2011
Buongiorno…ottimo articolo con il quale sono riuscito a fare un qualcosa ke pensavo da solo non potessi mai riuscire…ma analizzando il mio sito con pagespeed ma dice sempre di fare la compressione gzip che è stata fatta però…come mai? Grazie.
SergioTrenna
12 anni fa | 19-5-2011
Dipende da tanti fattori. Da dove è hostato il blog (Aruba vedo, che non è il massimo).
E anche da questi trumenti che non sempre sono validi al 100%.
La gzip è relativa, nel senso che per quanto attivare questa compressione alleggerisca un sito, questo non è necessariamente un fattore determinante se poi ci sono tanti file di javascript o tanti file separati di css.
In sostanza dipende all’80% da come è stato realizzato il sito, da quanti plugin vengono usati (nel tuo caso), da come sono impostati i social per la condivisione. Ma soprattutto da come è stato trutturato il sito a livello Seo.
Però non pensarci troppo a questi fattori.
A presto!
Giuseppe Ino
12 anni fa | 19-5-2011
Grazie Sergio…in effetti me ne sto rendendo conto di tutti questi fattori. Per il CSS ho cercato di aiutarmi con un plugin ma ovviamente è pur sempre un plugin giustamente. Però forse Aruba è uno dei fattori peggiori. Grazie 🙂
SergioTrenna
12 anni fa | 19-5-2011
Prego! 😉