Nota del redattore: una versione di questo articolo è già stata pubblicata su Think with Google Nordics & Benelux. Illustra l'importanza della progettazione dei siti per dispositivi mobili per i brand globali e locali.
Nella maggior parte delle organizzazioni di marketing, la velocità del sito web del brand sui dispositivi mobili non sempre è in cima all'elenco delle priorità. Infatti, si potrebbe pensare che sia più di competenza dello sviluppatore del sito anziché del responsabile del marketing. Ma questo non è necessariamente vero. A volte, le bellissime immagini di marketing che vivacizzano il sito di un brand possono rallentare la velocità sui dispositivi mobili se non gestite attentamente, con il conseguente rischio di maggiori frequenze di bounce rate e minori conversioni, che si traducono in opportunità di entrate mancate.
Se vuoi i vantaggi di un sito per dispositivi mobili con pagine veloci, inizia a riconsiderare le immagini che usi. Ecco alcuni suggerimenti più tecnici da esaminare con il tuo sviluppatore, che includono anche esempi concreti tratti da Google e Alphabet. Questi consigli aiuteranno la tua azienda a trarre vantaggio dall'ottimizzazione delle immagini, creando in definitiva una user experience più veloce sui dispositivi mobili.
1. Dai priorità alle immagini più importanti
Prima di ottimizzare le immagini, valuta se sono tutte necessarie. Quella foto ad alta risoluzione è sicuramente accattivante, ma pensi che aiuterà davvero a trasmettere il tuo messaggio? È possibile semplificare quella GIF animata trasformandola in un'animazione più efficiente composta da puro codice? O meglio ancora, puoi rimuoverla?
La rimozione di asset inutili riduce la manutenzione e la complessità. E se un'immagine può essere sostituita con testo o CSS (Cascading Style Sheet, il linguaggio utilizzato per definire stili, forme ed effetti in poche righe di codice), i tuoi sviluppatori saranno ben lieti di dedicarsi a questa sfida creativa e i tuoi utenti avranno meno byte da scaricare.
Verily, un sito di Alphabet, ha utilizzato questo metodo. È semplice e leggero, grazie alle tecniche di riduzione delle immagini adottate dal team. Come elemento hero presenta uno sfondo sfumato animato, largo appena un pixel. La sfumatura poteva anche essere creato in codice, ma avrebbe causato problemi di prestazioni, più costosi e visivamente fastidiosi. La collaborazione tra il designer e lo sviluppatore ha consentito di garantire il perfetto equilibrio tra estetica e prestazioni del sito per dispositivi mobili.
Sulla piattaforma mobile, questa animazione è ulteriormente semplificata attraverso un colore di sfondo a tinta unita, che cambia gradualmente in base a una sequenza codificata. La semplicità di queste animazioni consente di alleggerire la pagina evitando pesanti framework di JavaScript o dimensioni eccessive dei file. Anche simulando una rete 3G, la home page si carica quasi all'istante e realizza un punteggio prestazioni Lighthouse pari a 92, ovvero un valore che per soli pochi millisecondi non la colloca nel primo percentile dei siti ad alte prestazioni.
2. Scegli un formato dell'immagine efficiente
Con così tanti formati disponibili, può essere difficile sapere qual è il più efficiente. Tutto dipende dal caso d'uso, ma scegliere il formato corretto può già contribuire a ridurre i byte della pagina. Cerca di iniziare con WebP, che può essere utilizzato per immagini fotografiche e semitrasparenti a una compressione maggiore del 30% rispetto a JPEG, senza compromettere la qualità dell'immagine. Poi, segui queste indicazioni per un supporto completo del browser:
- JPEG: foto senza trasparenza
- PNG: sfondi trasparenti
- SVG: icone e forme scalabili
In Google abbiamo adottato questo approccio sul sito Fighting Piracy, dove il team ha utilizzato il formato SVG per realizzare animazioni fluide e leggere create a partire da forme semplici. In precedenza questa pagina era progettata con file GIF e video di oltre 300 kilobyte ciascuno, pari a più del doppio delle dimensioni consigliate.
Invece, introducendo il concetto di budget di peso delle pagine, il team è riuscito a ridurre di dieci volte il peso delle immagini. Per raggiungere questo risultato, è stata necessaria una stretta collaborazione tra sviluppatore e designer, ma i miglioramenti della velocità sui dispositivi mobili dimostrano che ne valeva decisamente la pena.
3. Comprimi e ridimensiona le immagini ottimizzandole per le Accelerated Mobile Pages
Ottimizzare le immagini può aiutare a generare i risultati migliori in termini di riduzione dei byte e miglioramento delle prestazioni del sito per dispositivi mobili. Possono rivelarsi utili anche le ottimizzazioni più basilari, come comprimere le immagini, rimuovere i metadati (come data e ora) e sperimentare con le impostazioni di qualità. E adesso è più facile che mai pubblicare immagini adattabili, in quanto gli sviluppatori definiscono diverse dimensioni di un'immagine e il browser sceglie quelle più adatte allo schermo dell'utente.
L'aspetto più vantaggioso è che molte di queste attività possono essere automatizzate per risparmiare tempo e garantire che le immagini vengano sempre ottimizzate. Ad esempio, le tue centinaia o migliaia di immagini potrebbero essere ridimensionate e compresse automaticamente con uno script. In questo modo si riduce il lavoro manuale dei designer, che quindi hanno più tempo da dedicare ad attività più interessanti.
Quando crei una pagina Accelerated Mobile Page (AMP), i tag immagine personalizzati eseguono molte di queste ottimizzazioni automaticamente. Inoltre, la cache AMP di Google limita le dimensioni massime delle immagini per evitare problemi di memoria del browser e memorizza le immagini al suo interno per consentirne un caricamento più veloce in futuro.
Nel caso di BMW, il brand di auto di lusso ha deciso di adottare un approccio ad alte prestazioni orientato ai dispositivi mobili, senza rinunciare alla qualità delle sue immagini e dei suoi video. Grazie all'efficienza dei tag immagine di AMP e ad altre funzionalità mirate alla rapidità, il nuovo sito AMP ha registrato un tempo di caricamento fino a quattro volte più veloce, con un aumento del 50% degli utenti di dispositivi mobili. Oltre a tutto ciò, il sito web combina la velocità di AMP con le efficienti funzionalità offerte dalle tecnologie delle applicazioni web progressive (PWA) per garantire un'esperienza di qualità elevata simile a quella con le app.
4. Utilizza le tecniche di caricamento
Comprimere e ridimensionare le immagini è l'approccio di base che ogni designer e sviluppatore dovrebbe adottare. Per spingersi ancora oltre, gli sviluppatori possono pubblicare versioni diverse dell'immagine in base al dispositivo e alle dimensioni dello schermo dell'utente o addirittura in funzione della qualità delle condizioni della rete che utilizza. Ciò consente agli sviluppatori di creare un sito a caricamento rapido per tutti, a prescindere dalle condizioni di navigazione specifiche.
Dopo aver ottimizzato le immagini in modo efficace, assicurati che vengano pubblicate al momento giusto. Quando gli utenti arrivano sulla tua pagina per la prima volta, vogliono vedere all'istante tutti i contenuti all'interno dell'area visibile, ovvero i cosiddetti contenuti "above the fold". Grazie alla tecnica di caricamento lento, puoi consentire alla tua pagina web di dare priorità al caricamento delle prime immagini disponibili in questa zona limitata, mentre le immagini nell'area non visibile verranno caricate quando necessario.
L'azienda tedesca di e-commerce bücher.de carica le immagini solo se rientrano nell'area visibile all'utente. I contenuti nella porzione visibile hanno la priorità, per cui si caricano all'istante. Attraverso questa e altre ottimizzazioni delle pagine, l'azienda è riuscita a velocizzare il suo sito del 33% e a ridurre di tempi di caricamento fino a 3,5 secondi.
In caso di immagini grandi che impiegano più tempo a caricarsi, è utile implementare tecniche di caricamento progressivo quali segnaposto, indicatori di avanzamento o formati efficienti come JPEG progressivo. Queste tecniche danno agli utenti l'impressione che le immagini si stiano caricando, coinvolgendoli più a lungo sul sito. Il consulente per i designer Mustafa Kurtuldu afferma: "L'idea è quella di riempire lo spazio e occupare il tempo dell'utente".
Passaggi successivi: includi la velocità sui dispositivi mobili tra i KPI
L'ottimizzazione delle immagini è un modo semplice e conveniente di migliorare i tassi di conversione sul sito del tuo brand. Ma per una sostenibilità a lungo termine dell'ottimizzazione della velocità del sito, quest'ultima deve essere considerata un KPI in tutta la tua organizzazione.
Per ulteriori informazioni sulla velocità delle pagine del tuo sito per dispositivi mobili, prova la nuova versione dello strumento Test My Site.
