La guida definitiva all'ottimizzazione della velocità delle pagine per WordPress

Seguendo questa guida, imparerai tutte le tecniche per velocizzare drasticamente un sito WordPress. Ecco i motivi più importanti per cui avere un'ottima velocità di caricamento della pagina in WordPress avvantaggia la tua attività: gli utenti non abbandoneranno il tuo sito Web, trascorreranno più tempo e denaro lì e i motori di ricerca classificheranno meglio il tuo sito Web nei risultati di ricerca. Pronto?

Introduzione

Gli utenti di Internet non hanno molta pazienza, quando si tratta di tempi di caricamento delle pagine. Facciamo clic su un collegamento o inseriamo l'URL e aspettiamo un secondo, due, tre e il gioco è fatto. Le statistiche di Google affermano che il 50% degli utenti si aspetta che un sito per dispositivi mobili venga caricato in 2 secondi e il 53% degli utenti è probabile che abbandoni la pagina se il caricamento dura più di 3 secondi. Si tratta di un periodo molto breve, se si considera che il tempo medio di caricamento di una home page, su dispositivo mobile, è di 19 secondi (su rete 3G). I tempi di caricamento sui computer sono più rapidi e un tempo di caricamento medio è di 5 secondi, ma è ancora troppo lungo.

Prendere i benchmark dei siti Web desktop come riferimento non è più una scusa. Per la maggior parte dei siti Web di oggi, la maggior parte del traffico proviene da dispositivi mobili. In questo articolo, daremo uno sguardo completo alle tecniche più aggiornate per l'ottimizzazione della velocità delle pagine per i siti WordPress. Seguendo questa guida potrai velocizzare il sito WordPress, riducendo drasticamente i tempi di caricamento da mobile e desktop, e quindi renderlo molto più user-friendly.

Se non hai un sito WordPress, non chiudere ancora la guida. La maggior parte delle tecniche di ottimizzazione della velocità spiegate in questa guida passo passo possono essere applicate a qualsiasi tipo di sito web.

Se il tuo sito è stato creato pensando alla monetizzazione, che si tratti di un negozio di e-commerce online o se stai vendendo servizi online/offline, perdere potenziali clienti non è mai una buona cosa. Stai praticamente lasciando soldi sul tavolo. Migliorare la velocità della tua pagina dovrebbe avere un impatto positivo sui tuoi guadagni. Curiosità: la campagna di raccolta fondi di Obama ha aumentato del 14% la conversione delle donazioni con l'ottimizzazione del sito e diminuendo il tempo di caricamento della pagina da 5 secondi a 2 secondi.

In qualità di proprietari o sviluppatori di siti Web, desideriamo che i nostri visitatori abbiano la migliore esperienza. Creiamo siti di bell'aspetto con funzionalità straordinarie, ma di solito dimentichiamo l'importanza di un sito Web veloce. Un sito web veloce crea fiducia con i nostri visitatori, aumenta la possibilità che un visitatore rimanga sulla nostra pagina più a lungo e quindi potrebbe spendere di più. D'altra parte, se il nostro sito Web è lento, i visitatori potrebbero semplicemente arrendersi e non vedranno nemmeno il nostro fantastico sito Web, con la nostra altrettanto fantastica offerta.

Se i motivi di cui sopra non fossero abbastanza convincenti, ne ho uno in più. Google e altri motori di ricerca (SE) hanno rivelato che avere un sito Web lento spingerà il posizionamento del tuo motore di ricerca in basso, lasciandoti con ancora meno visitatori. Quindi, avere un sito web veloce significa che a Google piacerai di più e questo può cambiare drasticamente le tue classifiche SE a tuo favore.

Naturalmente, i tempi di caricamento variano per un paio di motivi, ad esempio la velocità di Internet del visitatore, la posizione del visitatore e quanto sia “pesante” o gonfio il nostro sito web. Non c'è niente che possiamo fare per la velocità di Internet del visitatore, ma possiamo occuparci di altri aspetti e migliorare l'esperienza per tutti. In questa guida, vedremo come ottimizzare la velocità del nostro sito Web WordPress, per renderlo veloce e snello, quindi andiamo!

Sommario

• Fondamenti
  • Hosting WordPress
    • Hosting condiviso
    • Hosting gestito
    • VPS o Server Dedicati
  • Tema WordPress
  • Plugin WordPress
• Passaggi per l'ottimizzazione della velocità della pagina di WordPress
  • Strumenti per la velocità della pagina
    • Google PageSpeed ​​Insights
    • GTMetrix
    • Test di velocità del sito Web Pingdom
    • Prova della pagina web
  • Ottimizzazione dell'immagine
    • Mini guida per l'ottimizzazione delle immagini
    • Immagini ottimizzate per la velocità della pagina di Google
    • Altri miglioramenti all'immagine
    • Miglioramenti del caso di studio
  • Memorizzazione nella cache del browser
  • Compressione delle risorse (Gzip o Deflate)
  • Rimuovere i file JS o CSS non necessari
  • JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold
  • Cache lato server
    • WP Rocket (plugin di memorizzazione nella cache lato server)
  • Rete di distribuzione dei contenuti
    • Cloudflare
• Risultati finali
• Conclusione

Fondamenti

Per rendere il tuo sito web il più veloce possibile, dobbiamo costruirlo su buone basi. Proprio come costruire una casa, non vuoi costruirla sulle sabbie mobili e avere problemi all'inizio. Vuoi costruirlo su basi solide, quindi durerà a lungo senza problemi. Le tre cose principali da controllare sono:

• ospitando
• il tema WordPress
• i plugin di WordPress

Hosting WordPress

L'hosting è la base stessa del tuo sito WordPress ed è quindi una componente cruciale, da non trascurare, anche se hai già un hosting. Passare a un provider di hosting migliore accelererà il tempo di caricamento di WordPress fino a diversi secondi.

Selezionare l'host web giusto è importante e non dovresti basare la tua decisione sul prezzo dell'hosting. Di solito, con prezzi bassi, si ottengono prestazioni basse e questo è ciò che vogliamo evitare. Diamo un'occhiata alle opzioni di hosting disponibili e spieghiamo quali sono le differenze.

Hosting condiviso

Questa è la soluzione di hosting più diffusa perché è economica. Ma come abbiamo detto, con prezzi bassi si ottengono prestazioni basse. Su un hosting condiviso, ci sono migliaia di account su un server fisico, il che significa che le risorse del server sono condivise tra tutti i siti Web creati da questi account di hosting.

Immagina una pizza grande (hmmm ?…), ogni sito Web su un hosting condiviso ottiene un pezzettino. Ma poiché il tuo sito ha molti visitatori, ha bisogno di più pizza! Ha ancora fame, ma non c'è più pizza :(, perché anche altri siti web hanno fame...

Se ottenere solo una piccola fetta di pizza non è già abbastanza grave, i potenziali rischi per la sicurezza probabilmente peggioreranno ulteriormente il caso di hosting condiviso. Un sito Web infetto su un hosting condiviso potrebbe causare problemi di velocità e prestazioni per l'intero server e mettere in pericolo anche il tuo sito WordPress.

La configurazione del server sugli hosting condivisi è molto limitata e non hai molto spazio per configurarlo a tuo piacimento. Il server è preconfigurato con impostazioni specifiche, solitamente molto generiche, e dovrebbe eseguire WordPress senza problemi. I problemi sorgono in seguito, sotto forma di esaurimento della memoria o sotto forma di un'impostazione PHP limitata, di cui un plug-in avrebbe bisogno per funzionare correttamente.

Non posso davvero raccomandare l'hosting condiviso per qualsiasi sito Web aziendale, ma se dovessi, dovrei dire che è più adatto per siti a traffico molto basso.

Hosting gestito

Questo è un grande aggiornamento rispetto all'hosting condiviso, perché il tuo sito Web ottiene un pezzo di pizza più grande (un'intera fetta di pizza, sì!), Ma costa di più.

I server sull'hosting gestito sono meno popolati e ciò si traduce in più risorse server per il tuo sito. Questi server sono generalmente ottimizzati per eseguire WordPress nel modo più fluido possibile, hanno più memoria, potenza di elaborazione e un sistema di memorizzazione nella cache.

L'installazione e la configurazione hardware e software di questi server di hosting gestiti vengono effettuate dalla società di hosting (da cui il termine "gestito"). Altri servizi, come backup, bilanciamento del carico, ripristino di emergenza e controlli/prevenzioni di sicurezza, possono anche far parte dell'hosting gestito, a seconda dell'offerta della società di hosting.

L'hosting gestito di WordPress è consigliato per i siti Web a traffico medio-basso.

VPS o Server Dedicati

Se ci atteniamo all'analogia con la pizza, con VPS (Virtual Private Server) ottieni alcune fette di pizza, ma non la pizza intera e con i server dedicati, ottieni la pizza intera.

Ciò significa che con i server dedicati hai il controllo dell'intero server con tutte le sue risorse e con il VPS ottieni una parte del server perché stai ancora condividendo la macchina fisica del server con altri. Quando si tratta di ottimizzazione della velocità della pagina per WordPress, non ci sono limitazioni lato server quando si configura WordPress su VPS o server dedicato. Sai esattamente quante risorse sono disponibili per il tuo sito web e puoi configurarlo a tuo piacimento. È possibile implementare funzionalità all'avanguardia prima che i provider di hosting standard le supportino (che possono essere in ritardo di anni rispetto alla tecnologia del software del server).

Entrambe queste opzioni offrono maggiore controllo e risorse, ma hanno anche prezzi più elevati e richiedono più competenze per configurarle e mantenerle a lungo termine. È anche possibile gestire server VPS/dedicati, quindi non è necessario essere un guru del server per utilizzarne uno. Sono appropriati per i siti Web con un volume di traffico elevato.

Se non sei sicuro di quale hosting scegliere, suggerirei l'opzione di hosting WordPress gestito, che dovrebbe anche essere in grado di scalare (allocare più risorse dal server), se necessario.

Un'ottimizzazione gratuita del sito Web, che ogni hosting decente offre ormai, consiste nell'aggiornare la versione PHP a 7.x. Se il tuo sito WordPress è in esecuzione su PHP inferiore a 7, come 5.6 o anche precedenti, contatta il supporto dell'hosting e chiedi loro di aggiornarlo all'ultima versione stabile. Se stai cercando un nuovo hosting, puoi chiedere il loro supporto, se hanno la versione PHP 7.x. Dovrebbero rispondere tutti con un solido "sì", ma se non hanno la possibilità di utilizzare PHP 7.x, consiglierei di stare alla larga da loro. PHP 7 è, rispetto alle versioni precedenti, un grande miglioramento in termini di velocità e prestazioni ed è molto facile passare ad esso, quindi approfittane.

Una buona scelta di hosting ti farà risparmiare un sacco di problemi lungo la strada e se incontri un problema, un buon supporto clienti dovrebbe essere in grado di aiutarti, quindi terrei a mente anche di scegliere un host che offra un buon supporto . Un trucco veloce che puoi utilizzare: poni loro una domanda prima dell'acquisto e monitora i tempi di risposta, l'atteggiamento e il livello di professionalità.

Tema WordPress

Quando scegliamo un tema WordPress per il nostro sito, iniziamo sempre con la progettazione del tema e va bene. Dovremmo prima scegliere alcuni temi che ci piacciono, perché vogliamo che il nostro sito sia fantastico e un ottimo design è la prima cosa che un visitatore vede. La seconda cosa è probabilmente la funzionalità del tema. Il tema o i plugin consigliati dal tema offrono le funzionalità che desideriamo? Se lo fa, fantastico! Siamo in affari! Quello che dimentichiamo quasi sempre è controllare la velocità di caricamento del tema.

Possiamo testare il tempo di caricamento della pagina demo del tema e vedremo rapidamente se il tema è ottimizzato per la velocità. Verificheremo quali strumenti per la velocità della pagina utilizzare e come utilizzarli in una sezione di seguito, ma per ora voglio solo informarti su questo passaggio aggiuntivo di verifica del tema, prima dell'acquisto. Ovviamente, il tempo di caricamento della pagina demo può probabilmente essere migliorato, quindi se non ottieni un punteggio perfetto, non preoccuparti, nessun tema WordPress otterrà un punteggio perfetto del 100%, tranne se ha pochissimi contenuti nella sua pagina demo. Come regola generale, dovresti cercare temi che non sono nelle figure rosse (punteggio 50 o inferiore negli strumenti di velocità della pagina).

Si tratta di un buon equilibrio tra design del tema e funzionalità rispetto alla velocità del tema. Ad esempio, un tema WordPress vuoto con un po' di testo si caricherà molto velocemente, ma un tema gonfio con molte funzionalità (molte delle quali potrebbero non essere necessarie), con molti contenuti multimediali, si caricherà molto più lentamente. Colpire quel punto debole è l'obiettivo, quando si seleziona un tema WordPress buono e performante.

Plugin WordPress

Una domanda che vedo spuntare spesso è: "Quanti plugin sono troppi?". Non è un problema nel numero di plugin di WordPress, ma nella qualità del codice e nell'impatto che il plugin ha sul sistema. Puoi avere più di 50 plug-in attivi, ciascuno dei quali si occupa di una piccola funzionalità specifica (con un buon codice) e il sito funzionerà correttamente. D'altra parte, puoi avere 5 plugin attivi e uno di questi potrebbe intasare il tuo sistema, rendendo il tuo WordPress lento.

Riesaminare il codice di ogni plugin è una buona idea, ma "nessuno ha tempo per quello", inoltre avresti bisogno di una buona conoscenza di programmazione per farlo. Se percorri quella strada, le cose a cui prestare attenzione sono i plug-in che accodano molte risorse esterne, fanno molte richieste HTTP, fanno query al database non necessarie (non ottimizzate) e così via (fondamentalmente tutto ciò che rallenterebbe il sito Web di WordPress, senza una giusta ragione dietro).

Quello che consiglierei è di non installare e attivare ogni plugin di cui pensi di aver bisogno.

Per prima cosa pensaci, il tuo sito ha davvero bisogno di questa funzionalità aggiuntiva? Ad esempio, se hai bisogno di uno shortcode per i pulsanti, controlla la documentazione del tuo tema, forse il tema ha uno shortcode per esso e non è necessario installare e attivare un intero plug-in del bundle di shortcode solo per utilizzare un singolo shortcode dei pulsanti. Questo è un esempio banale, ma voglio che tu ci rifletta prima di installare e attivare nuovi plugin. Ogni plug-in non verificato potrebbe rendere il tuo sito più pesante e quindi più lento, inoltre potrebbe portare a una violazione della sicurezza, se il plug-in è codificato male o non viene mantenuto.

Infine, un'ottima cosa su cui puoi fare leva, quando selezioni il plugin, è una grande condivisione globale di WordPress e di conseguenza una vasta comunità. Con la mancanza di conoscenza del codice, una buona regola pratica è attenersi ai plugin popolari con molte installazioni attive, un buon punteggio medio di valutazione e recensioni positive. I colleghi WordPresser renderanno la tua selezione molto più semplice!

Passaggi per l'ottimizzazione della velocità della pagina di WordPress

Prima di iniziare con l'ottimizzazione, vorrei menzionare alcune cose.

Innanzitutto, dovresti creare un backup del tuo sito WordPress, ecco una guida su come farlo con un plugin WordPress. Meglio prevenire che curare!

In secondo luogo, ti avverto di non aspettarti il ​​punteggio di 100/100 negli strumenti di velocità della pagina che utilizzeremo nella nostra guida. Inseguire il punteggio di 100/100 non è una buona idea o addirittura possibile su alcuni siti. Tutto dipende dal tipo di contenuto visualizzato dal tuo sito. Se un sito ha solo un po' di testo e un'immagine, allora è assolutamente possibile ottenere un punteggio perfetto. Ma se hai una pagina lunga, con molti contenuti multimediali e altre integrazioni di app di terze parti, come Google Maps e così via, il punteggio di 100 non è nel tuo mirino e non dovresti nemmeno perseguirlo.

Perché non è una buona idea puntare a 100/100? Se segui le istruzioni degli strumenti per la velocità della pagina e ottimizzi tutto come si suol dire, il tuo sito potrebbe non funzionare correttamente. Se sposti tutti i file JS o CSS di blocco nel piè di pagina, comparirà il lampeggiamento CSS (apparirebbe prima il contenuto senza stile e quando il CSS si caricava, il sito "lampeggiava" in posizione), lo stesso accadrebbe con il codice JS , ciò modificherebbe qualsiasi elemento DOM dopo il caricamento del codice JS.

Potresti rompere il tuo sito, se segui ciecamente le istruzioni e continui a ottimizzare il tuo sito WordPress per un migliore tempo di caricamento, solo per ottenere il punteggio perfetto. Il punteggio di velocità della pagina perfetto è solo un numero, che in realtà non ha importanza, se i tuoi visitatori finiscono con un sito danneggiato. Dobbiamo cercare l'equilibrio tra velocità della pagina ed esperienza utente.

Per la dimostrazione dell'ottimizzazione della velocità della pagina di WordPress, utilizzeremo il mio account di hosting condiviso e il nostro tema WordPress medico (con i plugin consigliati per il tema). Sì, sì, lo so che in pratica ho detto di non utilizzare un hosting condiviso, ma vedremo di cosa è capace e quali sono i limiti, inoltre questo è solo un test di ottimizzazione della velocità della pagina, non un vero sito Web WordPress aziendale

Ho installato l'ultima versione di WordPress, il tema MedicPress, tutti i plugin consigliati per i temi e ho importato il contenuto della demo. Questo è il nostro punto di partenza per il sito di prova.

Strumenti per la velocità della pagina

L'ottimizzazione della velocità delle pagine può essere difficile, ma per fortuna ci sono strumenti online che ci semplificano la vita e ci consigliano cosa fare per migliorare la velocità del nostro sito web.

La prima regola per ottimizzare la velocità del tuo WordPress è questa: misura sempre!

Esegui gli strumenti (o almeno uno di essi), che daremo un'occhiata nella sezione seguente, dopo ogni passaggio di ottimizzazione e tieni traccia dei miglioramenti. In questo modo saprai quali attività apportano i maggiori miglioramenti. Dovresti anche eseguire i test più volte, per vedere il tempo di caricamento medio reale.

Le pagine vengono caricate in modo diverso, a seconda di dove si trova il server di hosting. Ad esempio, se il tuo server si trova nel Nord America e il visitatore proviene dall'Europa, la pagina verrà caricata più lentamente per lui rispetto a un visitatore canadese. Questo problema può essere risolto con un CDN (Content Delivery Network), ma lo esamineremo un po' più avanti nell'articolo. Per ora, volevo solo sottolineare che questo problema è presente per i visitatori di tutto il mondo e anche per gli strumenti di ottimizzazione della velocità delle pagine. Alcuni strumenti ti consentono anche di eseguire il test da posizioni diverse, in modo da poter vedere come ciò influisca sul tempo di caricamento.

Gli strumenti per la velocità della pagina che esamineremo sono:

• Google PageSpeed ​​Insights
• GTmetrix
• Test di velocità del sito Web Pingdom
• Pagina WebTest

Ci sono altri strumenti, ma questi sono i più popolari e ci atterremo.

Google PageSpeed ​​Insights

Come puoi vedere dal titolo di questo strumento, questo è un prodotto di Google. Oltre al punteggio (suddiviso in desktop e mobile) e alle utili istruzioni su cosa fare per migliorare il tempo di caricamento della tua pagina, possiamo anche trarre una conclusione su cosa piace vedere a Google su un sito web. Quali cose vuole essere ottimizzato su un sito Web per classificarsi bene nei risultati dei motori di ricerca.

Se hai immagini o file di risorse non ottimizzati (JS o CSS), genererà un file zip con le loro controparti ottimizzate, che puoi sostituire sul tuo server. Abbastanza pulito, vero? In seguito esamineremo l'ottimizzazione dell'immagine e del codice, sappi solo che Google PageSpeed ​​può aiutarti in questo.

Google PageSpeed ​​Insights non ha molte informazioni dettagliate, come altri strumenti, ma è un buon punto di partenza, che copre tutti gli aspetti importanti dell'ottimizzazione della velocità della pagina. Elenca i passaggi che miglioreranno maggiormente il tuo sito.

Ho eseguito questo strumento con l'URL del nostro sito di test e ho ottenuto un punteggio di 71 per desktop e 67 per dispositivi mobili, quindi c'è spazio per miglioramenti. L'elenco dei possibili suggerimenti per l'ottimizzazione include:

• Abilita la compressione (comprimendo le risorse con gzip o deflate),
• ottimizzare le immagini,
• ridurre i tempi di risposta del server,
• eliminare JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold,
• minimizza JavaScript.

GTmetrix

Questo strumento fornisce informazioni più dettagliate su quali cose sono ottimizzate e quali no. Ogni dettaglio di ottimizzazione è elencato e valutato su una scala da 0 a 100. L'elenco è ordinato per importanza, quindi se segui le attività dall'alto verso il basso e ottimizzi quelle che non hanno un punteggio del 100%, sarai sulla buona strada per velocizzare il sito WordPress il più rapidamente possibile.

Utilizzando gli strumenti di test PageSpeed ​​e YSlow, GTmetrix genera punteggi per la tua pagina e mostra le attività che devono essere migliorate. Una caratteristica interessante di questo strumento è anche il rapporto Waterfall, che rappresenterà graficamente come viene caricato il tuo sito e potrai individuare i colli di bottiglia più velocemente. Nell'immagine qui sotto, puoi vedere che il mio lento hosting condiviso ha impiegato 1,13 secondi per rispondere con le prime informazioni. È troppo lungo, ma saremo in grado di migliorarlo.

Puoi anche testare la tua pagina da 7 diverse località in tutto il mondo, il che è bello e anche una cosa importante da testare, che vedremo più avanti nell'articolo.

Ho eseguito lo strumento GTmetrix (località: Vancouver, Canada) sul nostro sito di test e ho ottenuto un punteggio PageSpeed ​​di 77 e un punteggio YSlow di 71. Con questo strumento, otteniamo anche queste utili informazioni:

• Tempo a pieno carico: 3,1 s,
• Dimensione totale della pagina: 803 KB
• Richieste: 54

Mi piace di più lo strumento GTmetrix, dal momento che ottieni molte informazioni rilevanti in un unico posto. In questa guida utilizzeremo principalmente lo strumento GTmetrix per misurare i nostri progressi nell'ottimizzazione.

Test di velocità del sito Web Pingdom

Pingdom è un altro strumento che mostra le informazioni di ottimizzazione in modo leggermente diverso. Ottieni gli stessi dati di riepilogo di base dello strumento GTmetrix (senza il punteggio YSlow). Con Pingdom, hai la possibilità di testare la velocità della pagina in 4 posizioni diverse. I risultati sono tutti diversi per ogni posizione, il che mostra che la posizione del server è importante, ma saremo in grado di migliorare anche questo (con CDN più avanti nell'articolo). Utilizzeremo lo strumento Pingdom per testare i tempi di caricamento delle pagine nelle 4 posizioni disponibili, poiché i test Pingdom si completano più rapidamente.

Pingdom mostra anche alcune tabelle interessanti, come la dimensione del contenuto o il numero di richieste, filtrate per tipo di contenuto o per dominio e ha anche un rapporto a cascata.

Pagina WebTest

Lo strumento WebPageTest ha ancora più opzioni di configurazione rispetto agli strumenti precedenti. Ha più posizioni tra cui scegliere, è possibile selezionare una velocità Internet, abilitare/disabilitare alcune opzioni del browser e testare dispositivi specifici.

È un buon strumento, che mostra un rapporto dettagliato a cascata per ogni corsa (per impostazione predefinita ne esegue 3, ma puoi modificarlo nelle impostazioni) e mostra un voto da A a F per ciascuno di questi fattori di ottimizzazione della velocità:

• Tempo del primo byte (tempo di risposta),
• keep-alive abilitato,
• comprimere il trasferimento (gzip),
• comprimere le immagini,
• contenuto statico nella cache,
• uso efficace della CDN.

Puoi entrare nei dettagli, controllando tutte le schede dei risultati, dove troverai molte informazioni utili. Userei questo strumento, se avessi bisogno di un rapporto dettagliato o se avessi bisogno di testare una posizione disponibile sul loro sito, altrimenti penso che GTmetrix abbia informazioni più concise.

Ho eseguito questo strumento per il nostro sito di test. Puoi vedere i risultati nello screenshot qui sotto:

Abbiamo esaminato gli strumenti più popolari per la velocità della pagina e abbiamo eseguito i test iniziali di velocità della pagina, quindi ora siamo finalmente pronti per iniziare a ottimizzare il nostro sito WordPress. Per riferimento, questi sono i risultati del punto di partenza degli strumenti per la velocità della pagina che utilizzeremo per misurare i nostri progressi nell'ottimizzazione della velocità:

• Google PageSpeed ​​Insights
  • Cellulare: 67
  • Desktop: 71
• GTmetrix
  • Velocità di pagina: 77
  • YLento: 71

Ottimizzazione dell'immagine

Questo è probabilmente l'aspetto più ignorato delle prestazioni del sito e allo stesso tempo può apportare il più grande miglioramento alla velocità del tuo sito. Se non pensi mai di ottimizzare l'immagine prima di caricarla sul tuo sito WordPress, allora questo è un ottimo primo passo per l'ottimizzazione del tempo di caricamento di WordPress.

Il caricamento di immagini grandi e non ottimizzate, utilizzate in un piccolo spazio sul tuo sito Web è un grande "no no". Esempio: hai uno slot immagine che non sarà più grande di 600 x 400 px sul tuo sito e carichi un'immagine di 1920 x 1080 px (o anche più grande!). Ora, ripeti questo errore un paio di volte e il tuo sito sarà molto lento.

La prima cosa da fare è ridimensionare l'immagine alla dimensione corretta. Nel nostro esempio, lo slot dell'immagine non sarà mai più grande di 600 x 400 px, quindi dovremmo ridimensionare l'immagine a quella dimensione.

"Ecco fatto, lavoro fatto, giusto?" No. Possiamo migliorare ulteriormente l'immagine. Esistono molti strumenti che ottimizzano (comprimono) l'immagine senza perderne la qualità (i nostri occhi non possono rilevare la perdita di qualità con questi strumenti). Ciò ridurrà anche drasticamente le dimensioni del file immagine, rendendo più veloce il caricamento.

La compressione delle immagini può essere eseguita manualmente o con i plugin di WordPress. Il mio collega Marko ha scritto una guida fenomenale per l'ottimizzazione delle immagini, quindi utilizzeremo le conoscenze ottenute dal suo articolo e esamineremo rapidamente le tecniche che puoi utilizzare per ottimizzare le tue immagini.

Mini guida per l'ottimizzazione delle immagini

Scegli il formato immagine giusto : i formati immagine più diffusi per l'utilizzo online sono JPEG e PNG. Puoi risparmiare molto sulla dimensione del file immagine, selezionando il formato immagine corretto (Marko ha risparmiato il 45% nel suo articolo). Dovresti usare:

• Il formato .jpg per foto, immagini con sfumature e immagini con milioni di colori.
• Il formato .png per immagini con colori limitati (loghi) e immagini con trasparenza.

Ridimensiona le tue immagini – Come accennato in precedenza, dovresti sempre ridimensionare le immagini prima di caricarle sul tuo sito WordPress. Innanzitutto, controlla quanto è grande lo spazio in cui utilizzerai l'immagine e ridimensionalo di conseguenza. Puoi ridimensionare le immagini con un programma di manipolazione delle immagini, come GIMP o Photoshop.

Comprimi le tue immagini – Questo può essere fatto con uno strumento di compressione delle immagini online o con un plugin per WordPress:

Strumento di compressione online : Marko consiglia lo strumento online Optimizilla. Carica semplicemente le tue immagini sull'app Optimizilla e una volta completato il processo, scarica le immagini ottimizzate, che dovresti quindi caricare sul tuo sito WordPress. Sembra un po' noioso, quindi ovviamente c'è un plugin per WordPress, che può semplificare questo processo.

Plugin di compressione delle immagini WP : ancora una volta, Marko ha testato i plug-in di compressione delle immagini più popolari e ha dichiarato vincitore: ShortPixel Image Optimizer. Dopo aver installato il plug-in, dovrai richiedere una chiave API per utilizzare il plug-in (un processo molto semplice). Le impostazioni predefinite del plug-in sono ottime, quindi non è necessario impostare nulla, basta andare su Media -> Bulk ShortPixel e fare clic sul pulsante "Avvia ottimizzazione". Anche qualsiasi immagine appena caricata verrà ottimizzata. Nota: la versione gratuita di questo plugin consente solo 100 ottimizzazioni di immagini al mese, se ne hai bisogno di più, dovresti passare al loro piano a pagamento. Vogliamo che i nostri clienti abbiano accesso ai migliori strumenti disponibili, quindi abbiamo stretto una partnership con ShortPixel e ora i nostri membri ProteusClub ottengono anche 1.000 crediti gratuiti da utilizzare con il plugin ShortPixel WordPress.

Infine, non posso raccomandare abbastanza di leggere l'intero articolo sull'ottimizzazione delle immagini in WordPress.

Immagini ottimizzate per la velocità della pagina di Google

Questo è un modo alternativo su come ottimizzare le tue immagini esistenti sul tuo sito WordPress. Se hai seguito i passaggi precedenti, nella sezione Mini Guida per l'ottimizzazione delle immagini, probabilmente hai già ottimizzato le immagini e quindi Google PageSpeed ​​non avrà immagini per te. Buon lavoro! Puoi ancora leggere questa sezione a scopo informativo

Ho menzionato nell'introduzione dello strumento Google PageSpeed, che Google genera un file zip con file ottimizzati che puoi utilizzare sul tuo sito. Puoi scaricare il file zip, cliccando su questo link:

In questo file zip, hai una cartella chiamata image , che ha le immagini ottimizzate. Puoi caricarli tramite FTP o il tuo caricatore di file di hosting. Sostituisci/sovrascrivi le immagini nelle cartelle di caricamento corrette (…/wp-content/uploads/…). Successivamente, dovresti anche generare le versioni più piccole (miniature) di queste immagini nel tuo sito WordPress. Puoi farlo con il plug-in Rigenera miniature.

Altri miglioramenti all'immagine

In questa sezione esamineremo alcuni ulteriori miglioramenti riguardanti le immagini, che possiamo sfruttare per spremere alcune prestazioni extra.

Caricamento pigro delle immagini

Il caricamento lento è una tecnica per caricare le immagini, in cui le immagini vengono caricate in modo asincrono. Le immagini che non sono above-the-fold non vengono caricate al caricamento della pagina (vengono caricate dopo o anche solo quando sono necessarie). Ciò significa che le immagini che possono essere visualizzate nella parte superiore della pagina vengono caricate, mentre le altre immagini (non visualizzate) vengono caricate dopo il caricamento della pagina o mentre l'utente scorre la pagina verso il basso (su richiesta). Se hai una pagina lunga con molte immagini, puoi risparmiare molto tempo di caricamento della pagina iniziale con questa tecnica.

Il caricamento lento può essere implementato con del codice personalizzato o con un plug-in WP. Utilizzeremo il plug-in di memorizzazione nella cache di WP Rocket in seguito e ha anche una funzione di caricamento lento.

Collegamento di immagini

Cos'è l'hotlinking? Sta visualizzando un'immagine che è ospitata su un altro server. Ad esempio, se hai un post molto popolare e in quel post hai una bella immagine. Un visitatore (ladro) potrebbe copiare l'URL di origine dell'immagine e utilizzarlo sul proprio sito. Ciò significa che l'immagine verrà richiesta e servita dal tuo server. Moltiplica il ladro per 100 e hai migliaia di richieste esterne a cui il tuo server deve rispondere, il che può rallentare il tuo server.

Questa non è un'ottimizzazione diretta della velocità della pagina, ma piuttosto un'ottimizzazione del server. Puoi risolvere il problema dell'hotlinking con del codice nel file .htaccess. Puoi fare un ulteriore passo avanti (essere un po' malvagio) e sostituire l'immagine rubata con un'altra, forse non così bella :). Questo può essere fatto anche nel file .htaccess. Apri il tuo file .htaccess sul tuo server e aggiungi questo codice. Sostituisci il tuo-sito-web.com con il tuo dominio, il google.com con qualsiasi altro dominio, a cui desideri consentire l'accesso alle tue immagini e sostituisci http://replaceing-stolen-image-url-goes-here.jpg con l'URL dell'immagine che desideri visualizzare per eventuali immagini rubate.

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ http://replacing-stolen-image-url-goes-here.jpg [NC,R,L]

Se non desideri sostituire l'immagine rubata con la tua immagine personalizzata, utilizza questo codice. Questo disabiliterà l'immagine sul loro sito web:

 RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?your-website.com [NC] RewriteCond %{HTTP_REFERER} !^http(s)?://(www\.)?google.com [NC] RewriteRule \.(jpg|jpeg|png|gif)$ - [NC,F,L]

Miglioramenti del caso di studio

Diamo un'occhiata ai progressi che abbiamo fatto finora con il nostro sito di test, dopo aver ottimizzato le immagini. Come sapete, ho importato i dati demo per il nostro tema medico, che stiamo utilizzando come sito di test. Queste immagini demo utilizzavano i formati di file corretti ed erano già dimensionate correttamente, quindi ho potuto saltare questi due passaggi. Se dovessi caricare una nuova immagine, non le salterei!

Quindi, ho installato il plug-in ShortPixel e ho eseguito l'ottimizzatore di massa. Il plugin ha riportato un'ottimizzazione media dell'immagine del 38%. È fantastico!

Ho eseguito lo strumento PageSpeed ​​Insights e Google ha sottolineato che alcune delle immagini possono essere ulteriormente compresse, quindi ho seguito il mio consiglio, ho utilizzato le immagini che Google ha preparato per me e le ho caricate sul mio server tramite FTP.

Dopo che le immagini sono state ordinate, i risultati degli strumenti per la velocità della pagina sono stati:

• Google PageSpeed ​​Insights
  • Cellulare: 72
  • Desktop: 77
• GTmetrix
  • Velocità di pagina: 81
  • YLento: 71

Non è un grande miglioramento, dal momento che le immagini utilizzate nei dati demo erano già abbastanza ottimizzate, ma siamo comunque un passo più vicini al nostro obiettivo. Se hai immagini non ottimizzate sul tuo sito, questo passaggio di ottimizzazione delle immagini ti porterà un enorme aumento dei punteggi e ridurrà il tempo di caricamento della pagina.

Memorizzazione nella cache del browser

Quando un utente visita il tuo sito tramite browser, deve scaricare tutte le risorse (HTML, immagini, JS, CSS, …) dal tuo server per mostrare il sito al visitatore. Quando lo stesso utente visita un'altra pagina del tuo sito, i file CSS e JS di solito rimangono gli stessi, ma il browser potrebbe comunque scaricarli di nuovo dal tuo server, se non disponi di una corretta configurazione del server.

Proper caching headers and expiration dates should be set on your server, to allow static resources (JS, CSS and other files) to be stored in the browser's cache. This greatly improves the performance for returning visitors or for visitors who look at more than one page on your site.

Usually, the hosting servers have that already configured. If the page speed optimization tools report that you are missing the “Leverage browser caching” optimization or something like that, then it's best to contact your hosting company and let them know that you want to set-up browser caching for your site. They will be able to sort that out for you or at least point you to the right direction on how to do that yourself.

If you want to do things yourself, then you have to know that these browser caching settings vary, depending on the server type your hosting company is using. A good starting point for Apache servers is the .htaccess file of the HTML5 Boilerplate project (check out the “Expires headers” section). An nginx configuration is available as well.

My shared hosting account has browser caching already configured, so there is nothing for us to do on our test site.

Resource Compression (Gzip or Deflate)

Files sent from your server (HTML, JS, CSS, …) to your visitors can be compressed, so that they can be transferred faster, which improves your page speed. This can be done by enabling Gzip or Deflate compression on your server.

You can contact your hosting support and ask them, if they can enable resource compression for your site or you can configure it yourself, but be sure you know which server type your hosting is using. We can again look at the HTML5 Boilerplate project for some tips, they have default server configs for each of the major server types. For example, my hosting is using Apache server, so I found this compression config. I've copied the content of this config, I've located the .htaccess file for my WordPress site via the FTP (it's in the root of your WP installation) and I copied it at the end of the file.

I've re-run the page speed tools, after I've enabled the resource compression for my WordPress site and here are the results:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 96
  • YSlow: 82

As you can see, we've improved our scores by a fair amount and all we did, was enable the resource compression, which did not take a lot of time. By compressing resources, we change the total page size from 803KB to 476KB, which is awesome! We made another step towards an optimized site, so let's continue.

Remove unneeded JS or CSS files

If you are using plugins, which include JS or CSS files on all your pages and you actually are not using the plugin features on those pages, then it's best to remove them. This can be done with custom code in your child theme, but I would recommend that you use a plugin for that. It's much easier!

The plugin that will help us do that is WP Asset CleanUp. After you install and activate this plugin, go and edit your home page. Home pages are usually the “heavier” pages, so we will look at it for our example, but you can do that for other pages as well.

Under the page content editor, you will see a section called WP Asset CleanUp . This section will list all CSS and JS files that are included on your front page. Now, your job is to find out, which of these files are not needed on your WordPress front page.

For example, in our test site, we are using the Contact Form 7 plugin, but we are only using the contact form on our “Contact Us” page, so we can safely remove (unload) its CSS and JS files from our home page. I can do the same with WooCommerce assets, since we are not using them on our home page as well. You should look at each asset in the list and check, if you can unload it. Watch out for the files with the red exclamation icon, you should probably never unload these, since they are core WordPress files and they are needed for the site to work properly. This is how my home page Assets CleanUp settings looks like:

I was able to safely remove 11 assets, which will save 11 resource requests when a page loads and that will improve the page speed.

Re-run of page speed test tools showed, that Google PageSpeed Insights score did not change (because it also did not list this as a recommended optimization), but the GTmetrix score did improve:

• Google PageSpeed Insights
  • Mobile: 83
  • Desktop: 90
• GTmetrix
  • PageSpeed: 97
  • YSlow: 86

Our site also loads faster, it now needs 2.7 seconds to load the whole site (in the beginning it took 3.1 seconds). We are improving the WordPress site speed slowly but surely. Bear in mind, I'm using one of our WordPress themes for the test, which are built from the ground up to be performing out of the box. If you're using some other WordPress theme, where the author didn't put any efforts to optimize it for speed, your improved loading speed results will most probably be much greater at this point.

With removing unneeded JS and CSS files from our home page, we improved our scores, load time, number of request and the total page size as well. Buon lavoro!

Render-blocking JavaScript and CSS in above-the-fold content

One of the optimizations that Google PageSpeed Insights suggests is also: “Eliminate render-blocking JavaScript and CSS in above-the-fold content”. This is a tricky one. Remember when I said, that it's not good to chase a perfect score in the page speed tools? This is one of the reasons for that.

If we look at our example, the Google tool suggests that the Page Builder front-flex.css should be deferred or loaded asynchronously. We are using the Page Builder by SiteOrigin plugin for building content in our pages. So, if this file is responsible for making our layout of the page look good, then I might not respect Google suggestion and simply ignore it.

“But why would you disrespect Google? How dare you!” Well, this is only a tool and it gives you suggestions on what to do, but it does not know, if implementing some of these changes will break your site or ruin good user experience (UX) for your visitors. For example, if the tools had suggested that we load the style.css file with all the theme styles asynchronously, then it would have created the FOUC: Flash of unstyled content:

This is a bad UX, so I would ignore the suggestion from the tool and keep a good UX instead of improving our score. After all, Google is also using other factors it can gather from your website to rank it in the search results and user experience is one of them. When optimizing the website for speed, don't follow the recommendations blindly and forget about all the other aspects and goals your WordPress website has.

If the files that the tool suggests to be loaded asynchronously are valid candidates and they don't break anything, then of course we can implement that change. The best way is to just try to asynchronously load each suggested file and see, if the page still loads ok. Don't forget to reload the page without browser cache, so that a fresh copy of the page loads. You can do that by hard refreshing your site.

We will look at how to load files asynchronously in the WP Rocket plugin section below. There are other standalone plugins that offer this functionality, but since the WP Rocket has it build in, we don't need to pollute our WP installation with more plugins.

Server Side Caching

We've already talked about browser cache, but now we also have to take care of the server side cache. To understand server side caching we have to know the basics of how WordPress works, so let's look at that first.

When a visitor opens a WordPress page, the following things happen (basic explanation):

1. Server receives a page request.
2. WordPress PHP code begins to execute.
3. WordPress access the database to get the information it needs to build the requested page.
4. WordPress produces the HTML.
5. Server responds with the HTML for the browser to display it to the visitor.

These 5 steps have to be repeated for each page view, for each visitor. That's a lot of repetitive work for content that stays the same for each visitor (if your site is displaying mostly static content, which majority of websites is).

Server side caching eliminates pretty much all the server's hard work. It removes the need for repeating steps 2,3 and 4. So, when we enable server side caching, the process of a page request looks like this:

1. Server receives a page request.
2. Server retrieves the page HTML from the cache (if a cached version is available).
3. Server responds with the HTML for the browser to display it to the visitor.

As you can see, the hard work of running the WordPress code and accessing the database is bypassed, which means that the page loading time should be much faster.

If we look at the Google PageSpeed Insights tool suggestions, we will spot the “Reduce server response time” task. The tool says that our server responded in 0.98 seconds, which is not good. The slow shared hosting I'm using is definitely to blame for some chunk of that 1 second response time, but we'll be able to shorten it with server side caching.

Each page cache is usually saved with an expiration time of 24 hours, but that setting can be changed. This means that instead of thousands of page requests running the whole WordPress HTML building process, it will only be run once a day, to generate that cached page and the server will serve that cached page to other visitors. So, not only the page will be quicker, but the server will also have to do less work.

If you are updating a page in WordPress and an old cached version of the page is still available on your server, then you would have to clear that cache manually (usually with the click of a button) or some tools would do that for you automatically.

Some hosting companies already have a server side caching in place for their users, but this feature is usually available for managed WordPress hosting packages. So, before you follow instructions below, on how to setup server side caching, you should make sure that your server is not doing that for you already.

We will look at how to setup the WP Rocket plugin to enable server side caching and other features that it has (like lazy loading images, loading assets asynchronously, minification of JS and CSS files and much more). WP Rocket is a premium (paid) plugin, but I believe it's worth the investment. If you don't agree with me, that's fine WP Super Cache is a good free alternative, but it does not have the same extra features as WP Rocket and it's a little bit more cumbersome to setup.

WP Rocket (server side caching plugin)

As soon as we install and activate the WP Rocket plugin it will have some basic features enabled out of the box:

• Caching of all the pages for quick viewing.
• Decrease bandwidth usage with our GZIP compression.
• Management of the headers (expires, etags…).

The WP Rocket plugin default settings are a good starting point.

I've run the page speed tools a couple of times, so that they picked up the cached version of the site and these are the new results:

• Google page speed insights
  • Mobile: 91
  • Desktop: 97
• GTmetrix
  • PageSpeed: 97
  • YSlow: 87

The Google PageSpeed Insights tool no longer displays the “Reduce server response time” optimization suggestion, because we reduced it from 1 second to 121ms, that's a 88% improvement in server response time, just by activating the WP Rocket plugin! With this improvement, our fully loaded time is now 1.9 seconds, but we are not stopping here

Diamo un'occhiata alle impostazioni che il plugin WP Rocket ha da offrire. WP Rocket ha un bel menu di scelta rapida nella barra dei menu di amministrazione di WP in alto. Da lì, puoi accedere alla pagina delle impostazioni, svuotare la cache e accedere ad altre informazioni utili su questo plugin.

Prima di continuare e provare diverse impostazioni di WP Rocket, vorrei ricordare che dopo ogni modifica apportata, dovresti verificare il tuo sito in una scheda di navigazione in incognito/privata . Se hai effettuato l'accesso al tuo sito WordPress, non vedrai la versione memorizzata nella cache del sito. Nella scheda del browser in incognito non verrai registrato e otterrai una versione cache del sito, quindi puoi verificare se funziona correttamente.

Sappi anche che abilitare ciascuna impostazione di WP Rocket potrebbe avere risultati diversi o addirittura effetti negativi sulla velocità di WordPress, a seconda del tema o dei plug-in che stai utilizzando, quindi abilitare tutte le impostazioni di WP Rocket non è la strada da percorrere. Dovresti provare ogni impostazione e misurarla con gli strumenti per la velocità della pagina, per vedere la differenza. Come vedrai alcune tecniche non miglioreranno la nostra velocità di pagina, quindi non le useremo.

Cancella cache

La memorizzazione nella cache lato server inizierà a funzionare non appena attivi il plug-in WP Rocket, quindi diamo un'occhiata a come cancellarlo. Puoi svuotare manualmente la cache, se fai clic sulla voce di menu "Svuota cache" nel menu di scelta rapida di WP Rocket. Il plug-in si occuperà anche di svuotare automaticamente la cache quando aggiorni le impostazioni di personalizzazione, cambi/aggiorna widget, categorie, … e cancellerà parzialmente la cache quando aggiorni una pagina. Per ulteriori informazioni su quando avverrà la cancellazione automatica della cache, fare riferimento a questa domanda di WP Rocket.

La cache ha una durata che può essere impostata nella scheda "Base" delle impostazioni di WP Rocket. Suggerisco di impostarlo su 1 giorno.

Precarica cache

Una bella caratteristica di WP Rocket è "Preload cache", che precaricherà la cache della tua home page e le pagine a cui si collega, così i tuoi utenti riceveranno sempre una versione cache della pagina. Potrei utilizzare questa funzione prima di eseguire gli strumenti per la velocità della pagina e non dovrei eseguire gli strumenti più volte per ottenere i risultati della versione memorizzata nella cache.

È possibile accedere alle impostazioni della cache di precaricamento nella pagina delle impostazioni nella scheda "Precaricamento". Cerca l'opzione "Precarica bot", lì troverai un'opzione manuale e un'opzione automatica. Se abiliti l'opzione bot automatico, la cache di precaricamento verrà eseguita ogni volta che aggiorni o crei una pagina o se la cache scade. Questa opzione può influenzare le prestazioni del tuo server, quindi tieni d'occhio i registri delle prestazioni se la abiliti. Se stai aggiornando e creando molti post/pagine e hai un hosting condiviso, ti consiglio di non abilitare questa opzione. Dovresti invece abilitare solo l'opzione manuale del bot, che creerà un'altra voce del menu di scelta rapida di WP Rocket, intitolata "Preload Cache" e precaricherà la cache solo quando fai clic su di essa (dopo aver terminato la modifica di post e pagine).

Nella scheda delle impostazioni "Precarica", troverai anche le impostazioni per precaricare la cache da una mappa del sito, quindi puoi definire una mappa del sito e utilizzerà gli URL nella mappa del sito per precaricare la cache per quelle pagine.

carico pigro

Ho già spiegato il caricamento lento delle immagini nella sezione sull'ottimizzazione delle immagini di questo articolo, ma ora che abbiamo installato WP Rocket, possiamo effettivamente abilitare questa funzione. Vai alla scheda "Base" delle impostazioni di WP Rocket e abilita LazyLoad per le immagini e se stai utilizzando video o iframe, puoi abilitare anche quello.

Dopo aver abilitato questa funzione, dovresti sempre controllare il tuo sito e vedere come vengono caricate le immagini. LazyLoad potrebbe interrompere il layout del tuo sito o potrebbe non piacerti come vengono caricate le immagini (salto di contenuto), quindi controlla sempre le tue pagine. Questa funzione è davvero utile, quando hai molte immagini below-the-fold e ti aiuterà a ridurre il numero di richieste di immagini sul caricamento della pagina originale. Sul nostro sito di test, abbiamo solo 5 immagini below-the-fold, quindi abbiamo salvato 5 richieste di immagini e il nostro tempo di caricamento della pagina è ora sceso a 1,7 secondi, mentre i punteggi degli strumenti per la velocità della pagina sono rimasti gli stessi. Questo è un buon indicatore del fatto che puoi migliorare la velocità della tua pagina con determinate attività che gli strumenti non suggeriscono.

Minimizza file

Alcuni dei suggerimenti di GTMetrix che possiamo ancora migliorare sono di minimizzare i file HTML, CSS e JS. Poiché il nostro tema WordPress e la maggior parte dei plugin consigliati stanno già utilizzando versioni ridotte per i file JS/CSS e abbiamo abilitato Gzip sul nostro server, questa ottimizzazione di WP Rocket non porterà alcun miglioramento significativo per il nostro sito di test, ma il tuo caso potrebbe essere diverso. Vai alla scheda "File statici" nelle impostazioni di WP Rocket e controlla tutte e 3 le opzioni sotto l'opzione Minimizza file . Salva le impostazioni e vai a controllare il tuo sito web in una scheda in incognito/privata, così puoi cercare eventuali problemi che queste opzioni potrebbero portare al tuo sito. Nel mio sito WordPress di prova, la minimizzazione CSS ha interrotto l'accodamento del file CSS flexbox del generatore di pagine, quindi ho dovuto disabilitare l'opzione CSS Minify file. Le opzioni HTML e JS hanno funzionato bene.

Ho chiesto al supporto di WP Rocket quale potrebbe essere il problema e sono stati abbastanza gentili da eseguire il debug di questo problema sul mio sito. Il problema è stato causato dalla cache Varnish utilizzata sul mio hosting condiviso. Hanno suggerito di modificare la configurazione di Varnish sul mio server di hosting. Ho contattato il mio supporto di hosting e, come sospettavo, non posso modificare la configurazione di Varnish sul mio hosting condiviso, ma sarei in grado di farlo, se dovessi eseguire l'aggiornamento al pacchetto di hosting VPS. Come puoi vedere, l'utilizzo di un hosting condiviso non è una buona idea

Se hai riscontrato problemi con la minimizzazione CSS o JS, puoi aggiungere l'URL del file che causava i problemi alla casella dei file JS o CSS esclusi. Trovare il file responsabile dei problemi potrebbe essere complicato, ma di solito sai quale funzionalità è interrotta e quale plug-in è responsabile di tale funzionalità, quindi controlli il codice sorgente della tua pagina e ispezioni i file inclusi da quel plug-in. Se il plug-in ha più file JS o CSS, puoi semplicemente provare ad aggiungerli all'elenco di esclusione e vedere se il problema scompare.

Combina file JS e CSS

La scheda YSlow nello strumento GTmetrix ci dice di "Fai meno richieste HTTP". Dice che il nostro WordPress utilizza 9 script JS esterni e che dovremmo provare a combinarli in 1 e che la pagina utilizza 4 file CSS esterni e dovremmo anche provare a combinarli in 1 file. Se ricordi, abbiamo già rimosso i file JS e CSS non necessari nella sezione Rimuovi file JS o CSS non necessari di questo articolo.

Combinare tutti i file JS e CSS in un unico file non è una buona idea, perché i browser possono scaricare 6 file più piccoli in parallelo, più velocemente di 1-2 file di grandi dimensioni. L'altro motivo è che alcuni dei file sono inclusi nell'intestazione dei documenti HTML e altri alla fine del documento, quindi devi dividerli in almeno 2 file.

Per combinare file con WP Rocket, vai alla scheda "File statici" nelle impostazioni del plug-in e abilita le opzioni in Combina file . Come sempre, verifica il tuo sito in una scheda del browser in incognito/privata per verificare eventuali problemi.

Nel nostro esempio, il WP Rocket ha avuto di nuovo problemi, a causa del problema di configurazione di Varnish dell'hosting condiviso menzionato sopra, quindi ho dovuto disabilitare l'opzione JS combina file.

Ancora una volta, se hai riscontrato problemi con la concatenazione CSS o JS, puoi aggiungere l'URL del file che causava i problemi alla casella dei file JS o CSS esclusi, proprio come nel passaggio di minimizzazione sopra.

Rimuovere le stringhe di query dalle risorse statiche

GTMetrix consiglia di rimuovere le stringhe di query dalle risorse statiche, poiché alcuni server proxy non memorizzano nella cache le risorse con le stringhe di query.

Le stringhe di query in una risorsa statica (solitamente un file JS o CSS) è un attributo URL, che contrassegna la versione di detto file. Si presenta così: ?ver=2.5.8 ed è aggiunto alla fine dell'URL: http://domain.com/css/front-flex.css?ver=2.5.8

Possiamo facilmente rimuovere queste stringhe di query con WP Rocket. Vai alla scheda "File statici" delle impostazioni del plug-in e abilita l'opzione Rimuovi stringhe di query .

Dopo aver abilitato questa opzione, il nostro punteggio GTmetrix PageSpeed ​​è cambiato a 98, ma il tempo di caricamento della pagina non è cambiato.

CSS/JS che bloccano il rendering

L'unico suggerimento dello strumento Google PageSpeed ​​Insights rimasto è "Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold". Ciò significa che sono presenti alcuni file JS o CSS che bloccano il caricamento della pagina nel contenuto above-the-fold. Quello che lo strumento vuole che facciamo è rinviare o caricare in modo asincrono queste risorse di blocco.

Ancora una volta, il plugin WP Rocket viene in soccorso. Vai alla scheda "File statici" e cerca le opzioni CSS/JS che bloccano il rendering . Lì puoi abilitare le opzioni JS e CSS che possono risolvere questo problema. Dopo aver abilitato l'opzione JS, apparirà un'opzione Modalità provvisoria (consigliata) . Questa modalità provvisoria caricherà la libreria jQuery (libreria accodata predefinita di WP) nell'intestazione della pagina, lasciandola come file di blocco, ma non interromperà le pagine che hanno codice jQuery in linea nella pagina. Poiché jQuery è ancora caricato nella testata, lo strumento PageSpeed ​​si lamenta ancora del fatto che abbiamo un file JS che blocca il rendering.

Quindi, se disabilito la modalità provvisoria per il nostro sito di test, lo strumento Google PageSpeed ​​ci dà un punteggio perfetto, 100 su dispositivi mobili e 100 su desktop. Ottimo, vero? Non proprio! Il nostro sito Web funziona ancora correttamente, ma diamo un'occhiata a come viene caricato il sito Web:

Il flash di contenuto non stilizzato (FOUC) può essere risolto utilizzando l'opzione CSS del percorso critico nelle impostazioni di WP Rocket (appena sotto l'opzione CSS/JS di blocco del rendering). La teoria è che potresti aggiungere il codice CSS necessario per la parte above-the-fold della pagina, in modo che questo effetto flash di testo senza stile non appaia al caricamento della pagina. Questo è più difficile di quanto sembri. Ci sono strumenti che dovrebbero generare questo CSS critico per te, ma non ho avuto molto successo con loro.

Per generare il codice CSS del percorso critico:

1. Disabilita il plug-in WP Rocket sul tuo sito.
2. Vai allo strumento Generatore CSS percorso critico.
3. Inserisci l'URL del tuo sito ed eseguilo.
4. Copia il codice CSS del percorso critico.
5. Attiva il plugin WP Rocket.
6. Incolla il codice CSS nella casella "Percorso critico CSS" nelle impostazioni di WP Rocket.
7. Controlla se ci sono percorsi URL relativi nel codice CSS critico e cambiali in percorsi assoluti.

Ecco come appare ora il caricamento del nostro sito di test WordPress:

È meglio, ma ancora non mi piace. Sì, il punteggio di Google PageSpeed ​​di 100/100 è ottimo, ma il tempo di caricamento totale è più lento e abbiamo anche altre 2 richieste perché abbiamo abilitato questa opzione CSS/JS per il blocco del rendering. Il problema principale per me è ancora l'esperienza utente del caricamento della pagina, quindi ho disabilitato questa opzione WP Rocket.

WP Rocket è sicuramente un plug-in che ogni proprietario di un sito Web WordPress dovrebbe utilizzare, poiché ha tutte le funzionalità per velocizzare il tuo sito. La semplice attivazione del plugin ti darà una spinta enorme. Altre funzionalità devono essere testate per ogni sito Web, poiché ogni tema e plug-in può portare i propri problemi al mix.

Siamo quasi alla fine dei nostri passaggi di ottimizzazione. L'unica cosa rimasta è utilizzare una CDN per le risorse del nostro sito web.

Rete di distribuzione dei contenuti (CDN)

Ho già menzionato alcune volte in questo articolo, che i tempi di caricamento della pagina differiscono, a seconda della posizione del server e della posizione del visitatore. Ad esempio, il mio server di hosting condiviso che stiamo utilizzando per il test si trova ad Austin, in Texas (USA) e all'inizio nella sezione dello strumento di velocità della pagina Pingdom di questo articolo abbiamo testato 4 località. Ecco i risultati:

• Dallas, Texas (Stati Uniti) = 1,65
• San Jose, California (Stati Uniti) = 2,53
• Stoccolma, Svezia (UE) = 3,06 s
• Melbourne (AUS) = 5,38s

Ora che abbiamo ottimizzato il sito, con tutti i passaggi menzionati in questo articolo, i nostri tempi di caricamento sono:

• Dallas, Texas (Stati Uniti) = 0,63 secondi
• San Jose, California (Stati Uniti) = 0,76 s
• Stoccolma, Svezia (UE) = 1,21 s
• Melbourne (AUS) = 2,24s

Utilizzeremo questi tempi per confrontare il nostro tempo di caricamento di WordPress, quando impostiamo il nostro sito per utilizzare una CDN.

Possiamo vedere che questi tempi sono molto diversi; questo perché i dati devono viaggiare più a lungo dalla posizione del nostro server al visitatore australiano, rispetto a un visitatore a Dallas. È qui che una CDN ci aiuterà a ridurre i tempi di caricamento.

Una CDN è una rete geograficamente distribuita di proxy server e relativi data center. Il loro obiettivo principale è distribuire il contenuto del tuo sito ai tuoi visitatori da un server più vicino al visitatore. Ciò significa che i contenuti statici del tuo sito web (immagini, JS, CSS, ...) saranno serviti dai loro server, che sono sparsi in tutto il mondo, rendendo il tuo sito più veloce da caricare per tutti.

L'utilizzo di un CDN di WordPress ha una moltitudine di vantaggi tra cui:

• Latenza decrescente, che è il tempo e/o il ritardo che la distanza deve percorrere.
• Riduce il tempo al primo byte (TTFB), che è una misura del tempo che il browser deve attendere prima di ricevere il suo primo byte di dati dal server.
• Offre il contenuto dalla cache per tempi di caricamento della pagina più rapidi e meno sforzo sul server di hosting (origine).
• Utilizza HTTP/2 su connessioni sicure per sfruttare multiplexing, parallelismo, server push e compressione HPACK.
• Comprime i dati con GZIP o Brotli per garantire file HTML, fogli di stile e JavaScript più piccoli.

Le CDN in questi giorni offrono un sacco di altre funzionalità, specialmente nel dipartimento di sicurezza. Di solito offrono protezione DDoS, rilevamento/prevenzione bot e così via.

Vedremo uno dei CDN più popolari, chiamato Cloudflare. Offrono un pacchetto gratuito, che include l'uso della loro CDN globale ed è quello di cui abbiamo bisogno.

Cloudflare

Per prima cosa vai su cloudflare.com e registrati per un nuovo account gratuito. Dopo aver creato un account, dovrai configurare il tuo sito Web su Cloudflare, in modo che possa servire il tuo contenuto statico (asset).

Quando accedi al tuo nuovo account Cloudflare, ti verrà chiesto di aggiungere il tuo sito web (dominio) per recuperare automaticamente i record DNS.

Inserisci il tuo dominio e fai clic su "Inizia scansione". Anche se sto usando un sottodominio ( speed.gregorcapuder.com ), ho dovuto inserire solo il dominio principale: gregorcapuder.com . La parte di scansione ha richiesto circa un minuto per essere completata e nel frattempo puoi guardare un breve video, che spiegherà cosa sta succedendo. Al termine della scansione, è possibile fare clic sul pulsante "Continua".

Nel passaggio successivo, vedrai tutti i record DNS che Cloudflare potrebbe trovare per il nostro dominio. Qui devi aggiungere tutti i record che potrebbero mancare, quindi sfoglia l'elenco e controlla se manca qualcosa. Nel nostro esempio mancava il sottodominio della velocità, quindi l'ho aggiunto all'elenco. Nel nome inserito ho inserito “speed” (nome del mio sottodominio), nell'indirizzo IPv4 ho inserito lo stesso indirizzo IP del mio dominio principale (gregorcapuder.com) e poi ho cliccato su “Aggiungi Record”. Come puoi vedere nello screenshot qui sotto, ho abilitato Cloudflare per il mio dominio principale e per il sottodominio della velocità (contrassegnato da una nuvola arancione con una freccia che corre dietro la nuvola). Ciò significa che su questi due siti Web il traffico sarà gestito e protetto da Cloudflare.

Quando hai finito con i record DNS, puoi continuare con il passaggio successivo, dove selezioni il piano "Sito web gratuito" e prosegui.

L'ultimo passaggio per abilitare Cloudflare per il tuo sito Web è accedere alla dashboard del registrar di domini (da cui hai acquistato il dominio) e modificare i server dei nomi per il tuo dominio. Si afferma che possono essere necessarie fino a 48 ore prima che i nuovi server dei nomi abbiano effetto, ma nel mio caso è stato aggiornato in 1 ora. Nel frattempo non ci saranno tempi di inattività del sito Web, quindi non preoccuparti.

Una volta che i server dei nomi sono stati aggiornati per il tuo sito, vedrai lo stato del tuo sito Web Cloudflare cambiare in "attivo".

Ho lasciato tutte le impostazioni di Cloudflare nella dashboard come predefinite, l'unica cosa che ho cambiato è stato il livello di sicurezza. Vai alla scheda Firewall e regola il "Livello di sicurezza" su Basso . Questo perché non voglio che i miei visitatori ricevano una "pagina di sfida" su un falso rilevamento di un utente malintenzionato.

Ora che abbiamo configurato il lato Cloudflare, dovremmo anche abilitare le impostazioni Cloudflare sul nostro plugin WP Rocket.

Accedi alla dashboard di amministrazione di WordPress e vai alle impostazioni del plug-in WP Rocket. Passare alla scheda "CDN", abilitare la scheda Mostra impostazioni Cloudflare e salvare le impostazioni. Questo mostrerà una nuova scheda "Cloudflare" nelle impostazioni di WP Rocket e dovresti aprirla. Lì dovresti inserire l'e-mail dell'account Cloudflare, il dominio e dovresti anche copiare e incollare la chiave API globale di Cloudflare. Per recuperare la chiave API globale, vai alla dashboard di Cloudflare (scheda Panoramica) e fai clic sul link "Ottieni la tua chiave API". Vedrai una sezione "Chiave API" in questa nuova pagina e dovresti fare clic sul pulsante "Visualizza chiave API" per la riga "Chiave API globale". Dopo aver incollato la chiave API globale nelle impostazioni di WP Rocket, suggerirei anche di abilitare l'opzione "Impostazioni ottimali" in WP Rocket. Salva le impostazioni e quindi fai clic sul pulsante "Cancella cache Cloudflare", solo per verificare che tutto funzioni correttamente.

Ora, che la CDN è configurata, possiamo testare nuovamente i tempi di caricamento da diverse posizioni e vedere i miglioramenti (test Pingdom).

• Dallas, Texas (Stati Uniti) = 0,54
• San Jose, California (Stati Uniti) = 0,70 s
• Stoccolma, Svezia (UE) = 0,91 s
• Melbourne (AUS) = 1,16s

Come previsto, i tempi di caricamento europei e australiani sono i più migliorati. E tutti i nostri tempi di caricamento sono di circa 1 secondo o inferiori. Questo è un ottimo tempo di caricamento!

Quando stai testando il tuo sito, non testarlo con una sola esecuzione dello strumento di velocità della pagina per una posizione. Devi provarlo un paio di volte. Quando esegui per la prima volta lo strumento per una determinata posizione, i file memorizzati nella cache devono essere prima archiviati sul server Cloudflare più vicino, ogni test successivo dovrebbe mostrarti il ​​vero tempo di caricamento della versione memorizzata nella cache. Ti suggerirei di testare 3-5 volte, per ottenere una buona media della velocità di caricamento della tua pagina da una posizione particolare.

Risultati finali

I nostri punteggi finali dello strumento per la velocità della pagina sono:

• Approfondimenti su Google PageSpeed
  • Cellulare: 91
  • Desktop: 97

• GTmetrix
  • Velocità di pagina: 98
  • YLento: 91

Ecco gli screenshot:

Confrontiamo i dati GTmetrix prima e dopo la nostra ottimizzazione:

Abbiamo migliorato le prestazioni del nostro sito web in ogni modo. Il sito Web si carica più velocemente, richiede meno richieste per visualizzare il sito all'utente, richiede meno larghezza di banda e si carica velocemente per i visitatori di tutto il mondo. Allo stesso tempo, abbiamo mantenuto tutte le funzionalità e lo stile del nostro sito Web come all'inizio. Eccezionale!

Per la fine abbiamo preparato una bella rappresentazione visiva dei risultati per ogni singola fase di ottimizzazione che abbiamo completato:

Conclusione

In questa guida definitiva all'ottimizzazione della velocità della pagina di WordPress, abbiamo esaminato i passaggi più importanti che puoi intraprendere per migliorare drasticamente le prestazioni del tuo sito web. Seguire i consigli di questo articolo renderà il tuo sito snello e veloce, migliorando il tempo di caricamento della tua pagina e quindi l'esperienza utente. Questi miglioramenti potrebbero anche portare più soldi e aiutarti a risparmiare alcuni sui costi del server, quindi è una vittoria per tutti!

Vorrei concludere questo articolo dicendo che la velocità non è tutto, è un altro pezzo del puzzle di un sito web. Costruiamo siti Web per esseri umani, potenziali clienti, quindi tienilo sempre a mente. Trova un buon equilibrio tra contenuto, multimedia, design, esperienza utente e velocità della pagina. Non essere ossessionato dalla velocità della pagina e dai punteggi degli strumenti per la velocità della pagina. Finché migliorerai l'esperienza dei tuoi visitatori, il tuo obiettivo sarà raggiunto.

Mi sono perso qualche passaggio di ottimizzazione del sito Web, che pensi possa apportare un miglioramento cruciale al tempo di caricamento della pagina? Fammi sapere nei commenti qui sotto!

Se trovi utile il nostro articolo e ne hai seguito i passaggi, per favore fatemi sapere nei commenti qui sotto, che tipo di miglioramenti hai ottenuto.