La velocità con cui si apre una pagina internet, ha un impatto significativo su diversi fattori, che tra gli altri includono:
- il tempo di permanenza di un utente su un determinato sito;
- il numero di conversioni che si ottengono dai propri utenti;
- il posizionamento di un sito nei risultati organici dei motori di ricerca.
Sfortunatamente, nella maggior parte dei casi, una pagina web raggiunge punteggi molto bassi quando si tratta di valutare la sua effettiva velocità. Questo punto, può avere un impatto fortemente negativo sull’intera strategia che si è sviluppato lato marketing digitale.
I fattori che possono portare ad un rallentamento possono essere molti, e sarebbe meglio cercare di individuarne il maggior numero. Ciò che può sembrare un lasso di tempo adeguato ad alcune persone, per altre può sembrare un’eternità. Non è un bene valutare la velocità di caricamento utilizzando solo la propria connessione ad internet.
Vediamo insieme quali sono i principali fattori da tenere in considerazione per migliorare le performance di un sito web e la velocità di apertura delle pagine:
INDICE
1. Scegliere un servizio hosting di buona qualità
Sono molti gli utenti, che quando decidono di aprire un sito internet si mettono alla ricerca di offerte o di hosting condivisi economici. Risparmiare sul servizio di hosting NON è sempre un vantaggio per il progetto che si andrà a sviluppare.
Quando un utente si trova sulle pagine di un sito internet lento, non è interessato al fatto che il servizio hosting ha permesso un risparmio di qualche decina di euro al proprietario. Spesso, invece di aspettare che la pagina si carichi torna sui risultati di ricerca e clicca sul risultato di un competitor. Avere risparmiato pochi euro, al momento del rinnovo potrebbe tramutarsi in una perdita di molte migliaia di euro e di affezionati clienti.
a name="velocità""La velocità di un sito può fare la differenza?
Certamente, la velocità di un sito internet può aumentare o ridurre le conversioni delle proprie pagine. Secondo uno studio condotto da Amazon, una differenza di soli 100ms – un’unità di tempo che una persona non riesce minimamente a percepire – può essere sufficiente a ridurre le vendite dell’1% sul proprio negozio online. Mentre, sulla base di uno studio del 2017 di Google*, pagine che si caricano in 10 secondi possono portare ad una media di abbandoni da parte degli utenti superiore al 100% della media dei siti analizzati.
Quando si valuta di acquistare un servizio hosting per il proprio progetto, è bene non ridurre all’osso il budget. Pessime performance, possono ridurre in maniera drastica i guadagni.
Speed
Host.it, all’interno dei tool presenti nei suoi piani di abbonamenti ha creato SPEED. Un’applicazione in grado di misurare la reale velocità del proprio sito internet, e di rivelare quali sono le parti dove è necessario intervenire.
Al termine delle analisi realizzate da SPEED, sono presenti dei suggerimenti creati ad hoc per ottimizzare al meglio il tempo di caricamento del proprio sito internet.
2. Ridurre le chiamate HTTP
Ogni file necessario alla visualizzazione e al funzionamento di una pagina Web, ad esempio i file html, CSS, le immagini e i font, influiscono sul tempo di caricamento della pagina stessa. Più richieste vengono fatte, più lentamente una pagina si carica.
La scelta di un template o lo sviluppo di un sito internet, possono diventare molto pesanti se si considerano i file CSS e i JavaScript che sono aggiunti successivamente con l’installazione di plugin. In alcuni casi, è possibile avere venti o più richieste http solo da file CSS e JavaScript. Cosa, che aumenta notevolmente il tempo di apertura di una pagina.
Per ottimizzare al meglio il tempo di apertura di una pagina, è bene seguire alcune migliori pratiche:
- unire i file JavaScript in un unico file;
- unire i file CSS in un unico file;
- ridurre il numero di plugin caricati ma non utilizzati in determinate pagine;
- usare sprite per le immagini che sono richiamate più di frequente;
- utilizzare FontAwesone o altri caratteri al posto delle icone della user interface.
Ottimizzando e unificando queste risorse, è sempre bene controllare che non si presentino dei problemi una volta completata questa operazione. Eseguendo le ottimizzazioni in varie sessioni, si sarà sicuri di aver ridotto notevolmente il numero di richieste per la generazione di ogni singola pagina html e allo stesso tempo di aver mantenuto intatte le funzioni delle pagine.
3. Abilitare la compressione
L’abilitazione della compressione Gzip, è una funzionalità che può ridurre in modo significativo la quantità di tempo necessaria per scaricare i file html, CSS e tutte le risorse necessarie al funzionamento del sito internet. Questa funzionalità, permette di ridurre le dimensioni di alcuni file, che vengono poi decompressi quando arrivano al browser.
Questa funzionalità non incide minimamente sull’usabilità del sito internet. Tutti i moderni browser internet supportano Gzip e lo elaborano automaticamente all’apertura della pagina.
4. Abilita la memorizzazione della cache nel browser
Attivando la memorizzazione della cache nel browser, si permette agli elementi di una pagina di essere memorizzati all’interno del browser che gli utenti utilizzano per navigare le pagine del sito. Quando un utente visita la prima pagina di un sito con la memorizzazione della cache nel browser abilitata, durante la navigazione delle successive pagine non dovrà inviare altre richieste http al server per gli elementi che sono stati memorizzati nella cache.
Grazie a questa funzionalità, il numero di file necessari ad aprire la pagina da richiamare sono nettamente inferiori. Questo, permette di ridurre notevolmente la velocità di apertura di ogni singola pagina, anche nel caso di utenti con connessioni molto lente.
5. Assegna la priorità al contenuto above the fold
Le pagine di un sito internet, si possono generare più velocemente se sono codificate per dare priorità ai contenuti above the fold. Questo tipo di contenuti, non sono altro che le informazioni che il visitatore può visualizzare prima di scrollare la pagina.
Questo tipo di contenuti, si trovano nella parte iniziale del codice html. Il posizionamento nella zona “above the fold”, permette ai moderni browser di scaricare e visualizza per primi i contenuti che si trovano in questa parte del codice. In questo modo, l’utente avrà la possibilità di vedere parte del contenuto della pagina in pochi millisecondi.
È bene ricordare, che nel contenuto above the fold si dovrà inserire qualsiasi CSS e JavaScript necessario alla visualizzazione dei contenuti presenti in questa zona della pagina.
6. Ottimizza i file multimediali
Le immagini e i contenuti video presenti nelle pagine di un sito, devono essere ottimizzate per non diventare un “ostacolo” al momento del caricamento della pagina stessa. Una immagine di dimensioni troppo grandi, può rallentare notevolmente l’apertura di una pagina; in particolare per gli utenti che si collegano mediante dispositivi mobili.
L’ottimizzazione dei file multimediali sul proprio sito web, può migliorare notevolmente la velocità di apertura di una pagina.
Per ottimizzare veramente nel migliore dei modi i contenuti multimediali per il proprio sito internet, è bene scegliere di fornirli ai propri utenti in base alle dimensioni dello schermo con cui li visualizzano. Ci sono due metodi per gestire queste ottimizzazioni.
Le immagini all’interno del codice HTML del proprio sito web possono essere pubblicate utilizzando il set src, che consente al browser di selezionare, scaricare e quindi visualizzare l’immagine appropriata al dispositivo che l’utente sta utilizzando.
Le immagini posizionate nelle pagine del sito mediante i CSS, tipicamente come sfondo o elemento grafico, possono essere servite all’utente mediante query multimediali che si adattano alle dimensioni del dispositivo utilizzato dall’utente.
Ottimizzazione delle immagini
- Scegli il formato più adatto al tipo di immagine. Il formato JPG è l’ideale per le immagini fotografiche, mentre GIF e PNG lo sono per le immagini con ampie aree di colore. I file PNG a 8 bit sono utilizzati per le immagini senza un canale alfa (sfondo trasparente), mentre le PNG a 24 bit per le immagini con un canale alfa.
- Assicurati che le immagini siano correttamente dimensionate per il breakpoint di riferimento. Se una immagine viene utilizzata per i dispositivi mobile, non ha senso caricarla con una dimensione di 1600 pixel di larghezza.
- Utilizza un programma per la compressione delle immagini. In commercio, come plugin o come programma online sono disponibili una serie di ottimi tool per ottimizzare e comprimere al meglio le immagini.
Ottimizzazione i video
- Scegli il formato video più ideale. Nella maggior parte dei casi, MP4 è il formato che permette di avere il miglior risultato tra compressione/qualità video.
- Fornisci il video agli utenti in base alla grandezza del loro dispositivo.
- Elimina la traccia audio, se il video viene utilizzato come background di una parte del sito.
- Utilizza un programma video per comprimere i file video che andranno visionati su un sito. Premiere e molti altri programmi, permettono di ridurre notevolmente le dimensioni dei file video.
- Riduci la lunghezza del video, se non è necessario far vedere tutto il video.
- Prendi in considerazione di caricare il video su piattaforme esterne come Youtube o Vimeo, invece di servirli ai tuoi utenti direttamente dal tuo hosting.
7. Utilizzare un sistema di cache e un CDN
La memorizzazione nella cache del browser, consente di archiviare una copia statica delle pagine Web che si sono visitate, in modo che queste si possono visionare più velocemente nelle successive visualizzazioni. Un sistema CDN, è composto da una serie di server dislocati in varie località e che permettono agli utenti di accedere ad un sito dalla località più vicina alla propria posizione. L’utilizzo di queste due tecnologie, permette di migliorare notevolmente il tempo necessario a caricare una pagina.
NOTE:
*PDF della ricerca Google 2017: https://think.storage.googleapis.com/docs/mobile-page-speed-new-industry-benchmarks.pdf
