Che cosa significa Above the fold?
Il termine above the fold oggi è usato nel web per indicare la visualizzazione dei primi contenuti di una pagina. L'espressione nasce dalla carta stampata: traducendo letteralmente il termine indichiamo esattamente ciò che sta “sopra la piega”, in riferimento a quella porzione del giornale che si vedeva quando era piegato in due.
Nel digitale oggi, la stessa frase sta ad indicare la prima parte di una pagina web che l’utente visualizza quando atterra su un sito. In verità è anche la prima parte che viene renderizzata dal browser durante il percorso di rendering critico e ora cercherò di spiegarvelo più nel dettaglio.
La sezione above the fold, se correttamente ottimizzata, può migliorare le performance del tuo sito web.
Above the fold: quali sono i primi contenuti visibili di un sito web?
Non si può sapere in maniera esatta quali sono tutti gli elementi visibili dall'utente. Esistono sempre più device con forme differenti e anche l’orientamento stesso del dispositivo aumenta drasticamente le varianti possibili.
Proviamo a fare un elenco.
Subito fissati in alto troviamo i primi elementi visibili. Sicuramente sono: il logo, il menu di navigazione e altri componenti variabili come il box di ricerca, il carrello o il selettore delle lingue.
Più sotto invece, potremmo trovare una o più immagini di diverse dimensioni e altri contenuti testuali come titoli e paragrafi. Eventualmente potremmo trovarci di fronte a icone di vario genere (menu, social network, frecce, etc.).
Cerchiamo ora di ottimizzare il caricamento di questi primi elementi
Ad esempio, ottimizzando la qualità delle immagini e convertendole nel nuovo formato WebP, che vi permetterà di ridurre molti kylobytes, potrete ottenere dei benefici sui browser che le supportano.
Per conoscere il supporto completo, e sempre aggiornato, potete consultare questa pagina: https://caniuse.com/#feat=webp.
Mentre per le icone e il logo potete usare il formato vettoriale (.svg) che può essere ingrandito all'infinito senza subire perdite di qualità e definizione, utilissimo per gestire in un'unica soluzione la risoluzione delle immagini sui vari dispositivi senza preoccuparsi del Device Pixel Ratio con cui l'utente visualizzerà il tuo sito!
Tutti oggi ricerchiamo la visibilità, pretendendo di rendere visibile solo ciò che desideriamo.
Ma sono solo queste le risorse che vengono caricate quando navighiamo una pagina web? No, scopriamo perché.
Quali risorse “invisibili” dovrebbero caricarsi “sopra la piega”?
Quando una pagina viene visualizzata, il browser analizza il codice html e cerca di disegnarlo il più velocemente possibile, ma molto spesso deve scaricare altri contenuti esterni come immagini, font, CSS e JavaScript.
Quante volte avrai letto su PageSpeed Insights di Google che dovevi ottimizzare queste risorse!
Più tempo il browser impiegherà a caricare questa "prima piega", meno tempo di concentrazione avrà l’utente che visualizza i contenuti. Perciò proviamo ad ottimizzare questa prima fase facendo caricare solo i contenuti utili.
Fonte: https://developers.google.com/web/fundamentals/performance/critical-rendering-path/
Chiediamoci: “Ma ci servono davvero tutti questi elementi?” La risposta è: “Dipende.”
Soprattutto in siti più complessi come gli e-Commerce è opportuno caricare subito determinate risorse. Ma la bella notizia è che alcuni di questi elementi possono essere caricati successivamente.
Esattamente dopo che il browser ha caricato il “nostro” above the fold.
Carichiamo solo il CSS indispensabile
Possiamo caricare inizialmente solo il CSS che serve per disegnare la prima porzione della pagina. Il resto del codice possiamo caricarlo più tardi.
Ecco 3 utili strumenti che possono aiutarvi a “splittare” il codice:
- Critical Path CSS Generator - https://jonassebastianohlsson.com/criticalpathcssgenerator/
- Critical Css - https://criticalcss.com/
- Critical Path CSS Generator - https://www.sitelocity.com/critical-path-css-generator
Nota: è consigliato creare i CSS critici per ogni pagina o template di pagina.
Integriamo solo JavaScript realmente utile per l'utente
Anche per i file JavaScript vale la stessa cosa: non facciamo attivare subito tutte le funzioni di elementi attivabili a metà o a fondo pagina.
Identico discorso vale anche per i bottoni social:
Perché mostrare subito questi elementi se l’utente non ha nemmeno letto una riga di ciò che gli vogliamo mostrare?
Sapete quanti siti esistono che caricano il JavaScript delle mappe di Google in tutte le pagine del sito? Se fate un'analisi del vostro sito forse scoprirete anche voi di avere questo problema.
Usiamo i font con cura
I caratteri web sono molto importanti per mostrare subito parte del contenuto. Con un piccolo "trucchetto" potremo renderizzare un font alternativo in attesa di quello personalizzato. In questo caso l’utente non avrà di fronte uno spazio vuoto, bensì già del testo che può iniziare a leggere.
In questo modo potrai evitare l'effetto FOIT (“Flash of Invisible Text”), molto fastidioso per l'utente, e mantenere il testo visibile durante il caricamento dei caratteri personalizzati.
Fonte: https://www.malthemilthers.com/font-loading-strategy-acceptable-flash-of-invisible-text/
Se volete approfondire l'argomento potete leggere sul mio sito quali strategie utilizzo per migliorare il caricamento dei font web.
Above the fold optimization: quali risorse possiamo caricare dopo?
Una volta visualizzati i primi contenuti, l’utente potrà scrollare e visualizzare “below the fold”, ossia le altre sezioni più sotto che sono presenti sulla pagina.
Caricare più velocemente la prima parte del nostro sito web permette ai nostri utenti di avere più tempo (la soglia di attenzione si aggira intorno agli 8 secondi) per leggere i testi che voi curate con tanta passione e fornire un’esperienza utente migliore.
Se avete fatto un bel lavoro gli utenti saranno felici di ritornare sul vostro sito.
Non ci credete? Leggete la ricerca di SEMrush sulle prestazioni dei siti web: ben l'82% dei siti ha problemi che influiscono negativamente sulla velocità della pagina.
Perché ottimizzare l'Above the fold?
Secondo uno studio del 2018 realizzato dalla Nielsen Norman Group circa il 57% del tempo è stato impiegato dagli utenti per visualizzare le prima schermata di un sito.
Fonte: https://www.nngroup.com/articles/scrolling-and-attention/
Questi dati confermano un altro studio del 2015, sempre condotto da Nielsen Norman Group, attraverso l'eye tracking nel quale si manifestava palesemente un dato:
Gli elementi “above the fold” sono stati visti il 102% in più rispetto ai 100 pixel appena sotto.
Fonte: https://www.nngroup.com/articles/page-fold-manifesto/
È evidente che esiste una forte riduzione dell'attenzione dell'utente dopo aver osservato la prima parte di un sito web.
Proprio per questo voglio darvi ancora qualche consiglio che vi permetta di individuare più facilmente quali elementi evitare o scegliere con attenzione quando si sviluppa un progetto web.
Suggerimenti per migliorare le prestazioni di un sito
Analizzando e ottimizzando moltissimi siti, sono arrivato ad alcune best practice che voglio condividere con voi per aiutarvi a migliorare le prestazioni del vostro sito:
- non caricate troppi font differenti, Google suggerisce di usarne massimo due contemporaneamente
- quando inserite i video assicuratevi che venga caricata solo l’immagine di anteprima e che carichi il video solo nel momento in cui l’utente decide realmente di vederlo
- quando utilizzate icone personalizzate caricatele solamente dopo che la pagina è stata caricata
- se avete necessità di usare icone nella prima parte utilizzatele in formato svg
- se avete necessità di usare uno slideshow, scegliete librerie JavaScript che gestiscano correttamente il carico delle immagini nascoste
- valutate se lo slideshow è funzionale: registrate per un breve periodo le sessioni dei vostri utenti per capire come interagiscono con questo tipo di immagini
Una volta completati tutti questi passaggi potete fare un audit del sito su SEMrush e verificare lo stato di salute del vostro sito web. Così sarete sicuri di avere un sito ben ottimizzato!
Conclusioni
Perché ottimizzo l'above the fold di un sito web? Innanzitutto perché sono appassionato di Web Performance e ho trovato molti benefici applicando queste ottimizzazione ai nuovi siti che realizzo o a quelli a cui applico un restyling.
Pensate che l'ottimizzazione debba avvenire quando il sito è già online? Io preferisco usare un altro approccio: fissare un budget di performance prima di sviluppare un progetto web e gestire in modo ottimale le risorse che ho a disposizione.
Qual è la vostra esperienza sull'ottimizzazione della sezione above the fold di un sito?
Fatemi sapere se avete già lavorato sul miglioramento di questa parte dei siti web e se avete notato dei cambiamenti significativi, a livello di conversioni ma anche di tempo trascorso sulla pagina dall'utente e di frequenza di rimbalzo.
I commenti sono a vostra disposizione per chiarire qualunque tipo di dubbi sulla above the fold optimization, una tecnica che influisce in modo molto positivo sulla SEO di qualsiasi sito web.