![\"\"](\"https:\/\/www.flapane.com\/blog\/wp-content\/uploads\/2012\/06\/velocizzare_web-530x263.jpg\" "\\"velocizzare_web\\"")
<\/p>\n<\/p>\n
Google Webmaster Tools possiede una interessante funzione (nella sezione FUNZIONI SPERIMENTALI -> PRESTAZIONI DEL SITO), che permette di monitorare il tempo di caricamento del vostro sito web.<\/p>\n
Il sistema analizza qualche decina di pagine casuali, e fa una media dei tempi di caricamento.<\/p>\n
Come ci mostra questo grafico<\/a> di KissMetrics, la percentuale di utenti che decidono di abbandonare il vostro sito, prima che questo abbia finito il caricamento, aumenta drasticamente col passare dei secondi.<\/p>\n Sfondi che pesano 1MB ed oltre, suoni (evitate le musice di sottofondo che partono a tradimento ad ogni costo!), troppe fotografie nella stessa pagina, troppi javascript sono fra le cause pi\u00f9 comuni di un eccessivo caricamento di una pagina web.<\/p>\n Senza perdere ulteriore tempo, andiamo a vedere il risultato, e poi analizziamo come arrivarci:<\/p>\n I dati si riferiscono ovviamente al periodo che ci interessa, ovvero l’ultimo mese, e sono relative a questo sito web.<\/p>\n Al momento viene indicato un tempo di caricamento medio di 1.4secondi (su meno di 100 pagine). Prima delle ottimizzazioni, come indicato nel grafico, era oltre 4 secondi… troppo!<\/p>\n Non c’\u00e8 bisogno di riempire ogni pagina con decine di effetti inutili, o sfondi ad alta definizione (la risoluzione dei monitor pi\u00f9 utilizzata nel web, ha ancora 1368 pixel di larghezza). Gli utenti si sentiranno meno confusi, e ringrazieranno.<\/p>\n Se una pagina richiede tre javascript per un qualsivoglia motivo, conviene raggrupparli in un unico file js. In questo modo si ridurranno le richieste al server, fattore determinante nel ridurre i tempi di caricamento. Stesso discorso vale per i fogli di stile.<\/p>\n Jpegoptim<\/a> e PNGout<\/a> sono due ottimi programmini (funzionano da linea di comando) che permettono, utilizzando differenti algoritmi, di ridurre la dimensione di una immagine, senza ridurne la qualit\u00e0 (lossless compression). Provare per credere… l’immagine di sfondo di questo sito, le tante icone in PNG, ed alcune foto, hanno avuto riduzioni anche del 50%!<\/p>\n Alcuni plugin js come Jquery, o alcuni fogli di stile molto complessi, possono contenere svariati commenti, che aiutano gli utenti a capire nel dettaglio cosa faccia questa o quella riga di codice. Purtroppo, questi commenti, assieme agli spazi ed agli “a capo”, occupano spazio. Il browser \u00e8 costretto a… fare lo slalom fra queste parti che risultano utili solo ad un occhio umano.<\/p>\n Ci viene in aiuto Google Minify<\/a>, che elimina tutte le parti inutili di questi file, consentendo di risparmiare parecchi Kilobyte. <link type=”text\/css” rel=”stylesheet” href=[…..] \/> In questo modo, farete UNA SOLA chiamata per i fogli di stile, ed UNA SOLA chiamata per i javascript.<\/p>\n Alcuni codici (come queli dei contatori), se non sono “asincroni”, possono creare per un qualsiasi motivo un ritardo nel caricamento. Se si trovano nell’header (quindi all’inizio del sito), questi blocchi influenzeranno anche il resto della pagina, che dovr\u00e0 aspettare la risoluzione di eventuali problemi, prima di essere caricata.<\/p>\n Se inserite i javascript nel footer (ovvero alla fine del sito), eventuali problemi di caricamento non comporteranno una noia per gli utenti.<\/p>\n Se utilizzate Apache, potete eliminare le tag html relative all’encoding nelle vostre pagine, ed inserire direttamente nel file .htaccess:<\/p>\n AddDefaultCharset UTF-8<\/p><\/blockquote>\n In questo modo gli utenti che TORNANO nel vostro sito, potranno sfruttare la cache del loro browser, senza essere costretti a ricaricare di nuovo sfondo, js, css e cos\u00ec via. <IfModule mod_headers.c> #include caching for images Esistono vari metodi, a seconda che si usi Apache o altri webserver, ed il metodo \u00e8 spiegato diffusamente in altri siti, quindi non \u00e8 necessario ricopiare il codice anche in questo articolo.<\/p>\n Aggiungete, nel vostro foglio di stile, delle correzioni che permetteranno di visualizzare il vostro sito su iPhone, iPad, Android e terminali simili:<\/p>\n @media only screen and (min-device-width : 320px) and (max-device-width : 480px), only screen and (min-device-width : 480px) and (max-device-width : 800px) and (orientation : landscape), only screen and (device-width: 768px), only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5), only screen and (-moz-min-device-pixel-ratio: 1.5) Per esempio, potreste ridurre la dimensione dei div, eliminare l’immagine di sfondo, eventuali sottomen\u00f9 non adatti a schermi piccoli, e cos\u00ec via. In questo modo, il tempo di caricamento sui dispositivi mobile potr\u00e0 essere drasticamente diminuito.<\/strong> Una volta effettuati questi cambiamenti, aggiungete queste TAG html nell’header, prima del caricamento del foglio di stile:<\/p>\n <meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”\/> Nell’ordine, impostano il livello di zoom per i terminali mobili, e vieta all’utente di zoomare (eventualmente rompendo il layout). Le ultime due tag sono specifiche per iOS, e rendono il vostro sito pi\u00f9 simile ad una App, nascondendo la barra degli indirizzi di Safari.<\/p>\n![\"\"](\"https:\/\/www.flapane.com\/blog\/wp-content\/uploads\/2012\/06\/velocita-caricamento-sito2-530x74.jpg\" "\\"Google")
<\/a><\/p>\n![\"\"](\"https:\/\/www.flapane.com\/blog\/wp-content\/uploads\/2012\/06\/velocita-caricamento-sito.jpg\" "\\"Webmaster")
<\/p>\nElimina i contenuti inutili!<\/h1>\n
Raggruppa Javascript e fogli di stile CSS<\/h1>\n
Comprimi le tue immagini JPG e PNG senza ridurne la qualit\u00e0<\/h1>\n
MINimizza e comprimi i tuoi Javascript ed i file CSS<\/h1>\n
\nScaricatelo, caricate la cartella “min” nel vostro sito, ed aprite la pagina indirizzo_vostro_sito\/min\/builder.
\nInserite i vari CSS (o JS) da comprimere, cliccate su UPDATE, e Minify vi indicher\u00e0 una tag HTML bella e pronta all’uso, da inserire nelle vostre pagine web al posto dei soliti (e numerosi)<\/p>\n
\n<script type=”text\/javascript” src=”…”><\/script><\/p><\/blockquote>\nPosizionate i Javascript nel footer<\/h1>\n
Specificate l’encoding dei caratteri SOLO a livello di web server<\/h1>\n
Abilitate la cache<\/h1>\n
\nSempre in .htaccess:<\/p>\n
\n<FilesMatch “\\.(js|css)$”>
\nHeader append Vary Accept-Encoding
\nCache-Control: Private
\n<\/FilesMatch>
\n<\/IfModule><\/p>\n
\n<IfModule mod_expires.c>
\nExpiresActive On
\nExpiresByType image\/gif “access plus 1 week”
\nExpiresByType image\/jpg “access plus 1 week”
\nExpiresByType image\/png “access plus 1 week”
\nExpiresByType image\/x-icon “access plus 360 days”
\nExpiresByType text\/css “access plus 1 day”
\nExpiresByType text\/html “access plus 1 week”
\nExpiresByType text\/javascript “access plus 1 week”
\nExpiresByType text\/x-javascript “access plus 1 week”
\nExpiresByType application\/javascript “access plus 1 week”
\nExpiresByType application\/x-javascript “access plus 1 week”
\nExpiresByType application\/x-shockwave-flash “access plus 1 week”
\nExpiresByType font\/truetype “access plus 1 month”
\nExpiresByType font\/opentype “access plus 1 month”
\nExpiresByType application\/x-font-otf “access plus 1 month”
\n<\/IfModule><\/p><\/blockquote>\nAbilitate la compressione GZIP<\/h1>\n
Create una versione mobile del sito<\/h1>\n
\n{ CODICE CSS MOBILE QUI<\/strong> }<\/p><\/blockquote>\n
\nA titolo di esempio, ecco due screenshoot che mostrano la versione mobile di questo sito su Android ed iPhone: immagine1<\/a> \/ immagine2<\/a><\/p>\n\n
\n<meta name=”apple-mobile-web-app-capable” content=”yes”\/>
\n<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”\/><\/p>\n<\/blockquote>\nBONUS: WordPress: ottimizzare automaticamente tutte le immagini JPG e PNG<\/h1>\n
![immagine1<\/a> \/](\"https:\/\/www.flapane.com\/blog\/wp-content\/uploads\/2012\/06\/android1.png\"){kind=link}
![immagine2<\/a><\/p>\nUna volta effettuati questi cambiamenti, aggiungete queste TAG html nell’header, prima del caricamento del foglio di stile:<\/p>\n\n<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no”\/>\n<meta name=”apple-mobile-web-app-capable” content=”yes”\/>\n<meta name=”apple-mobile-web-app-status-bar-style” content=”black-translucent”\/><\/p>\n<\/blockquote>\nNell’ordine, impostano il livello di zoom per i terminali mobili, e vieta all’utente di zoomare (eventualmente rompendo il layout). Le ultime due tag sono specifiche per iOS, e rendono il vostro sito pi\u00f9 simile ad una App, nascondendo la barra degli indirizzi di Safari.<\/p>\nBONUS: WordPress: ottimizzare automaticamente tutte le immagini JPG e PNG<\/h1>\nIl plugin SMUSH-IT<\/a> permette di fare, automaticamente, quello che ho descritto poco sopra per le pagine statiche, ovvero effettuare una “lossless compression” delle immagini, migliorando il tempo di caricamento del vostro blog WordPress.<\/p>\nE’tutto!<\/strong> Notare che queste correzioni aiutano ad ottenere punteggi fra l’85 ed il 95 nei test Google Page Speed ed YSlow<\/strong>, con conseguenti miglioramenti generali in ottica posizionamento.<\/p>\nE tu hai qualche altro trucco da suggerire? Si accetta di tutto! \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"Google Webmaster Tools possiede una interessante funzione (nella sezione FUNZIONI SPERIMENTALI -> PRESTAZIONI DEL SITO), che permette di monitorare il tempo di caricamento del vostro sito web.\nCome ci mostra questo grafico di KissMetrics, la percentuale di utenti che decidono di abbandonare il vostro sito, prima che questo abbia finito il caricamento, aumenta drasticamente col passare dei secondi.[…]<\/p>\n","protected":false},"author":1,"featured_media":1047,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[7],"tags":[195,11,174,165,200,108,44,9,109,213,116],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/posts\/1046"}],"collection":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/comments?post=1046"}],"version-history":[{"count":0,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/posts\/1046\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/media\/1047"}],"wp:attachment":[{"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/media?parent=1046"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/categories?post=1046"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.flapane.com\/blog\/wp-json\/wp\/v2\/tags?post=1046"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}](\"https:\/\/www.flapane.com\/blog\/wp-content\/uploads\/2012\/06\/iphone1.png\"){kind=link}