Sito WordPress 60% più veloce!

Copertina del caso di studio; Sito Wordpress 60% più veloce

Google negli ultimi tempi ha spinto sempre di più sulla velocità del sito web, questo perché “Big G” sa quanto un singolo secondo possa fare la differenza nel trattenere un singolo utente.

Tra l’altro quello che per noi può sembrare un secondo risparmiato, per alcuni tipi di connessione possono essere diversi secondi, o addirittura decine.

Se siete mai stati in un paesino del sud (o in montagna inoltrata) è facile capire di che cosa parlo.

Attualmente secondo Ookala siamo oltre il 45esimo posto (nel mondo) in termini di velocità delle connessioni (sia Mobile che Wifi).

Quindi, è facile intuire come un sito più veloce permette una migliore esperienza utente, ma permette anche di risparmiare più dati mobile, e se gli utenti hanno più dati mobile possono navigare di più, e quindi finiranno in più pubblicità di Google… insomma, gli utenti saranno più felici, ma anche Google perché in maniera indiretta avrà dei “compratori” più caldi.

Tengo a specificare che il peso della pagina non è sempre correlato alla velocità d’apertura del sito.

Update di Google e necessità di un sito più veloce

E quindi Google nel tempo ha aumentato l’importanza della velocità dei siti web, e così ha introdotto delle nuove metriche che implementerà nei suoi prossimi update, e parliamo dei Core Web Vital.

Un aggiornamento non solo orientato alla velocità ma anche all’esperienza utente (si, si collegano)

E quindi, questo aggiornamento ha introdotto la necessita di migliorare la velocità, anche se ad oggi sappiamo che solo il 4% dei siti nel mondo riesce perfettamente a rientrare in questi parametri. Ma proseguiamo!

Come ho reso il sito più veloce?

Allora, darò per scontato le ottimizzazioni base che già furono fatte nel sito “lento”

  • Cache lato Browser// lato server
  • Gzip compression
  • Ottimizzazione immagini (no WebP)
  • Async/defer Javascript
  • CDN installato
  • Ottimizzazione dei font (caricarli in locale riducendo la latenza nel caricamento, eliminando i font non necessari)
  • Ottimizzazioni del output del DOM di Elementor e caricamento delle risorse migliorato (disponibili con gli ultimi aggiornamenti)

Sì, esatto, Elementor non è già un amico della velocità dei siti web, l’unico builder che si muove in maniera eccellente sotto questo punto di vista è Oxygen; builder in grado di creare un codice compatto e pulito, con poche richieste, in grado di creare landing che si caricano sotto il secondo.

Però era troppo acerbo per un progetto come quello che descrivo in questo articolo.

Però, c’è anche da dire che tutti i Builder stanno notevolmente migliorando sotto questo aspetto, complice la strizza dei Core Web vital.

Elementor ha infatti già introdotto la possibilità di non caricare codice JS inutile proveniente dall’utilizzo di Widget che però non sono utilizzati in tutte le pagine, ha inoltre promesso che utilizzerà meno librerie JS/CSS per sfruttare maggiormente il supporto del browser nativo, e queste saranno solo alcune novità insieme al miglioramento del rendering e dell’output del codice,

Una semplice modifica

Ma veniamo al succo, che cosa è cambiato che ha velocizzato così tanto il sito in questione?

Beh, sono semplicemente passato da una configurazione Apache (webserver) con Varnish su un hosting condiviso per migrare su una VPS con Litespeed e Memcached.

Nulla di più e nulla di meno.

Per farla breve Litespeed è un Web server (piuttosto recente) progettato per offrire una maggiore sicurezza, velocità, e scalabilità.

Ci sono diversi benchmark su internet che lo danno superiore come tecnologia ad Apache ed in alcuni casi Nginx.

C’è chi afferma che Nginx con Memcache e Varnish sia in grado di equiparare Litespeed nella generazione di contenuti dinamici con WordPress, ma la realtà è che in ogni caso Litespeed è molto più semplice da configurare rispetto a Nginx e Varnish.

Litespeed inoltre supporta già da tempo HTTP/3, prima di tutti gli altri Web server.

Plug-in

Ma a dare un grosso contribuito è anche il plugin nativo sviluppato dal team di Litespeed, che oltre alle ottimizzazioni classiche che si trovano nei classici plug-in, offre alcuni plus: integrazione con Memcache o Redis, controllo dell’hearthbeat, download in locale di script esterni, lazy loading degli iframe, generazione del CSS critico, e tanto altro ancora!

VPS

Oltre al contenuto del Webserver, è sicuramente stato impattante il passaggio da un hosting condiviso con oltre 600 persone per passare in un ambiente privato, purtroppo uno dei side effect più importanti di avere un hosting condiviso è proprio quello di subire quello che fanno gli altri.

Ah, ci tengo a specificare che il passaggio alla VPS non era dettato solo da questioni di velocità, infatti dentro la VPS saranno messi altri siti (Litespeed riduce molto il consumo di WordPress e questo mi avvantaggia), facendo due conti spenderò molto meno così che con l’hosting.

Poi chiaramente c’è la parte tecnica che mi sta facendo venire i capelli bianchi, negli hosting condivisi questa è una cosa di cui si occupano coloro che possiedono l’host.

Prima e dopo


Risultati ed altri miglioramenti

Come si può notare c’è stato un miglioramento sotto ogni punto di vista (per aprire le immagini per intero basta cliccarci sopra)

Abbiamo diminuito L’LCP, Total Blocking Time, Cumulative Layout Shift, i secondi per aprire il sito sono diminuiti, e così le dimensioni della pagina ed il numero di richieste.

Nella prima pagina presentata siamo passati da 8,5 secondi a 3,4 secondi, diminuendo anche il numero di risorse caricate in maniera significativa.

Siamo ancora lungi dall’avere la perfezione, anche perché si tratta di pagine aventi numerose foto e script che pesano non poco sul rendimento del sito web.

Una delle prossime mosse sarà quella di provocare l’unload di determinati script non utili all’interno di alcune pagine, questo può essere fatto tramite il file function.php o con plugin come Asset Cleanup/Perfmatters (meglio non intasarsi di plugin sulle performance che si sovrappongono).

Sul sito in questione potrebbe esserci un lieve miglioramento delle performance, ma spesso vedo dei siti con ogni genere di plug-in che portano a caricare script di vario genere in ogni singola pagina.

Una cosa che però balza all’occhio nel caso di studio è la forte diminuzione del peso delle immagini, questa diminuzione è dovuta al cambio di plugin d’ottimizzazione?

In parte sì perché Litespeed cache si occupa anche di ottimizzare le immagini, tuttavia c’è da dire che il miglioramento della velocità è stato mediato da un importante modifica: dalla diminuzione della risoluzione delle miniature dinamiche dei blog post.

Miniature

Questa è una peculiarità di Elementor, ma può essere facilmente risolta dando un limite alle dimensioni di caricamento delle immagini.

Mentre le normali immagini d’articolo erano già ottimizzate di loro.

Un’altra cosa degna di nota è la diminuzione del consumo di RAM da parte del sito, passando dagli oltre 100MB costanti ai soli 30/35MB.

In ogni caso parliamo sempre di consumi decisamente bassi.

Precisazioni

Ovviamente la verifica effettiva della velocità del sito è un qualcosa che andrebbe fatto con maggiore scientificità (se lo si vuole fare bene).

Infatti le misurazioni andrebbero fatte per più volte, in fasce d’orario diverse, ed anche per svariati giorni, sotto questo aspetto Pingdom offre degli ottimi tool a pagamento.

Oltre ai confronti continui ed in occasioni diverse, si dovrebbe anche eseguire dei test di carico con k6 ad esempio per poter simulare la risposta del sito/server a situazioni più reali/stressanti, i test dovrebbero essere fatti sia a cache attiva che disattivata (se avete zone private in cui non usate le cache allora è ancora più importante fare queste simulazioni!

Che ne dici di condividere l'articolo? ❤

Facebook
LinkedIn
Riccardo Visioli

Riccardo Visioli

Un Digital Marketer che da uno schiaffo alla cultura dello specialismo (usando la scusa della multipotenzialità)

Altro

Prendiamoci Un Tè

Facciamo Una Chiaccherata, Che Sia Virtuale O Dal Vivo, Chissà Che Non Sia Il Miglior Tè Che Tu Possa Prendere!

Foto di Riccardo Visioli digital marketer.