Ho pensato che dopo anni e anni di produzione di siti web, fosse utile scrivere un articolo sull'ottimizzazione delle applicazioni web lato front-end.

Le principali cause di un rallentamento nel rendering sono l'ingente numero di files da caricare, sopratutto quando si devono scaricare da diversi hostnames. Ma esistono anche piccoli accorgimenti che tornano comunque utili come la compressione del codice.


HTML

Evitare l'uso dei frames
L'uso dei frames aumenta il numero di connessioni da aprire.

Ridurre il numero di elementi DOM
La riduzione degli elementi DOM da una struttura HTML permette di velocizzare i processi JavaScript che non si trovano costretti a dover iterare tonnellate di elementi. La homepage di Yahoo nonostante sia bella corposa, ha circa 700 elementi.

Un metodo per verificare il numero di elementi è tramite JavaScript
document.getElementsByTag('*').length
Evitare di ridimensionare le immagini nel codice HTML
L'utilizzo dei parametri width e height comporta un ulteriore carico del browser per il ridimensionamento delle immagini aumentando così il tempo di rendering della pagina richiesta. Inoltre, a mio avviso la qualità di questo genere di ridimensionamento è spesso associata al browser utilizzato. Alcuni browsers ridimensionando le immagini le rovinano "sgranandole".


CSS

Riduzione del numero di fogli di stile
Sarebbe bene avere il meno tag <link rel="stylesheet" /> possibili. Questa tag, è sostituibile con la tag <style />.
Così facendo, il browser mentre sta parsando il codice HTML si preoccuperà nell'immediato di parsare anche il codice CSS senza dover aprire un ulteriore connessione.
Faccio un esempio per i newbies:
<link rel="stylesheet" type="text/css" href="/css/style.css" />
Questa tag, sarebbe meglio sostituirla con:
<style>
body {
text-size: 14px;
...
}

...
</style>
Un altra soluzione, sicuramente piu' idonea è quella di unire tutti i fogli di stile in uno unico. Le soluzioni sono molteplici e sono assolutamente identiche a quelle per poter unire piu' di un file JavaScript.

Regole CSS all'interno della tag <head>
Sarebbe bene che all'inizio del parsing del contenuto del corpo della pagina, il browser sappia gia' quali regole deve applicare ai singoli elementi. Questo per poter avere un rendering progressivo risparmiando così tempo prezioso.

Usare la tag <link /> al posto della regola CSS @import
L'utilizzo della regola @import costringe alcuni browsers a scaricare il foglio di stile richiesto soltanto alla fine, impedendo così un rendering progressivo della pagina.



JavaScript

Riduzione del numero di scripts javascript
Onde evitare un apertura di molteplici connessioni per il rendering di una singola pagina, sarebbe opportuno includere il meno scripts possibili. Esistono diverse soluzioni per i diversi linguaggi di programmazione lato preprocessore. Queste soluzioni permettono di unire tutti gli scripts in un unico file.

Scripts posti in fondo alla pagina
Il problema nasce dal fatto che la specificazione HTTP/1.1 suggerisce ai browsers di non scaricare piu' di due componenti dallo stesso hostname per volta. A differenza di qualsiasi altro componente, che sia immagine o foglio di stile, il browser per gli scripts JavaScript si comporta in maniera differente, ovvero blocca e mette in coda qualsiasi altro componente da scaricare. Lasciando quindi per ultimi gli scripts, si potrà evitare di vedere il rendering della pagina bloccato temporaneamente, guadagnando non poco tempo.

Asincronizzazione della navigazione
Tramite la tecnica AJAX è possibile evitare di dover ricaricare l'intera pagina, comprensiva di header, sidebar, footer, etc. caricando soltanto il contenuto richiesto.

Usare dove possibile il metodo GET per le richieste AJAX
Per le richieste POST tramite l'oggetto XmlHttpRequest il browser divide l'operazione in due step. Quindi sarebbe bene cercare di evitare l'utilizzo del metodo POST. L'unico caso in cui è indispensabile utilizzare tale metodo è per le richieste piu' lunghe di 2k, poichè i browsers non riescono a processare URL piu' lunghi di tale limite.


Immagini

Riduzione del numero di immagini
Ogni immagine richiede una connessione. Per ridurre quindi il numero di immagini da utilizzare in un sito è possibile unirle tutte in una unica specificando nel foglio di stile CSS i parametri per poterle estrappolare. Esiste un sito comodissimo che puo' fare tutto questo per voi: SpriteMe.

Usare il formato piu' conveniente
Ad esempio, se un immagine GIF utilizza 4 colori su 256, è probabile che convenga convertirla in PNG. Un metodo "empirico" per i designers è quello di provare diversi formati a mano o con programmi come Photoshop è possibile visualizzare ancor prima di salvare l'immagine, la dimensione che otterrà.
In alternativa, per i piu' pigri, usando imagemagick è possibile sviluppare un tool per l'analisi automatica di tutte le immagini del sito, iterando in maniera ricorsiva le cartelle del sito e parsando il risultato del comando identify per ogni immagine, evidenziando quelle che sono potenzialmente ottimizzabili.

Il comando in questione è
identify --verbose filename


Server-side

Compressione dell'output
Ove possibile conviene comprimere l'output dell'httpd con il metodo gzip. Apache ad esempio puo' farlo attraverso mod_gzip o la mod_deflate. L'utilizzo della compressione spesso riduce le risposte del server di circa il 70%.

Compressione del codice
E' stato dimostrato che le dimensioni di una pagina possono essere diminuite fino al 70% eliminando spazi inutili, indentazione e possibilmente, ofuscando il codice a discapito della leggibilità nel risultato finale. E' possibile effettuare questa operazione lato server, così da poter avere tutti i files intatti e ben leggibili durante la programmazione. Inoltre, suggerisco di mettere nella cache server-side il risultato di questa operazione di riduzione, sopratutto per i files di grosse dimensioni, così da non doverla ripetere ad ogni richiesta. Giusto per citare alcuni tools che permettono tutto questo: JSMin di Douglas Crockford, YUI Compressor di Yahoo ed il Closure Compiler di Google. Una soluzione per poter fare il tutto on-the-fly è utilizzare Ant di apache in combinata con YUI Compressor o il Closure Compiler.

Cache client-side per i contenuti statici
Per i contenuti statici (soprattutto per le immagini) conviene utilizzare l'header HTTP "Expires" o "Cache-Control". Questo permette di evitare di dover riscaricare per ogni pagina contenuti gia' renderizzati in precedenza. Apache ad esempio ha un comodo modulo per la gestione dei suddetti headers, la mod_expires.

Riduzione del numero di DNS Lookups
I problemi in questo caso sono 2. Come gia' accennato nel paragrafo "Scripts posti in fondo alla pagina", le specificazioni HTTP/1.1 suggeriscono di non permettere di scaricare piu' di due componenti per volta da ogni singolo hostname. Un trucco per chi non possiede un CDN a disposizione è quella di creare dei "alias" (CNAME entries) permettendo così di scaricare simultaneamente ben piu' di 2 files per volta. Il secondo problema però nasce dalle tempistiche di risposta dei DNS che solitamente impiegano dai 20 ai 120 millisecondi. Usare quindi tantissimi hostnames non sarà la soluzione ai vostri problemi, anzi. Poichè finchè il lookup non viene completato, il browser non è in grado di sapere dove puo' attingere ai singoli componenti. Il consiglio finale quindi è quello di usare non piu' di 4 o 6 hostnames per i vostri contenuti.


Esistono dei software per l'analisi delle prestazioni del rendering. In primis il pannello nativo di Google Chrome e dell'Apple Safari... mentre per Mozilla Firefox esiste l'add-on Firebug ed il suo plug-in PageSpeed scritto dagli sviluppatori di Google o il celebre plug-in YSlow sviluppato da Yahoo.

Riferimenti

0 commenti:

Posta un commento

Visualizzazioni totali