Questa guida include 9 suggerimenti per mostrarti come portare praticamente qualsiasi sito WordPress a un tempo di caricamento massimo di 1-2 secondi. Riceve aggiornamenti regolari ed è stato esteso nel primo trimestre del 2020 per includere un paio di suggerimenti bonus extra.
Se hai selezionato un partner di hosting e risorse (tema, plug-in e così via) create da zero per la velocità e per aspettarti di funzionare bene con grandi quantità di traffico (molti non lo sono), allora puoi raggiungere frazioni di secondo per i tempi di caricamento per pagina, il tuo sito memorizzato nella cache dovrebbe gestire facilmente picchi di oltre 500 visitatori simultanei e 20k o più al giorno le visualizzazioni di pagina non dovrebbero essere un problema. Questa guida ti aiuterà anche a ottenere il massimo dei voti su benchmark sintetici come GTMetrix e Google Page Speed.
Ecco una panoramica di ciò che stiamo per approfondire:
IN QUESTO ARTICOLO
Prendi la strada facile…
Semplicemente ospitando il tuo sito Web WordPress con Websavers e abilitando un plug-in di memorizzazione nella cache come WP Super Cache o WP Rocket + plug-in di ottimizzazione delle immagini come Imagify o ShortPixel, otterrai ogni singolo passaggio di questa guida fatto per te o automatizzato. Bello eh?
CONTROLLAContinua a leggere per iniziare!
Questa guida non :
- Aiutarti a risolvere i problemi con il tuo provider di hosting o le loro scarse prestazioni. L'utilizzo di un host WordPress di alta qualità fa un'enorme differenza.
- Aiutarti con problemi con plug-in o temi che potrebbero rallentare notevolmente le cose o contribuire a punteggi di benchmark sintetici scadenti. Ad esempio, molti plugin e temi effettuano chiamate a risorse esterne che non puoi controllare, il che ridurrà intrinsecamente la velocità (e i punteggi di riferimento) per il tuo sito. Allo stesso modo, molti plugin e temi utilizzano pratiche di codifica scadenti che richiedono inutilmente un'elaborazione pesante dei dati. Pertanto potrebbe essere necessario disabilitare parti del tuo sito Web (tema, plug-in, ecc.) Affinché funzioni correttamente con il tuo plug-in di memorizzazione nella cache. Se utilizzi temi e plug-in ottimizzati per le prestazioni, scoprirai che l'abilitazione della memorizzazione nella cache funzionerà perfettamente senza troppi problemi.
- Consentiti di avere la tua torta e anche di mangiarla:potresti dover accettare una perdita di funzionalità o qualità a favore di prestazioni migliori e punteggi massimi su benchmark sintetici come Google PageSpeed Insights . Se ti piacciono le immagini di qualità eccezionalmente elevata che sono ciascuna 1 MB o file video non sufficientemente compressi, non otterrai mai il massimo dei voti sulle utilità di benchmarking del sito web. Allo stesso modo, se hai una parte del tuo sito che carica contenuto dinamico a ogni caricamento della pagina, potrebbe essere necessario disattivare tale funzionalità o trovare un altro modo per caricarlo per prestazioni ottimali.
Se stai riscontrando un problema in cui una pagina impiega più di 10 secondi prima che inizi a caricare il contenuto, spesso c'è un problema di fondo con WordPress o la configurazione di hosting che devi risolvere prima di passare alla memorizzazione nella cache per una soluzione. Fai clic qui per ricevere assistenza nella risoluzione dei problemi relativi al caricamento improvviso delle pagine molto lento.
Se sei a tuo agio con tutte le istruzioni in questo articolo, allora dovresti farle tutte per migliorare le prestazioni del tuo sito web. Se sei un utente di base, va bene anche completare solo le sezioni con cui ti senti a tuo agio. Vedrai comunque un miglioramento delle prestazioni, ma non tanto quanto quando sarai in grado di completare tutte le opzioni.
Alcune parti forniranno enormi miglioramenti del tempo di caricamento, mentre altre saranno trascurabili. Alcune parti faranno sì che un test di velocità sintetico come il test di velocità PageSpeed o GTMetrix di Google consideri molto bene il tuo sito, ma potrebbe non creare una differenza nei tempi di caricamento del mondo reale. Tale è la natura degli strumenti sintetici di benchmarking.
Senza ulteriori indugi, ecco 9 cose che puoi fare per migliorare notevolmente le prestazioni del tuo sito web:
1. Utilizza un host web attento alle prestazioni
Se il tuo provider di web hosting carica i propri server con migliaia di siti web o non sa come ottenere il massimo dai propri server, è inevitabile che tu incontri frequenti rallentamenti.
Se utilizzi un hosting condiviso, assicurati che il tuo host limiti artificialmente il numero totale di siti per server per garantire che il tuo sito disponga delle risorse necessarie per funzionare bene. Se hai il tuo VPS, chiedi al tuo host come è configurato e quali parti della configurazione sono progettate per garantire le massime prestazioni. Se la loro risposta non include cose come archiviazione SSD, server web nginx o lightspeed e configurazioni ottimizzate personalizzate per servire file di cache statici, allora è il momento di trovare un host web WordPress migliore.
Se sei molto preoccupato per le prestazioni, si consiglia di ottenere un proprio VPS per garantire che il proprio sito disponga di risorse dedicate. Consigliamo spesso di provare prima il nostro hosting condiviso sotto carico e, se ritieni di aver bisogno di prestazioni ancora maggiori, puoi sempre passare a un VPS.
2. Utilizza l'ultima versione di PHP
Puoi dare un'occhiata ad alcune delle metriche qui. Se puoi utilizzare PHP 8.x o 7.4, fornirà un ulteriore miglioramento delle prestazioni del 30-70% rispetto a 7.2 e versioni precedenti. Ma prendi nota:non noterai questo miglioramento sulle pagine front-end memorizzate nella cache. Questo miglioramento delle prestazioni sarà visibile nei tempi di caricamento della pagina quando il tuo plug-in di memorizzazione nella cache memorizza per la prima volta la pagina e quando attraversi l'area di amministrazione di WordPress.
Sembra fantastico... ma come si usa?
- Per prima cosa, accedi a Plesk
- Sotto il dominio in questione, vai su "Impostazioni PHP"
- Ci saranno due menu a discesa nella parte superiore della pagina; uno per la versione PHP, uno per il gestore PHP. Per la versione, prova l'ultima versione, quindi se riscontri problemi ripetutamente, abbassa una versione fino a quando il sito non funziona. Se fai riscontri problemi con l'ultima versione di PHP, alla fine la soluzione migliore sarà trovare l'origine del problema e risolverlo, ad esempio aggiornando un plug-in o un tema incompatibile, tuttavia riconosciamo che ciò non è sempre possibile.
- Scorri fino in fondo e fai clic su "OK" o "Applica"
3. Abilita la compressione Brotli o Gzip
Stai utilizzando l'hosting condiviso di Websavers o un VPS con supporto pratico? In tal caso, abbiamo già abilitato la compressione Brotli (con gzip fallback) per te! Non hai ancora sperimentato la differenza dei Websavers? Bene, speriamo di vederti presto.
Se non ospiti con noi, la maggior parte dei plug-in di memorizzazione nella cache si occupa di questo per te, tuttavia, in caso contrario, aggiungi questi valori al tuo file .htaccess per la compressione GZIP sul tuo sito web:
<IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml </IfModule>
Questo dice ad Apache di comprimere tutto il contenuto compatibile prima di inviarlo, risparmiando tempo e larghezza di banda!
Usi solo Nginx? Usalo nelle direttive Nginx per abilitare brotli con gzip fallback:
brotli on; brotli_types text/plain text/css application/json application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript; gzip on; gzip_disable "MSIE [1-6]\\.(?!.*SV1)"; gzip_proxied any; gzip_comp_level 5; gzip_types text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml; gzip_vary on;
4. Abilita scadenza lunga per la cache del browser
Per prima cosa è importante capire cos'è esattamente la memorizzazione nella cache del browser. Qualcuno ti ha mai detto di "svuotare la cache" sul tuo browser? Questo perché i browser moderni sono configurati per scaricare copie di risorse (HTML/CSS/JS/Immagini) per accelerare la velocità della pagina nelle visite successive. Per impostazione predefinita, tuttavia, alcuni di questi elementi sono impostati per "scadere" molto rapidamente, il che non aiuta molto con la velocità!
In una sezione successiva parleremo dell'utilizzo di un plug-in di memorizzazione nella cache per WordPress. Se utilizzi un server Web Apache rigorosamente, tutti i plug-in di memorizzazione nella cache abiliteranno anche i valori di scadenza lunga per la memorizzazione nella cache del browser .
Questo non è consigliato se stai ancora sviluppando il tuo sito. Applica questa configurazione solo quando il sito è attivo.
Detto questo, se il tuo sito è attivo e vuoi ottenere un po' più di prestazioni, puoi configurare il tuo server in modo da dire ai visitatori per quanto tempo conservare determinate risorse.
Queste direttive vengono inviate dal server per istruire il browser di ogni visitatore per quanto tempo "trattenere" i vari tipi di file.
Usi il server web Apache?
Aggiungi quanto segue al tuo file .htaccess.
## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType text/html "access plus 1 week" ExpiresByType application/x-compressed "access plus 1 week" ExpiresByType application/x-gzip "access plus 1 week" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/x-javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 1 week" </IfModule> ## EXPIRES CACHING END ##
Utilizzo di nginx con Plesk
- Accedi a Plesk e vai su "Impostazioni Apache e nginx" sotto il dominio che stai ottimizzando
- In Scade> Inserisci un valore personalizzato inserisci 365 giorni . e seleziona la casella:risposta con intestazioni Expires solo per file statici
- Seleziona le caselle accanto a Elaborazione intelligente dei file statici e Servire file statici direttamente da nginx
Nel caso in cui l'opzione "Servisci file statici direttamente da nginx" non abbia tutte queste estensioni di file statici elencate (con spazi o | tra di loro), incolla questo nella casella fornita:
ac3|atom|avi|bmp|bz2|css|csv|cue|dat|doc|docx|dts|eot|exe|flv|gif|gz|htm|html|ico|img|iso|jpeg|jpg|js|map|mid|midi|mkv|mp3|mp4|mpeg|mpg|m4a|ogg|ogv|otf|pdf|png|ppt|pptx|qt|rar|rm|rss|rtf|svg|svgz|swf|tar|tgz|ttf|txt|wav|webp|woff|woff2|xls|xlsx|zip
Ora fai clic su Applica o su OK per salvare le modifiche.
Utilizzo di barebone nginx
Aggiungi questo alla tua configurazione nginx:
location ~* \.(css|js)$ {
gzip_vary on;
expires 30d;
}
location ~* \.(ac3|atom|avi|bmp|bz2|css|csv|cue|dat|doc|docx|dts|eot|exe|flv|gif|gz|htm|html|ico|img|iso|jpeg|jpg|js|map|mid|midi|mkv|mp3|mp4|mpeg|mpg|m4a|ogg|ogv|otf|pdf|png|ppt|pptx|qt|rar|rm|rss|rtf|svg|svgz|swf|tar|tgz|ttf|txt|wav|webp|woff|woff2|xls|xlsx|zip)$ {
gzip_vary on;
expires max;
log_not_found off;
}
5. Utilizza un generatore di cache statica lato server
Nei nostri test, la migliore opzione commerciale per questo è WP Rocket e la migliore opzione gratuita per questo è WP Super Cache. Entrambi creeranno file di cache statici per ciascuna delle pagine e dei post del tuo sito ed entrambi funzioneranno eccezionalmente bene con la nostra configurazione nginx personalizzata che rileva automaticamente i file statici e serve quelli senza la necessità di avviare un processo Apache e/o PHP più pesante. I vantaggi che abbiamo riscontrato nel pagare per WP Rocket rispetto ai plug-in di memorizzazione nella cache gratuiti sono quasi esclusivamente nella parte di minificazione e ottimizzazione del codice del sito Web. Consulta la parte 6 di questa guida di seguito per maggiori informazioni al riguardo.
Utilizziamo una configurazione nginx personalizzata interna su tutti i nostri server per rilevare automaticamente l'uso dei plug-in di cache delle pagine lato server più comuni e servire automaticamente i loro file html statici direttamente con nginx senza dover incanalare attraverso apache o il Processore PHP, riducendo così l'utilizzo della CPU e della memoria. I nostri sistemi possono rilevare automaticamente e servire l'output della cache statica da WP Rocket, WP Super Cache, WP Fastest Cache, W3 Total Cache e WP Optimize. Purtroppo, Hummingbird non può funzionare con i nostri sistemi poiché utilizzano nomi di file di cache statici generati casualmente. Se desideri utilizzare Hummingbird, chiedi al supporto di WPMUDEV di correggere i nomi dei file della cache.
Questi plug-in che generano cache statica possono consentire al tuo sito di gestire enormi picchi di traffico senza sudare nemmeno sui nostri servizi di hosting condiviso!
Abbiamo utilizzato queste configurazioni per portare un sito su hosting condiviso a circa 100.000 visualizzazioni uniche giornaliere senza problemi e un sito sul proprio VPS a oltre 500.000 visualizzazioni di pagina uniche giornaliere con un carico medio di 1,0.
Se il tuo host non riesce a tenere il passo, dai un'occhiata alle nostre opzioni di hosting WordPress canadesi. Ancora meglio, con le ottimizzazioni descritte in questo passaggio, passaggio 6 (ottimizzazione) e passaggio 7 (compressione dell'immagine), il tuo sito può passare da un punteggio Google Page Speed negativo o comunque basso a 90+, a seconda del tema e plugin utilizzati.
Ecco come ottenere l'output della cache statica dai nostri due plug-in di cache preferiti:
- WP Rocket :Ecco come installare e attivare WP Rocket usando la loro guida. Una volta attivato, inizierà automaticamente a creare una cache statica.
- WP Super Cache :accedi alla tua installazione di WordPress e vai su Plugin> Aggiungi nuovo. Installa WP Super Cache e attivalo. Vai su Impostazioni> WP Super Cache e seleziona "Attiva cache" e premi il pulsante Aggiorna stato. Fare clic sulla scheda Avanzate. Seleziona tutto con "Consigliato" accanto. Premere il pulsante Aggiorna stato. Scorri verso il basso fino alla sezione "Tempo di scadenza e raccolta rifiuti" e imposta l'intervallo su una o due volte al giorno, quindi premi il pulsante "Cambia scadenza".
Alcune persone preferiscono W3 Total Cache e altre come WP Fastest Cache, tra molte altri plugin di memorizzazione nella cache. In generale, questi plug-in sono ottimi per gestire i miglioramenti delle prestazioni e tutti quelli sopra elencati funzioneranno perfettamente nella generazione di file di cache statici per prestazioni del sito Web più veloci. Non tutti tendono ad essere costantemente bravi nell'ottimizzazione come descritto nel passaggio 6 di seguito.
Ora apri un browser diverso da quello con cui hai effettuato l'accesso a WordPress e carica qualsiasi pagina del tuo sito. Al termine del caricamento, aggiorna la pagina. Dovresti scoprire che l'aggiornamento è ora significativamente più veloce del caricamento iniziale della pagina. Questo non è *solo* perché il tuo browser ha utilizzato il caricamento della prima pagina per memorizzare nella cache le risorse, ma anche (cosa più significativa) perché il server ha utilizzato il caricamento della pagina iniziale per creare un file di cache statico che viene poi pubblicato nelle visite successive.
L'abilitazione della memorizzazione nella cache della pagina statica non dovrebbe avere alcun effetto sulla funzionalità del tuo sito, ma migliorerà notevolmente il TTFB (tempo al primo byte) del tuo sito Web poiché il server sarà in grado di fornire ogni pagina molto più velocemente di prima. L'unica eccezione a questo è se si dispone di dati dinamici che cambiano sul sito che non utilizza AJAX; quella parte del tuo sito non si aggiornerà automaticamente a ogni caricamento della pagina. In questo caso, parla con lo sviluppatore del tuo sito web e chiedigli di modificare la funzione in modo che utilizzi AJAX.
Nella parte 6 di seguito, puoi leggere come configurare WP Rocket o SuperCache + Autoptimize per gestire ottimizzazioni sul sito più aggressive che miglioreranno notevolmente il tuo punteggio di Google Page Speed.
6. Usa un plug-in Code Minifier e Optimizer
In generale, si desidera attenersi a un singolo plug-in di ottimizzazione alla volta, tuttavia WP Super Cache e Autoptimize sono in realtà progettati per funzionare insieme. WP Rocket ha le funzionalità di WP Super Cache e Autoptimize combinate in quanto genera entrambi file di cache statici (come descritto nella parte 5 sopra) e minimizza e ottimizza il codice del sito.
Autoptimize funziona con WP Rocket, in quanto WP Rocket disattiverà semplicemente la sua funzionalità di ottimizzazione quando viene rilevato Autoptimze, tuttavia nella maggior parte dei casi lo abbiamo trovato non necessario poiché WP Rocket ha la stessa funzionalità già integrata. Anche la funzionalità di ottimizzazione di WP Rocket tende a essere più bravo a non violare i siti Web rispetto ad Autoptimize quando sono abilitate funzionalità come la minificazione e il differimento degli script.
Quando si tratta di ottimizzare il codice del sito (come la minificazione), che è spesso necessario per ottenere punteggi più alti con Google Page Speed o GTMetrix, non siamo mai stati in grado di far funzionare anche W3 Total Cache o WP Fastest Cache (tra gli altri) come Autoptimize o le funzioni di ottimizzazione di WP Rocket.
Nota:questa è la fase in cui l'abilitazione di alcune ottimizzazioni potrebbe interrompere parti del tuo sito, in particolare se il tema, il plug-in o il codice personalizzato non è stato scritto per funzionare bene con l'ottimizzazione. Se ciò si verifica per te, consulta i passaggi per la risoluzione dei problemi riportati di seguito per sapere come risolverlo.
WP Rocket (il nostro preferito, a pagamento)
Se non hai completato la parte 5 sopra, installa e attiva WP Rocket usando la loro guida. Quindi vai su Impostazioni> WP Rocket per iniziare.
Scheda Cache:
- Attiva la memorizzazione nella cache per i dispositivi mobili . Se utilizzi un sito mobile completamente separato (sconsigliato) o se ne utilizzi molto di elementi che appaiono solo sui dispositivi mobili (come lo scambio di parti di una pagina tra una versione mobile e una versione desktop), quindi seleziona la casella Separa i file di cache per i dispositivi mobili .
- Abilita la memorizzazione nella cache per gli utenti WordPress che hanno effettuato l'accesso
Salva modifiche
Scheda Ottimizzazione file:
- Minimizza CSS: abilitato
- Combina file CSS: disabilitato*
- Ottimizza consegna CSS: si consiglia di utilizzare l'opzione "Carica CSS in modo asincrono" poiché è molto più affidabile dell'opzione Rimuovi CSS inutilizzati (attualmente in versione beta). Remove Unused CSS offre un notevole aumento delle prestazioni, ma non è affidabile per un uso regolare o per i deboli di cuore. Se lo usi, preparati a una serie di modifiche manuali per renderlo perfetto.
- Minimizza i file JavaScript: abilitato
- Combina file JavaScript:disattivato*
- Carica JavaScript differito: abilitato
- Ritardo esecuzione JavaScript: abilitato**
Ora svuota la cache di WP Rocket e carica il tuo sito in un altro browser
* file separati è meglio quando il tuo server web supporta http/2 o http/3 (come il nostro) perché il motore del server web invierà i file contemporaneamente.
** Controlla la scheda della console dell'ispettore web del tuo browser per verificare la presenza di errori. Se visualizzi errori simili a:"jQuery non è definito" o "jQuery non è stato trovato", dovrai capire perché un plug-in, un tema o un codice personalizzato non sta caricando correttamente le sue risorse ed escludere quelle necessarie dalla funzionalità Defer e/o Delay Javascript, oppure prendi la strada più semplice e applica le esclusioni predefinite per Delay Javascript Execution mostrato in questa pagina delle impostazioni di WP Rocket.
Se visualizzi altri errori JavaScript, dovrai disabilitare Carica JavaScript differito o determinare perché il file JavaScript non può essere rinviato consultando lo sviluppatore del plug-in o del tema.
Scheda Media:
- Attiva tutto in questa pagina.
Scheda Componenti aggiuntivi:
- Se hai attivato Google Analytics sul tuo sito (ma non tramite Google Tag Manager ) abilita il componente aggiuntivo Google Tracking. [Nota:il plug-in MonsterInsights non è compatibile con questo componente aggiuntivo. Se desideri utilizzare questo componente aggiuntivo Rocket, dovrai rimuovere MonsterInsights e includere il codice di analisi utilizzando un altro plug-in come SiteKit di Google o copiando e incollando manualmente il codice UA nel campo del codice dell'intestazione del tuo tema.]
- Se utilizzi il codice di tracciamento di Facebook Pixel sul tuo sito, abilita il componente aggiuntivo Facebook Pixel.
- Se il tuo server utilizza la cache Varnish (il nostro no perché è disponibile la cache nginx), dovresti abilitare il componente aggiuntivo Varnish qui.
- Se utilizzi Shortpixel o Imagify per generare immagini WEBP per il tuo sito, puoi abilitare l'opzione qui per servirle in preferenza rispetto alle immagini JPG/PNG.
WP Super Cache + Autoptimize (gratuito)
Se non hai completato la parte 5 sopra, fallo ora, quindi accedi alla tua installazione di WordPress e vai su Plugin> Aggiungi nuovo e installa e attiva Autoptimize
Configurazione di Autoptimize
- Vai su Impostazioni> Ottimizzazione automatica e assicurati che Javascript, CSS e minificazione HTML siano abilitati.
- Nella scheda Extra, accanto a Google Fonts, prova l'opzione "Combina e carica i caratteri in modo asincrono con webfont.js" e "Rimozione delle stringhe di query".
- Premi "Salva modifiche".
Risoluzione dei problemi relativi agli elementi rotti
Dopo aver abilitato le ottimizzazioni in WP Rocket o Autoptimze, è possibile che vengano visualizzati elementi danneggiati sul sito, a seconda dei plug-in utilizzati, del tema e di una varietà di altre cose. Ecco alcuni motivi e correzioni comuni:
Immagini o video mancanti:
Se il tuo tema o page builder utilizza Javascript per caricare le immagini sul tuo sito, il Lazyload per immagini e video l'opzione potrebbe interromperlo e dovrai disabilitare il lazyload sulle pagine che hanno questo contenuto. Consulta la sezione "Per pagina" di seguito per informazioni su come eseguire questa operazione.
Parti globali del mio sito non funzionano, come un menu
Se si tratta di codice personalizzato, è meglio provare a correggere il codice responsabile. Se si tratta di una funzionalità fornita da un tema o da un plug-in, prova a sostituirla con un altro tema o plug-in (poiché il tema o il plug-in probabilmente non è progettato per la velocità). Puoi anche segnalare il problema di compatibilità allo sviluppatore del tema o del plug-in in modo che possa risolverlo.
Se non sei in grado di correggere il codice o sostituire il software che non è ottimizzato per la velocità, disabilita tutti i tipi di minificazione (ad es.:nella scheda Ottimizzazione file in WP Rocket) uno per uno fino a quando il problema non scompare, quindi riabilita tutto tranne l'impostazione che hai disabilitato l'ultima volta, poiché era la causa del problema.
Se sei un utente esperto, puoi riattivare l'impostazione che non ha funzionato per te, quindi utilizzare un web inspector per ispezionare la pagina e scoprire quale file sta causando il problema. Una volta trovato, vai nella configurazione di WP Rocket o Autoptimize ed escludi solo quel singolo file dalla minificazione. (Questo probabilmente ridurrà il tuo punteggio di velocità della pagina)
Esclusioni per pagina
Se trovi che solo determinate pagine hanno problemi, puoi disabilitare l'opzione che causa problemi solo su quella pagina. Modifica la pagina in WordPress e cerca la casella "Opzioni cache" sulla destra.
Se sai quale parte del plug-in di memorizzazione nella cache sta causando problemi, deselezionala. In caso contrario, deselezionali uno alla volta e visualizza la pagina per vedere se il problema è stato risolto. Ripeti l'operazione per ciascuna opzione finché non trovi l'impostazione del problema.
Se stai usando Remove Unused CSS (WP Rocket)
Ci sono due opzioni per risolvere questo problema, a seconda della situazione:
- Hai appena iniziato con Rimuovi CSS inutilizzati? Bene, ti abbiamo detto che probabilmente sarebbe successo. Non importa, però; cerca semplicemente gli identificatori CSS di tutti gli elementi che sono "diventati traballanti" e aggiungili all'elenco di esclusione in WP Rocket. Quindi ricarica la pagina in un altro browser e conferma che il problema è stato risolto. In caso contrario, trova l'elemento CSS successivo e prova quello:lo capirai e dovresti comunque vedere miglioramenti significativi nelle prestazioni del tuo sito.
- Se hai rimosso Rimuovi CSS inutilizzati in esecuzione per un po' di tempo e all'improvviso ti si è rotto, prova ad aggiornarlo andando su WP Rocket -> Cancella CSS usati. Ciò può accadere in caso di alcuni aggiornamenti di plugin/temi e WP Rocket deve essere invitato a rigenerare i suoi file.
7. Comprimi i file immagine
Questo ti darà solo un piccolo notevole aumento di velocità a meno che tu non utilizzi una connessione Internet lenta o abbia caricato immagini estremamente grandi sul tuo sito, ma può migliorare un po 'il tuo punteggio di velocità della pagina di Google poiché i loro punteggi Core Web Vitals mobili sono basati su velocità Internet 3G.
Nota:se sei seriamente intenzionato a ottimizzare il tuo sito per ottenere fino all'ultimo calo di prestazioni, dovresti aspettarti un calo della qualità dell'immagine . Se preferisci immagini di qualità superiore, scegli questa opzione a scapito di a) tempi di caricamento della pagina su connessioni più lente eb) punteggi di benchmark sintetici come Google PageSpeed e Core Web Vitals. Devi scegliere quale preferisci:immagini di alta qualità o punteggi di benchmark migliori. Non puoi averli entrambi.
Metodo manuale originale: Esegui tutti i file PNG tramite un compressore, quindi caricali sopra le loro versioni precedenti. Potresti non avere questi strumenti disponibili, ma ho aperto tutti i file PNG in Photoshop e li ho esportati per il web. Se lo fai, assicurati che i file non lo facciano includi i metadati in quanto ciò può consumare grandi porzioni di file, specialmente per le icone.
Metodo a pagamento più semplice: Usiamo Imagify per gestirlo per noi, tutto lato server. È un fantastico plug-in fornito dalle stesse persone di WP Rocket che gestirà automaticamente la compressione delle tue immagini sia come operazione singola che continua. Un'altra opzione è il plug-in chiamato ShortPixel, funziona altrettanto bene di Imagify nei nostri test e offre anche prezzi molto equi. Scopri tutti delle nostre risorse consigliate qui.
Gravatar nella cache
Poiché questo si riferisce alle immagini (quelle utilizzate dagli autori dei post), questo sembrava il posto giusto per parlarne. WP Rocket e WP Super Cache non memorizzano nella cache i gravatar per impostazione predefinita, il che significa che se hai molti commenti sui tuoi post da vari autori, il caricamento di immagini gravatar esterne può prolungare il tempo di rendering totale della tua pagina.
Il blog WP Rocket ha un ottimo articolo su come gestire questo, l'essenza è installare il plugin chiamato "FV Gravatar Cache".
8. Configura Nginx per caricare l'output della cache statica [Avanzate]
Solo coloro che utilizzano un host con un proxy inverso nginx possono sfruttare questa opzione. Questo vale per chiunque utilizzi Plesk 12 o versioni successive, a meno che l'host non stia facendo cose strane con la configurazione del server.
Poiché nginx è un motore per server Web più leggero di Apache, configurando nginx per servire direttamente questi file statici, miglioriamo notevolmente le prestazioni. Per ogni singola richiesta, anziché utilizzare un thread nginx per avviare un processo apache per gestire la richiesta, configureremo nginx in modo che utilizzi solo il thread nginx e non ci preoccupiamo di caricare apache per tutte le pagine per le quali abbiamo un file cache statico . Fantastico eh?
Se il tuo hosting è con Websavers, non devi fare nulla di tutto ciò, poiché lo facciamo automaticamente con tutti gli account di hosting condiviso e di hosting VPS gestito.
Se il tuo hosting non è con noi, allora devi avere accesso amministrativo a Plesk poter applicare queste modifiche. In genere avrai accesso come amministratore solo se disponi del tuo VPS o di un server dedicato.
Configura nginx per caricare i file della cache statica di WP Super Cache
Ricordi sopra quando abbiamo detto a WP Super Cache di usare mod_rewrite per servire i nostri file di cache? Questo è praticamente automatico se stai usando apache perché WP Super Cache modificherà automaticamente il tuo file .htaccess per includere le necessarie regole mod_rewrite.
L'inserimento di quanto segue nella configurazione di nginx dirà a nginx di bypassare completamente apache quando serve l'output statico di WP Super Cache. In Plesk, puoi farlo nelle "Impostazioni Apache e nginx" del dominio, quindi nel campo Direttive nginx aggiuntive.
### WP Super Cache Below ###
set $cache_uri $request_uri;
# POST requests and urls with a query string should always go to PHP
if ($request_method = POST) {
set $cache_uri 'null cache';
}
if ($query_string != "") {
set $cache_uri 'null cache';
}
# Don't cache uris containing the following segments
if ($request_uri ~* "(/wp-admin/|/xmlrpc.php|/wp-(app|cron|login|register|mail).php|wp-.*.php|/feed/|index.php|wp-comments-popup.php|wp-links-opml.php|wp-locations.php|sitemap(_index)?.xml|[a-z0-9_-]+-sitemap([0-9]+)?.xml)") {
set $cache_uri 'null cache';
}
# Don't use the cache for logged in users or recent commenters
if ($http_cookie ~* "comment_author|wordpress_[a-f0-9]+|wp-postpass|wordpress_logged_in") {
set $cache_uri 'null cache';
}
# Use cached or actual file if they exists, otherwise pass request to WordPress
location ~ / {
try_files /wp-content/cache/supercache/$http_host/$cache_uri/index.html $uri /index.php;
}
È importante notare che potresti riscontrare alcuni problemi con le regole nginx fornite se utilizzi WordPress in una sottodirectory, specialmente se hai un'installazione "nidificata" (con WordPress nella directory di base e un'altra installazione di WordPress in una sottodirectory). Può essere fatto con molte modifiche complicate alle regole fornite, ma è decisamente più semplice sotto tutti i punti di vista se modifichi la tua struttura per utilizzare un sottodominio anziché una sottocartella.
Configura nginx per caricare i file della cache statica di WP Rocket
Abbiamo utilizzato questa pratica configurazione di WP Rocket nginx generando una configurazione (segui le istruzioni di installazione), quindi incollando il risultato nella posizione delle direttive di configurazione avanzate di nginx in Plesk.
Abbiamo apportato modifiche alla configurazione che abbiamo riscontrato funzionare meglio per il nostro ambiente; se desideri approfittare delle nostre ottimizzazioni, valuta l'hosting con Websavers!
9. Disabilita i moduli PHP inutilizzati [Avanzate]
Accesso amministratore Plesk richiesto (solo VPS)
Se disponi dell'accesso amministrativo completo al tuo VPS, puoi effettivamente disabilitare i moduli PHP che non ti servono. Meno elementi da caricare in memoria, meno utilizzo della memoria, elaborazione meno intensiva e prestazioni più veloci. Questa è roba molto avanzata, quindi assicurati di sapere cosa stai facendo oppure non lo stai facendo su un server live quindi non stai rompendo nulla 😉
- Vai a Strumenti e impostazioni in Plesk
- In Impostazioni generali fai clic su Impostazioni PHP
- Seleziona la versione PHP e il gestore per cui desideri modificare le impostazioni
- Disattiva i moduli PHP che non stai utilizzando
- Fai clic su OK o Applica salvare
Ora torna al tuo sito Web e assicurati che nulla sia rotto! Potresti non sapere quali moduli vengono utilizzati in ogni aspetto del tuo sito web, quindi potrebbero essere necessari un bel po' di tentativi ed errori per ottenere questo risultato.
Suggerimento bonus n. 1:ReCAPTCHA v3
Se utilizzi Google ReCAPTCHA per la protezione dai bot, su un modulo di contatto/preventivo o per proteggere i commenti dei tuoi post sul blog, non ti biasimiamo, è un sistema decente per impedire ai bot di inviare i tuoi moduli.
ReCAPTCHA v2 è il tipo di captcha che tutti conoscono e in qualche modo odiano in cui "seleziona una casella" per confermare che non sei un bot. L'odio arriva quando il sistema fa apparire una verifica in cui devi fare clic su immagini che corrispondono a una descrizione come "seleziona tutte le immagini con un camion al loro interno". Ti suona familiare?
ReCAPTCHA v3 è "invisibile" in quanto non è richiesta alcuna casella di controllo, migliorando l'esperienza utente. Ma, ha alcuni aspetti negativi della velocità del sito in quanto deve caricare tutti i suoi script su ogni pagina del tuo sito web . Tiene traccia degli utenti mentre navigano nel tuo sito perché i loro comportamenti aiuteranno a determinare se sono bot o meno.
Poiché questi script vengono caricati su ogni pagina, l'unico modo per evitare che tali risorse vengano contrassegnate da GTMetrix e altri strumenti di benchmarking sintetico è tornare alla v2 (se il modulo o il plug-in recaptcha lo consente) perché in tal caso le risorse saranno solo caricato nelle pagine dove esistono i form.
Advanced users:you can write a WordPress hook that dequeues the ReCAPTCHA v3 resources on all pages except those with your forms, but you should know that doing this will very likely decrease the effectiveness of ReCAPTCHA’s protection.
Bonus Tip #2:Detect and Reduce Dynamic Processing
There’s a few common cases where, regardless of all the caching and optimizations, we just implemented, your server will still launch dynamic PHP processes to serve the requests, thus requiring CPU and memory to handle that request.
Check out our guide to analyzing dynamic processing with WordPress!
UPDATE HISTORY:
- Jan 12, 2022:Updates to PHP Versions, simplify wording, add brotli compression details
- Aug 28, 2020:Add notes about content encoding headers, MonsterInsights incompatibility with WP Rocket’s GA Addon, Gravity Forms incompatibility with deferred jQuery
- Apr 30, 2020:Add Bonus Tip 2:Detecting and Reducing Dynamic Processing
- Apr 26, 2020:Add tip for caching Gravatar images.
- Jan 10, 2020:Add improved instructions for configuring browser caching rules in Plesk to improve scores on synthetic benchmarks like Google Page Speed and GTMetrix.
- Dec 31, 2019:Remove our recommendation to use nginx direct to PHP-FPM processing and instead use rules that will ensure nginx will directly serve your caching plugin’s static cache file output, bypassing apache. This results in identical performance for most website visitors, but much better security, if your host has Plesk’s web application firewall properly configured.
- Oct 15, 2019:Split step 5 into 2 sections (now 5 and 6) — static cache generating in step 5 (which improves performance but doesn’t break websites) and optimization of resources in step 6 (which improves scores on things like Google Page Speed, but which can also break your website).
- Feb 4, 2019:Replace Better WordPress Minification with Autoptimize as recommended minification system.
- Jan 9, 2019:Add PHP 7.3 Info
- Dec 3, 2018:Reformatted post for better understanding of difference between browser cache vs. nginx->php-fpm direct mode. Use Plesk recommended rewrite rules for nginx.
- Jul 4, 2017:Added ShortPixel as an image compression option, reformatted post.
- Feb 20, 2016:Added commercial option, WP Rocket, as a great paid replacement for WP Super Cache + WP Minify.
- Jun 16, 2017:Added some hosting/server tips.
- Dec 25, 2013:Original Post Date.