{"id":8291,"date":"2011-02-23T18:29:42","date_gmt":"2011-02-23T17:29:42","guid":{"rendered":"https:\/\/www.dreamsworld.it\/emanuele\/?p=8291"},"modified":"2016-05-17T18:02:11","modified_gmt":"2016-05-17T16:02:11","slug":"come-velocizzare-il-tuo-blog-in-5-mosse","status":"publish","type":"post","link":"https:\/\/www.dreamsworld.it\/emanuele\/2011-02-23\/come-velocizzare-il-tuo-blog-in-5-mosse\/","title":{"rendered":"Come velocizzare il tuo blog in 5 mosse!"},"content":{"rendered":"

Siccome son paranoico<\/del> questo blog \u00e8 un tavolo degli esperimenti<\/strong>, da qualche giorno queste pagine si aprono pi\u00f9 velocemente che mai<\/em>. Per la precisione la prima apertura ha guadagnato mezzo secondo mentre un qualsiasi reload sucessivo della pagina si \u00e8 dimezzato: da poco pi\u00f9 di tre secondi a circa un secondo e mezzo<\/strong>.<\/p>\n

Come ho fatto? Vuoi velocizzare anche le tue pagine?<\/strong><\/p>\n

I passi necessari sono:<\/p>\n

    \n
  1. Riunisci in un unico file i css e javascript presenti nelle pagine<\/strong>: se controlli sotto la gonna<\/em> di questo blog vedrai che non vi sono pi\u00f9 differenti css o javascript sparsi, oltre quelli caricati da domini esterni (ad esempio Google Analytics<\/em>). Il motivo \u00e8 semplice: il tuo browser scarica queste pagine “due pezzi per volta”<\/em>, cos\u00ec se diminuisci il numero di file da recuperare, diminuisci il tempo di caricamento totale della pagina.<\/li>\n
  2. Minimizza qualsiasi cosa possibile<\/strong>: javascript e css sicuramente possono esser sostituiti dalla loro versione compressa, cui son stati rimossi spazi e commenti ed han ricevuto un paio di ottimizzazioni. Per comprimerli ho usato JSCompress<\/a> per i javascript e MinifyCSS<\/a> per i fogli di stile. Il risparmio si quantifica in quasi 100kb in meno (moltiplicali per il numero di visitatori e conta il risparmio giornaliero<\/em>). Ovviamente se hai immagini non ottimizzate puoi intervenire anche l\u00ec: non mettere online una foto a 2500×2500 se poi la visualizzi in un’area della pagina limitata a 300×400!<\/li>\n
  3. Richiama dall’esterno i javascript comuni:<\/strong> framework come jQuery<\/a> o prototype<\/a> (se li usi), puoi richiamarli attraverso la loro versione (minificata<\/em>) fornita da Google<\/a>, questo alleggerisce il carico sul tuo server, parallelizza il download della pagina e molto probabilmente un visitatore avr\u00e0 gi\u00e0 scaricato il file navigando altrove.<\/li>\n
  4. Imposta correttamente l’expire dei file<\/strong>. E’ inutile ricaricare le immagini che, su un blog, molto probabilmente non cambieranno mai: quando pubblico qualcosa \u00e8 perch\u00e9 voglio rimanga l\u00ec. E allora ecco i codici da inserire nel file .htaccess<\/a> del tuo blog:<\/li>\n
    \r\n# Abilita l'expire dei contenuti\r\n<ifmodule mod_expires.c>\r\nExpiresActive On\r\n# 1 anno per gli mp3, i video e i contenuti multimediali\r\n<filesmatch "\\.(flv|ico|pdf|avi|mov|ppt|doc|mp3|wmv|wav)$">\r\nExpiresDefault A9030400\r\n<\/filesmatch>\r\n# 1 mese per le immagini e i fogli di stile\r\n<filesmatch "\\.(jpg|jpeg|png|gif|swf|css)$">\r\nExpiresDefault A2592000\r\n<\/filesmatch>\r\n# 7 giorni per i javascript\r\nExpiresByType application\/x-javascript \"access plus 7 days\"\r\n<\/ifmodule>\r\n<\/pre>\n
  5. Rimuovi l’header ETag per ogni file<\/strong>. Questa te la spiego cos\u00ec: il browser ad ogni connessione interroga il server e controlla che ci\u00f2 che gi\u00e0 conosce (per via di una visita precedente<\/em>) non sia cambiato. L’ETag<\/a> \u00e8 un codice univoco usato per il confronto. Perch\u00e9 rimuoverlo? Perch\u00e9 senza esso il browser fa totale affidamento su quanto gli hai detto sopra con l’expire dei file: una volta al mese aggiorna le immagini, per il resto non fa alcun controllo e si fida che sia rimasto tutto uguale. Ecco cos’altro inserire.<\/li>\n
    \r\n# Rimuove il tag ETag dall'header per tutti i file\r\n<ifmodule mod_headers.c>\r\nHeader unset ETag\r\nFileETag None\r\n<\/ifmodule>\r\n<\/pre>\n
  6. Si pu\u00f2 fare di pi\u00f9<\/strong> (si pu\u00f2 sempre fare di pi\u00f9!<\/em>). Il prossimo passo sar\u00e0 utilizzare i CSS Sprites<\/a> per riunire le immagini statiche (non quelle dei post<\/em>). Il motivo \u00e8 \u00a0lo stesso del punto uno… ma lascio a te il compito di approfondire l’argomento! \ud83d\ude42<\/li>\n<\/ol>\n
    Hai altri consigli?<\/strong><\/p>\n
    Emanuele<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"
    Siccome son paranoico questo blog \u00e8 un tavolo degli esperimenti, da qualche giorno queste pagine si aprono pi\u00f9 velocemente che mai. Per la precisione la prima apertura ha guadagnato mezzo secondo mentre un qualsiasi reload sucessivo della pagina si \u00e8 … Leggi ancora →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[4],"tags":[726,302,542,84,483,724,936,776,653,640,485,497,753,752,2040,754,773,321,966,356,529,526,455,23,528,493],"class_list":["post-8291","post","type-post","status-publish","format-standard","hentry","category-internet","tag-benchmark","tag-blog","tag-blog-design","tag-browser","tag-css","tag-dom","tag-dominio","tag-google","tag-guide","tag-how-to","tag-html","tag-javascript","tag-jquery","tag-mootools","tag-perfezione","tag-prototype","tag-risorse","tag-risparmio","tag-server","tag-servizi-web","tag-siti-web","tag-user-experience","tag-velocita","tag-web","tag-web-design","tag-wordpress"],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/8291","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/comments?post=8291"}],"version-history":[{"count":0,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/posts\/8291\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/media?parent=8291"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/categories?post=8291"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dreamsworld.it\/emanuele\/wp-json\/wp\/v2\/tags?post=8291"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}