Come rendere più veloce il caricamento del tuo sito Web WordPress utilizzando i plugin

Avere un bel sito web con molti ottimi contenuti è importante se vuoi catturare l'attenzione dei lettori. Sfortunatamente, se la tua pagina si carica troppo lentamente, i lettori potrebbero non vedere mai i tuoi contenuti. Come mai? Hai solo pochi secondi per attirare la loro attenzione e impedire loro di passare al sito successivo. I lettori non vogliono aspettare che i tuoi contenuti vengano caricati. Più lunga è l'attesa, più è probabile che li perderai.

Per questo motivo è estremamente importante ottimizzare la velocità di caricamento della pagina. Esistono diversi buoni strumenti online per misurare la velocità e risolvere i problemi. Uno degli strumenti più popolari è Google PageSpeed ​​Insights.

Approfondimenti sulla velocità della pagina

Google PageSpeed ​​Insights è uno strumento online gratuito che testerà la velocità di caricamento di qualsiasi sito Web, identificherà i problemi, darà loro la priorità e fornirà suggerimenti per risolverli.

Per questo articolo sto usando il mio sito che usa Divi di Elegant Themes come blog di base. Sto mostrando cosa deve essere corretto, quali suggerimenti fornisce lo strumento e come li ho corretti. Il punteggio fornisce risultati sia per dispositivi mobili che desktop. Mi sto concentrando sul desktop. Alcuni dei problemi mobili verranno risolti lungo il percorso.

La maggior parte di questi problemi verrà risolta utilizzando i plugin. Quando si decide su un plug-in, attenersi ai plug-in che sono stati aggiornati di recente e hanno una buona reputazione. Molti plugin risolveranno più di un problema.

Un avvertimento: alcuni plugin non funzionano bene con altri perché entrambi cercano di fare lo stesso lavoro. Questo potrebbe avere un effetto diverso da quello che vuoi. Ti consiglio di provarli su un sito di prova prima di usarli sul tuo sito principale. Non solo i plugin stessi, ma anche le combinazioni di plugin. Prima di provare i plugin sul tuo sito live, assicurati di avere un backup recente.

Il mio punteggio

Il mio punteggio è un terribile 46 . La prima cosa da notare è che ci sono tre diverse sezioni nei risultati:

• Dovrebbe risolvere (2 articoli)
• Considera la possibilità di riparare (6 articoli)
• Passato (2 articoli)

Ogni sezione si espande per mostrare quali sono i problemi e danno consigli su come risolverli. Ho scoperto che è meglio iniziare con il primo articolo e andare in ordine. Risolverli in ordine risolverà anche altri problemi nell'elenco.

Nota: ho anche avuto alcuni fallimenti lungo la strada. Li ho inclusi in modo che tu possa essere a conoscenza di possibili problemi.

Dovrebbe risolvere

Ho due elementi che richiedono attenzione immediata:

• Abilitare la compressione
• Elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold

Abilitare la compressione

Il mio problema più importante è che non sto usando la compressione. Dimostra che posso ridurre le dimensioni del trasferimento dei file del 79%. Questo può essere fatto usando gzip o deflate.

Aumento del punteggio di prestazione del WP

Questo plug-in gratuito ha la compressione gzip e risolverà molti altri problemi come CSS e JavaScript rimuovendo le stringhe di query, aggiungendo vary: accept-encoding header e set scade la memorizzazione nella cache. L'ho scelto perché ha un 4.7/5 con oltre 10.000 installazioni attive. È stato sviluppato per accelerare il caricamento della pagina e migliorare i test del punteggio della pagina.

Questo mi ha dato un punteggio di 78 con un messaggio per ridurre i tempi di risposta del server. Questo ha molto a che fare con il mio piano di hosting. Sto risolvendo questo problema spostando il mio sito Web su un nuovo piano di hosting. Questo va oltre lo scopo di questo articolo.

Una cosa interessante di questo è che ha risolto alcuni dei principali problemi con il prossimo problema: elimina JavaScript e CSS che bloccano la visualizzazione nei contenuti above-the-fold. Questo problema è stato ora spostato in Considera la risoluzione. Ha anche risolto completamente l'utilizzo della memorizzazione nella cache del browser. Il sito ora sta superando 4 regole mentre prima ne superava solo 2.

Riduci il tempo di risposta del server

La cosa strana è che il tempo di risposta del server è passato da .96 a 1.4. Riduci il tempo di risposta del server era ora in Dovrebbe essere risolto. Ciò richiedeva un plug-in di memorizzazione nella cache.

Cache totale W3

W3 Total Cache è di gran lunga il plugin più popolare per velocizzare le prestazioni del server del tuo sito web. Ha quasi un milione di installazioni attive e una valutazione di 4,4/5. Ottimizza il tuo sito tramite la memorizzazione nella cache. Puoi scegliere le diverse opzioni di memorizzazione nella cache individualmente. Includono pagina, database, oggetto e browser. Metterà nella cache le intestazioni di scadenza futura e i tag di entità, i feed e i risultati di ricerca. Ha anche funzionalità per minimizzare JS, CSS e HTML. Accelererà il tuo punteggio di PageSpeed ​​di Google almeno 10 volte quando è completamente configurato.

L'ho provato con tutte le funzionalità di memorizzazione nella cache attivate. Questo ha portato il mio punteggio a 86 . Per la prima volta il mio sito è ora inattivo e tutti i problemi che ho avuto erano in corso di valutazione. Ora supera 5 regole, incluso il tempo di risposta del server che ora dice "il server ha risposto rapidamente".

Considera la correzione

Quando ho eseguito il test per la prima volta, questa sezione ha avuto più problemi rispetto a quando finalmente ci sono arrivato. Molti di questi problemi sono stati risolti quando ho risolto i problemi nell'area Da risolvere.

I problemi originariamente includevano:

• Sfrutta la memorizzazione nella cache del browser
• Tempo di risposta del server
• Riduci JavaScript
• Ottimizza le immagini
• Minimizza CSS
• Minimizza HTML

Ecco uno sguardo ai problemi attuali.

Elimina JavaScript e CSS che bloccano il rendering nei contenuti above-the-fold

JavaScript e CSS possono essere above the fold possono rallentare il caricamento della pagina caricando troppo il browser. Devono caricarsi prima che qualsiasi altra cosa above the fold possa essere caricata.

Ci sono diversi modi per risolverlo:

• Rinviare il caricamento
• Carica in modo asincrono
• Inlineli direttamente nell'HTML

Ecco i plugin che ho usato per risolvere questo problema.

Ottimizza automaticamente

Questo plugin minimizzerà (rimuoverà tutta la formattazione non necessaria e ridurrà le dimensioni del file e verrà caricato sul browser) e comprimerà JavaScript, CSS e HTML. Aggiungerà le intestazioni scadute e le inserirà nella cache. Sposterà i tuoi stili nell'intestazione della pagina e gli script nel piè di pagina. Utilizzando le impostazioni avanzate puoi adattarlo alle tue esigenze specifiche.

Ciò risolverà anche alcuni problemi come la minimizzazione di JS e CSS in fondo all'elenco.

All'inizio ho appena attivato le impostazioni di base per HTML, JS e CSS. Questo ha portato il mio punteggio a 88 e ha ridotto i problemi a 3 risorse CSS. Uno è stato creato dal plug-in stesso e gli altri due sono caratteri di Google. Ora supera 7 regole. Ha risolto Minify CSS e Minify HTML.

Minimizza WordPress migliore

Lo scopo principale di questo plugin è ridurre al minimo i tuoi CSS e JS, ma ha anche una funzione interessante che ti consente di spostare i tuoi file nel footer o in altre posizioni (motivo per cui l'ho scelto). Utilizza un sistema di accodamento per migliorare la compatibilità con browser, plugin e temi.

Quando l'ho installato, tutte le impostazioni di layout per il mio tema sono state rimosse e tutti i miei menu, immagini, collegamenti, ecc. Sono apparsi all'estrema sinistra dello schermo. Fortunatamente la formattazione è tornata quando l'ho disinstallata. Potrebbe essere stato qualcosa nelle impostazioni che doveva essere regolato. Sono sicuro che questo è un buon plugin perché ha oltre 60.000 installazioni attive e una valutazione di 4,4/5. Ho incluso questo solo come avviso che potrebbe non funzionare nel modo in cui ne hai bisogno senza alcune impostazioni.

Poiché il mio punteggio era 88 e sapevo quali fossero i 3 problemi, ho deciso di passare al problema successivo.

Ottimizza le immagini

La dimensione dell'immagine gioca un ruolo importante nella velocità di caricamento della pagina. A volte puoi utilizzare dimensioni dell'immagine molto più piccole e una qualità inferiore senza molte differenze visive quando visualizzate sul Web. Ciò non solo accelera il tempo di caricamento e utilizza meno larghezza di banda, ma accelera anche i tempi di backup e riduce lo spazio di archiviazione sul server.

Ottimizzatore di immagini EWWW

Questo plugin ottimizzerà automaticamente le tue immagini mentre le carichi e le convertirà nel formato che produce la dimensione più piccola. Ottimizzerà anche le immagini che hai già caricato. Puoi anche farlo applicare riduzioni con perdita per immagini PNG e JPG.

Quando l'ho installato c'erano diversi file che voleva che trovassi e installassi. Penso che questo plugin funzionerebbe benissimo con tutti i file installati, ma ho deciso di trovarne uno che funzionasse immediatamente.

WP Smush

Questo plugin ridurrà la dimensione del file delle immagini senza ridurre la qualità. Lo fa eliminando le informazioni nascoste. Analizzerà i tuoi file e ti dirà quante immagini devono essere cancellate. Puoi schiacciarli alla rinfusa.

La versione gratuita non distrugge nulla oltre 1 MB e ne distruggerà solo 50 alla volta. Per di più avrai bisogno di WP Smush Pro, che smusserà immagini fino a 32 MB senza alcun limite di quante alla volta. Fa un backup degli originali se ne hai bisogno. I prezzi partono da $ 19 al mese.

Avevo 114 immagini che avevano bisogno di smushing. 8 di queste immagini superavano 1 MB. Ho deciso di aggiustarli a mano. Ha cancellato 98 immagini e ridotto le dimensioni del file di 4,79 MB (8,82%).

Questo ha portato il mio punteggio a 90 . Google Insights ha identificato 5 immagini che non gli piacevano ma nessuna superava 1 MB. Variavano da 0,7 KB a 17 KB.

Ottimizzazione manuale delle immagini

Puoi ottimizzare le immagini manualmente ridimensionandole, riducendo la qualità e modificando il formato. Uno dei miei strumenti preferiti e più utilizzati per la gestione delle immagini è Paint.NET. È un'app gratuita per la modifica di immagini e foto per Windows che ha molte funzionalità per ridurre le dimensioni del file. Qual è il tuo preferito?

Minimizza JavaScript, CSS e HTML

pensavo di averlo risolto...

Mentre stavo risolvendo gli altri problemi, ho visto che l'unico messaggio da minimizzare era per JavaScript. Dopo aver ottimizzato le mie immagini, tutti e tre i problemi sono tornati. Sono tornato sui miei passi per capire cosa fosse successo.

Provando Better WordPress Minify e poi disattivandolo, i miei messaggi per minimizzare CSS e HTML sono tornati. Il mio punteggio è sceso a 88 e ora ero tornato ad avere 5 regole approvate. Ho attivato le funzionalità di minimizzazione di W3 Total Cache e ora ha superato tutti i problemi di minimizzazione. Ora avevo un punteggio di 88 e ha superato 8 regole. Inoltre, aveva sei file above the fold. Sapevo di aver risolto alcuni di questi, quindi devo aver cambiato qualcosa.

Ho eseguito un po' di risoluzione dei problemi e ho scoperto che avevo disattivato Autoptimize quando in precedenza ho riscontrato il problema con Better WordPress Minify. Ho riattivato Autoptimize, disattivato Minify da W3 Total Cache e svuotato la cache (passaggio molto importante!). Ora ho avuto il mio punteggio di 90 indietro e il sito ha superato 8 regole. Era tornato a tre file CSS above the fold e un messaggio per ottimizzare le immagini.

Sulla base della mia esperienza passata ho deciso di non perdere tempo con questi file. Penso che Google odi le immagini di qualsiasi dimensione (non importa quanto piccole le ricevo, ricevo comunque un messaggio per ridurre le dimensioni) e passare da un PageScore di 46 a 90 è una vittoria nel mio libro. Ho imparato a mie spese a fermarmi mentre sei in vantaggio.

Punteggio finale

Il mio punteggio finale era 90/100. I plugin che ho usato per ottenere questo punteggio sono:

• Ottimizza automaticamente (tutte le funzioni attivate)
• W3 Total Cache (solo le funzioni di memorizzazione nella cache delle pagine attivate)
• WP Performance Score Booster (tutte le funzioni attivate)
• WP Smush (edizione gratuita)

Per la cronaca, il punteggio mobile è passato da 36 a 78. Per risolverlo avrei dovuto ottimizzare le mie immagini e i miei file per dispositivi mobili.

Pensieri finali

I tuoi visitatori, Google e altri motori di ricerca odiano i siti Web che si caricano lentamente. Utilizzando Google PageSpeed ​​Insights puoi sapere esattamente quali sono i problemi e ottenere suggerimenti su come risolverli. Una manciata di plugin gratuiti è tutto ciò che serve per passare da un sito lento che Google odia a un sito veloce che Google ama. Fai solo attenzione a sperimentare: alcuni plugin non funzionano bene con altri.

Mi piacerebbe avere tue notizie. Hai ottimizzato il tuo sito Web WordPress utilizzando Google PageSpeed ​​Insights? La tua esperienza è stata simile alla mia? Hai usato plugin diversi per risolvere i problemi? Mi piacerebbe sentire la tua esperienza nei commenti.