Luigi Sabbetti

Il mondo del web a 360 gradi

Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold su Wordpress

Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold su WordPress


di // Pubblicato il: 17 aprile 2018

Oggi vedremo assieme come arginare uno dei problemi più comuni segnalati dal page speed insights: 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.

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.

Page Speed Insights

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.

Personalmente tra me e Page Speed Insights c’è un rapporto di amore ed odio. Le ragioni dell’amore sono dovute soprattutto al fatto che questo strumento ti permette, una volta testato il sito, di scaricare una versione delle risorse ottimizzate. Hai capito bene, Google ottimizzerà immagini, file js e css e ci permetterà di scaricarli. Potremo dunque sostituire i files etichettati come ottimizzabili ed ottenere così un immediato miglioramento delle performance.

Le ragioni dell’odio sono invece dovute a quelli che io ritengo alcuni problemi tecnici difficilmente superabili e che non credo Google dovrebbe segnalare come errori. Il primo è riguardante proprio i contenuti above the fold della pagina web. Ma che significa contenuti above the fold?

Te lo spiego io. Si tratta di elementi che bloccano la visualizzazione dei contenuti del tuo sito fin quando questi non vengono del tutto caricati. E’ ad esempio il caso di 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 nei 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 abbastanza 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

W3 Total Cache per eliminare i contenuti above the fold

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.

Eliminare i contenuti above the fold usando PHP

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 '<style>'.$TheCSS.' </style>';

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.

Se utilizzi altri metodi per velocizzare il tuo sito WordPress scrivili pure nei commenti.

Ti è piaciuto questo articolo? Votalo!
[voti: 3 - Media voto: 4]

About Author

Mi chiamo Luigi Sabbetti e da circa dieci anni svolgo la professione di Web Designer. Profondamente amante della scrittura, mi piace condividere le mie conoscenze informatiche attraverso il mio sito web. Amo correre, guardare il mare e il buon cibo. Scopri di più nella mia