Above the Fold wordpress plugin per bloccare CSS

E veniamo a parlarvi di google page speed gtmetrix o webpagetest e altri tool e del codice Javascirpt e Css bloccano la visualizzazione  above-the-fold dei contenuti
Di cosa trattino i tool sopra credo che lo sappiate perfettamente. Facciamo un brevissimo riepilogo che ci sarà utile nella trattazione di questo argomento.

Tool per testare la velocità del proprio sito.

• Google Page Speed Si tratta del tool ufficiale di google per testare la velocità del vostro sito e vi da alcuni suggerimenti sui problemi che avete senza però entrare nello specifico e visualizzare i numeri.
• gtmetrix diciamo che fa quello che non fa google page speed ossia correda tutto con dati e mostra suggerimenti concreti su come operare, inoltre nel caso fornisce anche lo script da immettere per migliorare o immagini già scalate. E’ quello che preferisco.
• Web Page Test   è anch’esso un ottimo strumento fornisce pochi elementi, ma i suoi dati sono considerati i piu’ accurati, in particolare per noi italiani è molto consigliato testare sul loro server che hanno in Olanda.

Diciamo subito una cosa avere 100/100 a page speed , oppure 100% su gtmetrix oppure tutte A su Web Page Test non è possibile , in quanto da qualche parte bisogna fare un sacrificio. Un rapido esempio.

Su Web Page Test ho sacrificato le immagini nel senso che sono caricate con un sistema di cache da Jetpack e quindi mi posso permettere di non caricarle non compresse, in quanto non affaticano il mio server. E altro ancora, per esempio mettiamo che volete fare il defer degli script e mettere un caricamento asincrono dei file js , vi accorgerete che alcuni plugins potrebbero non funzionare correttamente, quindi il vostro punteggio potrebbe certamente aumentare a discapito del funzionamento dei plugins.
Questo per dirvi che migliorare le prestazioni del vostro sito è tutta una serie di piccoli incastri e se aggiungete da una parte toglierete dall’alra. E chi vi dirà di avere tutto ok , tutto 100 e vi mostrerà le relative immagini…. magari è piu’ esperto di photoshop che di codice…

Come faccio ad affermare questo? Semplice con i tool da lui indicati andate a verificare il suo sito ….e vedrete che i risultati sono molto diversi da quelli millantati….

Ma andiamo oltre se siete qui sicuramente è per il contenuto above the fold. Iniziamo a comprendere meglio

Cosa significa Above the fold?

Spesso e volentieri proprio sul termine c’e’ molta confusione che poi porta a non comprendere bene il problema che abbiamo. Il termine Above the fold deriva letteralmente dalla carta stampata ed in particolare dai giornali. Considerate il classico giornale ripiegato in due parti. Above the Fold è la parte che si trova sopra la piega, ossia la prima parte che leggerete, per leggere la seconda parte dovrete spiegare il giornale.

Stesso concetto si applicherà al vostro sito web. Above The Fold è la parte che sarà visibile senza necessità da parte dell’utenza di fare uno scrolling verso il basso appena arrivata nel vostro sito. Per questo motivo molti webmaster furbi tendevano a riempire questa pagina con ogni genere di pubblicità ed è per questo motivo che google tende a penalizzare questa pratica con i nuovi algoritmi Panda e Penguin 1 e 2.
Adesso che abbiamo compreso il problema vediamo come risolverlo, se siete qui sicuramente google page speed o un altro tool vi avrà comunicato la fatidica frase

“Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold
La tua pagina presenta 1 risorse script e 2 risorse CSS di blocco. Ciò causa un ritardo nella visualizzazione della pagina.”

Questo vuol dire che il rendering della vostra pagina html , ossia la capacità del browser di visualizzare la vostra pagina above the fold, non puo’ avvenire prima che siano stati caricate script o risorse che per questo vengono definiti di blocco. Come avrete intuito si tratta piu’ che altro di immagini of file js.
Vediamo come risolvere il problema in Worpdress

Above The Fold e i plugins di WordPress

Ci sono molti plugins per risolvere questo problema io ve ne indico essenzialmente due

• Async JS and CSS Molto completo vi permette di risolvere in problema con varie alternative , ossia incorporando tutti i file css e js nell’head, collegando css nella head e i js nel footer, oppure caricamenti asincroni. Tutte ottime soluzioni , unico punto debole di questo plugin che talune volte ha incompatibilità con altri plugin, risultato il vostro punteggio nei vari tool migliora ma il sito non funziona come dovrebbe.
• Autoptimize. Questo plugins ha un funzionamento molto simile al precedente, concatenza, carica asincrono anche se non lo dice esplicitamente, minimizza etc. etc. ha però al momento una particolarità unica nel suo genere. Ossia permette di individuare quei css che bloccano il rendering above the fold e caricarli dopo. Come? La novità è il suo punto di forza di questo plugin ossia le individuate voi. Spuntate la casella  A questo punto inserite il vostro sito in questo url https://jonassebastianohlsson.com/criticalpathcssgenerator/, mettete anche il vostro foglio di stile del tema che state utilizzando e avrete come risultato i css che bloccano il rendering lo immettete nella casella come sopra e salvate svuotando la cache. Riprovate con google page speed e vedrete che almeno per quanto riguarda i css il problema sarà sparito.

E per il tema Above the Fold è veramente tutto spero di essere stato chiaro, altrimenti potete sempre chiedere qui sotto o sul forum