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!

File a cui non viene applicato il differimento

Il differimento non verrà applicato in caso il file stia usando uno o entrambi gli attributi seguenti:

  • async 
  • data-cfasync="false"

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.

Ottimizzare la pubblicazione del CSS

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

Ottimizza la pubblicazione di file CSS

Il nostro strumento per la generazione del percorso critico del CSS non funziona ancora per il CSS dei dispositivi mobili. Se hai un tema responsive, il CSS critico dovrebbe essere più o meno lo stesso, ma se usi un tema diverso per i dispositivi mobili, non possiamo ancora generare il CSS specifico per lui.

Generare il percorso critico del CSS

WP Rocket ti rende molto più semplice la gestione di ottimizzazioni avanzate come il caricamento asincrono del CSS e la generazione del percorso critico del CSS.

Quando attivi l'opzione Ottimizza la pubblicazione del CSS, il CSS verrà caricato sul tuo sito in modo asincrono. In più, il percorso critico del CSS verrà generato in background e aggiunto al momento del prossimo caricamento della pagina.

Il nostro strumento esterno per la generazione del CSS critico, identificherà il primo accesso a ogni tipo di contenuto pubblico (articoli, pagine, prodotti, etc.), così come le pagine di archivio delle tassonomie (categorie, tag, categorie prodotto, etc.). Il percorso critico del CSS verrà estratto separatamente per ognuna di queste tipologie di pagina, e il nostro strumento invierà il codice a WP Rocket, che così lo aggiungerà alle pagine corrispettive nel momento in cui verranno richieste dai suoi visitatori, o che lo invierà al precaricamento della cache.

In questo modo, il percorso critico del CSS generato da WP Rocket si adatta alle caratteristiche di front-end disponibili nei differenti tipi di pagina del tuo sito web.

Per esempio, se c'è uno slider nella tua pagina principale, il percorso critico del CSS per quella pagina rifletterà quella caratteristica, mentre il percorso critico per un articolo del tuo blog potrebbe contenere un codice molto diverso.

Quando rigenerare il percorso critico del CSS

Quando applichi delle modifiche al tuo foglio di stile, e/o modifichi il codice CSS personalizzato attraverso il Personalizza di WordPress (o tramite un plugin), dovresti rigenerare il percorso critico del CSS usando il menu di WP Rocket nella barra strumenti:

Lo strumento per generare il percorso critico del CSS

Qualche linea per spiegare come funziona il nostro strumento di generazione del percorso critico:

  1. Il tuo sito deve essere accessibile al pubblico, altrimenti lo strumento non funzionerà. Questo significa che non funzionerà nei siti in locale.
  2. I percorsi relativi per immagini e font verranno automaticamente convertiti in URL assoluti.
  3. Il percorso critico del CSS verrà tagliato e minificato con cura. Questo significa che ogni spazio necessario al buon funzionamento del file (come lo spazio dentro le operazioni calc() ) o le barre inverse (come '\f311' per un glifo nelle icon font) verranno preservati.

Percorso critico del CSS alternativo

Quando il nostro strumento non è in grado di generale il percorso critico del CSS, puoi usare il campo alternativo per specificare il tuo percorso. Questa opzione si applica nei casi in cui il CSS critico non esiste ancora. Per generare il CSS necessario, puoi usare Critical Path CSS Generator :

1
Disattiva WP Rocket prima di iniziare a usare questa funzione!
2
Aggiungi il tuo URL in Critical Path CSS Generator e copia il codice CSS appena generato dentro il campo di WP Rocket Fallback critical path CSS :

Nota: non avrai bisogno del codice JavaScript generata da Critical Path CSS Generator. Copia nelle impostazioni WP Rocket esclusivamente il CSS, la parte JS verrà gestita 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);

Escludere uno o più file dal caricamento asincrono

Se hai bisogno di escludere uno o più file CSS specifici dal processo di caricamento asincrono, segui questa guida:
 Escludere i file CSS dal caricamento asincrono