I contenuti above the fold sono i primi elementi della pagina web che vengono visualizzati. Cioè sono above the fold quei contenuti che riescono a riempire lo schermo del device dell’utente. Senza che questo debba fare alcun movimento di scroll. In pratica senza che il visitatore faccia niente né con il mouse né con il dito da mobile.
La tendenza di Google negli ultimi anni è quella da un lato di prediligere i siti dal caricamento veloce. Dall’altro penalizzare i siti troppo lenti. Così se i primi entrano a far parte dell’Olimpo delle pagine Web. I siti più lenti scendono giù giù nelle SERP in modo inesorabile.
Stando così le cose è diventato naturale per gli addetti ai lavori preoccuparsi della velocità di visualizzazione delle pagine web.
Perciò ultimamente tra gli sviluppatori web è sempre più probabile sentire parlare di contenuti above the fold. Della loro importanza in riferimento alle performance di pagine e siti Web.
Contenuti above the fold: cosa sono?
Ultimamente si parla sempre più spesso dei contenuti above the fold. A causa della sempre più crescente importanza della velocità di visualizzazione delle pagine web e della diffusione capillare del mobile.
Però in effetti il concetto di contenuti above the fold nasce con la carta stampata e non con il Web Design. In particolare grazie al modo usato dai giornalai di vendere e accatastare i quotidiani cartacei. Infatti i giornali sono sempre stati piegati a metà. Tale piega (fold in inglese) di fatto divide i contenuti della prima pagina in due macro zone. Contenuti sopra la piega (Above the fold). Contenuti sotto la piega (Below the fold). Dividendo, la prima pagina almeno, in contenuti above the fold importanti e below the fold meno importanti.
In analogia con la carta stampata anche per quanto riguarda le pagine Web si parla fold. Intendendo il bordo inferiore dello schermo del device del visitatore, senza che ci sia lo scroll della pagina. Così i contenuti immediatamente visibili dall’utente nello schermo si definiscono contenuti above the fold. Mentre gli altri, cioè quelli visibili dall’utente dopo un suo scroll, below the fold.
Contenuti above the fold: che tipo di problemi?
Per la loro stessa natura i contenuti above the fold influenzano sensibilmente i tempi di caricamento della pagina. Causando non pochi problemi in termini di perdita di velocità di visualizzazione.
In linea generale le tipologie di problemi che possono incorrere con i contenuti above the fold sono sostanzialmente due. Contenuti above the fold che caricano lentamente perché “pesanti”. Contenuti above the fold che caricano in ritardo perché bloccati da altre risorse (below the fold).
Uno dei modi di sapere che problemi hanno le nostre pagine web e i relativi contenuti above the fold è semplicissimo, grazie a Google PageSpeed Insights. Strumento gratuito della famiglia PageSpeed Tools di Google.
Contenuti above the fold: come individuare i problemi?
Generalmente le soluzioni dei problemi con i contenuti above the fold vengono suggerite dal tool di Google PageSpeed Insights. Ma per risolvere tali inefficienze basta prestare un po’ di attenzione al codice delle nostre pagine e alla logica di caricamento.
Come sappiamo una pagina web (un documento html ad esempio) è costituita da un head e da un body. I contenuti above the fold sono nelle prime righe di codice del body, cioè nell’header della pagina web. Questi devono essere caricati e visualizzati prima. Pertanto il markup deve essere inserito quanto più vicino possibile all’apertura della tag body. In più nell’header devono essere caricate le risorse relative. Come ad esempio i Css che danno lo stile ai contenuti above the fold nel markup. A volte è possibile che ci siano degli script o altro che rallentano il caricamento delle risorse dei contenuti above the fold. Anche se questi sono posizionati perfettamente dopo l’apertura del body.
Il rallentamento potrebbe essere dovuto ai file che vengono caricati nell’head della pagina web. Quali fonts, fogli di stile Css, scripts JavaScript e jQuery. Chi più ne ha ne metta. Risorse queste che potrebbero anche non essere direttamente collegate ai contenuti above the fold. O che comunque potrebbero essere caricate altrove. Ad esempio immediatamente prima della chiusura del body, nel footer.
Contenuti above the fold: soluzioni
L’operazione da fare per salvare i contenuti above the fold è quella di renderli leggeri. Pochi elementi nel markup dell’header della pagina web. Poche immagini contenute nei above the fold e tutte ottimizzate per il web. Salvate non più pesanti di 200k. Jpg o png. Se si è deciso di avere delle icone nell’header. Allora cerchiamo di raggrupparle insieme utilizzando la tecnica nota anche come Css Image Sprites.
Poi è necessario anche liberare il campo dell’Head dalle risorse poco utili. Tanto da far arrivare il browser velocemente ai dati importanti, cioè contenuti above the fold e relative info caricate nell’head.
Quindi la parola d’ordine è spazio. Liberiamo la soffitta e mettiamo tutto in cantina. La cantina è il footer della pagina web. Perciò basta prendere le risorse non utili per i contenuti above che fold e metterle prima della chiusura del body.
Gli script JavaScript, jQuery e tutti gli altri non necessari immediatamente (Facebook, Twitter, Google, LinkedIn, Analytics, etc). A questi è possibile includere anche i font e i Css.
Per quanto concerne i Cascading Style Sheets (fogli di stile a cascata) bisogna fare molta attenzione. Infatti è necessario individuare quali selettori Css definiscono il markup dei contenuti above the fold della pagina web. Tagliarli e incollarli in un nuovo file. Per avere alla fine due file: above-the-fold.css e style.css.
Il primo viene caricato nell’head del documento html. Il secondo inserito nel footer.
Da notare che è preferibile incollare all’inizio del file Css riferito ai contenuti above the fold anche il Reset (Reset Meyer Css). Infatti se lo inseriamo nell’altro file (style.css) incorriamo sicuramente in errori di formattazione. Proprio dei contenuti above the fold. Questo perché i Css, se pur divisi in più file, mantengono comunque la loro proprietà Cascading, cioè a cascata.
Contenuti above the fold: conclusioni
In fin dei conti quindi i contenuti above the fold non sembrano ricoprire poi un ruolo tanto fondamentale nell’anatomia del codice della pagina web. Nulla di più vero. È importante, comunque, rilevare questo tipo di contenuti. Poiché contemporaneamente riusciamo anche a definire esattamente tutto ciò che non è above the fold. Che alla fine è ciò che veramente ci interessa. I contenuti below the fold, infatti, potrebbe rallentare (di molto) la velocità di caricamento della pagina web. Oppure addirittura compromettere il buon funzionamento della stessa. Come abbiamo potuto vedere quando si parlava di strumenti per misurare il rendimento relativo di una pagina web.
Perciò alla fine meglio ritagliarci lo stesso un po’ di tempo per dare un’occhiata ai contenuti above the fold. Non ci facciamo prendere però dalle modifiche drastiche del codice. Procediamo per gradi. Spostiamo file e risorse di cui conosciamo esattamente il funzionamento all’interno della nostra pagina web. Modifichiamo solo i file che sappiamo modificare. E come regola aurea generale, salviamo una copia dei file prima di iniziare qualunque modifica.
Ogni volta che modifichiamo qualcosa verifichiamo sul browser. Se possibile su più browser. Poi procediamo con altre modifiche. In questo modo se commettiamo un errore è molto facile tornare indietro. Quando testiamo ciò che abbiamo fatto non dimentichiamo di svuotare la cache del browser.
Per concludere il super domandOne finale. Ma voi vi siete posti il problema dei contenuti above the fold? Come lo avete risolto? Ditemelo o qui sotto nei commenti, sulla pagina Facebook o sul canale Youtube.