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

SOLUZIONE-CONTENUTI-ABOVE-THE-FOLD-SITO-WORDPRESS

Quando si fa il test della velocità di caricamento delle pagine di un sito, uno degli scogli più difficili da superare per ottenere delle prestazioni ottimali è rappresentato dai contenuti above the fold. Cosa sono i contenuti above the fold?  Letteralmente si traduce in “sopra la piega”. Praticamente sono i contenuti “visibili” che, secondo le esigenze del Google Page Speed Insight, dovrebbero essere visualizzati per primi senza bisogno che l’utente scrolli con il mouse. Purtroppo con la stragrande maggioranza dei temi WordPress questo non è possibile. Ma se si vuole raggiungere l’agognato punteggio di 85 nel test della velocità di caricamento del sito, quando ogni altro tentativo fallisce, si può tentare di aggirare il problema.

Come risolvere il problema dei contenuti above the fold

Nell’articolo come velocizzare WordPress, abbiamo utilizzato il plugin Async JS and CSS per risolvere il problema della visualizzazione dei contenuti above the fold. Quindi, la prima cosa che vi invito a fare è tentare seguendo i consigli di quell’articolo.

In alcuni temi però quel plugin comporta che il layout del sito venga visualizzato in maniera non corretta. Ad esempio può non essere visualizzata la slide iniziale, può sparire ogni formattazione css restituendo una pagina bianca con scritte ed immagini poste in sequenza con sfondo bianco, possono essere visualizzati i font di default, eccetera.

Il caso che voglio condividere è quello di un tema sul quale, utilizzando un plugin che faceva caricare i file JS e CSS in maniera asincrona (proprio Async JS and CSS), non veniva visualizzata la slide iniziale. Qualunque sia il problema che sorga sul vostro tema rendendo asincroni questi due tipi di files, potete utilizzare questo metodo per risolverlo.

Questi gli strumenti che utilizzeremo:

  1. Il tool GTMetrix
  2. Il tool Google Page Speed Insight
  3. Il plugin WordPress Fast Velocity Minify

Iniziamo.

Analisi iniziale con il Google Page Speed Insight

Collegatevi al Google Page Speed Insight e procedete al test della velocità del vostro sito, annotando poi i risultati ottenuti.

Nel caso di cui parlo, il test restituiva il valore 40 per i dispositivi mobili e 48 per i dispositivi desktop.PageSpeed Insights-mobile

PageSpeed Insights desktop

Elementi critici evidenziati

Il test evidenziava come critici i seguenti punti:

  • Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold
  • Ottimizza immagini
  • Sfrutta il caching del browser
  • Riduci tempo di risposta del server
  • Dai la priorità ai contenuti visibili
  • Minimizza JavaScript
  • Minimizza CSS

L’ottimizzazione delle immagini è stata eseguita ridimensionandone il peso con l’aiuto di photoshop. Se non siete pratici ad utilizzarlo potete servirvi di un plugin come Wp Smush o EWWW Image Optimizer, oppure utilizzando il tool online TinyPNG.

Il caching del browser è stato abilitato attraverso l’implementazione sull’htaccess delle relative istruzioni che potete trovare su questo articolo. Se ne avete bisogno troverete anche le istruzioni da inserire per abilitare la compressione GZip.

Il tempo di risposta del server è stato risolto migrando il sito dall’hosting che ospitava il sito a Siteground (se volete farlo ecco una guida su come trasferire WordPress da un hosting ad un altro), noto universalmente per essere uno degli hosting più performanti per WordPress. Il sito infatti, rispondeva in 1,5 secondi. Dopo la migrazione questo valore è stato portato a 0,61.

Dai la priorità ai contenuti visibili sarebbe potuto essere risolto solo attraverso il cambio del tema WordPress (l’attuale causa un numero eccessivo di round trip di rete prima di visualizzare i contenuti above the fold) , ma siccome questo non era poi così malaccio, non ho ritenuto cambiarlo correndo il rischio di trovarne uno dalle prestazioni peggiori.

Le altre voci evidenziate dal test sono state risolte grazie all’aiuto del plugin Worpdress Fast Velocity Minify con un piccolo accorgimento ed un altrettanto piccolo “barbatrucco”.

Configurazione Plugin WordPress Fast Velocity Minify

Terminata l’analisi e sistemati i punti sopra descritti, ho proceduto ad installare il plugin Fast Velocity Minify per WordPress. Una volta attivato mi sono portato sulle impostazioni e l’ho settato come potete vedere nell’immagine successiva, ovvero ho messo la spunta solo su “Inline all enqueued CSS” e su “Enable defer of JS files for Pagespeed Insights” .

Fast-Velocity-Minify-Setting

In buona sostanza, così configurato, il plugin minimizza il codice Html, Css e Js e rinvia il caricamento dei Javascript a dopo che il tema ha caricato il resto.

Risultati

Dopo aver applicato le impostazioni a questo plugin, il page speed insight di Google ha raggiunto i valori di 86 per i dispostivi mobile e 95 per i dispostivi desktop ma ha causato anche un altro problema: la slide ad inizio pagina era sparita . Al suo posto rimaneva un malinconico sfondo con il colore di background.

Capirete che il risultato non era presentabile e così è iniziata la ricerca del problema.

Soluzione al problema “Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold”

Mettendo la spunta sulla voce Enable defer of JS files fo pagespeed insight, ho fatto in modo che quando veniva eseguito il test Google Pagespeed Insight, i files JS della slide venissero caricati alla fine. Il problema che si manifestava invece evidenziava che questi files non venissero nemmeno eseguiti!

Allora ho tolto la spunta e la slide è riapparsa.

A questo punto dovevo fare solo una cosa: capire quali fossero i file JS che si occupassero di far funzionare la slide ed escluderli dal processo di defer.

Per fare questo mi sono servito del tool GT Metrix.

 

Analisi Velocità con GT Metrix

Analizzando il sito con GTMetrix si ha una visione più ampia dei problemi che affliggono un sito. Sottomettendo la url a GT Metrix, mi sono andato a cercare i files JavaScript responsabili del funzionamento della slide. Si, lo so che avrei potuto farlo anche con il Google PageSpeed Insight ma la leggibilità dei risultati con GTMetrix è migliore.

Dunque ho individuato e copiato tutti i percorsi dei files in cui era compresa la cartella del plugin della slide (in realtà la slide era integrata con il tema ma poi, andando a vedere bene, si trattava del plugin “Layer Slider WP”).

Ultimi ritocchi con Fast Velocity Minify

A questo punto sono tornato nella pagina di configurazione del plugin Fast Velocity Minify, ho rimesso la spunta su “Enable defer of JS files fo pagespeed insight” e, nell’area di testo successiva, adibita all’inserimento di files da escludere dal processo di defer, ho inserito i path che mi ero copiato su GT Metrix.

Con i path inseriti, la slide è tornata al suo posto. A questo punto ho affinato la ricerca togliendone uno per volta e verificando il risultato. Alla fine è bastato aggiungere l’esclusione di un solo file JS per visualizzare il sito correttamente.

 

escludere-JS-che-causano-problema-contenuti-above-the-fold

 

Preconnect Optimization – Preconnect Headers

Questa sezione è apparsa dopo l’ultimo aggiornamento del plugin Fast velocity Minify. Permette il pre-collegamento con i siti da dove vengono caricati i fonts o altre risorse esterne, per velocizzare anche questa operazione. L’utilizzo è molto intuitivo: servirà scriverci i domini utilizzati per caricare le risorse.

 

preconnect headers

preconnect headers

 

Home Page Optimization – Preload Images

Anche questa casella è apparsa dopo l’ultimo aggiornamento del plugin. Permette di precaricare le immagini anticipatamente. Una mano santa per il problema dei contenuti above the fold. Infatti qui potete scriverci le url delle immagini superiori (es. la prima della slide o immagine fissa nell’header).

 

preload images

Preload Images

 

CDN Options

Inserendo il percorso del nome di dominio della vostra CDN, saranno sovrascritti i files css e js generati da Fast velocity Minify con quelli della vostra cache CDN.

Risultati

Quando sono andato a ripetere il test con Google Page Speed Insight, l’anteprima non presentava la slide. Poco male visto che sui vari browser la stessa era perfettamente funzionante. Sotto i risultati del test finale. 80 per la versione mobile e 93 per la versione desktop.

test-velocita-mobile

test-velocita-desktop

 

Sono d’accordo con voi nel constatare che i risultati per la versione desktop sono buonissimi e quelli per la versione mobile meno. Ma in questa disamina va considerato che il tema WordPress utilizzato era un pochino datato e, come detto in precedenza, causa un gran numero di round trip di rete prima di visualizzare i contenuti above the fold. Se poi la risposta del server fosse un tantino più bassa, allora sono convinto che la versione mobile raggiungerebbe quota 85.

In questo caso il risultato è più che soddisfacente. Per completezza, adesso il test di GT Metrix riporta una valutazione di 100/100.

Il metodo è applicabile per bypassare anche altri tipi di problemi di caricamento asincrono dei files JS, che comportano il malfunzionamento di una o più sezioni del sito.

Cancellare la cache quando si aggiornano i plugin

Gli sviluppatori di Fast velocity Minify consigliano di cancellare la cache (dal pannello del plugin), dopo aver aggiornato i plugin per rigenerare la minificazione e/o l’accorpamento (merging) dei files.

Summary
Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold
Article Name
Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold
Description
Caso studio. Velocizzare un sito WordPress eliminando JavaScript e CSS che bloccano la visualizzazione nei contenuti above the fold. Ecco come ho risolto.
Author
Publisher Name
flavioweb.net
Publisher Logo

AD

About the author

Flavio

Mi trovo nel campo del web dal 2006. Nel tempo mi sono specializzato soprattutto nell'indicizzazione,  nel posizionamento di siti internet e nell'utilizzo dei social media principali a fini di marketing.

Readers Comments (20)

  1. Ciao, complimenti, bell’articolo! Volevo sapere se conosci un tool come Fast Velocity Minify anche per Blogger. Purtroppo non sono esperta di html, sto imparando ora, e il mio blog accusa brutti problemi di velocità.
    Grazie

    • Ciao Barbara. Ti ringrazio molto per aver apprezzato l’articolo.
      Purtroppo no, non credo che esista qualcosa del genere per la piattaforma blogger. Mi dispiace tanto.
      Un abbraccio.

  2. Ciao, l’articolo è molto utile ma purtroppo utilizzando questo plugin noto una perdita di punteggio nella valutazione. Non vedo miglioramenti attualmente.

    • Ciao Laura.
      Superare il problema degli above the fold di solito migliora le prestazioni in termini di velocità di caricamento delle pagine.
      Però non é l’unico problema da risolvere quando il sito carica lentamente. Le immagini troppo pesanti o un tema che deve scalarle prima di visualizzarle potrebbero vanificare ogni operazione. Idem se il server risponde in piú di 1 secondo. Poi bisognerebbe verificare quanti Js vengono richiamati dal tema o dai plugin, che non possono essere caricati in maniera asincrona pena il loro malfunzionamento. Insomma i motivi possono essere tanti. Il mio personale consiglio, dopo aver verificato questi elementi, é quello di riprovarci e sperimentare le varie opzioni che ti permette di utilizzare fast velocity minify.
      Fammi sapere.

  3. Ciao, una cosa che non capisco è che ho effettuato il test alcune volte di seguito e i valori sono cambiati e anche di molto senza che ancora avessi effettuato le modifiche suggerite… mi chiedo quanto alla fine possa essere attendibile uno strumento del genere anche se senz’altro aiuta ad ottimizzare la struttura del sito

    • Ciao Carlo. Beh, se il sito é già ottimizzato il guadagno probabilmente sarà minore. A volte però i valori che cambiano da un test all’altro in pochi minuti, possono essere causati dalla risposta del server. Se la risposta varia ad ogni test, il risultato varierà di conseguenza.

  4. complimenti bella guida molto esauriente ho provato il plugin e devo dire che mi ha soddisfatto …

  5. Ciao grazie dell’articolo che è molto chiaro. Io ho sempre un problema con questi file. Utilizzo w3 total cache e fast velocity minify contemporaneamente. Il problema è che se sono entrambi attivi il sito è godibile e le immagini si caricano tutte ma Pagespeed mi da valori 68 – 75, se disabilito fast velocity, pagespeed sale a 82 – 89 però non mi si caricano le immagini slide e altre 3 foto. Morirò pazzo 🙁

    • Ciao Salvatore, ti prego non morire! 🙂 C’è tempo per quello…
      Non è facile dare indicazioni quando ci sono di mezzo questa tipologia di plugin perché ogni server, ogni tema ed ogni plugin possono reagire diversamente alle impostazioni.
      Provo dicendo che dovresti trovare il modo di eliminare uno dei due plugin perché,anche se compatibili, per diverse cose si sovrappongono. La soluzione al tuo problema specifico dovrebbe essere trovare i flie Js responsabili della visualizzazione della slide e delle immagini (nell’articolo spiego come fare) ed escluderle dal deferimento o dalla minificazione (su w3TC mi sembra si possa fare). L’alternativa che ti propongo è di attivare la cache tramite file htaccess, disinstallare W3TC ed utilizzare Fast velocity Minify per la minificazione dei files e tutto il resto.

  6. Ciao Flavio complimenti per l’articolo. Ho risolto gran parte dei problemi grazie ai tuoi consigli. Tuttavia risulta ancora una risorsa css di blocco che è la seguente “http://www.quotidianpost.it/wp-content/uploads/fvm/cache/header-b2272cec-1504954884.min.css”
    Non è la cache del plugin?

  7. Sono mesi che non trovavo la soluzione per migliorare la velocità del mio sito web. Leggendo questo articolo ho scoperto il plugin Fast Velocity Minify che non conoscevo e seguendo questa guida effettivamente ho risolto tutti i problemi di velocità. Finalmente una guida che risolve veramente i problemi e non il solito articolo dove dicono le solite cose e non risolvono nulla. Grazie veramente!

  8. Ciao, mi sapresti dire come individuare esattamente i file .js da escludere?

    • Ciao Filippo. È spiegato nell’articolo. Guarda il report dei file js creato da gtmetrix ed escludili tutti. Poi togline uno alla volta sin quando il sito si visualizza correttamente. A quel punto lascia nelle esclusioni il solo (o i soli) file responsabile della visualizzazione della parte del sito che non funzionava.

  9. Buongiorno Flavio.
    Innanzi tutto ti faccio i complimenti per l’articolo: è da mesi che sto cercando di ovviare all’errore dei contenuti above-the-fold. Il tuo articolo ha dipanato un po’ di nebbia. 🙂 Ma non tutta e per questo ti disturbo.

    Utilizzando fast velocity minify e impostandolo come segue ecco cosa succede:
    – mettendo la spunta su Inline all header CSS files > pagina bianca, tutto il sito bloccato
    – mettendo la spunta su Inline all footer CSS files > sito ok, nessun miglioramento in pagespeed/gtmetrix
    – mettendo la spunta su Enable defer of JS for Pagespeed Insights > sito senza slides (plugin slider revolution), decisivo miglioramento in pagespeed/gtmetrix (e vorrei vedere! 🙂

    Domanda: come faccio a capire quale js di slider revolution devo escludere? Sono quelli che gtmetrix mette alla voce Defer parsing of JavaScript?
    Se sono quelli io a quella voce ho questi js:
    https://www.gstatic.com/recaptcha/api2/r20170925162623/recaptcha__it.js (169.5KiB)
    https://www.gstatic.com/recaptcha/api2/r20170925162623/recaptcha__it.js (169.5KiB)
    https://www.tokos.it/ (12.7KiB of inline JavaScript)

    Grazie mille!

    • Ciao Tokos. Grazie per l’apprezzamento al lavoro svolto.
      La soluzione ottimale è la terza: Enable defer of JS for Pagespeed Insights. I file che indichi sono esterni e relativi al reCaptcha di google e per questo non sono i responsabili della visualizzazione della slide.
      Piuttosto sono quelli riferiti a slider revolution e quindi:
      https://www.tuosito.it/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.slideanims.min.js e simili (prova a vedere se li trovi nella sezione Yslow di gtmetrix).
      Un caro saluto

      • Grazie per la risposta.
        In yslow ho trovato:
        https://www.sito.it/wordpress/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.slideanims.min.js
        https://www.sito.it/wordpress/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.layeranimation.min.js
        https://www.sito.it/wordpress/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.actions.min.js
        https://www.sito.it/wordpress/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.navigation.min.js
        https://www.sito.it/wordpress/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.parallax.min.js

        Ma non capisco che sintassi devo usare nella casella ignore list…

        https://www.sito.it/wordpress/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.slideanims.min.js

        oppure

        //sito.it/wordpress/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.slideanims.min.js

        oppure

        /wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.slideanims.min.js

        Tu quale hai usato?

        Grazie!
        Saluti.

Leave a comment

Your email address will not be published.


*


*