Risolvere i problemi con l'ottimizzazione dei file

Ok, hai attivato una o più opzioni per minificare o combinare i file, rimuovere le query string o gestire i CSS/JS che bloccano il rendering...e ora il tuo sito è pieno di problemi? Il sito sembra rotto? L'ordine degli elementi non è più rispettato? Ci sono link o moduli che non funzionano più?

Ecco una guida con cui ti guidiamo passo per passo a risolvere questi problemi:

1. Disattiva tutte le opzioni!

Sul serio, fallo. Togli la spunta alle opzioni per minificare e combinare i file, rimuovere le query string, gestire i CSS/JS che bloccano il rendering, e poi salva le modifiche. Le tue pagine caricheranno più o meno alla stessa velocità di prima e il tuo sito tornerà a essere bello come sempre.

Attenzione! Se il problema non è sparito a questo punto, vuol dire che è dovuto a qualcosa di diverso che non ha a che fare con l'ottimizzazione dei file per cui non c'è bisogno che segua ancora questo tutorial.

2. Primo aiuto

Per prima cosa assicurati di disattivare l'opzione “Rimuovere le query string”!

L'opzione “Rimuovere le query strings” altera gli URI ma qui abbiamo bisogno degli URI originali per trovare la causa del problema. Disattivare quest'opzione è quindi fondamentale, prima di continuare.

Quale opzione causa il problema, esattamente?

Riattiva le opzioni una a una e controlla il sito web dopo averlo fatto. Una volta che vedrai tornare l'errore, saprai esattamente quale opzione lo ha causato. Ora puoi mantenere l'opzione in causa disattivata, oppure continuare con i prossimi punti.

Il tuo sito presenta al momento una pagina “coming soon” o di mantenimento per i visitatori?

In questo caso, l'ottimizzazione dei file non funziona. Continua con la configurazione delle opzioni di ottimizzazione dei file una volta che il tuo sito sarà accessibile dall'esterno, anche quando non lo stai visualizzando come utente WordPress.

La minificazione funziona?

In questo articolo stiamo assumento che il procedimento tecnico di ottimizzazione dei file (es. generare i file minificati) funzioni come dovrebbe. Se non è il tuo caso, se per esempio non vedi nessun file minificato sul tuo server, allora passa a questo documento:
Le pagine non sono copiate in cache e la minificazione (CSS o JS) non funziona

Impara i fondamenti per interpretare “PageSpeed”!
Prima di continuare con questa guida, ti raccomandiamo caldamente di imparare a interpretare i "voti di performance" da parte di Google PageSpeed Insights, GT Metrix e altri strumenti simili.

Leggi questi 2 articoli prima di procedere:
Il mio punteggio su Google Page Speed non migliora
How to correctly measure your website’s page load time

Saltare questo step può trasformarsi in una perdita di tempo, energie, e a volte anche denaro.

3. Risoluzione dei problemi

Fino a questo momento hai completato i passi:

  • Hai escluso altre possibili cause per il problema che stai vedendo.
  • Sai quale (o quali) opzione(i) stanno causando il problema.
  • Hai deciso di trovare la causa del problema invece che lasciare l'opzione in causa disattivata.

Proseguiamo allora!

Stiamo assumendo che tu abbia un'idea generale su:

  • cosa sia la “minificazione”;
  • cosa sia la “concatenation”;
  • cos'è un “documento HTML” e come leggerlo (almeno basicamente);
  • cos`è un “URI del file” e come trovarlo nel browser;
  • cosa sono gli “strumenti per lo sviluppo” (o “dev tools”) nei browser Chrome o Firefox e come aprirli.

Dovresti veramente continuare? Se uno degli elementi sopracitati ti suona completamente nuovo, forse non dovresti essere tu la persona a occuparsi di risolvere il problema, a meno che non voglia veramente imparare alcuni degli aspetti più tecnici del dietro le quinte di un sito web.
Nessuno dei punti citati in questo articolo è obbligatorio per avere un sito web più veloce. Tuttavia, se scegli di continuare, assicurati di avere la formazione tecnica necessaria

Minificazione HTML

  • Può ridurre la dimensione della pagina.
  • Elimina tutte (o la maggior parte) delle interruzioni di linea e gli spazi non necessari dal documento HTML.
  • ⚠️ A volte può causare la cancellazione  anche dei commenti CDATA dal documento HTML. 
  • Se noti qualsiasi problema legato a Google Analytics o ad altri script che usano commenti CDATA nel codice sorgente, provare a disattivare la minificazione HTML e vedere se il problema si risolve.

Minificazione CSS/JS

  • Può ridurre la dimensione della pagina.
  • Elimina tutte (o quasi) le interruzioni di linea e gli spazi non necessari tra i fil CSS e JavaScript.
  • Non ci risultano problemi in senso più generico.
  • Puoi escludere gli URI dal processo di minificazione/concatenazione copiandoli e incollandoli nei rispettivi campi di esclusione che trovi nelle impostazioni.
  • Se escludi dei file, assicurati di escludere gli URI originali, non quelli generati da WP Rocket! L'URI del file che inserisci nel campo di esclusione non deve contenere “/cache/min” o “/cache/busting”.

Combinare CSS/JS

  • Può ridurre il numero di richieste HTTP.
  • Combina tutti i file CSS e JavaScript in un numero ridotto di file (che però sono più pesanti).
  • ⚠️ Può causare problemi quando i temi/plugin non definiscono la dipendenza corretta per gli script o i fogli di stile accodati.
  • ⚠️ Ancora più di frequente, può causare problemi quando si usa l'opzione “Combina tutti i file CSS nel minor numero di file possibile ”.
  • Puoi escludere gli URI dal processo di minificazione/concatenazione copiandoli e incollandoli nei rispettivi campi di esclusione che trovi nelle impostazioni.
  • Se escludi i file, assicurati di escludere gli URI originali dei file, non quelli generati da WP Rocket! L'URI del file che inserisci nel campo di esclusione non deve contenere “/cache/min” o “/cache/busting”.
  • Segui questo tutorial per capire come trovari i file da escludere:
    Come trovare i file JS da escludere dalla Minificazione

Attenzione! Il tuo sito web potrebbe caricare script anche da servizi esterni. I file provenienti da servizi esterni non vengono combinati, però potrebbero essere spostati nel documento HTML. Per evitare problemi relativi ai file JacaScript esterni, escludili dal processo nel modo che descriviamo qui:
Escludere file JS esterni dalla minificazione

Rimuovere le query string

  • Può migliorare il voto di performance (anche se si tratta di semplice apparenza).
  • Rimuove dall'URI del file il paramentro della query string predefinita in WordPress “?ver”, codificandola dentro il nome del file, e poi archiviando il nuovo file in una cartella dedicata (“/cache/busting”)
  • Puoi escludere delle URI da questo processo usando un mini-plugin:
    Escludere i file dall'opzione Risorse Statiche

File CSS/JS che bloccano il rendering

  • Può migliorare il tempo di caricamento e il voto di performance.
  • Riduce il numero iniziale di richieste HTTP.
  • ⚠️ Può causare diversi problemi se non la si usa correttamente. Assicurati di leggere l'articolo seguente:
    JavaScript e CSS di blocco esterno nei contenuti above-the-fold (PageSpeed)
  • Richiede conoscenze avanzate di sviluppo web. Le risorse di blocco del rendering possono essere diverse in tutte le pagine del tuo sito. Per cui far funzionare questa opzione potrebbe essere complicato e non è detto che il risultato sia un sito molto più veloce. Lasciare disattivata questa opzione è la scelte più saggia, a meno che tu non abbia molta esperienza nello sviluppo web e sappia già come gestire le risorse di blocco del rendering.