Da quando WPML è diventato commerciale, wpml.org sta gestendo molto più traffico. Due settimane fa, il nostro server funzionava con un carico del 95% e il tempo di risposta era superiore a 10 secondi. Con W3TC, il nostro carico è tornato al 5% e il tempo di risposta è di circa 300 ms.
Se non lo conosci, W3TC è un plugin per le prestazioni del sito. Include la cache della pagina, ma questo è solo l’inizio. Oltre alla cache di base della pagina, minimizza anche i file JS e CSS, comprime tutto ed esegue una CDN (rete per la distribuzione dei contenuti). Messe insieme, queste funzioni possono velocizzare enormemente un sito, permettendo ai siti WordPress complessi di gestire un traffico elevato.
Perché è così importante per i siti WordPress?
Un’immagine vale più di mille parole. Ecco come si carica il nostro sito senza alcuna cache (generato da Pingdom Tools):
Se pensi che questo sia spaventoso, tieni presente che in realtà era peggio. Questo grafico del tempo di caricamento è stato registrato quando il nostro server funzionava effettivamente con un carico del 5%. Quando funzionava davvero senza cache, il server cuoceva a un carico del 95% e il tempo di elaborazione era molto più lungo. Il primo byte impiegava 5 secondi per uscire e non 1/2 secondo come vedi in questo grafico.
Per visualizzare completamente la nostra home page, il nostro server ha dovuto inviare 77 file. Anche questo grafico, eseguito con un carico del server del 5%, termina con un timeout a 30 secondi (vedi le linee rosse).
È a causa di una programmazione approssimativa e di cattive pratiche di progettazione? No.
La potenza di WordPress deriva dalla modularità. Puoi scegliere qualsiasi tema tu voglia, con qualsiasi combinazione di plugin. Significa che ognuno di questi è sviluppato in modo indipendente e funziona con le proprie risorse. La maggior parte dei plugin che abiliti include diversi file CSS e Javascript e contribuisce agli sforzi di elaborazione di PHP e MySQL. Potresti ottimizzarlo manualmente, ma poi perderesti tutta questa grande modularità e torneremmo al punto di partenza.
Analizza il tuo sito con gli strumenti di Pingdom o con un altro misuratore del tempo di caricamento della pagina (c’è un componente aggiuntivo per Firefox per questo). Guarda quali file vengono caricati e il loro ordine. Noterai che i file CSS caricano immagini e altri CSS e che ci sono un sacco di file Javascript caricati per ogni pagina.
Per stuzzicarti l’appetito, ecco cosa abbiamo ottenuto usando tutte le funzionalità di W3TC:
I numeri che vedi qui sono corretti. Vengono recuperati in totale 28 file per visualizzare la pagina. 5 file provengono da wpml.org (il nostro server) e il resto proviene dalla CDN (rete per la distribuzione dei contenuti). PHP non deve fare quasi nulla per servire questa pagina, tranne controllare che sia nella cache e fare pochi altri piccoli controlli.
L’intera pagina si carica in meno di 2 secondi e causa un carico che riusciamo a malapena a misurare sul server. Noi siamo felici, i visitatori sono felici e anche Google è felice.
Passo 1) Cache della pagina
La prima e più basilare cosa che vorrai fare è abilitare la cache della pagina. Vai su Performance, abilita W3TC e configura la sezione Page Caching.
Per la cache della pagina, siamo rimasti con le impostazioni di base. Una cosa che abbiamo aggiunto è stata quella di escludere le sezioni degli account cliente e dei download dalla cache della pagina, in modo che W3TC non interferisca con gli account cliente di WPML e i download di WPML.
Se stai usando una cache opcode, W3TC ne trarrà vantaggio per velocizzare ulteriormente il tuo sito. Noi non la stiamo usando, ma ne vale la pena se stai eseguendo un’elaborazione PHP complessa che non è memorizzata nella cache.
Passo 2) Minimizzazione: impacchetta e comprimi CSS e JavaScript
Ricordi tutti quei file CSS e JS che il tema e i plugin aggiungono? Ora è il momento di sistemare il carico che stanno causando.
La minimizzazione raccoglie più file di risorse, li impacchetta in un singolo file e lo comprime. Il risultato è un file più grande invece di dozzine di file minuscoli.
Anche se la dimensione totale potrebbe ridursi solo del 50%, il carico che questo fa risparmiare è enorme. Invece di dover inviare più richieste HTTP e ottenere molti file minuscoli, il browser invia una singola richiesta e li ottiene tutti insieme. Questo cambiamento è probabilmente il maggior contributo al miglioramento della reattività del tuo sito, specialmente per i nuovi visitatori (che non hanno ancora i tuoi CSS e JS nella cache).
Fai clic sul pulsante Help nella parte superiore della pagina. W3TC esaminerà l’intero sito e cercherà i file di risorse. Quindi, ti permette di scegliere quali combinare. Normalmente puoi selezionarli tutti, ma devi prestare un po’ di attenzione a quello che fai, poiché questo può cambiare l’ordine di caricamento.
Una volta selezionati i file CSS e JS da minimizzare, devi assicurarti che il loro ordine sia corretto.
Per i file CSS, trascina i file su e giù nell’elenco.
L’ordine che vedi in questo elenco dovrebbe corrispondere all’ordine in cui vengono caricati i file CSS senza la minimizzazione. Puoi vederlo nel sorgente della tua pagina HTML.
I file Javascript sono un po’ più complicati. Qui, l’ordine di caricamento è ancora più critico poiché l’ordine sbagliato provocherà errori JS e funzionalità compromesse.
W3TC ti permette di scegliere quali file JS vanno nella sezione dell’intestazione (header) e quali nel corpo (body). Ad esempio, gli script di Google Analytics andrebbero appena prima, mentre jQuery va nell’intestazione, poiché deve essere eseguito per primo (e al di fuori dell’elenco di minimizzazione).
Passo 3) Rete per la distribuzione dei contenuti (CDN)
Per noi, la ciliegina sulla torta si presenta sotto forma di una CDN splendidamente funzionale.
Configurare ed eseguire una CDN esula dallo scopo di questo articolo, poiché richiede la configurazione e un account in un servizio di terze parti.
Per i nostri siti, usiamo Amazon S3 per l’archiviazione e CloudFront per la distribuzione. Ci sono altre ottime opzioni là fuori che puoi esplorare e confrontare.
Una volta configurato il tuo account CDN, W3TC invia i tuoi file locali alla CDN e sostituisce i link dal tuo server ai file nella CDN. Quindi, il tuo server invia solo i file HTML e la CDN si occupa del resto.
Mentre il tuo server è una singola macchina, la CDN è in realtà una rete di server. Invierà i file dal server più vicino a ciascun visitatore. Le CDN possono servire file statici molto più velocemente di quanto possa fare un singolo server. Usando una CDN, migliori l’esperienza dei tuoi visitatori e riduci drasticamente l’utilizzo della larghezza di banda e della rete del tuo server.
Dovresti seguire la procedura guidata di configurazione della CDN in W3TC. Ti aiuterà a trasferire la libreria media, il tema e le risorse dei plugin sulla CDN.
Ti stai divertendo con l’ottimizzazione delle prestazioni del sito? Faccelo sapere lasciando un commento qui!
