Di fronte a pagine sempre più ricche di widgets, librerie javascript, grafica, interazioni con database, riuscire a risparmiare anche pochi KB o trovare modi alternativi per ridurre i tempi di caricamento diventa cruciale.
Come sapete uno dei fattori importanti per migliorare il posizionamento di un sito web sui risultati di ricerca è appunto quello di alleggerire più possibile il codice della pagina.
Per alleggerire ulteriormente il codice di una pagina web dovete rimuovere l’indentazione del codice che di default tutti gli editor html fanno.
Ridurre il peso delle immagini
Avendo già "spremuto" le immagini grazie all'opzione "Salva per il web" di Adobe Photoshop, pensavo non ci fosse molto altro da fare, almeno finchè non ho scoperto Smush.it: un fantastico tool online capace (non sempre, ma spesso) di andare oltre, riducendo ulteriormente il peso delle immagini senza sacrificarne in alcun modo la qualità.
Grazie all'uso di questo tool ho "guadagnato" 11,7 KB, senza alcuna perdita in termini di resa grafica.
Compressione dei file javascript
Se utilizzate librerie esterne (es: jquery) assicuratevi di includere nelle vostre pagine sempre la versione compressa delle stesse (in genere nel nome del file trovate il suffisso "min"), tipicamente disponibile.
Nel caso non lo fosse, oppure per comprimere i vostri script .js, potete utilizzare diverse applicazioni online, ad esempio javascriptcompressor.
Nel caso concreto in esame, comprimendo due .js di mia creazione ho guadagnato altri 1,5KB (certo, pochino, ma la dimensione stessa dei file originali era molto piccola).
Compressione CSS
Oddio, posso comprimere anche i miei CSS?
Certo: tutti quegli spazi bianchi, tutte quelle andate a capo, tutti quei commenti - indispensabili per una facile leggibilità dei file - OCCUPANO SPAZIO.
Il consiglio è quello di mantenere due versioni dei vostri CSS: la versione "estesa", comodamente consultabile ed editabile, e la versione "ristretta", da pubblicare online.
Anche per questo scopo sono disponibili applicazioni online, ad es. csscompressor, oppure - come generalmente preferisco - FATELO VOI: avrete un'occasione per esaminare da cima a fondo i vostri file, eliminando eventuali errori o duplicati presenti.
Sito web in esame: risparmio di 2,6KB.
Ridurre il numero delle richieste HTTP
Ogni oggetto presente all'interno della pagina - immagini, script, CSS, filmati Flash, .. - genera una specifica ed autonoma richiesta al server web: aumentando il numero di tali richieste, la loro incidenza sul tempo totale richiesto per il caricamento della pagina diventa determinante.
Il fattore di rallentamento in questo caso non è dato dalla dimensione in KB degli oggetti, ma dal NUMERO delle singole richieste inviate al server: a parità di KB trasmessi, minore il loro "spezzettamento" in singole richieste, minore il tempo di caricamento complessivo.
Nel caso in esame ho quindi proceduto all'accorpamento di due file CSS in uno, e di due file .js anch'essi in uno, riducendo così di due unità il numero complessivo delle richieste HTTP della pagina.
Un buon tool online che vi consente, tra le altre cose, di monitorare in modo preciso numero e tipologia delle vostre richieste HTTP è http://www.websiteoptimization.com/services/analyze/
Spostare i file Javascript in fondo alla pagina
Il browser scarica i diversi componenti della pagina in modo sequenziale, esattamente nell'ordine con cui essi sono stati disposti.
E' quindi bene fare in modo che vengano prima scaricati gli oggetti essenziali (CSS, codice HTML) alla composizione della pagina, in modo che questa venga presentata all'utente nel minor tempo possibile, e solo in seguito gli script necessari per "far funzionare" specifici elementi: ad esempio la validazione Javascript di un form, una libreria Javascript per la gestione di una fotogallery
articolo originale:
Condividi su Facebook
Nessun commento:
Posta un commento