Se ci fosse mai stato un indicatore che potrebbe predire il livello di professionalità di un web designer, è l’atteggiamento verso la performance. Il bisogno di ridurre di millisecondi il tempo di caricamento della pagina, ovunque sia possibile, è ciò che distingue il novizio dal maestro.
In questo viaggio per velocizzare un sito WordPress, abbiamo esaminato 4 interventi sul server per migliorare la performance di invio dei dati al client. In questo articolo, vedremo come possiamo accelerare le cose dentro a WordPress, cercando i modi per snellire il nostro contenuto senza perdere qualità o quantità.
Da client a server: come i dati viaggiano nella rete
Per capire dove possiamo tagliare e snellire i nostri dati, cerchiamo prima di capire come i dati del nostro sito vengono elaborati e inviati all’utente, ad un livello più profondo.
Avendo ricevuto una richiesta da un browser, o client, il server si rivolge alla piattaforma esaminando la sua struttura, leggendo attraverso una lista di requisiti e condizioni, prima da WordPress e poi da tutti i plugin e add-on che sono installati su di esso.
Il server prende poi tutte queste informazioni e crea una prima risposta alla richiesta del client, contenente il file HTML della pagina. Questo agisce come un modello, dicendo al browser, cosa fare con tutti i dati del sito, le risorse grafiche e testuali. In sostanza c’è scritto come assemblare tutti le componenti della pagina che verranno utilizzate.
Questa risposta iniziale include anche una lista di risorse (le componenti della pagina), per le quali il client deve fare richieste separate.
Il modo in cui il server risponde a queste richieste successive, differisce a seconda che il client sia in esecuzione su HTTP/1 o HTTP/2. Per i nostri scopi, la differenza è questa:
Se il client è in esecuzione su HTTP/1, il client manderà una richiesta per ogni risorsa. Il server risponderà inviando la risorsa richiesta al client. Il client chiederà poi la prossima risorsa della lista, e così via.
Quando il client in questione gira su HTTP/2, il server aspetterà che arrivi prima l’intera lista di richieste per le risorse richieste e solo allora risponderà inviando tutte le risorse richieste in un unico carico di massa.
Questo rende HTTP/2 molto più efficiente, ma sfortunatamente, ci sono ancora utenti in tutto il mondo che si affidano a HTTP/1. Noi web creator dobbiamo costruire i siti con il mercato globale in mente, quindi pensando anche a chi usa HTTP/1.
Page-by-page oppure full site?
Un aspetto interessante che emerge spesso, è se il server debba essere impostato per elaborare le richieste dei clienti pagina per pagina o se debba inviare al client l’intero sito in un colpo solo.
Ovviamente, se vogliamo vedere solo quella pagina, caricare tutte le informazioni di un intero sito è ridondante e una perdita di tempo. Tuttavia, se siamo su un sito, come un negozio online, dove vogliamo passare ad altre pagine, allora caricare quel sito pagina per pagina diventerà frustrante molto in fretta.
Come sai, c’è una ricerca costante ed estesa sulle tendenze attuali del mercato. Questa stessa ricerca indica che la stragrande maggioranza degli utenti preferisce o ha bisogno di vedere altre pagine dello stesso sito che ha visitato. Se un server opera in un modo o nell’altro, è definito a livello di piattaforma.
Per esempio, Elementor, di cui sono un sostenitore, fa inviare al server i dati del sito nel suo insieme, piuttosto che pagina per pagina. Questo perché la stragrande maggioranza dei web creator lo preferisce, a causa delle richieste dei loro clienti.
Questo significa che i visitatori dei siti dei miei clienti (per esempio) passano meno tempo ad aspettare che la nuova pagina venga caricata, con il risultato di un’esperienza utente più veloce ed efficiente.
Se la domanda del mercato dovesse cambiare, Elementor ha già sostenuto che adotterà le nuove tendenze.
Nota: per evitare che queste cose avvengano, si possono usare dei plugin appositi che bloccano l’esecuzione di alcuni script su determinate pagine o lungo tutto il sito. Un esempio è Asset CleanUp, di cui parleremo in un altro articolo.
Un saluto
Velocizzare un sito WordPress: le tecniche per la velocità
Come promesso, in questa serie di articoli controlliamo un sito e verifichiamo come le tecniche funzionano nella pratica. Il modo migliore per imparare a farlo bene è lavorare con un esempio di un sito web fatto male. Per l’esperimento, ho preso un sito su cui sto lavorando per un corso online. Il sito non è ottimizzato, perché ancora non è finito.
Velocizzare la piattaforma
1. Primi check sulla velocità
Eseguire un test di velocità di base utilizzando GT Matrix, o PageSpeed Insights di Google non ci mostrerà semplicemente quanto è lento il sito, ma ci darà anche spunti su dove e come fare le modifiche necessarie per velocizzare il nostro sito.
Quello che faremo ora è esaminare perché il sito è così lento, e domanderemo: Cosa possiamo fare al riguardo? Inizieremo così con i processi per velocizzare un sito WordPress, in particolare con Elementor installato. Usare un page builder è notoriamente una cosa che appesantisce il sito. Vediamo come possiamo risolvere il problema.
Le due principali preoccupazioni o ragioni per velocizzare i nostri siti sono:
- Garantire una migliore esperienza utente. Ridurre il tempo di caricamento delle pagine riduce la probabilità che gli utenti si sentano frustrati e se ne vadano subito (bouncing rate)
- Posizionare il sito nella prima pagina della SERP. La metrica della velocità è spesso citata come una delle più influenti per il posizionamento
Cominceremo con la riduzione del tempo dei processi che creano il file HTML di cui abbiamo parlato. C’è molto poco che possiamo cambiare su WordPress stesso. Il server deve comunque leggere tutte le istruzioni e le linee guida di WordPress.
La buona notizia è che WordPress migliora costantemente le cose per aiutare a velocizzare questa parte del processo. Quindi è sempre meglio avere un sito aggiornato!
La parte critica è ciò che viene dopo, cioè quando il server legge l’elenco delle istruzioni nel tema, nei plugin e negli addon, per recuperare i dati.
Stiamo parlando in millesimi di secondo, ma è qui che ogni minimo intervallo di tempo conta.
2. Installare un tema essenziale
Probabilmente sei a conoscenza del crescente movimento No-Theme o Theme-less tra i creatori professionali di siti WordPress.
I temi hanno la tendenza non solo a limitare le possibilità di design e la flessibilità, ma anche ad aggiungere tempo indesiderato al processo del server.
Questo è il motivo per cui il tema Hello Elementor è diventato così popolare così velocemente. È uno dei temi più leggeri e flessibili in circolazione. In effetti, è così leggero che è praticamente invisibile.
3. Rimuovere plugin ridondanti e inutili
Dopo aver pensato al tema, vorrai ridurre il numero di plugin che hai attivato. Ricordate che il server legge ogni singolo plugin per il frontend, che siano ridondanti o meno.
Nel sito di esempio, abbiamo plugin separati per un modulo di contatto e il menu popup. Plugin e addon che sono già disponibili su Elementor. Sono disponibili come widget personalizzabili proprio per permettere ai web creator di rendere i loro siti il più veloce possibile.
Altri plugin che puoi pensare di eliminare, sono quelli relativi a servizi che puoi delegare fuori del sito.
Per esempio:
- per la pubblicazione automatica dei nuovi post sui social, puoi usare un servizio come Integromat o Zapier
- per l’invio della newsletter, puoi usare servizi come Mailchimp o ActiveCampaign, evitando i plugin dedicati
Per velocizzare un sito WordPress, ogni funzionalità che puoi portare fuori dalla piattaforma è bene accetta.
Ottimizzare i contenuti
Avendo messo a punto il sito lato piattaforma, vogliamo rendere le cose più facili per il browser. Lo possiamo fare riducendo il peso del carico dei contenuti.
Guardando la ripartizione delle risorse nel test di velocità, in quello che è comunemente noto come cascata, si nota che i file più pesanti sono le immagini.
Prima di tutto, è bene sapere che già dalla versione 4.5, WordPress riduce automaticamente la densità di qualsiasi risorsa JPG che carichiamo nella cartella media, il che è ottimo, ma non ancora sufficiente.
Molti designer preferiscono usare tipi di file grafici come PNG, che WordPress non elabora come i JPG. Ci sono, tuttavia, un paio di grandi applicazioni e siti online, come TinyPNG, Optimole, ecc. che possono aiutarci a ridimensionare le immagini a un peso molto più accettabile.
A proposito di immagini, ci sono altre due cose da considerare quando elaboriamo le nostre risorse grafiche. Quando si tratta di dimensioni, un’immagine più grande non vi darà una migliore qualità.
Se avete una risorsa grafica che deve stare in uno spazio di 400×400 pixel, un’immagine di 2400×2400 pixel è uno spreco di peso.
Dovrai assicurarci che le immagini che carichiamo su WordPress abbiano le dimensioni dell’istanza più grande di cui hai bisogno, molto probabilmente per la vista desktop del vostro sito.
4. Ridimensiona le immagini in modo ottimale
WordPress fa un lavoro abbastanza buono nel creare diverse istanze dell’immagine in varie dimensioni pronte per essere utilizzate in modalità responsive.
Se guardi nel codice di una pagina noterai che le immagini sono ridimensionate.
Un’altra cosa che influisce sul peso di un’immagine è la sua risoluzione, che si misura in pixel per pollice, o PPI; da non confondere con DPI che è un concetto simile ma dal mondo della grafica stampata.
Un tempo i classici 72 PPI erano sufficienti per quasi ogni evenienza, anche se si trattava di velocizzare un sito WordPress. Ora bisogna considerare i formati di visualizzazione come 4K e Retina.
Per il momento non abbiamo molto da temere o preoccuparci per il 4K. Tuttavia, gli schermi Retina di Apple, su iPhone, iPad, iMac e MacBook, coinvolgono un sacco di utenti che dobbiamo considerare quando progettiamo i siti.
Consiglio: La densità di pixel della tecnologia Retina differisce da un dispositivo all’altro. Molti consigliano una risoluzione di almeno 300 PPI.
5. Usa il caching e il lazy loading
Si è molto parlato di recente dei dei plugin per il Lazy Load e il caching. Questi non sono plugin ridondanti. Infatti, sono estremamente utili per accelerare il tempo di caricamento delle pagine.
Il modo in cui i plugin lazy load funzionano, in termini semplici, è quello di mantenere le risorse principali segrete fino a quando il client ne ha bisogno. Quando il server invia la sua risposta iniziale, l’HTML che il client riceve ha dei segnaposti invece di un riferimento ad una risorsa. In questo modo, il client non aspetta di ricevere queste risorse prima di rendere la pagina per l’utente.
Google calcolerà anche il tempo di caricamento della pagina come se il sito fosse già completo. Questo non solo significa che l’utente non aspetta troppo per vedere il sito, ma Google presume che il sito si carichi molto più velocemente.
Man mano che l’utente scorre la pagina, le risorse mancanti vengono trasferite come necessario dal server, senza che l’utente perda altro tempo in attese.
Esistono molti plugin che svolgono queste funzioni. Io consiglio WP-Wocket o AutOptimize.
6. Rimuovere strutture ridondanti
In molti non ci pensano, ma usando un page builder (Elementor) è molto facile sovraccaricare di strutture ridondanti una pagina.
È meglio usare il minor numero possibile di colonne, sezioni e widget vuoti. Ognuno di questi elementi sono diverse righe di codice nel file finale solo per il fatto che esistono.
Personalmente, inizio cercando di mantenere un’intera pagina in un’unica sezione. Certo, questo non è un compito facile, ma ridurre il numero di sezioni di qualsiasi entità è una buona pratica professionale.
Inoltre, evita di usare script esterni per cose come annunci, caricatori di font, etc., che possono avere un enorme impatto sulle prestazioni del tuo sito web. Questo ci porta ad un altro concetto che è stato tirato in ballo nella comunità, e cioè la Minificazione.
7. Minificazione
La minificazione si riferisce al processo di eliminazione di tutti i contenuti ridondanti, HTML eccessivo e spazio inutilizzato, che appesantiscono il file.
Applicazioni come Kangax HTML Minifier, o Minificatore, sono strumenti progettati per identificare e rimuovere il codice HTML, JavaScript e CSS ridondante e contorto, riducendo significativamente il peso dei dati del sito.
Attenzione: a volte l’uso scorretto di questi sistemi danneggia il sito, nel senso che non verrà mostrato per come è pensato perché alcune risorse sono bloccate o in conflitto tra loro. Verifica sempre il tuo sito dopo aver attivato questo tipo di plugin ed eventualmente disattivali o impostali in modo più appropriato.
8. Fai un test finale della velocità
Una volta che abbiamo ripulito e snellito il sito, esegui un test utilizzando GT Metrix, Google o TestMySite per testare il tempo di caricamento desktop e responsive della vostra pagina insieme ai benchmark del settore e darci un punteggio basato su dati reali sull’esperienza dell’utente.
Sulla base di ricerche approfondite da parte di aziende come Google, che hanno interesse a capire cosa vogliono gli utenti online, far scendere il nostro Page Load Time a 2 secondi sarebbe ideale.
Ma per i siti davvero grandi, come i negozi online, un tempo minore di 4 secondi è già ottimo. 7 secondi o meno non è brillante ma è comunque una velocità abbastanza buona. Ricorda che dipende anche da
Una buona idea è quella di confrontare il tuo tempo di caricamento della pagina con quello dei siti dei tuoi concorrenti. Anche se non riesci a ridurre il tuo tempo di caricamento, vorrai comunque essere più veloce e più affidabile della concorrenza. Ricorda che sei in concorrenza nel tuo mercato specifico, non con tutta la rete.
Bilanciare velocità e design
Al di là di tutto ciò che abbiamo esaminato, è importante ricordare che non esiste una soluzione perfetta per la velocità.
Si tratta di fare dei test e soprattutto di trovare l’equilibrio tra ciò che abbiamo bisogno che il nostro sito fornisca e quanto velocemente lo facciamo arrivare.
Come web creator, a volte la nostra missione è quella di ammaliare il nostro pubblico con siti spettacolari, ma a volte stiamo rischiando la velocità. Ma è proprio qui che la creatività e l’ingegnosità prosperano.
Progettare per design e velocità
Gran parte di ciò che abbiamo parlato dovrebbe essere implementato, o almeno discusso, nella fase di progettazione.
Ho sottolineato l’importanza della fase di pianificazione più e più volte, sia per i contenuti ma anche per il design. La pianificazione per la velocità è essenziale per il design di un sito web.
A proposito di design, potresti prendere in considerazione di adottare un design minimalista, che non solo è alla moda ma ha dimostrato di essere molto funzionale. Forse ci farò qualche articolo in futuro, chissà.
Questa guida alla velocità per il sito è in fase di crescita e non finisce qui. Parlerò, in altri articoli, di cache, di best practice e plugin specifici. Se hai qualche consiglio o richiesta, non esitare a lasciare un commento o scrivermi tramite l’apposita pagina.
Iscriviti alla newsletter e segui il canale YouTube per essere sempre aggiornato su ogni novità!
