Come abbiamo reso WordPress più veloce dei generatori di siti statici (Case study – Velocizzare WPBeginner)

In occasione del 10° anniversario di WPBeginner, ho condiviso che la nostra infrastruttura di hosting ha ricevuto un enorme aggiornamento grazie al nostro partner di web hosting, HostGator. Successivamente, molti dei nostri lettori si sono chiesti esattamente come abbiamo reso WPBeginner velocissimo e ho iniziato a ricevere email che chiedevano i dettagli.

Sì, WPBeginner si carica più velocemente della maggior parte dei generatori di siti statici e, in alcuni casi, anche più velocemente dei siti Google AMP. Non si tratta solo di vantarsi; si tratta di condividere le tecniche esatte che abbiamo utilizzato per far funzionare WordPress al suo massimo potenziale.

In questo articolo, ti darò uno sguardo esclusivo dietro le quinte su come abbiamo ottimizzato WordPress per renderlo più veloce dei generatori di siti statici e delle piattaforme headless CMS.

Nota: Questo articolo è un po' più tecnico di quanto pubblichiamo solitamente su WPBeginner. Per gli utenti non esperti di tecnologia, consiglio di seguire la nostra guida definitiva su come velocizzare WordPress.

Contesto

Ultimamente WordPress ha ricevuto una cattiva reputazione da parte degli sviluppatori "moderni" che affermano che WordPress è lento.

L'affermazione è solitamente seguita da: dovresti passare a un generatore di siti statici JAMstack come GatsbyJS. Altri nel mondo enterprise diranno che dovresti passare a un CMS headless come Contentful.

Diversi miei amici imprenditori di grande successo hanno iniziato a chiedermi se questo fosse vero.

Alcuni hanno persino iniziato il processo di migrazione a un CMS headless perché hanno letto studi di casi su come altri hanno ottenuto enormi miglioramenti di velocità passando da WordPress a generatori di siti statici.

Questo è stato molto frustrante per me perché sapevo che stavano sprecando decine di migliaia di dollari in costi di migrazione. Senza contare gli infiniti costi di personalizzazione che si accumuleranno in futuro.

Quindi l'ho presa come una sfida per dimostrare che un grande sito di contenuti WordPress come WPBeginner può caricarsi altrettanto velocemente, se non più velocemente, della maggior parte dei generatori di siti statici moderni.

Puoi chiamarmi all'antica, ma alla fine della giornata, un sito statico è solo una pagina che viene caricata dalla cache.

Risultati

Prima di passare all'infrastruttura esatta di hosting WordPress, alle configurazioni del server e ai plugin, penso sia utile condividere i risultati.

Ecco quanto velocemente la home page di WPBeginner viene caricata su Pingdom dal loro server di Washington, DC:

A seconda dell'ora del giorno e della posizione da cui effettui il controllo, questo risultato varierà da 400 ms a 700 ms, il che è piuttosto veloce per una home page.

Ecco un test che ho eseguito per una singola pagina di post, poiché ha immagini più grandi e più contenuti:

Abbiamo anche ottenuto un punteggio perfetto di "100" nel test di velocità della pagina di Google per desktop. Sebbene abbiamo ancora un po' di margine di miglioramento per il punteggio mobile.

I risultati sopra riportati sono per le pagine memorizzate nella cache, che è ciò che i nostri lettori e i bot dei motori di ricerca ottengono quando visualizzano il nostro sito web. Il tempo di caricamento percepito di WPBeginner è quasi istantaneo (maggiori dettagli più avanti).

Per confronto, ecco un risultato del test di velocità per la home page di Gatsby. Questo è un popolare generatore di siti statici di cui molti sviluppatori parlano entusiasticamente:

Ecco il risultato del test di velocità della home page di Netlify, un popolare host di siti statici, che molti sviluppatori raccomandano. Notare che hanno la metà delle richieste e la loro dimensione della pagina è il 30% di WPBeginner, eppure si carica ancora più lentamente della nostra home page.

La velocità della home page di Contentful, il CMS headless che è "come le aziende offrono migliori esperienze digitali", non è affatto ottimizzata. Questo è stato il sito web più lento che abbiamo testato.

Condivido queste statistiche non per screditare gli altri framework, ma piuttosto per dare una prospettiva che non tutte le novità sono brillanti come potrebbero sembrare.

WordPress con una corretta infrastruttura di hosting e ottimizzazioni può essere veloce quanto qualsiasi generatore di siti statici. Inoltre, nessun'altra piattaforma si avvicinerà al livello di flessibilità che WordPress offre ai proprietari di aziende attraverso il suo vasto ecosistema di plugin e temi.

Infrastruttura di hosting di WPBeginner

Quando si tratta della velocità del sito web, nulla gioca un ruolo più importante della tua infrastruttura di web hosting.

Come molti di voi già sanno, sono un cliente HostGator dal 2007. Ho avviato il blog WPBeginner nel 2009 su un piccolo account di HostGator hosting condiviso.

Man mano che il nostro sito web cresceva, siamo passati al loro hosting VPS e poi ai server dedicati.

Nell'ultimo decennio, ho avuto la possibilità di lavorare a stretto contatto con molti dei loro membri del team, e sono diventati una parte estesa della famiglia WPBeginner.

Quindi, quando ho accettato la sfida di rendere WPBeginner più veloce dei generatori di siti statici, mi sono rivolto a loro per chiedere aiuto.

Ho condiviso la mia visione con il loro team di leadership, e si sono offerti di aiutarmi a costruire un setup di hosting enterprise unico nel suo genere per WPBeginner.

Hanno messo i migliori ingegneri dei team Bluehost e HostGator a lavorare a stretto contatto con me per rendere WPBeginner velocissimo.

Ecco una panoramica di come appare la configurazione di hosting di WPBeginner:

Come puoi vedere, si tratta di una configurazione multi-server distribuita su due regioni geografiche (Texas e Utah). Ci sono un totale di 9 server, escluso il cloud del load balancer. Ogni server è una CPU Xeon-D con 8 core (16 thread) con 32 GB di RAM e 2 x 1 TB SSD (configurazione RAID).

Stiamo utilizzando la piattaforma di bilanciamento del carico cloud di Google, in modo da poter avere un autoscaling e un bilanciamento del carico senza interruzioni, in tutto il mondo.

Once the hardware was set up with proper data syncing in place, the Bluehost and HostGator teams worked together to optimize the server configurations for WordPress. My hope is that some of these optimizations will soon make it into future WordPress hosting plans

Riepilogo della configurazione del server

Riassumere le configurazioni dei server di questa complessa configurazione in pochi paragrafi è molto difficile, ma farò del mio meglio.

Stiamo utilizzando Apache come software del server web perché il team lo conosce meglio. Non entrerò nel dibattito NGINX vs Apache.

Stiamo utilizzando PHP 7.2 insieme a pool PHP-FPM, in modo da poter gestire carichi elevati di processi e richieste. Se la tua società di hosting non utilizza PHP 7+, allora ti stai perdendo una seria ottimizzazione della velocità.

Stiamo utilizzando la cache Opcode con un avanzato cache warmer per garantire che nessun utente reale debba sperimentare una visualizzazione di pagina non memorizzata nella cache.

Stiamo anche utilizzando la cache degli oggetti con memcache, in modo da poter migliorare il tempo di risposta per i colpi di pagina non memorizzati nella cache e altri tempi di risposta delle API nell'area di amministrazione di WordPress per gli utenti connessi (i nostri scrittori). Ecco una scheda di caricamento di rete della nostra schermata "Tutti i post" nell'area di amministrazione di WordPress:

Per metterla in prospettiva, l'esperienza della nostra area di amministrazione è ora 2 volte più veloce di quella che avevamo in precedenza.

Per il nostro server di database, siamo passati da MySQL a MariaDB, che è un clone di MySQL ma più veloce e migliore. Siamo anche passati da HyperDB a LudicrousDB perché ci aiuta a migliorare la nostra replica del database, il failover e il bilanciamento del carico.

Ci sono anche molte altre configurazioni che ci aiutano con le prestazioni e la scalabilità, come HTTP/2 e HSTS per una connessione più veloce + crittografia, la possibilità di avviare server aggiuntivi in nuove regioni in caso di interruzione del data center, ecc.

Sento di non rendere giustizia all'incredibile configurazione che il team ha costruito, ma sappiate che la mia forza principale è il marketing. Sì, sono un blogger che scrive di WordPress, ma molte delle ottimizzazioni tecniche qui sono ben al di sopra delle mie competenze.

Sono state realizzate da ingegneri super intelligenti del team Endurance, tra cui David Collins (architetto capo di Endurance / CTO di HostGator), Mike Hansen (sviluppatore core di WordPress) e altri che ringrazierò nella sezione dei crediti qui sotto.

CDN, WAF e DNS

Oltre all'hosting web, le altre aree che giocano un ruolo significativo nella velocità del tuo sito web sono il tuo provider DNS, la tua rete di distribuzione dei contenuti (aka CDN) e il tuo firewall per applicazioni web (WAF).

Sebbene io li abbia elencati come tre cose separate, molte aziende offrono ora queste soluzioni in un piano in bundle come Sucuri, Cloudflare, MaxCDN (ora StackPath CDN), ecc.

Poiché voglio avere il massimo controllo e distribuire il rischio, sto utilizzando tre società separate per gestire ogni parte in modo efficiente.

Il DNS di WPBeginner è alimentato da DNS Made Easy (la stessa società di Constellix). Sono costantemente classificati come i provider DNS più veloci al mondo. Il vantaggio di DNS Made Easy è che posso effettuare la direzione del traffico globale quando un data center specifico sulla mia CDN o WAF non funziona correttamente per garantire il massimo tempo di attività.

La nostra CDN è alimentata da MaxCDN (ora StackPath CDN). Fondamentalmente ci permettono di servire i nostri asset statici (immagini, file CSS e JavaScript) dalla loro vasta rete di server in tutto il mondo.

Utilizziamo Sucuri come nostro firewall per applicazioni web. Oltre a bloccare gli attacchi, agiscono anche come un ulteriore livello di CDN e le loro prestazioni complessive sono semplicemente incredibili. Credo che abbiano la migliore soluzione firewall per WordPress sul mercato.

Quando si lavora all'ottimizzazione della velocità di un sito web, ogni millisecondo conta. Ecco perché l'utilizzo di questi fornitori di soluzioni, combinato con la nostra nuova infrastruttura di web hosting, fa un'enorme differenza.

Per illustrare, ecco la ripartizione a cascata di WPBeginner.com vs GatsbyJS.org vs CloudFlare.com:

Notate che il tempo DNS, il tempo SSL, il tempo di connessione e il tempo di attesa di WPBeginner sono tutti di prim'ordine rispetto a questi altri siti web popolari. Ciascuno di questi miglioramenti si accumula per fornire i migliori risultati.

Instant.page, Immagini Ottimizzate e Altre Best Practice

Una delle cose che potresti aver notato è il tempo di caricamento quasi istantaneo quando navighi nei post e nelle pagine di WPBeginner.

Oltre a tutte le cose che ho menzionato sopra, stiamo anche barando sulla latenza utilizzando uno script chiamato instant.page che utilizza il precaricamento just-in-time.

In sostanza, prima che un utente faccia clic su un link, deve passarci sopra il mouse. Quando un utente ha passato il mouse per 65 ms (un periodo di tempo molto breve), uno su due farà effettivamente clic sul link.

Lo script Instant.page inizia a precaricare quella pagina in questo momento, quindi quando l'utente fa effettivamente clic sul link, gran parte del lavoro pesante è già stato fatto. Questo fa sì che il cervello umano percepisca il tempo di caricamento del sito web come quasi istantaneo.

Per abilitare Instant.page sul tuo sito, puoi semplicemente installare e attivare il plugin WordPress Instant Page.

Questo script è piuttosto carino. Consiglio vivamente di visitare il loro sito web e fare clic sul pulsante "test your clicking speed" per vedere come inganna il cervello.

Ottimizzazione delle immagini per il Web

Sebbene siano in fase di sviluppo nuovi formati di immagine come webp, non li stiamo ancora utilizzando. Chiediamo invece a tutti i nostri scrittori di ottimizzare ogni immagine utilizzando lo strumento TinyPNG.

Puoi anche automatizzare la compressione delle immagini utilizzando plugin come Optimole o EWWW Image Optimizer.

Tuttavia, personalmente preferisco che il team lo faccia manualmente, in modo da non caricare file di grandi dimensioni sul server.

Attualmente, non stiamo effettuando alcun lazy loading per le immagini, ma ho intenzione di aggiungerlo nel prossimo futuro ora che Google ha il supporto per il lazy loading integrato in Chrome 76.

C'è anche un ticket nel core di WordPress per aggiungere questa funzionalità a tutti i siti (spero davvero che accada presto), così non dovrò scrivere un plugin personalizzato.

Limitare le query HTTP + Best Practices

A seconda dei plugin di WordPress che utilizzi, alcuni aggiungeranno file CSS e JavaScript aggiuntivi ad ogni caricamento di pagina. Queste richieste HTTP aggiuntive possono sfuggire di mano se hai molti plugin sul tuo sito web.

Per maggiori dettagli, consulta come i plugin di WordPress possono influenzare il tempo di caricamento del tuo sito.

Ora, prima che saltiate alla conclusione sbagliata che troppi plugin di WordPress siano dannosi, voglio farvi sapere che ci sono 62 plugin attivi in esecuzione sul sito web di WPBeginner.

Quello che devi fare è combinare i file CSS e JavaScript dove possibile per ridurre le richieste HTTP. Alcuni plugin di caching per WordPress come WP Rocket possono farlo automaticamente con la loro funzione di minificazione.

Puoi anche seguire le istruzioni in questo articolo per farlo manualmente, che è quello che il nostro team di WPBeginner ha fatto.

Oltre alle richieste HTTP che aggiungono plugin e temi, vuoi anche essere consapevole di altri script di terze parti che aggiungi al tuo sito web, poiché ogni script influenzerà la velocità del tuo sito web.

Ad esempio, se stai eseguendo molti script pubblicitari o script di retargeting, questi rallenteranno il tuo sito. Potresti voler utilizzare uno strumento come Google Tag Manager per caricare gli script in modo condizionale solo quando sono necessari.

Se sei un sito web supportato da pubblicità come TechCrunch o TheNextWeb, allora c'è molto poco che puoi fare al riguardo, poiché la rimozione degli annunci non è un'opzione.

Fortunatamente, WPBeginner non si affida a script pubblicitari di terze parti per guadagnare denaro. Vuoi vedere come guadagna WPBeginner? Vedi il mio post sul blog su il reddito di WPBeginner.

Lezioni apprese (finora) + I miei pensieri finali

Questa è un'infrastruttura di hosting completamente nuova e sono sicuro che ci saranno un sacco di lezioni che imparerò nel tempo.

Finora adoro i miglioramenti di velocità perché ci hanno aiutato ad aumentare il nostro posizionamento SEO e la nostra area amministrativa è molto più veloce.

Con la nuova configurazione multi-server, abbiamo introdotto un nuovo flusso di lavoro di distribuzione per portare WPBeginner al livello degli altri siti di prodotti di Awesome Motive.

Ciò significa che ora abbiamo un controllo delle versioni adeguato integrato e ci sono misure in atto per impedirmi di essere avventato (cioè aggiungere plugin senza test adeguati, aggiornare plugin dalla dashboard senza testare, ecc.).

Questi cambiamenti aprono anche la strada a me per uscire finalmente dallo sviluppo e passare le redini del sito WPBeginner al nostro team di sviluppo.

Ho resistito a questo per anni, ma penso che il momento stia arrivando e devo solo accettarlo.

La nuova configurazione non ha cPanel o WHM, quindi questo mi rende praticamente inutile comunque dato che non sono più molto fluente con la riga di comando.

Finora abbiamo imparato due grandi lezioni:

Innanzitutto, aggiornare WordPress non è così semplice a causa della sincronizzazione/replicazione del server. Quando abbiamo aggiornato il mio blog personale (SyedBalkhi.com) a WordPress 5.2, i file di aggiornamento non si sono sincronizzati correttamente su uno dei nodi web e il debug ha richiesto molto più tempo del previsto. Stiamo lavorando per costruire un processo di build/test migliore per questo.

In secondo luogo, dobbiamo avere una migliore comunicazione tra i team perché abbiamo avuto una piccola crisi con errate configurazioni del load balancer che hanno causato alcuni tempi di inattività. A peggiorare le cose, ero su un volo transatlantico con Turkish Airlines e il WiFi non funzionava.

Fortunatamente tutto si è risolto grazie ai tempi di risposta rapidi del team di hosting, ma questo ci ha aiutato a creare diverse nuove Procedure Operative Standard (SOP) per gestire meglio l'incidente in futuro.

Nel complesso sono molto soddisfatto della configurazione e so che alcune delle configurazioni/ottimizzazioni della cache che sono state apportate per WPBeginner diventeranno una parte standard dei piani HostGator Cloud e Bluehost WordPress hosting.

Penso che questo dovrebbe essere ovvio, ma se stai solo creando un sito web, un blog o un negozio online, allora NON hai bisogno di questa sofisticata configurazione enterprise.

Raccomando sempre di iniziare in piccolo con i piani condivisi di HostGator o Bluehost come ho fatto io, e poi di aggiornare la tua infrastruttura di hosting man mano che la tua attività cresce.

Puoi applicare molte delle ottimizzazioni che ho condiviso sopra ai tuoi attuali piani di hosting WordPress.

Ad esempio, il piano standard di Bluehost include già un plugin di caching integrato che puoi utilizzare, e offrono anche PHP 7 di default.

Puoi combinare questo con una CDN + WAF come Sucuri per velocizzare significativamente il tuo sito web.

Ora, se sei un'azienda di medie dimensioni / enterprise che desidera una configurazione di hosting simile, ti prego di contattarmi tramite il nostro modulo di contatto. Posso aiutarti a indirizzarti nella giusta direzione.

Ringraziamenti speciali + Crediti

Mentre nell'articolo sopra ho fatto molti complimenti ai marchi HostGator e Bluehost, voglio prendermi un momento per riconoscere e apprezzare le singole persone che hanno lavorato dietro le quinte per realizzarlo.

Innanzitutto, voglio ringraziare il team di leadership di Endurance, Suhaib, Mitch, John Orlando, Mike Lillie e Brady Nord per aver accettato di aiutarmi con la sfida.

Voglio anche ringraziare Mike Hansen, David Collins, Rick Radinger, Chris Miles, David Ryan, Jesse Cook, David Foster, Micah Wood, William Earnhardt, Robin Mendieta, Rod Johnson, Alfred Najem e altri del team del data center per aver svolto il duro lavoro e averlo reso possibile.

Voglio fare un ringraziamento speciale a Steven Job (fondatore di DNSMadeEasy) per aver risposto rapidamente alle mie domande e avermi aiutato a capire meglio alcune impostazioni. Voglio anche ringraziare Tony Perez e Daniel Cid di Sucuri per avermi sempre coperto le spalle.

Ultimo ma non meno importante, voglio dare un riconoscimento speciale a Chris Christoff. È il co-fondatore di MonsterInsights, ed è stato così gentile da aiutarmi con molti dei test e del deployment.

Domande frequenti (FAQ)

Comprendiamo che si tratta di molte informazioni tecniche da assimilare. Ecco le risposte ad alcune delle domande più comuni che riceviamo riguardo alla velocità e alle prestazioni di WordPress.

Ho bisogno di una configurazione di hosting complessa come quella di WPBeginner per avere un sito web veloce?

Assolutamente no. Questo studio di caso mostra cosa è possibile fare a livello aziendale. Per la maggior parte degli utenti, iniziare con un piano di hosting condiviso di qualità da Bluehost o HostGator è il punto di partenza perfetto. Puoi sempre effettuare l'upgrade man mano che il tuo sito cresce.

Quali sono i fattori più importanti per la velocità di WordPress?

I tre pilastri della velocità di un sito web sono la tua infrastruttura di web hosting, la cache e una Content Delivery Network (CDN). Ottenere questi tre elementi corretti risolverà i maggiori colli di bottiglia delle prestazioni per la maggior parte dei siti web WordPress.

Posso rendere il mio sito WordPress veloce senza essere un esperto tecnico?

Sì. Sebbene questo articolo sia tecnico, non è necessario comprenderne ogni dettaglio. Seguendo guide per principianti, utilizzando un buon plugin di caching come WP Rocket e ottimizzando le tue immagini, puoi avere un enorme impatto sulla velocità del tuo sito senza alcuna conoscenza di codifica.

L'utilizzo di molti plugin rallenta WordPress?

Non è il numero di plugin, ma la loro qualità che conta. Un plugin ben codificato avrà un impatto minimo. Tuttavia, plugin mal codificati possono aggiungere codice non necessario e query al database che rallentano il tuo sito.

Risorse aggiuntive per migliorare le prestazioni del sito web

Se hai trovato utile questo studio di caso, abbiamo altre guide che ti accompagnano passo dopo passo nel processo di rendere più veloce il tuo sito WordPress. Consultale per ulteriori suggerimenti pratici:

• La guida definitiva per aumentare la velocità e le prestazioni di WordPress – La nostra guida più completa per utenti di tutti i livelli per migliorare la velocità del sito.
• Come scegliere il miglior hosting WordPress – Scopri come scegliere il provider di hosting giusto per le tue esigenze e il tuo budget.
• Perché hai bisogno di una CDN per il tuo blog WordPress – Una spiegazione dettagliata di come funziona una CDN e perché è essenziale per la velocità.
• Il blueprint di WPBeginner – Vedi l'elenco completo degli strumenti e dei plugin che utilizziamo per gestire WPBeginner oggi.

Bonus: Ecco i migliori plugin WordPress e strumenti che consiglio per tutti i siti WordPress. Potresti anche voler dare un'occhiata a Il blueprint di WPBeginner, che elenca i plugin e gli strumenti che utilizziamo per gestire il sito web WPBeginner oggi.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.