Come ottimizzare le prestazioni Web e la linea di fondo

La pazienza non è una virtù per i visitatori del sito Web e gli acquirenti online. Ogni frazione di secondo conta quando si tratta di mantenere o perdere un visitatore sul tuo sito web.

Secondo Kissmetrics, il tempo di caricamento è un importante fattore che contribuisce all'abbandono della pagina. Poiché il visitatore web medio non ha pazienza per una pagina che impiega troppo tempo a caricarsi, l'abbandono aumenta in percentuale con ogni secondo di tempo di caricamento. Quasi il 40% degli utenti abbandonerà una pagina dopo 10 secondi, ha osservato il blog. Gli utenti di Internet mobile probabilmente sperimentano la maggiore frustrazione per questo problema: il 73% ha notato di aver riscontrato un sito Web troppo lento da caricare.

Il problema del caricamento della pagina ha un impatto diretto sul comportamento di acquisto dei visitatori del sito web. The Kissmetrics ha anche notato che il 79% degli acquirenti insoddisfatti delle prestazioni del sito Web ha meno probabilità di acquistare di nuovo dallo stesso sito. Quasi la metà dei consumatori prevede che le pagine vengano caricate in 2 secondi o meno e un ritardo di 1 secondo ridurrà la soddisfazione dei clienti del 16%.

Le conseguenze di questi ritardi si traducono in denaro reale. Il gigante dell'eCommerce Amazon ha rivelato che un rallentamento del caricamento della pagina di solo 1 secondo gli costerebbe $ 1,6 miliardi di ricavi dalle vendite. Allo stesso modo, Google ha osservato che un rallentamento di soli quattro decimi di secondo nei suoi risultati di ricerca comporterebbe una perdita di 8 milioni di ricerche al giorno, che si traducono in milioni in meno nella pubblicità online.

Andare al cuore del problema

I maggiori fattori che incidono sul tempo di caricamento sono immagini, video e grafica. I siti Web di oggi incorporano più elementi visivi e meno testo per attirare visitatori. Secondo HTTP Archive, quasi il 64% del peso medio di un sito Web è costituito da immagini, mentre il video rappresenta un altro 8%.

Poiché questi tipi di media rappresentano quasi i tre quarti delle dimensioni del sito Web, è importante per te gestire in modo più efficiente immagini e video sul tuo sito per migliorare le prestazioni e i tassi di conversione. Diamo un'occhiata ad alcuni passaggi che puoi adottare per ridurre l'impatto di immagini e video sulle prestazioni del tuo sito web.

Usa formati immagine più efficienti e moderni

Google ha aggiunto il supporto per il suo formato immagine WebP ai browser Chrome e Microsoft ha fatto lo stesso per JPEG-XR nella maggior parte dei suoi browser Internet Explorer ed Edge. Ma molti sviluppatori non hanno ancora adottato queste modifiche, attenendosi agli stessi formati JPG e PNG, piuttosto che sfruttare il modo in cui i formati moderni possono ottimizzare i loro siti.

Idealmente, dovresti convertire le immagini in WebP e JPEG-XR quando appropriato e regolare la qualità della compressione per bilanciare i formati. È importante anche rilevare il browser specifico che accede a ciascuna immagine e fornire una versione dell'immagine ottimizzata al rispettivo browser. In questo modo potrai assicurarti che gli utenti ricevano le migliori immagini possibili, in termini di qualità visiva e ottimizzazione delle dimensioni dei file, senza rallentare il tuo sito.

Elimina lo spreco di ridimensionamento lato browser

Gli sviluppatori utilizzano spesso il ridimensionamento delle immagini lato browser come scorciatoia, piuttosto che ridimensionare le immagini sul lato server. Mentre il risultato finale sembra esattamente lo stesso sui browser moderni, l'impatto sulla larghezza di banda è piuttosto diverso. Con il ridimensionamento lato browser, i visitatori del sito Web sprecano tempo prezioso a scaricare un'immagine inutilmente grande e tu sprechi larghezza di banda per consegnargliela.

Per i browser meno recenti, il problema è ancora più pronunciato poiché i loro algoritmi di ridimensionamento sono generalmente scadenti. Devi assicurarti che le tue immagini si adattino perfettamente alle dimensioni del sito web richieste. Vale la pena creare miniature diverse della stessa immagine piuttosto che fornire un'immagine di grandi dimensioni e fare affidamento sul browser per ridimensionarla. Sono disponibili alcuni strumenti che possono aiutare in questo, come un ridimensionatore di immagini open source come ImageMagick o una soluzione basata su cloud come Cloudinary.

Usa tipi di file immagine corretti

JPEG, PNG e GIF sono i formati di file più comuni utilizzati oggi sui siti Web, ma ognuno ha ruoli molto diversi. Usa il formato sbagliato e stai sprecando il tempo dei tuoi visitatori e il tuo stesso denaro. Un errore frequente consiste nell'utilizzare i PNG per fornire fotografie. C'è un malinteso comune sul fatto che i PNG, in quanto formati senza perdita di dati, producano la massima riproduzione possibile per le foto.

Anche se questo è generalmente vero, questa è anche un'ottimizzazione non necessaria. È importante tenere a mente quale formato immagine dovrebbe essere utilizzato per il contenuto mostrato. PNG dovrebbe essere utilizzato per immagini generate al computer (grafici, loghi, ecc.) o quando hai bisogno di trasparenza nell'immagine (sovrapposizioni di immagini); JPEG quando stai mostrando una fotografia catturata; e GIF quando è necessaria l'animazione (animazione di caricamento Ajax, ecc.).

Non utilizzare una singola dimensione dell'immagine su tutti i mezzi di pubblicazione

Il tuo sito web viene visualizzato su molti dispositivi diversi, in particolare perché smartphone, tablet e smartwatch sono diventati i preferiti dai consumatori. Spesso gli sviluppatori offrono le stesse immagini su tutte le risoluzioni dei dispositivi, utilizzando il ridimensionamento lato client per le immagini. Le immagini possono sembrare fantastiche, ma i visitatori perdono tempo a caricare immagini inutilmente grandi sui propri dispositivi e si paga per l'utilizzo ridondante della larghezza di banda.

Ciò è particolarmente ingiusto per gli utenti 3G e gli utenti in roaming che pagano un grande extra per scaricare le immagini ad altissima risoluzione inutilmente. Per evitare questi problemi, dovresti identificare i dispositivi mobili e la risoluzione dei visitatori utilizzando il loro user agent. Con la risoluzione corretta in mano, recupera l'immagine più adatta dai tuoi server. Ciò richiede che tu metta a disposizione una serie di miniature per ciascuna delle tue immagini originali. Sono disponibili eccellenti pacchetti Javascript che automatizzano questo processo.

Sfrutta il design reattivo

Ogni dispositivo utilizzato da un visitatore per accedere al tuo sito ha una risoluzione diversa. Il markup di un sito Web deve adattarsi per apparire perfetto su tutti i diversi dispositivi e in varie risoluzioni, densità di pixel e orientamenti dei dispositivi mobili. La gestione, la manipolazione e la distribuzione delle immagini è una delle principali sfide del design reattivo che gli sviluppatori web devono affrontare.

A causa di queste sfide, molti siti Web vengono creati con immagini alla massima risoluzione che potrebbero essere necessarie e semplicemente ridimensionate lato client a seconda del punto di interruzione. Questo processo è inefficiente e danneggia le prestazioni. Ma ci sono opzioni, come lo strumento open source Responsive Breakpoints, che può aiutarti a generare tutte le dimensioni dell'immagine di cui avrai bisogno, così come il codice HTML appropriato.

Utilizzare le reti di distribuzione dei contenuti (CDN)

I CDNS in genere dispongono di server distribuiti strategicamente in tutto il mondo per ridurre i tempi di andata e ritorno dei contenuti. Le CDN consentono alle immagini di essere fornite più rapidamente agli utenti e riducono la probabilità di arresti anomali, migliorano le prestazioni SEO e migliorano l'esperienza dell'utente. Quando scegli una CDN, dovrai considerare il suo livello di copertura globale, la velocità di memorizzazione nella cache, la capacità di eseguire operazioni logiche al limite, i tempi di risposta medi e altre metriche, come i tempi medi di invalidamento.

L'impatto del cambiamento

Utilizzando queste best practice, puoi davvero fare la differenza nell'esperienza dell'utente, incoraggiando i visitatori a rimanere più a lungo, navigare di più, coinvolgere ed effettuare acquisti. Considera i risultati di queste aziende:

Apartment List, una risorsa online che aiuta le persone a cercare un alloggio in affitto, si è trovata a dover gestire una varietà di formati di immagine e risoluzioni diversi mentre raccoglie feed di dati di immagini dalle varie comunità di appartamenti presenti sul suo sito. Trasformando tutte queste immagini in immagini ottimali per la presentazione su dispositivi mobili di varie dimensioni e desktop, nonché sfruttando tecniche di progettazione reattiva, l'azienda ha registrato un aumento di quasi il 20% dei suoi tassi di conversione.

KartRocket, una piattaforma di e-commerce basata su SaaS che offre un ecosistema di e-commerce trasparente e completo che aiuta le PMI a creare negozi online in modo rapido e semplice, necessario per trovare un modo per garantire la qualità delle immagini senza influire sui tempi di caricamento o sulle prestazioni del sito per il suo clienti. Ha sfruttato gli strumenti per controllare dinamicamente le immagini, in modo che fossero ottimizzate per miniature piccole, immagini banner di grandi dimensioni e immagini dei prodotti principali. Questo approccio ha consentito a KartRocket di ottenere un aumento di 100 volte il tempo di risposta per il caricamento delle immagini.

La linea di fondo

Quando il tempo è denaro, i proprietari di siti Web non possono permettersi di non adottare tutte le misure necessarie per migliorare l'esperienza dei visitatori. Anche una frazione di secondo di ritardo nel caricamento di una pagina potrebbe tradursi in una perdita di entrate e fiducia, da parte del consumatore.

Considerando che le immagini e i video sono i maggiori ingombri di larghezza di banda sulla maggior parte dei siti Web, è necessario dare un'occhiata seria al design Web e ai formati delle immagini, quindi adottare le misure necessarie per garantire che i media siano ottimizzati in modo che il tuo sito, per non parlare delle entrate e percezioni dei clienti: non ne risente.