.htaccess, velocizziamo il sito web!

Leave a comment
.htaccess velocizzare sito

Velocizzate il vostro sito web con htaccess! Volete sapere come fare? Continuate a leggere questo articolo…

Questa è una guida che può essere applicata a qualsiasi tipo di sito web. I codici che troverete qui sotto sono ottimi per velocizzare le vostre pagine sfruttando la cache e altri fattori a livello server e non. Buona ottimizzazione!

Ottimizzare velocità sito web con htaccess

Il file .htaccess si può modificare dal cpanel del vostro hosting oppure se utilizzare il plugin “Seo yoast” potete andare nella sezione strumenti e modificarlo da li. Prendiamo il file .htaccess e inseriamo queste regole:

<FilesMatch "\.(gif¦jpe?g¦png¦ico¦css¦js¦swf)$">
Header set Cache-Control "public"
</FilesMatch>
<FilesMatch "\.(ico)$">
Header set Cache-Control "max-age=29030400, public"
</FilesMatch>

In questo modo andiamo a lavorare sulla cache.

Che cos’è la Cache Web? Il processo di Caching (Cache), quando si parla di hostare un sito web, è il salvataggio temporaneo dei contenuti. Per leggere una guida completa su cos’è la Cache: Che cos’è La Cache?.

Il codice qui sopra esegue due cose: imposta il Cache Control nelle immagini specificate e imposta una max age nel file ico, che è il file che vedete come icona del vostro sito nella tab del browser (maggiori info sul file ico).

Esistono due ragioni principali per utilizzare la cache web:

  • Per ridurre la latenza — Dato che la richiesta viene soddisfatta dalla cache invece che dal server di origine, il tempo di caricamento e di visualizzazzione viene ridotto, e in questo modo le nostre pagine saranno più performanti e veloci.
  • Per ridurre il traffico network — Dato che gli elementi in cache vengono riusati, ciò riduce la quantità di bandwidth richiesta dal cliente. Se ad esempio il cliente paga in base al traffico che consuma, questa tecnica gli permette di risparmiare sui costi di consumo.

Adesso invece, aggiungiamo queste regole:

# INIZIO W3TC Browser Cache
<IfModule mod_mime.c>
AddType text/css .css
AddType application/javascript .js
AddType application/x-javascript .js
AddType text/html .html .htm
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType text/xml .xml
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
# FINE W3TC Browser Cache

Che cos’è Apache Module mod_mime? Questo modulo viene usato per associare diversi bit di dati “meta” (meta information) ai file in base all’estensione: mime-type, language, character set e encoding. Queste informazioni vengono inviate al browser e vengono utilizzate dal content negotiation. Leggete mod_negotiation per maggiori informazioni sul content negotiation.

Adesso invece, aggiungiamo queste regole:

# INIZIO E-Tag
<ifModule mod_headers.c>
Header unset ETag
</ifModule>
FileETag None
# FINE E-Tag

Che cosa sono gli ETags?
Gli Entity tags (ETags) sono un meccanismo che viene utilizzato per determinare se il contenuto di un file nella cache del browser è uguale a quello del server di origine oppure no. Un “entità” è un “componente” (ad esempio immagini, script, stylesheet, etc.). Stando a Yahoo! Performance Rules, disabilitando gli ETags possiamo rendere le nostre pagine più veloci, diminuire il carico server e ridurre la bandwidth (larghezza banda).

Adesso invece, aggiungiamo queste regole:

# INIZIO Mime-Type
<IfModule mod_mime.c>
AddType text/css .css
AddType text/richtext .rtf .rtx
AddType image/svg+xml .svg .svgz
AddType text/plain .txt
AddType text/xsd .xsd
AddType text/xsl .xsl
AddType video/asf .asf .asx .wax .wmv .wmx
AddType video/avi .avi
AddType image/bmp .bmp
AddType application/java .class
AddType video/divx .divx
AddType application/msword .doc .docx
AddType application/x-msdownload .exe
AddType image/gif .gif
AddType application/x-gzip .gz .gzip
AddType image/x-icon .ico
AddType image/jpeg .jpg .jpeg .jpe
AddType application/vnd.ms-access .mdb
AddType audio/midi .mid .midi
AddType video/quicktime .mov .qt
AddType audio/mpeg .mp3 .m4a
AddType video/mp4 .mp4 .m4v
AddType video/mpeg .mpeg .mpg .mpe
AddType application/vnd.ms-project .mpp
AddType application/vnd.oasis.opendocument.database .odb
AddType application/vnd.oasis.opendocument.chart .odc
AddType application/vnd.oasis.opendocument.formula .odf
AddType application/vnd.oasis.opendocument.graphics .odg
AddType application/vnd.oasis.opendocument.presentation .odp
AddType application/vnd.oasis.opendocument.spreadsheet .ods
AddType application/vnd.oasis.opendocument.text .odt
AddType audio/ogg .ogg
AddType application/pdf .pdf
AddType image/png .png
AddType application/vnd.ms-powerpoint .pot .pps .ppt .pptx
AddType audio/x-realaudio .ra .ram
AddType application/x-shockwave-flash .swf
AddType application/x-tar .tar
AddType image/tiff .tif .tiff
AddType audio/wav .wav
AddType audio/wma .wma
AddType application/vnd.ms-write .wri
AddType application/vnd.ms-excel .xla .xls .xlsx .xlt .xlw
AddType application/zip .zip
</IfModule>
# FINE Mime-Type

Che cosa sono i MIME types?
MIME sta per “Multipurpose Internet Mail Extensions”. E’ un modo di identificare i file su internet in base alla loro natura e al loro formato. Ad esempio, utilizzando il valore header “Content-type” definitito in una risposta HTTP, il browser può aprire il file con il corretto plugin o la corretta estensione.

I MIME types impostano i file e le loro estensioni. Ad esempio, un file ‘.html’ si riferisce a un documento HTML, un file ‘.zip’ si riferisce ad un Archivio ZIP, etc. Il server ha bisogno di sapere come comportarsi anche in base a queste informazioni.

Adesso invece, aggiungiamo queste regole:

# INIZIO Expires Headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css A2628000
ExpiresByType text/richtext A3600
ExpiresByType image/svg+xml A3600
ExpiresByType text/plain A3600
ExpiresByType text/xsd A3600
ExpiresByType text/xsl A3600
ExpiresByType video/asf A2628000
ExpiresByType video/avi A2628000
ExpiresByType image/bmp A2628000
ExpiresByType application/java A2628000
ExpiresByType video/divx A2628000
ExpiresByType application/msword A2628000
ExpiresByType application/x-msdownload A2628000
ExpiresByType image/gif A2628000
ExpiresByType application/x-gzip A2628000
ExpiresByType image/x-icon A2628000
ExpiresByType image/jpeg A2628000
ExpiresByType application/vnd.ms-access A2628000
ExpiresByType audio/midi A2628000
ExpiresByType video/quicktime A2628000
ExpiresByType audio/mpeg A2628000
ExpiresByType video/mp4 A2628000
ExpiresByType video/mpeg A2628000
ExpiresByType application/javascript A2628000
ExpiresByType application/x-javascript A2628000
ExpiresByType application/vnd.ms-project A2628000
ExpiresByType application/vnd.oasis.opendocument.database A2628000
ExpiresByType application/vnd.oasis.opendocument.chart A2628000
ExpiresByType application/vnd.oasis.opendocument.formula A2628000
ExpiresByType application/vnd.oasis.opendocument.graphics A2628000
ExpiresByType application/vnd.oasis.opendocument.presentation A2628000
ExpiresByType application/vnd.oasis.opendocument.spreadsheet A2628000
ExpiresByType application/vnd.oasis.opendocument.text A2628000
ExpiresByType audio/ogg A2628000
ExpiresByType application/pdf A2628000
ExpiresByType image/png A2628000
ExpiresByType application/vnd.ms-powerpoint A2628000
ExpiresByType audio/x-realaudio A2628000
ExpiresByType application/x-shockwave-flash A2628000
ExpiresByType application/x-tar A2628000
ExpiresByType image/tiff A2628000
ExpiresByType audio/wav A2628000
ExpiresByType audio/wma A2628000
ExpiresByType application/vnd.ms-write A2628000
ExpiresByType application/vnd.ms-excel A2628000
ExpiresByType application/zip A2628000
</IfModule>
# FINE Expires Headers

Che cos’è l’Apache Module mod_expires? Questo modulo controlla le impostazioni per l’header Expires HTTP e le direttive di max-age dell’header Cache-Control HTTP.

Questi header HTTP sono delle istruzioni che vengono inviate al cliente e si riferiscono alla validità del documento e alla sua persistenza. Se è in cache, il documento può essere preso dalla cache invece che dal server di origine. Questo succede fino a quando questi tempi specifici non sono passati. Dopo di che la copia in cache viene considerata come “scaduta” (expired) e non più valida e quindi una nuova copia deve esser richiesta e scaricata dal server di origine.

Adesso invece, aggiungiamo queste regole:

# INIZIO Compressione file di testo
<ifModule mod_deflate.c>
  AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
  AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
  AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
  AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript application/json
  AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
  AddOutputFilterByType DEFLATE font/truetype font/opentype


  BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4.0[678] no-gzip
BrowserMatch bMSIE !no-gzip !gzip-only-text/html
</ifModule>
# FINE Compressione file di testo

Che cos’è Apache Module mod_deflate? Quando un visitatore apre la vostra pagina viene effettuata una richiesta al server. Più grande è il file richiesto più tempo è necessario per visualizzarlo nel browser dell’utente. Gzip comprime le vostre pagine e i fogli di stile prima di inviarli al browser del cliente. Questo riduce i tempi di invio in modo elevato.

Il motivo dell’efficacia di Gzip è che i file in CSS e in HTML usano molti testi ripetuti e hanno molti spazi al loro interno, e dato che tutte queste cose vengono compresse, l’utilizzo di Gzip può ridurre la grandezza dei file anche fino al 70%! Gzip deve essere abilitato sul vostro server.

In conclusione vi consiglio di inserire i parametri uno alla volta e ad ogni aggiunta fare un test con https://tools.pingdom.com/ o Webpagetest.

Lascia un commento

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