Ottimizza la velocità di caricamento tramite .htaccess e header.php

loading-wordpress

loading-wordpress
Come certamente saprai la velocità di caricamento del tuo sito/blog è molto importante , sopratutto su hosting condiviso. In questo tutorial andremo a vedere alcuni trucchi applicati a header.php e .htaccess in modo da velocizzarla fino al 50/70%.

Durante lo sviluppo di un sito web o di un blog si dovrebbe tenere in considerazione  la velocità di caricamento delle pagine come un parametro molto importante se non addirittura principale per il nostro progetto. Per farti un esempio prendiamo in considerazione alcuni colossi del web:

  • Per Google 500 millisecondi in più nel caricamento delle pagine causa il 20% di ricerche in meno
  • Per Yahoo 400 millisecondi in più nel caricamento delle pagine causa un aumento del 5-9% del numero di persone che hanno cliccato sul tasto indietro prima che la pagina venga caricata
  • Per Amazon 100 millisecondi di tempo di carico supplementare provocato un calo dell’1% delle vendite

Google fa uno sforzo continuo per cercare di rendere il web più veloce e ammette che “abbiamo deciso di prendere in considerazione la velocità del sito nella nostra classifica di ricerca” per cui la lentezza di un sito andrà ad influire nel ranking dei motori di ricerca.

Fortunatamente l’ottimizzazione della velocità di un sito web può essere fatta facilmente usando de semplici trucchi applicabili al nostro vecchio .htaccess. Con questi metodi possiamo fare in modo che il nostro sit venga caricato più rapidamente usando la compressione dei contenuti e consentendo la memorizzazione nella cache del browser. Puoi seguire le migliori tecniche e consigli direttamente da team di sviluppo di Yahoo! e non ti costa un centesimo.

Comopressione GZIP dei files

La compressione GZIP riduce i tempi di caricamento riducendo i tempi di risposta HTTP. Comprimere HTML, CSS e script, ad esclusione di files PDF in quanto già compressi, è una pratica consigliatissima per velocizzare il nostro sito quindi risparmiare anche sulla quantità di banda.

Htaccess

Server Apache
Google ha sviluppato mod_pagespeed, un modulo per Apache utile per la compressione dei files. Purtroppo al momento è disponibile solo su alcuni hosting come GoDaddy DreamHost quindi se vi appoggiate ai loro servizi vi basterà copiare il codice sottostante nel file .htaccess:

ModPagespeed on
# using commands,filters etc

Il tuo servizio hosting non prevede il modulo mod_pagespeed…niente paura potete tranquillamente usare il caro e vecchio mod_deflate inserendo il codice che segue:

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

Per chi utilizza un server nginx
Se usi un host su un server web Nginx copia il seguente codice nel tuo . htaccess per abilitare la compressione gzip.

server {
gzip su;
gzip_types text / html text / css application / x-javascript text / plain text / xml image / x-icon;
} 

Header.php

Se il server non supporta il modulo mod_deflate o mod_gzip è possibile utilizzare questo script PHP per la compressione gzip, che funziona sia su Apache e Nginx.
Basta copiare questo nel tuo tema in header.php:

<!--?php if ( substr_count( $_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip' ) ) { ob_start( "ob_gzhandler" ); } else { ob_start(); } ?-->

Di seguito un esempio del caricamento di un sito con e senza comprensione.
gzip-wordpress

Disattivare ETags

L’eTag (entity tag), è un campo di una intestazione HTTP di risposta (protocollo HTTP 1.1). Caratterizza in genere le pagine statiche dalle pagine dinamiche. Viene utilizzato dai client per verificare se una data pagina ha cambiato i suoi contenuti indipendentemente dalla data di modifica restituita. I browser moderni ne tengono conto nelle loro politiche di gestione della cache. Anche Google e gli altri Mdr ne fanno ampio uso, per controllare se una data pagina abbia subito una varianza e prendere dunque le opportune decisioni, come per esempio evitare di ricaricare una pagina rimasta inalterata anche dopo che sia stata re-uplodata senza modifiche.

Per disabilitare ETags, incolla questo nel tuo . htacces:

Header unset ETag
FileETag None

Usare la cache del browser

Con la memorizzazione nella cache del browser, istruiremo il browser ad appoggiarsi a files particolari per un periodo di tempo specificato. Quando il file è richiamato più volte, il browser lo richiama dalla cache locale invece di fare una nuova chiesta al server. La memorizzazione nella cache del browser di un sito web è sicuramente molto più pratica e richiede sicuramente meno risorse facilitando il risparmio sulla larghezza di banda.

Cache nei server Apache

Apache mod_expires e mod_header.
Il modulo mod_expires controlla l’impostazione di Expires HTTP o Cache-Control controllano la direttiva max-age riguardante il tempo di validità di una risorsa, il periodo in cui il browser potrà usare una risorsa riposta in cache senza controllare se ve n’è una più aggiornata disponibile nel web server. Per modificare le direttive Cache-Control da max-age, è possibile utilizzare il modulo mod_headers.

Il mod_header fornisce le direttive per controllare e modificare le richieste HTTP e intestazioni di risposta che possono essere unite, sostituite o rimosse.

Aggiungi a queste regole ad . htaccess per impostare gli Expires headers:

 # BEGIN Expire headersExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2592000 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 216000 seconds"
ExpiresByType application/javascript "access plus 216000 seconds"
ExpiresByType application/x-javascript "access plus 216000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"

Aggiungi a queste regole ad <strong>. htaccess</strong> per impostare  Cache-Control header:
# END Expire headers

 

 # BEGIN Cache-Control Headers
Header set Cache-Control "public"
Header set Cache-Control "public"
Header set Cache-Control "private"
Header set Cache-Control "private, must-revalidate"
# END Cache-Control Headers

NOTE:

  • Non c’è bisogno di impostare la direttiva max-age con l’intestazione Cache-Control, in quanto è già impostata dal modulo mod_expires.
  • must-revalidate significa che una volta una risposta diventa stantio deve essere rinnovata, ma non vuol dire che deve essere controllato ogni volta.

Per i server ngnix
Le impostazioni . htaccess  Nginx sono simili a queste:
(L’esempio di seguito avrebbe impostato nel browser del vostro utente HTML, CSS, Javascript, immagini e favicon per un’ora)ìRidurre la dimensione del datbase MySQL

location ~* \.(jpg|png|gif|jpeg|css|js)$ {
expires 1h;
} 

Ridurre la dimensione del database MySQL

Dalla versione WordPress 2.6, gli articoli vengono salvati in automatico durante la scrittura e rimangono come revisione nel database MySQL anche dopo che questo viene salvato (quindi spazio e banda sprecata nel DB). Una possibilità consiste di disabilitare le revisione procedendo come descritto sotto.
Apri il file wp-config.php che trovi nella root del sito e inserisci alla fine questa stringa di codice, se si decide di mantenere la funzione di revisione per un numero fisso di giorni, basterà sostituire false con con un qualsiasi numero es. 10.

define('WP_POST_REVISIONS', false );

Fonte: WPTutsplus

8 thoughts on “Ottimizza la velocità di caricamento tramite .htaccess e header.php

  1. Sto tentando anche io di migliorare la velocità del sito.

    Non ho capito, però, se quel codice che hai mostrato nel paragrafo “Cache nei server Apache” va lasciato così o se va personalizzato. Per esempio:

    image/jpeg va lasciato così o dobbiamo inserire il percorso della cartella delle immagini?

    Anche perché a me le modifiche al .htaccess continuano a dare errore (internal server error)

  2. Riguardo le impostazione Apache lascia così com’è, per il file .htaccess prova a dargli i permessi di scrittura.

    Se il tuo hosting usa cPanel puoi ativare la comprensione anche da li in Software/Servizi > Comprimi sito.

  3. Articolo molto interessante! Complimenti! =)

    Ma c’e’ un particolare che mi sfugge. Dite che 500 millisecondi in piu’ causano il 20% in meno di ricerche…ma 500 millisecondi in piu’ rispetto a cosa?

    Che io sappia Google non ha mai rilasciato un tempo certo e preciso che deve impiegare un sito web a caricare una pagina. Quindi su cosa e’ basato quel “500 millisecondi in piu'” ?

    Grazie! =)

  4. Google non ha mai rilasciato un tempo preciso ma rispetto al caricamento di un qualsiasi sito quei 500 millisecondi possono fare una certa differenza.
    Come vedi ho citato anche la fonte dell’articolo, e se non si è un esperto SEO (come me :)) alcuni suggerimenti si prendono per come vengono scritti.

    Comunque (beh.. penso lo avrai già notato) in Webmaster Tools sotto Funzioni Sperimentali > Prestazioni del sito: non appare più il grafico che misurava le performance in base al caricamento ma Site Speed di Google Analytics e PageSpeed ​​Insights…sicuramente 2 strumenti più avanzati.

    Ti linko anche questo articolo molto interessante (anche se un po vecchiotto) di Robin Good http://www.masternewmedia.org/it/velocita-del-sito-e-tempi-di-caricamento-delle-pagine/

    Alla prossima 😉

  5. Ciao Danilo,
    da qualche giorno stavo pensando di ottimizzare la velocità del mio blog ed ho incominciato a sgooglare finchè non sono capitato su questo tuo articolo. Ho molti dubbi in testa e spero che tu possa aiutarmi.

    Google page insights mi da punteggi da 86 per desktop e 73 per mobile, mentre GTMetrix mi da un bel 93-92%. Suppongo che sia più affidabile google, giusto?

    Il tempo di caricamento dato da GTMetrix in ogni caso oscilla fra i 3.13 sec ed i 3.64. Si tratta di un valore eccessivamente alto oppure è accettabile secondo la tua esperienza?

  6. Ciao Luca, sinceramente GTMetrix non l’ho mai provato, generalmente uso servizi/prodotti di Google.
    PageSpeedInsights su questo blog solitamente mi da 92/100 su desktop e 79/100 su mobile e tenendo conto che non uso nessun plugin per la cache mi ritengo abbastanza soddisfatto.

    Riguardo al tempo di caricamento delle pagine proprio oggi ho dato supporto ad un utente che si lamentava delle troppe query richiamate dal database (addirittura più di 7000) quindi di conseguenza un rallentamento del caricamento. Morale della favola il problema derivava da un semplice plugin installato.

    Un ottimo strumento di diagnostica è http://www.wpstyle.it/scopri-con-p3-i-plugin-che-rallentano-il-tuo-blog.html che ti fa vedere proprio l’impatto dei plugin su WordPress…secondo me da provare sicuramente.
    Alla prossima 😉

  7. Ottimo plugin! Grazie per avermelo segnalato. Ho scoperto che Lightbox Plus ha un impatto notevole sul mio blog. Il tempo di caricamento mentre lo uso è di 0.36, mentre senza scende a 0,09 con un impatto dal 70% al 40%. Cosa mi consigli di fare? Il plugin è utile e vedo che anche tu utilizzi quell’effetto sul tuo blog. Consigli? (con le query sono a posto, intorno alle 50 fortunatamente).

Lascia un commento

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