Il tuo WordPress è lento? Allora stai sprecando un sacco di potenziale. Non solo i tuoi visitatori saranno infastiditi dai tempi di caricamento lenti, ma potresti anche perdere visibilità su Google. Ti mostrerò passo dopo passo come rendere WordPress più veloce.

Se vendi qualcosa tramite WordPress, ad esempio con WooCommerceallora ci sono abbastanza ricerche che confermano che i siti web lenti producono meno ricavi, nel complesso. Gli utenti mobili, in particolare, abbandonano una pagina se impiega più di tre secondi a caricarsi. Siti web più veloci sono fondamentali per la tua attività.

Misura la velocità

Se vuoi rendere un sito web più veloce, devi prima misurare quanto è veloce/lento prima dell'ottimizzazione. Il tempo di caricamento puro è importante, ma non necessariamente decisivo. Alcuni siti web hanno semplicemente degli "asset" di grandi dimensioni (ad esempio immagini e video) che i visitatori vogliono vedere o scaricare. Più veloce è sempre meglio, ma dipende anche dalle aspettative del visitatore. Ad esempio, apple.com ha notoriamente prestazioni scarse:

Questo non è esattamente ottimale. Tuttavia, questa circostanza è ben fondata. Apple attribuisce un valore altissimo alla visualizzazione dei propri prodotti con la massima qualità possibile e per questo utilizza immagini di dimensioni enormi senza ottimizzarle, come dimostra questa guida per WordPress. I visitatori di Apple sopportano questa situazione e sono felici di aspettare un po' di più per il caricamento della pagina.

Nel complesso, le prestazioni delle pagine Apple sono abbastanza veloci. Soprattutto la visualizzazione dei primi elementi è solitamente fulminea. Questi vengono misurati sotto l'aspetto della "Prima Verniciatura Contentful " (FCP). L'FCP determina la percezione della velocità di caricamento di una pagina. Pertanto, la FCP svolge un ruolo particolarmente importante nell'ottimizzazione. I valori di 2 o 3 secondi non devono essere superati. Meglio se sotto i 2 secondi o più veloce.

Il "Largest Contentful Paint " (LCP) riflette il tempo di caricamento degli elementi rimanenti dal contenuto principale. Se riesci a stare sotto i 3 secondi, sei già abbastanza bravo. Tuttavia, anche le immagini di prodotti di grandi dimensioni e altri beni simili possono far salire questo valore in modo significativo, il che va benissimo a seconda dello scopo.

Il "First Input Delay" (FID) misura il tempo che passa prima che i tuoi visitatori possano effettivamente interagire con la pagina. Ad esempio, evidenziando un passaggio di testo, cliccando su un link o un pulsante, ecc. Ad esempio, una pagina potrebbe avere una casella di ricerca. Forse questa pagina impiega 10 secondi per caricarsi completamente. Quanto velocemente una persona può cliccare sulla casella di ricerca e digitare? Tieni presente che l'"utente" non è sempre un essere umano. Spesso sono i bot a interagire con le pagine. Ad esempio, il bot di Google, che misura le prestazioni della pagina e include questi valori nel calcolo delle classifiche.

Il "Cumulative Layout Shift " (CLS) deve essere sempre evitato. Se un layout si "sposta" durante il caricamento, può essere molto irritante per i tuoi visitatori. Il risultato può essere un clic sul pulsante sbagliato. Nella maggior parte dei casi, questi spostamenti sono causati da specifiche di larghezza e lunghezza (larghezza/altezza) mancanti per le immagini. Il CLS dovrebbe essere sempre 0.

Questi quattro valori sono quindi decisivi per valutare la velocità di un sito web WordPress. Sono incentrati sull'utente, cioè non si tratta di valori di prestazione grezzi come il tempo per il primo byte, che gioca un ruolo importante nella valutazione delle prestazioni del server o della connessione al server. Ciò significa anche che questi valori sono meno determinati dalla cache e dalla scelta dell'hosting WordPress, anche se ovviamente anche questo gioca un ruolo importante nelle prestazioni di WordPress. Piuttosto, sono determinati dall'abile costruzione di una pagina e dall'uso corretto di HTML, CSS e JavaScript.

L'ottimizzazione delle prestazioni è diventata piuttosto complicata negli ultimi anni. Soprattutto da quando Google ha annunciato che questi criteri di performance incentrati sull'utente saranno inclusi nel calcolo della classifica. I migliori strumenti per misurare le prestazioni di WordPress:

• PageSpeed Insights da Google
• GTmetrix
• Lighthouse è integrato direttamente negli strumenti per sviluppatori di Google Chrome.
• Velocità del sito TREO

Personalmente mi piace TREO perché è veloce e chiaro. PageSpeed Insights e GTmetrix sono estremamente dettagliati.

Grazie a queste conoscenze e a questi strumenti, sei ben equipaggiato per misurare le tue prestazioni. Se lo stai facendo da solo, ti suggerisco il seguente approccio:

• Per prima cosa misura lo stato iniziale. Quanto è veloce il tuo sito web prima dell'ottimizzazione?
• Attiva o implementa un'ottimizzazione.
• Poi potrai misurare nuovamente le prestazioni. Ha fatto la differenza in modo dimostrabile? In caso contrario, rimuovi l'ottimizzazione e prova a fare qualcos'altro. Se sì, allora mantieni l'ottimizzazione. Verifica se tutto funziona ancora come prima e aggiungi un'altra ottimizzazione.

Molti cercano di raggiungere un punteggio di 100 su PageSpeed Insights . Per il momento non c'è nulla di male, se non il fatto che non è necessario per ottenere il punteggio completo. Altri strumenti misurano in modo diverso e quello che è un 100 su PageSpeed Insights potrebbe non essere così buono su GTmetrix. Inoltre, passare da un 30 a un 90 è chiaramente più importante che passare da un 90 a un 100.

Migliorare le prestazioni di WordPress

Hosting WordPress più veloce

Non esiste l'host più veloce in ogni situazione e in ogni momento. Sono troppi i fattori che incidono sui tempi di consegna e di elaborazione delle richieste. I seguenti fattori non rendono facile la valutazione:

• Ora del giorno
• Utilizzo del server
• Geolocalizzazione
• La velocità della connessione dell'utente.

Tuttavia, ogni host offre pacchetti diversi che possono avere un impatto significativo sulle prestazioni di un sito web WordPress. I pacchetti entry-level sono solitamente più economici e naturalmente non sono così veloci. Pertanto, una delle prime ottimizzazioni sensate è quella di aggiornare il pacchetto.

Su Raidboxes , ad esempio, ci sono pacchetti starter di Managed WordPress Hosting che si occupano dell'amministrazione di WordPress e includono già ottimizzazioni come il caching lato server. Ma ci sono anche pacchetti particolarmente performanti nell'Hosting ad alto traffico, ad esempio per progetti con un numero di accessi molto elevato. Ci sono anche tariffe speciali per l'hosting del tuo negozio online suWooCommerce . Va da sé che i pacchetti più grandi offrono un ulteriore incremento delle prestazioni.

Una cosa è chiara: se paghi di più, di solito ottieni maggiori prestazioni. Ovviamente questo vale per tutti gli host. Quasi tutti i miglioramenti delle prestazioni sono incrementati dagli aggiornamenti tariffari. Ma cosa si può ottenere senza passare direttamente a una tariffa più alta?

Usa la cache di WordPress

Oltre ai blog più semplici, quasi tutti i siti WordPress utilizzano una serie di altri plugin. Di norma, i plugin ritardano il tempo di caricamento di una frazione di secondo ogni volta che la pagina viene richiamata. Soprattutto se il plugin inserisce elementi nel codice HTML, che poi devono essere caricati ulteriormente o eseguire ulteriori query al database.

E se WordPress dovesse eseguire questi "compiti" aggiuntivi solo una volta per pagina e recuperasse semplicemente il risultato di queste operazioni "aggiuntive" dalla cache alla chiamata successiva? Questo velocizzerebbe notevolmente il successivo processo di caricamento, perché il server dovrebbe consegnare solo un file finito. Idealmente, non vengono effettuati ulteriori calcoli, il che riduce drasticamente il tempo di caricamento. Ad esempio, una pagina che impiega 5 secondi per essere caricata senza cache può essere consegnata in pochi millisecondi. Non sono rari i miglioramenti di velocità da 20 a 100 volte superiori quando si attiva la cache.

Le soluzioni di caching sono essenziali per velocizzare i siti web WordPress. L'ideale sarebbe una soluzione basata su un server, ma di questo parleremo tra poco. Altrimenti, utilizza uno dei plugin di caching molto popolari nella comunità:

• WP Fastest Cache (gratuito e a pagamento)
• LiteSpeed Cache (gratuito, ma funziona solo con il LiteSpeed Web Server)
• WP-Optimize (gratuito + a pagamento)
• WP Super Cache (gratuito, dal produttore di WordPress)
• Colibrì (gratuito + a pagamento)
• WP Rocket (a pagamento, ecco il mio tutorial su YouTube)
• Cache Enabler (gratuito)
• Borlabs Cache (a pagamento)
• Hyper Cache (gratuito)
• Comet Cache (gratuito + a pagamento)

I plugin a pagamento di solito hanno più funzioni. Tuttavia, i plugin gratuiti aiutano nella maggior parte dei casi a ricavare il 90% di tutti i possibili guadagni di tempo.

Tuttavia, i plugin di caching sono come una benda. Nascondono problemi che sarebbe meglio risolvere fin dall'inizio. Non rimuovono necessariamente l'HTML superfluo, non comprimono i file immagine troppo grandi, non cambiano necessariamente l'ordine di inclusione dei file JS e CSS e così via. Anche le pagine in cache possono quindi essere lente.

Se lavori in modo pulito fin dall'inizio, non hai bisogno di un plugin per la cache. Almeno in teoria. Perché il caching in generale alleggerisce naturalmente il server e quindi è sempre consigliato. Sono più interessato all'argomento della buona pianificazione e del codice pulito e ben studiato.

Inoltre, Raidboxes si basa su una cache lato server particolarmente performante. Questo significa che non hai bisogno di un plugin aggiuntivo o di una soluzione a pagamento.

Contenitori flessibili al posto di colonne e righe nel Page Builder

I page builder o site builder sono diventati indispensabili per molte agenzie e sviluppatori, in quanto facilitano notevolmente la progettazione di pagine e articoli.

Da oltre 10 anni, la procedura standard di tutti i page builder più diffusi è quella di creare il layout con colonne e righe. Questo porta spesso a un'insalata di DIV annidata:

Questo accade spesso in ogni singola pagina, il che di solito gonfia inutilmente il codice e può anche avere effetti negativi sull'FCP. Di solito questo problema può essere evitato grazie a un'attenta pianificazione durante la creazione del layout. I costruttori di siti stanno iniziando a prendere in considerazione gli standard CSS Flexbox e Grid per la creazione dei layout. Questa è una buona notizia, perché riduce la quantità di codice.

Nella versione attuale del page builder Elementor, ad esempio, il contenitore flexbox può essere attivato nelle impostazioni. Questo non solo ti offre una maggiore flessibilità nel design, ma riduce anche il codice HTML e velocizza i tempi di caricamento.

Un clic su Direzione -> Riga allinea i contenitori in una fila. Una semplice struttura a tre contenitori non migliorerà immediatamente le prestazioni in modo significativo. Ma se tutte le sezioni, le righe e le colonne vengono implementate con questa nuova tecnica, il guadagno può essere significativo. Soprattutto per molte pagine e anche per l'ottimizzazione di FCP e LCP.

La funzione è ancora in fase alfa su Elementor. Altri costruttori utilizzano questo nuovo approccio da tempo e tutti i costruttori lo offriranno in futuro. Vale quindi la pena di adottare il nuovo modo di lavorare nel flusso di lavoro il prima possibile.

È meno importante utilizzare CSS-Flexbox e/o CSS-Grid, ma è necessario evitare l'annidamento. In teoria, anche un layout basato su tabelle degli anni 2000 può essere ottimizzato con il "de-nesting".

Il giusto WordPress Theme

Esistono migliaia di temi per WordPress. Sono sicuro che sono già tutti regolati in modo ottimale per le prestazioni, giusto? Sbagliato. La maggior parte dei temi si concentra sull'aspetto estetico. Questo ha senso dal punto di vista delle vendite. I temi vengono scelti principalmente per la loro attrattiva. Pochi temi WordPress si preoccupano di rendere il codice snello una priorità o, per quanto riguarda Page Builder, di creare codice snello.

Questi temi e costruttori sono attualmente consigliati dal mio punto di vista:

• Astra
• GeneratePress
• Bloccante
• Kadence

Si tratta di veri e propri metatemi, che consentono praticamente tutte le opzioni di layout immaginabili, hanno un'enorme selezione di layout di fantasia e sono ottimizzati per le prestazioni da zero. La maggior parte di questi temi WordPress può essere combinata con altri page builder come Elementor. Alcuni hanno un proprio page builder.

Ottimizza le immagini e gli altri elementi

La maggior parte dei siti web utilizza immagini. Le immagini più grandi spesso hanno un aspetto migliore, ma aumentano anche i tempi di caricamento. Più piccolo è meglio, ma in ogni caso ci sono molti consigli da tenere a mente:

• Si raccomanda una dimensione massima inferiore a 2.000 pixel. Le immagini più grandi si aprono meglio in una nuova finestra.
• Il formato giusto è fondamentale. JPEG per immagini fotografiche con molti colori e sfumature, PNG e GIF possono essere molto più piccoli per immagini con meno colori. La cosa migliore è provarlo.
• La grafica vettoriale, come i loghi e le illustrazioni, è perfetta come SVG, è scalabile all'infinito e ha dimensioni ridotte. Anche gli SVG sono file di testo puro con istruzioni da cui viene creata una grafica. In quanto file di testo, beneficiano della compressione GZIP, di cui parleremo tra poco.
• Il formato WebP di Google può ridurre i file JPG di un altro 25-34%.
• WebP esiste dal 2010, ma il nuovo formato AVIF riduce WebP di un altro 30% e spesso raggiunge un risparmio del 50% rispetto a JPEG. AVIF non dispone ancora di un supporto completo per tutti i browser, ma il numero cresce di mese in mese.

Esistono plugin che convertono le immagini in tutti i formati quando le carichi e poi incorporano semplicemente il file più piccolo. Ecco i plugin più popolari per WordPress:

• Smush
• Optimus
• Ottimizzatore di immagini EWWW
• Ottimizzatore di immagini ShortPixel
• TinyPNG
• Imsanità
• Imagify
• reSmush.it
• Ottimizzatore di immagini Kraken.io
• WP Compress
• Autoptimize
• WP Offload Media
• Optimole
• Hammy
• Ottimizzatore di immagini Robin
• WP Compress
• Imsanità

WP Compress ha un'interfaccia molto chiara ed esegue le operazioni di compressione in background. L'estensione non è proprio economica, ma molto conveniente. Se preferisci iniziare con un plugin gratuito, dovresti dare un'occhiata a Imsanity.

La maggior parte degli ottimizzatori ha un modello premium che limita le dimensioni delle immagini o il loro numero. L'eccezione è Robin. Dovresti pagare per un plugin di questo tipo? Dipende da quanto controllo hai bisogno. In alternativa, è possibile ottimizzare le immagini con strumenti desktop o a riga di comando(optimizt, compress-images) o online prima del caricamento(TinyPNG, Shortpixel).

La maggior parte dei plugin crea anche immagini di dimensioni diverse e più piccole. A seconda della risoluzione del browser dell'utente, viene integrato direttamente un file significativamente più piccolo, il che comporta ancora una volta un significativo aumento delle prestazioni.

Il caricamento pigro significa che un'immagine viene caricata solo quando i tuoi visitatori scorrono fino al punto in cui appare nella pagina. La maggior parte degli ottimizzatori di immagini lo supporta. Esistono anche plugin gratuiti per questo scopo, ad esempio Lazy Load di WP Rocket e Lazy Loader. I video possono o dovrebbero essere caricati solo quando vengono "raggiunti", vedi Caricamento pigro dei video.

Font della cache

Oltre alle immagini, qualsiasi altra risorsa può essere messa in cache localmente (sul server). Questo non solo migliora la conformità alle leggi internazionali sulla protezione dei dati, ma di solito migliora anche le prestazioni. Soprattutto se i font sono memorizzati nella cache. In questo modo il browser li scarica una volta e li visualizza direttamente la volta successiva senza doverli caricare prima. Questo funziona bene con il plugin di WordPress OMGF Host Google Fonts Locally, ad esempio.

Caricamento selettivo degli asset per pagina

Un metodo particolarmente efficace per aumentare la velocità è quello di caricare selettivamente i file CSS e JS per ogni pagina o post. Ci sono diverse possibilità che portano all'obiettivo.

Un esempio: il sito web WordPress utilizza un gestore di moduli come WPForms. Questo plugin carica le funzioni del modulo immediatamente su ogni pagina. Tuttavia, questa funzionalità è necessaria solo nella pagina dei contatti. Freesoul Deactivate plugin è un plugin che supporta questa funzione:

Permette di attivare o disattivare tutti i plugin per pagina tramite una matrice. A questo scopo è anche possibile utilizzare plugin per le prestazioni come perfmatters, che impedisce anche l'invio di file CSS e JS. Tuttavia, Freesoul sopprime il caricamento dell'intero plugin, quindi riduce anche il lavoro che deve essere svolto in background sul server.

Modifiche con perfmatters

Vale la pena acquistare un plugin come perfmatters? Inoltre, tutte le ottimizzazioni possono essere effettuate manualmente o con altri plugin. Tuttavia, si tratterebbe di una mole di lavoro pazzesca, soprattutto se deve essere eseguita per diversi siti web WordPress.

Solo nelle opzioni normali, un plugin come perfmatters ha più di due dozzine di ottimizzazioni. Sono tutti utili? Dipende dalla familiarità degli utenti di WordPress con le sue funzioni. Ad esempio, il feed RSS può essere disattivato, risparmiando così qualche byte. Ma significa anche che i visitatori del sito non possono più semplicemente abbonarsi agli articoli tramite feed RSS. Quindi dovresti pensarci bene.

È sorprendente quanti giochi WordPress abbia attivato di default (emoji, dashicons, ecc.); per il momento possono essere disattivati tranquillamente. Dovresti fare più attenzione alle impostazioni relative al database. In teoria, la disattivazione delle revisioni potrebbe far perdere molto tempo di lavoro. Se si utilizza comunque una cache, le ottimizzazioni del database non sono di solito molto importanti.

Al contrario, l'utilizzo di Google Maps in una pagina è solitamente un disastro per le prestazioni. Queste mappe dovrebbero essere caricate solo se necessario. Molti temi includono una mappa nella pagina iniziale, ad esempio, ma non è assolutamente necessario. Con i negozi onlineWooCommerce , chiamare wc-ajax=get_refreshed_fragments può causare gravi ritardi. Questi possono essere disattivati con"Disabilita frammenti di carta".

In ogni caso, vale la pena dare un'occhiata alla documentazione di perfmatters e WP Rocket. Se vuoi davvero immergerti, troverai molti punti di partenza. Naturalmente, puoi anche acquistare uno di questi plugin e risparmiare un sacco di tempo. Tuttavia, capirai meno di quello che succede in background.

Minificazione

La minificazione rimuove i caratteri non necessari, in particolare spazi e tabulazioni, dai file HTML, CSS e JS. Si tratta più di una best practice che di un vero e proprio aumento delle prestazioni. Con Autoptimize, la minificazione può essere attivata o disattivata molto facilmente.

Compressione Gzip e Brotli

Rispetto alla minificazione, la compressione spesso riduce di oltre il 50% le dimensioni dei file di testo. Vale sicuramente la pena di attivarlo, ad esempio per l'algoritmo di compressione Brotli. Nella maggior parte dei casi, tale compressione è già attivata dal web host. In caso contrario, esistono strumenti aggiuntivi che memorizzano i file compressi nel file system. Soprattutto perché la compressione dei file di testo è solitamente molto più efficace.

Brotli è un formato di compressione sviluppato da Google che è ancora più efficiente di Gzip. Naturalmente, Brotli è supportato anche da Raidboxes .

Ottimizzazioni significative per JavaScript e CSS

Soprattutto per quanto riguarda l'ottimizzazione per FCP e LCP, oggi ci sono modi per ottenere un drastico aumento delle prestazioni attraverso vari plugin e persino direttamente nei temi. Nei miei test, spesso queste sono anche le tecniche migliori per portare una pagina nella fascia 90-100. Si tratta del ricaricamento ritardato dei file CSS e JS.

Nel plugin gratuito Autoptimize c'è un'impostazione "Aggregate JS-files". Questa opzione è attivata per impostazione predefinita. Per godere di un'accelerazione reale, sono necessarie le seguenti impostazioni:

L'opzione "Rimanda" assicura che JavaScript venga caricato solo in un secondo momento nel processo di rendering. Prima vengono caricati l'HTML e le risorse, poi il JS. In pratica, questo significa che gli elementi interattivi, in particolare, non sono immediatamente disponibili nei primi secondi. Ma la pagina stessa viene visualizzata veloce come un fulmine.

Dal momento che JavaScript può ricaricare programmaticamente qualsiasi cosa desideri, questa tecnica deve essere trattata con cautela. Molte cose possono andare storte in questo caso. Questo è anche il motivo per cui l'opzione non è attivata di default. Il guadagno in termini di prestazioni può essere gigantesco, ma dopo averla attivata, devi controllare ogni pagina per verificare se funziona ancora correttamente.

Lo stesso vale dopo ogni aggiornamento e quando si utilizzano nuovi plugin che potrebbero mettere in gioco i propri file JavaScript. L'attivazione di questa opzione è quindi consigliabile solo se puoi investire un po' di tempo in seguito e regolarmente per controllarla.

La situazione è simile per i file CSS. Qui deve essere attivato "Elimina i CSS che bloccano il rendering". Con le istruzioni CSS, c'è l'ulteriore problema che alcune pagine o addirittura aree del sito web devono avere un aspetto leggermente diverso. Una parte della pagina ha lo stesso aspetto (colori, font, posizione dell'intestazione), ma un'altra parte ha un aspetto diverso (immagine nell'intestazione, informazioni aggiuntive nel piè di pagina, ecc.)

Autoptimize si riferisce a un servizio esterno e a pagamento che cerca di risolvere questo problema. Il "CSS critico" è il CSS che deve essere caricato all'inizio. Il resto può essere caricato in un secondo momento.

Anche plugin come WP Rocket e perfmatters hanno questa funzione. Il funzionamento dipende dai plugin che desideri utilizzare sul tuo sito WordPress. Quindi funziona solo con un test. Ma se funziona, la spinta è davvero notevole.

Ottenere questa funzione gratuitamente è attualmente quasi impossibile, perché si tratta di un problema difficile. Perché ogni sito web è diverso. Anche ogni sottopagina di un sito web è diversa e cambia costantemente grazie agli aggiornamenti. L'unico modo per ottenere il 100% delle prestazioni è sviluppare una profonda comprensione di ciò che accade effettivamente quando ogni pagina viene caricata. Solo se sei disposto a intraprendere questo percorso che richiede molto tempo, potrai effettivamente ottenere un 100 per ogni pagina.

Conclusione - Rendere WordPress più veloce

Ci sono molte leve per ottimizzare le prestazioni di WordPress. Un hosting WordPress veloce è importante e alla base di tutto. Ma solo un hosting veloce non garantisce la massima velocità. Per questo è necessario:

• Rendi le risorse del sito web il più piccole possibile, cioè comprimile.
• Seleziona il formato giusto (ad esempio WebP o SVG). Carica solo immagini grandi quanto necessario per il rispettivo scopo (desktop vs. tablet vs. mobile).
• Abilita la cache o usa la cache basata sul server: Una volta che una risorsa è "assemblata", può essere caricata dalla cache finché non cambia qualcosa. Anche le risorse esterne, come i Google Fonts, devono essere caricate dal tuo server.
• Ottimizza la sequenza di caricamento. Rinviare CSS e JS tramite un plugin o un servizio, oppure caricare prima ciò che è veramente necessario e poi il resto (parola chiave: CSS critico).
• Sbarazzati di zavorre inutili: abbiamo davvero bisogno di emoji per ogni processo di caricamento?

Il consiglio più importante che posso darti per esperienza pratica: La cache e il rinvio di solito forniscono il 90% delle prestazioni. È qui che devi concentrare le tue ottimizzazioni. Ti auguro tanto successo e velocità per i tuoi progetti con WordPress e WooCommerce.