Dieci trucchi del mestiere per migliorare le performance del tuo sito web

Di seguito troverai una lista frutto dell’esperienza maturata in questi anni. Non sono altro che piccoli consigli per rendere più performante il sito a cui si sta lavorando.

1. Utilizza i Google Fonts ad hoc

Se usi Google Fonts per dei testi statici (titoli, frasi…), carica solo le lettere che ti servono.

<link href='https://fonts.googleapis.com/css 
family=Open+Sans&text=AaBbCc' ...>

2. Definisci il Critical Path

Utilizza Critical di Addy Osmani per inserire i CSS inline così da ottimizzare il rendering above the fold.

3. Imposta gli expires headers

Sembrerà banale, ma è bene ricordare che il modo migliore per velocizzare una pagina rimane lo sfruttare la cache del browser. Definendo delle “date di scadenza” ad hoc per ciascun tipo di file, possiamo significativamente ridurre i tempi di caricamento dopo la prima visita.

ExpiresActive On
ExpiresDefault "access plus 10 years"
ExpiresByType text/html "access plus 1 day"
ExpiresByType application/json "access plus 15 minutes"

4. Crea le SVG Sprites

Crea una sprite di tutte le svg che utilizzi ed utilizza symbol per richiamare il singolo elemento. C’è un plugin sia per Gulp che per Grunt.

<svg class=”icon” viewBox=”214.7 0 182.6 792">
<use xlink:href=”#shape-icon-1" />
</svg>
<svg class=”icon” viewBox=”0 26 100 48">
<use xlink:href=”#shape-icon-2" />
</svg>
Una buona lettura: https://css-tricks.com/svg-symbol-good-choice-icons/

5. Utilizza i JavaScripts Design Pattern

Utilizza un pattern per prevenire la duplicazione del codice e rendere di conseguenza i tuoi file JavaScript più leggeri.

Una buona lettura: https://addyosmani.com/resources/essentialjsdesignpatterns/book/index.html

6. Crea una build personalizzata per Modernizr

Se utilizzi Modernizr, crea la tua custom build a seconda delle feature che ti servono. Per prendere un punteggio più alto su PageSpeed Insight è consigliato inserire Modernizr inline per evitare il blocco del caricamento.

7. Comprimi le tue immagini

Ottimizza le tue immagini senza perdere qualità con TinyJpg, TinyPng e ImageOptim.

8. Ottimizza i tuoi assets statici

JavaScripts e CSS possono essere minificati e concatenati sia con dei tool online sia in modo automatico con Gulp e Grunt. Facendo questo non solo ridurrai il peso dei singoli file ma eliminerai anche request inutili al server.

9. Utilizza GZIP

Utilizza GZIP per comprimere gli assets che vengono trasferiti dal server al client.

Una buona lettura: http://betterexplained.com/articles/how-to-optimize-your-site-with-gzip-compression/

10. Inserisci le dimensioni nei tag img

Una piccola cosa che quasi nessuno fa è esplicitare le dimensioni delle immagini: permette di eseguire il rendering della pagina in parallelo al download delle immagini.


Come ultima cosa vorrei consigliare a tutti gli sviluppatori di utilizzare lo stack di strumenti di Google, PageSpeed Tools. E’ un ottimo modo per capire dove si sbaglia e dove si può intervenire per migliorare le performance del sito a cui si sta lavorando.

Questi piccoli trucchi del mestiere sono frutto dell’esperienza del sottoscritto, di Andrea Collet e della community Web Designer Italiani.

One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.