JavaScript e CSS di blocco esterno nei contenuti above-the-fold: PageSpeed

Nota: Per informazioni generali circa il servizio di PageSpeed Insights e perché non dovresti preoccuparti troppo del suo punteggio, leggi il nostro articolo:
 Il mio punteggio su Google Page Speed non migliora

Uno dei problemi principali di Google Page Speed Insights è che a volte alcune delle sue raccomandazioni non sono possibili o sono molto difficile da implementare
Una delle più comuni è quella che dice:

"Eliminare i   JavaScript e CSS di blocco esterno nei contenuti above-the-fold "
WP Rocket prevede due opzioni per affrontare questa raccomandazione. Le troverai nella scheda " File Statici", sotto la voce CSS/JS che bloccano il rendering:

Abilitando queste opzioni potresti vedere un miglioramento nei punteggi di PageSpeed, GT Metrix o Pingdom. I risultati varieranno da sito a sito. Ricorda di testare sempre l'effetto di queste opzioni sulla velocità del tuo sito.


Caricare i file JS in modalità differita

Questa opzione si riferisce alla raccomandazione di PageSpeed:

“Eliminare i JavaScript di blocco esterno”

A livello di performance è preferibile che i file JavaScript vengano o caricati nel footer del sito o differiti, in modo che non blocchino lo scaricamento di altri elementi funzionali per il sito, causandone così il rallentamento.

Abilitando questa opzione, a tutti i tuoi file JS, inclusi quelli minificati da WP Rocket, verrà applicato l'attributo defer:

Se hai qualsiasi problema con il tuo sito dopo aver attivato questa opzione, potesti dover attivare anche la Modalità Sicura, che per ragioni di compatibilità esclude i jQuery dal processo di differimento:

 A seconda della struttura del tuo sito, potresti dover escludere anche alcuni file dal processo:
 Escludere i file JS dal caricamento differito

Nota che Google non tiene in considerazione il fatto che a volte non è possibile differire tutti i JavaScript – almeno non senza rompere il sito web. Qualsiasi file escluso dal processo di differimento porterà PageSpeed a lamentarsi; non c'è niente che tu possa fare al riguardo!

Opzioni obsolete: Se in precedenza stavi usando le opzioni File JS con caricamento differito e File JS da includere nel footer durante il processo di minificazione, che si trovavano nella scheda Opzioni Avanzate, allora le vedrai ancora quando aggiornerai WP Rocket alla versione WP Rocket 2.10.x. Tuttavia, queste opzioni verranno eliminate nelle future versioni, quindi ti raccomandiamo di usare la nuova opzione Caricare i file JS in modalità differita.

Caricare i file CSS in modalità asincrona

Le opzioni di WP Rocket per caricare i file CSS in modo asincrono si riferiscono alla raccomandazione PageSpeed:

Ottimizza la pubblicazione di file CSS

Attenzione! Questa è considerata un'opzione molto avanzata che potrebbe richiedere di mettere mano al codice per funzionare correttamente.

Caricare il CSS in modo asincrono significa che la tua pagina inizierà a caricare e a essere visibile anche senza tutto lo stile CSS. Ciò significa che potrebbe apparire con un layout un po' strano durante i primi istanti del caricamento:

Questo è quello che si chiama FOUC: Flash of un-styled content. Per evitarlo, devi usare il Percorso critico del CSS. Significa che il CSS per il contenuto in cima alla pagina deve essere inserito direttamente dentro ll documento HTML per evitare il fenomeno del FOUC mentre la pagina carica.

Generare il percorso critico del CSS

Per generare il CSS necessario puoi usare lo strumento Critical Path CSS Generator:

1
Disattiva momentaneamente WP Rocket prima di iniziare a usare questo strumento!
2
Aggiungi l'URL nello strumento e copia il CSS generato dentro il campo delle impostazioni WP Rocket " Percorso Critico CSS":
Nota: non hai bisogno della porzione di codice JavaScript che ti verrà fornita dallo strumento. Devi solo copiare il CSS nelle impostazioni di WP Rocket, e la parte del JS verrà elaborata automaticamente.

Attenzione! È possibile che debba modificare tutti gli URLs relativi nel codice (es. per le immagini di sfondo, i font etc.) e trasformarli manualmente in URL assoluti.

Per esempio, se il CSS generato contiene una referenza relativa a un font, come:

@font-face{font-family:droid_serifregular;src:url(../DroidSerif-webfont.eot);
	

Il percorso relativo (indicato da  ../ nell' URL) non verrà corretto al momento della rimozione dal suo contesto originale. Tuttavia sarà necessario sostituirlo con la versione assoluta del percorso, esempio:

@font-face{font-family:droid_serifregular;src:url(http://example.com/wp-content/themes/neutro/font/droid_serif_regular/DroidSerif-webfont.eot);
	

Se hai bisogno di escludere un file CSS specifico dal processo di caricamento asincrono, segui questa guida:
 Escludere i file CSS dal caricamento asincrono