Ottimizzazione front-end (CDN)

Nel contesto dei web services, il termine “front-end” si riferisce all’interazione tra il tuo sito web e il browser di un visitatore. L’ottimizzazione front-end (FEO), nota anche come ottimizzazione dei contenuti, è il processo di messa a punto del tuo sito web per renderlo più intuitivo e più veloce da caricare.

In generale, la FEO si concentra sulla riduzione delle dimensioni dei file e sulla minimizzazione del numero di richieste necessarie per il caricamento di una determinata pagina.

Durante il processo FEO, i web designer tracciano una distinzione tra il tempo di caricamento della pagina percepito e quello effettivo.

Il tempo di caricamento percepito è considerato per il suo impatto sull’esperienza utente complessiva (UX), mentre il tempo di caricamento effettivo è spesso utilizzato come parametro di riferimento delle prestazioni.

Le Content delivery Network (CDN) svolgono un ruolo importante nel processo FEO di ottimizzazione front-end, poiché sono comunemente utilizzate per semplificare molte delle attività di ottimizzazione più dispendiose in termini di tempo. Ad esempio, una tipica CDN offre funzionalità di compressione automatica dei file e di minimizzazione automatica, liberandoti dall’obbligo di armeggiare manualmente con le singole risorse del sito web.

Fatto: i ritardi front-end rappresentano fino all’80% del tempo di risposta del tuo sito web.

 

Caso in questione: Time to First Byte (TTFB)

Il Time to first byte, spesso utilizzato per misurare il tempo di risposta di un sito web, è una delle metriche di prestazioni più importanti, nonché una delle più fraintese.

Da una prospettiva di tempo di caricamento effettivo, il TTFB è la durata necessaria affinché il primo byte di dati arrivi da un server al browser richiedente. Da una prospettiva di tempo di caricamento percepito, tuttavia, il TTFB è la durata necessaria al browser per analizzare il primo byte dopo aver scaricato il file HTML.

Solo il TTFB percepito influisce sull’esperienza utente, rendendolo la metrica più preziosa delle due.

Esistono diversi modi per migliorare la reattività del tuo sito web:

• Riduzione delle richieste HTTP
• Compressione dei file
• Ottimizzazione della cache
• Minificazione del codice
• Ottimizzazione delle immagini

Riduzione delle richieste HTTP

Quando si carica una pagina web, un browser deve aprire una connessione TCP separata per ogni richiesta HTTP effettuata, che è uguale alla quantità di elementi della pagina che deve scaricare.

Il problema è che c’è un limite al numero di connessioni simultanee che un browser può aprire a un singolo host. Questo limite esiste per proteggere un server dal sovraccarico con un numero elevato di richieste HTTP. Tuttavia, funge anche da potenziale collo di bottiglia, costringendo spesso il browser ad avviare la messa in coda delle richieste di connessione.

Quando la soglia massima di connessione viene rapidamente raggiunta, vengono impiegate varie tecniche FEO per ridurre al minimo il numero di singoli elementi della pagina. Una delle più comuni è il consolidamento delle risorse, ovvero la pratica di raggruppare insieme più file più piccoli.

Ad esempio…

Supponiamo che il modello del tuo sito web sia costituito da un file HTML, due file CSS e 16 immagini, tra cui il tuo logo e vari sfondi del menu. In totale, un browser deve effettuare 19 richieste HTTP per caricare una pagina vuota sul tuo sito.

Un visitatore che utilizza il browser Google Chrome può aprire solo sei connessioni TCP al tuo server contemporaneamente, quindi il browser deve mettere in coda le restanti 13 richieste.

Tuttavia, se consolidi tutte le immagini del modello in un’unica immagine sprite, puoi ridurre il numero di richieste da 19 a solo quattro.

Ciò non solo consente a Chrome di analizzare la pagina in una “seduta”, ma riduce anche il numero di round trip necessari per caricare la pagina.

Il fattore CDN

Le CDN possono ridurre ulteriormente il tempo di risposta del server pre-pooling delle connessioni e accertandosi che rimangano aperte per tutta la sessione.

Sebbene le CDN non riducano di per sé il numero di richieste, il pre-pooling migliora le prestazioni eliminando i tempi di ritardo associati alla chiusura e alla riapertura delle connessioni TCP.

Nota: il protocollo HTTP/2, ancora in fase di early adoption, introduce il multiplexing, un metodo di connessione che consente l’invio di più richieste e risposte tramite una singola connessione TCP.

Nel prossimo futuro, questo potrebbe ridurre al minimo i vantaggi del raggruppamento delle risorse.

Compressione dei file

Ognuna delle pagine del tuo sito web è creata da una raccolta di file HTML, JavaScript, CSS e (possibilmente) altri file di codice. Più complessa è la pagina, più grandi sono i file di codice e più lungo è il tempo di caricamento.

Con la compressione dei file, questi file possono essere ridotti a una frazione delle loro dimensioni originali per migliorare la reattività del sito. Preferito per i suoi rapidi tempi di codifica/decodifica e gli alti tassi di compressione, gzip è la scelta di compressione dei file più popolare. Può ridurre un file di codice fino al 60 o persino all’80 percento.

Nota: gzipping non è efficace nel ridurre le dimensioni dei file immagine, poiché sono già compressi.

Il fattore CDN

Quasi tutti i CDN forniscono una compressione automatica dei file, eseguendo senza problemi la compressione Gzip di tutti i file di codice comprimibili (ad esempio, file CSS e JS) prima di servirli ai visitatori del sito web.

Ottimizzazione della cache

Le intestazioni della cache HTTP svolgono un ruolo importante nel modo in cui i browser analizzano un sito web, poiché determinano quali elementi di contenuto vengono memorizzati nella cache e per quanto tempo.

La memorizzazione nella cache è

archiviare i file statici, che tendono a essere i più grandi, al di fuori del server, sia sulle unità locali dei visitatori che su un CDN PoP nelle vicinanze. Ciò può migliorare notevolmente la velocità di caricamento del sito Web.

Lo svantaggio è che la gestione manuale dell’intestazione della cache può essere un’attività noiosa e inefficiente. Inoltre, i meccanismi di memorizzazione nella cache spesso incontrano problemi quando gestiscono contenuti generati dinamicamente e creati al volo quando una pagina inizia a caricarsi (ad esempio, oggetti AJAX e persino file HTML generati dinamicamente).

Il fattore CDN

Molti CDN offrono opzioni di controllo della cache, solitamente tramite una dashboard intuitiva. Con essa consentono di impostare policy per l’intero sito, gestire le regole di memorizzazione nella cache per singoli elementi e persino impostare policy per interi gruppi di file in base a elementi quali tipo di file e posizione (ad esempio, memorizzare sempre nella cache tutte le immagini nella cartella “/blog/” per 60 giorni).

I CDN hanno anche iniziato a integrare tecniche di apprendimento automatico. Questi seguono modelli di utilizzo dei contenuti per ottimizzare automaticamente le policy di memorizzazione nella cache, memorizzando così nella cache il contenuto dinamico tipicamente “non memorizzabile nella cache”. Questo ti solleva da quasi tutte le attività di gestione della cache.

Minimizzazione del codice

La minimizzazione è un processo FEO che riconosce la differenza tra il modo in cui gli sviluppatori scrivono il codice e il modo in cui le macchine lo leggono.

L’idea è che, mentre gli sviluppatori scrivono codice per una facile comprensione della lettura, con spazi, interruzioni di riga e commenti, le macchine possono leggerlo senza nessuno di questi elementi, rendendoli caratteri non essenziali

La minimizzazione riduce il codice all’essenziale, spesso riducendolo della metà prima della compressione.

/ * Sono solo un commento di codice su un esempio di minimizzazione */
Var minifyExampIe = function ( ) {
fill(0, 0, 0); text( "La minimizzazione rende il codice più piccolo senza modificarne il comportamento”, 100, 100);
};
Prima della minimizzazione (201 caratteri)
Var minifyExampIe = function ( ) { fill(0, 0, 0); text( "La minimizzazione rende il codice più piccolo senza modificarne il comportamento”, 100, 100);};minifyExample();
Dopo la minimizzazione (137 caratteri) = Dimensioni del file ridotte di oltre il 30%

Il fattore CDN

Le CDN hanno la capacità di automatizzare completamente la minimizzazione del codice. In quanto servizio on-edge, che serve già gran parte del contenuto di un sito, è molto facile per le CDN minimizzare al volo tutti i file JavaScript, HTML e CSS, mentre vengono inviati ai browser dei visitatori.
Gzip E Minify: sebbene minimizzare e comprimere il codice tramite gzip possa sembrare ridondante, la combinazione di entrambi i metodi offre i risultati migliori.

Pertanto, la riduzione dei file prima di eseguirne la compressione con gzip ridurrà le dimensioni del tarfile di un ulteriore 5-10 %.

Ottimizzazione delle immagini

La memorizzazione nella cache e la compressione sono i due metodi di ottimizzazione delle immagini più comuni, con la memorizzazione nella cache come il più efficace dei due. Questo perché, a differenza dei file di codice, tutti i formati di immagine sono già compressi.

Di conseguenza, per ridurre ulteriormente le dimensioni del file di immagine, è necessario manomettere i dati di tale immagine, rimuovendo alcune informazioni dell’intestazione o riducendo la qualità dell’immagine originale. Questo è noto come compressione con perdita di dati.

Nota: sebbene scartare dati e ridurre la risoluzione sia spesso sconsigliato, la compressione con perdita di dati può essere utile per alcune immagini ad alta risoluzione, perché i nostri occhi non riescono a percepire naturalmente l’intera gamma di informazioni visive contenute in tali immagini.

Ad esempio, la compressione con predita(lossy) di dati può rimuovere le gradazioni di colore e ridurre la complessità dei pixel senza influenzare in modo evidente la nostra percezione dell’immagine.

ottimizzazione delle immagini dopo la compressione

Il fattore CDN

Le CDN, la soluzione ideale per la memorizzazione nella cache delle immagini, vengono spesso acquistate solo per questo scopo. Inoltre, alcune CDN aiutano anche ad automatizzare il processo di compressione delle immagini, consentendo di scegliere tra velocità di caricamento della pagina e qualità dell’immagine.

Le CDN più avanzate offrono anche un’opzione di rendering progressivo, dando una svolta al concetto originale di compressione con perdita di dati. Con il rendering progressivo, la CDN carica rapidamente una versione pixelata dell’immagine.

La CDN la sostituisce quindi progressivamente con una serie di varianti progressivamente migliori fino a quando l’immagine effettiva non è pronta per essere caricata.

Il rendering progressivo è utile per la sua capacità di ridurre il tempo di caricamento percepito senza sacrificare la qualità dell’immagine.

• Dopo 15 ms
• Dopo 45 ms
• Dopo 90 ms – immagine a piena risoluzione

Immagini vettoriali e raster

Un’altra tecnica di ottimizzazione delle immagini consiste nel sostituire alcune delle immagini normali (raster) con le loro controparti vettoriali.

Questa tecnica è applicabile alle immagini composte da semplici forme geometriche: linee, curve, poligoni ecc. Una tipica immagine vettoriale è un’icona o un diagramma.

Dovresti usare immagini vettoriali ogni volta che puoi, perché:

Sono di dimensioni molto ridotte, poiché devono contenere solo dati per un set di coordinate, non per ogni singolo pixel.

Essendo indipendenti dalla risoluzione, possono essere ingrandite e ridotte all’infinito, senza alcun impatto sulla qualità. Ciò le rende perfette per i design responsivi.