Luigi Sabbetti

Contenuti Above The Fold: come risolvere


di // Pubblicato il: // Ultimo aggiornamento:

Oggi vedremo assieme come arginare uno dei problemi più comuni segnalati dal Page Speed Insights e da Lighthouse: ovvero Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold

Se sei giunto in questa pagina è perché, molto probabilmente, hai eseguito un test sul famoso strumento di Google denominato Page Speed Insights e che ti permette di conoscere le metriche del tuo sito web.

Se invece non conosci ancora questo strumento e ti sei imbattuto in questa pagina per puro caso, allora è bene che ti introduca brevemente questo formidabile tool online che ti permetterà di testare le performance del tuo sito web e di migliorarle.

Se sei interessato a migliorare le performance del tuo sito, ti consiglio di dare un occhio alla mia guida su come velocizzare un sito WordPress.

Indice dei contenuti

Page Speed Insights e Lighthouse: una panoramica

Page Speed Insights è un tool messo a disposizione gratuitamente da Google per misurare la velocità del nostro sito web.

Il tool ci permette di testare il sito web in versione desktop e mobile. Non è detto, infatti, che un sito  ottimizzato per mobile, ad esempio, riesca a mantenere le stesse performance anche da desktop e viceversa. Al giorno d’oggi, la stragrande maggioranza delle visite che riceverai sul tuo sito provengono da dispositivi mobili. Ecco perché dovresti sempre puntare verso un approccio mobile first

Per testare il sito ti basterà inserire l’url dello stesso all’interno del tool. Lo strumento inizierà immediatamente la scansione del tuo sito e, in pochissimo tempo, sarà in grado di restituire un punteggio calcolato in base alla velocità riscontrata. Assieme al punteggio, troverai anche dei preziosi consigli per ottimizzarlo al meglio. Fanne buon uso.

Lo stesso strumento, sotto il nome di Lighthouse, si trova all’interno di Chrome. Ti basta aprire la console degli sviluppatori, recarti nel tab Lighthouse e far partire un test desktop o mobile del sito in questione. Con Lighthouse non avrai bisogno di inserire l’url, il tool testerà automaticamente la pagina che stai guardando.

Per aprire la console degli sviluppatori di Chrome, se non lo sapessi, ti basta premere il tasto F12 sulla tua tastiera, oppure cliccare con il tasto destro in un punto qualsiasi della pagina web e successivamente cliccare su Ispeziona elemento.

Cosa sono i contenuti Above the Fold

Probabilmente ti starai chiedendo cosa sono i contenuti Above the Fold. Potresti non conoscerne il significato e quindi non capire bene in che modo operare per arginare questa problematica nel tuo sito.

Con Contenuti Above the Fold andiamo ad identificare quelli elementi che bloccano la visualizzazione dei contenuti del tuo sito fin quando questi non vengono del tutto caricati.

Capita frequentemente quando, ad esempio, si utilizzano framework CSS come Foundation o Bootstrap. Purtroppo arginare questo tipo di errore, come tu stesso vedrai, non è affatto semplice. Esistono tuttavia alcuni trucchetti che ti spiegherò più avanti nel capitolo dedicato alle soluzioni.

La seconda pecca legata all’utilizzo di page speed insights sta nel fatto che il tool segnala costantemente come errore il mancato utilizzo della caching del browser. In realtà, si riferisce anche a risorse esterne al sito e sul quale non possiamo intervenire direttamente.

Se, ad esempio, abbiamo utilizzato il codice di incorporamento di Analytics o abbiamo caricato un Google Fonts all’interno del sito, andremo incontro a questo errore e, purtroppo, non esistono soluzioni per arginarlo. Se non piccoli escamotage che reputo controproducenti e che quindi non ti citerò.

Eliminare i contenuti above the fold su WordPress

Esistono diversi plugin che promettono di far fronte a questo problema. In realtà la questione è più complessa di quanto sembri. Non è facile, infatti, neppure per un plugin definire quali sono esattamente i contenuti che bloccano la visualizzazione dei contenuti above the fold poiché dipende molto dal sito in questione e da come è stato sviluppato.

Ad ogni modo, esiste un plugin che svolge questo lavoro in modo egregio: sto parlando di Fast Velocity Minify. Attivalo, vai nella schermata delle impostazioni e poni la spunta su queste voci:

  • Inline all enqueued CSS
  • Enable defer of JS files for Pagespeed Insights

Se come me non sei un amante dei plugin, allora ti consiglio di utilizzare W3 Total Cache per cercare di arginare i contenuti above the fold del tuo sito.

La gestione della Cache è un altro aspetto importante all’interno di un sito WordPress. La cache non è altro che una memoria, che immagazzina al suo interno informazioni, per evitare così di recuperare nuovamente le stesse ad ogni accesso effettuato su un sito web.

Ben si capisce, dunque, quanto essa possa incidere sulle prestazioni in termini di velocità di caricamento. D’altro canto, invece, renderà difficile da vita per lo sviluppatore che sarà costretto a svuotarla ogni volta per poter vedere una modifica online. E’ il prezzo da pagare per ottenere delle performance degne di nota..

Anche in questo caso, esistono diversi plugin che si occupano di ottimizzare la cache di WordPress per noi, io solitamente utilizzo W3 Total Cache Questo plugin è altamente professionale, non consente soltanto di gestire la cache, bensì molti altri aspetti della vita di un sito.

Per capire a pieno i motivi della sua fama, ecco solo alcune delle funzioni che offre, già dalla versione free:

  • E’ compatibile con gli hosting condivisi e dedicati
  • Offre la possibilità di prendere le risorse da CDN (Content Delivery Network) sparse in tutto il mondo
  • Ampio supporto mobile
  • Include supporto verso le pagine AMP (Accelerated Mobile Pages)
  • Supporto SSL
  • Caching di pagine e post
  • Compressione di files CSS e Javascript

Se quindi hai già installato questo plugin per il caching, sfruttalo anche per i contenuti above the fold.

W3 Total Cache, infatti, ti permette di caricare i contenuti in modo asincrono ottimizzando così le performance del tuo sito senza dover ricorrere ad ulteriori plugin.

L’ultimo metodo che ti consiglio è più indicato per gli sviluppatori. Un trucchetto che io utilizzo di solito è quello di stampare direttamente il contenuto dei files css all’interno dell’head del mio sito. In questo modo diminuiscono le richieste verso files esterni e si risolve il problema dei css above the fold.

Se utilizzo il css di bootstrap in cdn, ad esempio, per stamparlo nel head del mio sito uso questo semplice script

 $TheCSS=file_get_contents('https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css');
echo '

';

Così facendo mi ricavo solo il contenuto del file che mi interessa per poi stamparlo con un echo direttamente nello style della pagina. Un metodo forse poco elegante, ma che i maniaci delle performance troveranno di sicuro gradimento.

Conclusioni

Come abbiamo avuto modo di vedere, eliminare il problema dei contenuti Above the Fold in WordPress può risultare abbastanza complesso ed ogni caso andrebbe analizzato nello specifico.

Puoi provare ad utilizzare uno dei Plugin che ti ho consigliato, oppure rivolgerti ad un professionista del settore che, sono sicuro, sarà disposto ad aiutarti nella risoluzione del problema.

La segnalazione di Lighthouse e di Page Speed Insights di questa problematica, ti porterà a perdere diversi punti percentile, ecco perché ti consiglio di ottimizzare il tuo sito per ottimizzarlo sia per gli utenti che per i motori di ricerca.


Vuoi restare aggiornato sul mondo del web? Iscriviti alla newsletter!