Guida WPO per Ottimizzare la Velocità del Tuo Sito Web

Cos'è il WPO?

Web Performance Optimization, che chiamiamo WPO, è semplicemente l'ottimizzazione dei diversi processi che incidono sul caricamento di un sito web.

Come misurare la velocità di caricamento di un sito?

Esistono numerosi tool per misurare la velocità di caricamento. I più popolari sono:

• ›

  Google Page Speed

• ›

  Lighthouse

• ›

  GTMetrix

Prima di iniziare un audit, è importante tenere presente che la velocità di caricamento varia per ogni utente. Variabili diverse possono influenzare la percezione della velocità per un utente di Cuenca rispetto a uno di Ottawa.

Per questo motivo, invece di lavorare sui tempi di caricamento in secondi, ti consigliamo di concentrarti sull'ottimizzazione di:

• ›

  Peso del sito (MB)

• ›

  Richieste

• ›

  Tempo di risposta del server

Migliorando queste 3 aree, la velocità di caricamento migliorerà indipendentemente da dove si trova l'utente.

Approfondiremo ciascuna area e, attraverso i diversi tool, vedremo come lavorarci per migliorare le performance di ogni URL. Perché dico ogni URL? Perché, anche se sembra ovvio, mi sono imbattuto in molti casi in cui venivano valutati solo i dati della home page e, ovviamente, ogni pagina di un sito non carica le stesse risorse.

Google Developer Tools

Prima di iniziare, voglio spiegare alcune opzioni che Google offre tramite i suoi developer tools. Questo tool è uno dei più importanti per analizzare il funzionamento di un sito. Fai clic destro sulla pagina che il browser ha aperto e apparirà un pannello con diverse opzioni. Andremo su Ispeziona (Ctrl + Shift + I).

Una volta aperto questo tool, andremo all'opzione NETWORK che troverai in alto. Se premiamo di nuovo INVIO nel browser, il tool mostrerà il caricamento delle diverse risorse.

In fondo all'immagine possiamo vedere i dati che ci interessano per una visione generale di come carica il sito.

Approfondendo questo pannello dall'alto e guardando la struttura delle colonne, abbiamo:

• ›

  Name: il nome della risorsa.

• ›

  Status: il codice di risposta della risorsa (200, 301, 404...)

• ›

  Type: il tipo di risorsa (script, font, png, jpg, stylesheet...)

• ›

  Initiator: quale risorsa innesca la richiesta.

• ›

  Time: quanto tempo ha impiegato la richiesta.

• ›

  Waterfall: una rappresentazione grafica dei tempi di caricamento di una risorsa.

Se facciamo clic destro in alto, possiamo aggiungere e rimuovere colonne con queste informazioni.

Abilitare elementi informativi aggiuntivi come Domain, Scheme o Cookies può aiutare in casi specifici a localizzare risorse che potrebbero darci qualche tipo di problema, ma a questo punto ci atterremo a quelle predefinite.

C'è un aspetto che, sebbene molto interessante, toccherò solo brevemente per tenerlo a mente. La velocità di connessione, soprattutto su mobile, è un elemento chiave nel caricamento di un sito. Da questo tool possiamo simulare velocità più lente come il 3G su mobile.

Come conoscere il peso di un URL e come ridurlo?

Il peso, sia in Megabyte sia in Kilobyte, è uno dei principali motivi per cui un URL impiega tempo a caricare. Per questo iniziamo approfondendo questo aspetto, perché tracciamo la strada per ottenere una buona ottimizzazione del nostro sito.

I dati seguenti provengono dal tool citato sopra, GTMETRIX, e si riferiscono a un sito web che sto per iniziare a ottimizzare.

Ci concentreremo sui dati nella colonna di destra, quella che si riferisce a (Page Details), in particolare al Total Page Size.

A prima vista, il peso di questo sito è ben sopra la media, ma tieni presente che ciò che conta non è il peso totale del sito ma quanto tempo quel peso impiega a caricare, perché esiste una cosa chiamata Lazy Load, una funzione che ritarda il caricamento finché l'utente non ha bisogno della risorsa. Ne parleremo più avanti.

Possiamo trovare queste informazioni anche nei developer tools, nel pannello che abbiamo visto sopra, che ti ricordo di nuovo.

Se guardi in basso, sia i 7,5 MB sia le 215 richieste si avvicinano molto ai numeri riportati da GTMETRIX. È importante che tu sappia da dove GTMETRIX prende le sue informazioni nel caso in cui voglia mai usare un tool diverso.

Ora vediamo cosa pesa così tanto e come possiamo sistemarlo.

L'opzione Waterfall offre uno sguardo visivo al caricamento delle risorse, mostrando l'URL della risorsa, lo stato, il dominio e la colonna Size. Se clicchiamo su quest'ultima colonna ordina i pesi dal più grande al più piccolo e dal più piccolo al più grande.

Guardando i pesi, possiamo vedere, come accade nella maggior parte dei casi, che le immagini sono in larga parte responsabili del peso eccessivo dell'URL.

Non esiste una specifica formale sul peso massimo che dovrebbe avere un'immagine, ma raccomandiamo non più di 100 KB e, se ne hai la possibilità (se usi Photoshop ce l'hai), imposta le immagini per caricarsi progressivamente come JPG ed evita PNG ogni volta che non hai bisogno di un canale Alpha (trasparenza).

Riducendo il peso delle immagini miglioreremo significativamente il caricamento del sito, e ci sono diversi tool che puoi usare. Personalmente ottimizzo con Photoshop, ma ci sono interessanti opzioni online:

• ›

  https://imagecompressor.io/compress

• ›

  https://kraken.io/web-interface

Sia GTMetrix sia il tool di Google ci permettono di visualizzare le risorse per tipo, cioè solo immagini, script, CSS...

Questo è utile per una prospettiva più ampia su dove lavorare. Su questo URL, le immagini rappresentano 4 MB su 7,2 MB, quindi gran parte del problema del peso è lì. Tuttavia, ci sono altre risorse che spiccano come estremamente pesanti per il loro tipo, come un file CSS oltre i 700 KB e uno Script oltre i 300 KB.

A questo punto vorrei chiarire che quando portiamo avanti un'ottimizzazione della velocità di caricamento (WPO) dobbiamo affrontare alcuni problemi che, pur avendo soluzioni, non sono alla nostra portata.

In questo caso vediamo un file CSS molto grande. Se il designer ha creato un CSS oltre i 700 KB, ottimizzare quello specifico file sarà difficile.

Cosa possiamo fare per ridurre il peso di questi file?

Minify (CSS, JS e HTML)

La minificazione è un processo che cerca di ridurre il peso del file rimuovendo dati non necessari come commenti, spazi, codice ripetuto e codice non utilizzato. Esistono molti tool per eseguire questo processo, tranne per la parte del codice non utilizzato, più difficile da ottimizzare e che richiederebbe di entrare manualmente nel file (cosa che non consiglio).

Tool per minificare i file

• ›

  HTML Minifier http://kangax.github.io/html-minifier/

• ›

  CSS Nano https://cssnano.co/

• ›

  Uglify http://lisperator.net/uglifyjs/

Per fortuna stiamo parlando di WordPress e, come tutti sappiamo, in WordPress è molto raro non trovare un plugin che si occupi di questa operazione.

Personalmente mi piace usarne uno completamente gratuito, Autoptimize, e uno a pagamento, WP Rocket.

In questo articolo non voglio spiegare tanto come funzionano questi plugin, quanto come svolgere le attività di ottimizzazione. Perché se usiamo altri plugin, anche loro hanno queste opzioni, e la cosa migliore è capire cosa stiamo facendo.

Minificare con WP Rocket

Questa parte non è complessa. Andiamo semplicemente alla scheda di ottimizzazione dei file e spuntiamo la casella minify HTML. In WP Rocket questa opzione si ripete più sotto per i file CSS e JS. Tuttavia, ti consiglio di abilitare questa casella e fare delle prove. Ripeti questa opzione una alla volta, perché se qualcosa va storto sarà più facile individuare il problema.

Prima di verificare l'effetto della minificazione dobbiamo svuotare la cache, altrimenti non vedremo il risultato dell'HTML aggiornato.

Come svuotare la cache del browser?

Questo tipo di plugin include opzioni per svuotare la cache, che possiamo vedere in alto.

Un altro modo è tramite il browser, una volta abilitato Google Developer Tools (Ctrl + Shift + I).

Fai clic destro sulla freccia di "ricarica pagina" e seleziona "svuota cache e ricarica forzatamente."

Minificare con Autoptimize

Con Autoptimize, l'azione optimize è quella che esegue la minificazione, con la particolarità di offrire un'opzione per mantenere i commenti HTML. Questi commenti sono solitamente aggiunti dagli sviluppatori per conservare informazioni che possono essere utili in futuro.

Per verificare che questa ottimizzazione abbia avuto effetto, andremmo al codice sorgente dell'URL e dovremmo vedere qualcosa di simile a questo:

Il codice diventa illeggibile ma la sua funzionalità è la stessa.

Queste opzioni si ripetono allo stesso modo in WP Rocket e Autoptimize per i file CSS e JS. Come ho detto prima, non consiglio di ottimizzare tutto in una volta, ma 1 a 1. Questi plugin mantengono copie dei file minificati, quindi tornare all'originale è possibile deselezionando la casella corrispondente.

Per continuare a ridurre il peso della pagina abbiamo altre 2 opzioni:

• ›

  Rimuovere o ridurre i plugin che aggiungono CSS o JS al caricamento.

• ›

  Rimuovere o sfoltire il codice non utilizzato dal file CSS.

Queste 2 opzioni sono più complesse e richiedono più conoscenze, perché bisogna fare attenzione e assicurarsi che non ci siano chiamate da altre pagine alla parte che stai rimuovendo.

Sebbene rimuovere i plugin non sia sempre possibile a causa della risorsa che forniscono, ci sono plugin che sono meglio ottimizzati di altri, ovvero meno richieste e JS più leggero. Quindi nel meraviglioso ecosistema di WordPress c'è quasi sempre un'alternativa.

Tempo di caricamento vs tempo di risposta

Ora è il momento di parlare di richieste, tempo di risposta e tempo di caricamento. A questo punto dobbiamo menzionare una parte fondamentale del processo: il server. L'ottimizzazione del server di solito è fuori dalle nostre mani, quindi è importante scegliere una soluzione efficiente.

Ma andiamo per gradi.

Cos'è una richiesta?

Una richiesta, o HTTP Request, è una chiamata fatta dal client al server per chiedere una determinata risorsa. Le richieste possono raggiungere server diversi.

Le richieste possono essere HTTP o HTTPS. Se osserviamo la struttura di una richiesta, possiamo analizzare dove si verifica il ritardo nel tempo.

Analisi del tempo di una richiesta HTTP

Analizziamo cosa vediamo in questo grafico dei tempi.

• ›

  La richiesta è avviata ma bloccata o in coda: Se il blocco dura a lungo può essere dovuto a diverse ragioni: richieste a priorità più alta o molte richieste verso questa origine.

• ›

  DNS Lookup: il browser sta risolvendo l'indirizzo IP della richiesta.

• ›

  Connecting: il tempo necessario per connettersi al server per risolvere la richiesta. Se questo tempo è alto, potrebbe indicare problemi di rete, errori di connessione o un server sovraccarico.

• ›

  Sending: viene inviata la richiesta della risorsa.

• ›

  Waiting: questo è il tempo che il server impiega per risolvere una richiesta e inviare una risposta; se è lungo, c'è un problema sul server.

• ›

  Receiving: ricezione della risorsa.

Una richiesta HTTPS aggiunge un altro passaggio, mostrato qui.

Questi due screenshot appartengono a due siti diversi, uno non ottimizzato (HTTP Request) e un altro ottimizzato (HTTPS Request).

Se osservi attentamente e confronti, la differenza maggiore è nel tempo di attesa. In questi casi, dovresti analizzare il server più nel dettaglio.

Richieste al server: come possiamo ridurle?

Come abbiamo visto, il numero di richieste è strettamente legato al tempo di caricamento, quindi ridurne il numero migliorerebbe i tempi di caricamento di un URL. Il buon senso gioca un ruolo nel processo di ottimizzazione e capire se una risorsa è davvero utile per l'utente o per il nostro business. Questo è il momento di salutare alcune risorse che non aggiungono nulla, ma non sono io a doverlo decidere.

Tuttavia, abbiamo opzioni per migliorare le richieste, anche se queste azioni non portano un cambiamento enorme al caricamento del sito. Mi ripeto: la cosa migliore è rimuovere le risorse che non aggiungono nulla.

Combinare CSS e JS

Un'altra azione popolare nell'ottimizzazione di una pagina web è combinare le risorse CSS e JS, ma cosa significa?

L'obiettivo del combinare è ridurre le richieste al costo di aumentare il peso del file. Combinare significa unificare le diverse risorse CSS o JS in una sola.

Se i tempi di risposta sono lunghi, combinare può essere utile. Se i tempi di invio sono molto lenti, forse un'altra tecnica è migliore.

L'ideale è combinare avendo un buon server, così guadagniamo da entrambi i lati.

Combinare risorse con WP Rocket e Autoptimize

L'operazione combine con questi plugin è semplice come prima. Spuntiamo solo la casella corrispondente.

In WP Rocket le opzioni per combinare CSS e JS sono le stesse; i pannelli sono praticamente identici. Come vediamo nell'immagine, c'è una casella per aggiungere il percorso dei file che non vogliamo combinare.

Sotto la checkbox, vediamo anche una nota sul non usare l'opzione combine se stiamo usando HTTP/2. Questo articolo spiega di più su HTTP/2.

Autoptimize offre più opzioni per lavorare con CSS e ridurre le richieste. Nell'opzione che segnalo combina e ti dà un avviso sull'effetto che potrebbe avere, ma alla fine questo è sempre relativo.

In questa prima parte dell'articolo, volevo spiegare in cosa consistono certe azioni di base, quelle che vediamo solitamente in praticamente tutti i plugin di ottimizzazione WPO, ma c'è ancora molto che possiamo fare per migliorare sia le richieste sia i tempi di caricamento.

Configurazione della cache

Senza dubbio, l'ottimizzazione della cache è una delle azioni in cui noteremo i maggiori miglioramenti nel caricamento di un sito. In questo articolo sulla SEO per WordPress ho spiegato come funziona la cache. Ti incoraggio a darci un'occhiata per capire come funziona.

Autoptimize e WP Rocket eseguono azioni di caching, ma WP Rocket ti dà un paio di opzioni in più. Vale la pena notare che i plugin hanno trasformato questa ottimizzazione in qualcosa di più semplice: hai a malapena un paio di opzioni e il processo è rapido e indolore.

Come vedi, WP Rocket ti permette di lavorare su 4 cose:

• ›

  Abilitare il caching per dispositivi mobili.

• ›

  Salvare i file separatamente per dispositivi mobili.

• ›

  Abilitare il caching per gli utenti loggati.

• ›

  Specificare il tempo di pulizia della cache.

Dipende da ogni progetto quale opzione selezionare, ma con tutto questo a mente il mio consiglio è:

• ›

  Cache mobile sempre, perché anche se la maggior parte dei siti è responsive, ci sono contenuti che potresti avere su mobile ma non su desktop.

• ›

  File separati.

• ›

  Niente cache per gli utenti loggati, soprattutto perché se sto facendo modifiche non voglio il caching.

• ›

  Tempo di cache, che dipende da quanti cambiamenti fai al tuo sito. Se è un sito di notizie quotidiane, breve; se è contenuto che non si aggiorna frequentemente, più lungo.

Lazyload

La funzione lazyload aiuta a mostrare risorse (Immagini e Iframe) quando l'utente ne ha bisogno; cioè, il browser non carica queste risorse finché l'utente non scorre fino ad esse. Questa funzione è implementata in molti plugin e arriva persino preconfigurata in alcuni temi WordPress. Dalla versione 76 di Chrome in poi, è anche presente nativamente nel browser.

Questo significa che, aggiungendo l'attributo loading="lazy", il browser interpreta già il caricamento lazy dell'immagine, ma ovviamente non tutti i browser interpreteranno questo, quindi consiglio di continuare a usare il plugin. Ecco un video tratto da web.dev che mostra un esempio di cosa sia il lazy loading delle immagini.

Ottimizzazione degli iframe

Se usiamo iframe per incorporare contenuti da altri siti, abbiamo due azioni che possiamo usare per migliorare il nostro caricamento.

• ›

  Lazy loading tramite la funzione lazyload

• ›

  Oppure sostituire l'iframe con un'immagine finché l'utente non ci clicca sopra.

Sia la prima sia la seconda opzione possono essere abilitate tramite, ancora una volta, il nostro plugin di riferimento WP Rocket.

Autoptimize non ha questa parte ma offre l'installazione di un plugin complementare per farlo https://wordpress.org/plugins/wp-youtube-lyte/

Caricamento differito dei file JS con Defer o Async

I file JS sono uno dei colpevoli di ciò che gli audit di velocità chiamano render blocking di una pagina. Questo accade quando, durante il rendering, il browser si ferma per scaricare un file JS ed eseguirlo. L'obiettivo dell'ottimizzazione WPO è fornire informazioni all'utente il prima possibile, motivo per cui questo è considerato bloccante, perché nulla viene renderizzato finché il JS scaricato non viene eseguito.

Per questo questo tipo di azione tende a essere segnalato nell'audit. Quando usiamo plugin di terze parti o temi non ben ottimizzati, possiamo avere JS che blocca il rendering perché si trova, ad esempio, nell'header.

In questi casi dovremmo usare due attributi che vengono aggiunti nel codice di chiamata JS, Defer e Async. Affinché questi attributi funzionino, gli script devono essere esterni.

In SEO Alive usiamo il plugin Pre Party Resource Hints, che ti permette di selezionare quali file e quale metodo di caricamento applicare. Una meraviglia!

Qual è la differenza tra Defer e Async?

Anche se entrambi gli attributi hanno un obiettivo simile, impedire che l'interpretazione del DOM HTML sia interrotta dal JS, c'è una differenza notevole tra i due.

Con l'attributo Async la risorsa viene scaricata senza fermare il caricamento dell'HTML, ma una volta scaricata, il caricamento dell'HTML viene messo in pausa per eseguire il JS; con l'attributo defer la risorsa viene anch'essa scaricata in parallelo al caricamento dell'HTML, ma viene eseguita quando il caricamento finisce, quindi non c'è blocco da parte dello script.

A questo proposito ci sono differenze tra WP Rocket e Autoptimize. WP Rocket ti rende le decisioni molto più facili e agisce in modo semi-automatico per evitare che il JS blocchi il rendering; in Autoptimize, invece, puoi solo attivare l'opzione Async.

In Autoptimize, sotto la scheda extra abbiamo questa opzione per aggiungere i file JS che vogliamo caricare con Async, ma per maggiore flessibilità raccomandano un altro plugin complementare, "Async Javascript".

Con questo plugin possiamo lavorare sia con Defer sia con Async, e offre persino opzioni con un solo clic per facilitare le cose. Il bello di questo plugin è che possiamo lavorare con gli script ed escludere quelli che riteniamo necessari. In WP Rocket, invece, dobbiamo fidarci di ciò che fa il plugin, anche se lo fa bene.

Questa opzione si trova nella stessa scheda di ottimizzazione dei file.

Cos'è una CDN e come può aiutarci?

Una CDN è ciò che è noto come content delivery network. La CDN si occupa di salvare parte delle informazioni e delle risorse per alleggerire il carico del server per quelle risorse e rispondere meglio al carico. Le CDN hanno anche una funzione di copia geografica, per mantenere la risorsa disponibile in diversi punti e servirla all'utente indipendentemente da dove si connette. Di solito questo tipo di servizio è usato per file pesanti come Immagini e Video.

Iscriversi a questo servizio è importante quando abbiamo siti con molto traffico, anche se non dovrebbe essere escluso per siti con poco traffico.

Altre azioni che ci faranno guadagnare un po' più di miglioramento

Per concludere l'articolo abbiamo altri 3 miglioramenti che, sebbene non produrranno cambiamenti enormi nei tempi di caricamento, ci aiuteranno a ridurre le richieste, e alla fine è ciò che vogliamo.

Ottimizzazione dei font

L'ottimizzazione dei font può essere fatta tramite plugin o manualmente modificando e ottimizzando il CSS. L'ideale sarebbe richiamare solo il font che userai e non, come accade in molti casi, scaricare un file con tutti i Google Fonts.

Autoptimize ha un'opzione per lavorare sui font.

È difficile dire quale opzione scegliere senza vedere il progetto, perché non so quale font usa il tuo template e quando carica, quindi la cosa migliore è testare e vedere il risultato.

Come vedi, subito dopo le opzioni Google Fonts abbiamo "Remove Emoji", che ci farà risparmiare una richiesta al server. La sua funzione è semplicemente di convertire i simboli che rappresentano emoji nell'icona.

WP Rocket ci permette anche di disabilitare questi emoji e offre anche l'opzione di impedire che il contenuto venga incorporato in siti di terze parti.

Alla fine ci sono molte azioni per migliorare la velocità di caricamento di un sito. Non è sempre possibile lavorare in profondità per ottimizzare ogni risorsa, perché dipende dal tipo di business e da ciò di cui ha bisogno.

Spero che questa guida all'ottimizzazione WPO sia utile e che tu possa applicarla ai tuoi progetti o per i tuoi clienti.