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

In questo articolo

Cosa sono i JavaScript e CSS di blocco esterno?

Prima che il browser possa visualizzare una pagina web, deve elaborarne il codice HTML. Durante questo processo, ogni volta che il browser incontra un elemento che fa riferimento a uno script o a un foglio di stile, deve fermarsi, richiedere il file, attendere che venga scaricato dal server ed eseguirlo prima di poter finalmente continuare a processare l'HTML. Con la gran parte dei temi e plugin WordPress che caricano non uno, ma multipli file CSS e/o JavaScript, questo processo può rallentare il tempo di caricamento della pagina in modo significativo.

Per questo motivo è raccomandato il differimento del caricamento dei file non critici fino a che il browser non abbia terminato il processo di rappresentazione della pagina. Questo richiede degli aggiustamenti alla fonte HTML della stessa pagina, così come un gran conoscimento di quali file sono richiesti e in quale momento, per la corretta resa della pagina. Ti suona complicato? Effetticamente lo è!

Eppure, strumenti come Google PageSpeed Insights lo fanno sembrare qualcosa di semplice quando dichiara:

”Eliminare iJavaScript e CSS di blocco esterno nei contenuti above-the-fold”

Così come molte delle raccomandazioni di PageSpeed Insights, questa è molto generica e può essere difficile da implementare—anche con un plugin snello come WP Rocket!

WP Rocket inlcude 2 opzioni per indirizzare questa raccomandazione PageSpeed:

  • Ottimizzare la pubblicazione del CSS
  • Carica il JavaScript in modalità differita

Puoi trovarle nella scheda Ottimizzazione file, sotto File CSS e File JavaScript:

Attivando queste opzioni, potresti vedere un miglioramento nel punteggio di performance dato da GTmetrix, Pingdom Tools, e Google PageSpeed Insights. I risultati varieranno comunque da sito a sito. Ricorda sempre di fare un test della velocità reale del tuo sito web.

Ottimizza la pubblicazione del CSS

Questa opzione si riferisce alla raccomandazione PageSpeed:

  Ottimizza la pubblicazione del CSS

Attenzione! 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 rende molto conveniente la gestione di ottimizzazioni avanzate per la performance, come il CSS asincrono e il CSS critico.

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:

Il CSS Critico verrà automaticamente rigenerato quando: 

  • Abiliti l'opzione Ottimizza la spedizione del CSS
  • Cambi tema

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. Questo IP deve essere aggiunto nella lista bianca del tuo server o del tuo plugin di sicurezza : 167.114.226.142
  3. I percorsi relativi per immagini e font verranno automaticamente convertiti in URL assoluti.
  4. 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.

Evitare la generazione automatica del CSS critico

Puoi evitare la generazione automatica del CSS critico installando il seguente plugin di supporto.

📥   Scarica (.zip):  WP Rocket | No Auto-generated Critical CSS
Se ti occupi dello sviluppo del sito: Puoi trovare il codice per questo plugin su GitHub.

Modifica il CSS critico già generato

Se vuoi modificare il CSS critico generato dal nostro strumento, segui questi passi:

  1. Usa lo strumento per generare automaticamente il CSS critico per il tuo sito.
  2. Disattiva la generazione automatica per il futuro, installando il plugin di supporto menzionato qui sopra.
  3. I file CSS generati vengono archiviati sul tuo server in questa cartella: wp-content/cache/critical-css
    Se ti occupi dello sviluppo del sito e sai maneggiare il CSS, puoi editarli direttamente.
  4. Cancella la cache WP Rocket

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

Caricamento differito dei file JavaScript

Questa opzione si riferisce alla raccomandazione 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, anche se si tratta di ”falsi positivi”. Se il tuo sito richiede un jQuery di blocco esterno per funzionare correttamente, disattivare la Modalità Sicura farà sparira la nota in rosso di PageSpeed, ma romperà qualche funzionalità nel tuo sito.

File a cui non viene applicato il differimento

L'attributo defer non verrà applicato in caso il file stia usando uno o entrambi gli attributi seguenti:

  • async
  • data-cfasync="false"