La velocità di caricamento di un sito web è uno dei fattori SEO più importanti, uno dei pochi fattori dichiarati da fonti ufficiali: Google continua infatti a concentrarsi molto sulla User Experience come metrica di valutazione di un sito web.
Ma i benefici di una buona velocità di caricamento infatti vanno ben oltre la SEO, ed è per questo che Google la considera un fattore importante: secondo una ricerca da loro condotta è stato rilevato che il 53% degli utenti che visitano un sito mobile lo abbandonano se sono necessari più di 3 secondi per il caricamento dello stesso e che per ogni secondo di caricamento le conversioni diminuiscono del 20%.
Cercare di comprendere come migliorare la velocità del proprio sito è quindi fondamentale per aumentarne la visibilità.
Ma se da una parte questo compito potrebbe risultare scoraggiante per chi non è uno sviluppatore, per fortuna non mancano strumenti online di (quasi) facile utilizzo anche per chi non ha competenze specifiche in materia.
Prima di addentrarci nell’illustrazione di alcuni di questi strumenti permettimi alcune dovute premesse:
- Le strategie descritte in questo articolo sono adatte a siti semplici realizzati in WordPress.
- Siti più complessi, ecommerce, o siti realizzati con altre piattaforme, potrebbero richiedere diverse strategie.
- Ricordiamoci sempre che il perfezionismo è il primo limite da superare: non bisogna lasciarsi influenzare negativamente (una volta ottenuti pessimi risultati dai test che seguiranno) al punto da decidere di rifare completamente il proprio sito: una giusta combinazione delle strategie di seguito riportate potrebbe risultare sufficiente per migliorare la velocità del proprio sito e quindi i risultati di questi test.
Misurare la velocità di una pagina web
Come misuriamo la velocità del nostro sito e come valutiamo se non sia troppo lento?
Il primo pensiero potrebbe essere quello di affidarci al famoso Google PageSpeed Insights, strumento gratuito di Google che ci fornisce una serie di informazioni e suggerimenti su come migliorare i tempi di caricamento di una pagina:
- ridurre il tempo di risposta del server;
- attivare la compressione;
- sfruttare la cache del browser;
- eliminare il codice di blocco del rendering all’interno della schermata del browser;
- minimizzare il codice;
- comprimere e ridimensionare le immagini…
Ma cosa vorranno dire – all’atto pratico – tutte queste cose?
Il Google PageSpeed Insights può essere decisamente uno strumento utile, ma più lo si usa e più ci si rende conto che:
- il sistema di misurazione potrebbe essere non così affidabile come ci si aspetterebbe; ad esempio test sulla stessa pagina in tempi diversi potrebbero dare risultati diversi… il trucco in questo caso sta nel capire che non dobbiamo implementare soluzioni per ottenere un buon risultato (fine a se stesso) ma il nostro obiettivo è sempre migliorare l’esperienza dei nostri utenti!
- Google non sembra usare questi valori di velocità del sito in termini assoluti, ma piuttosto in relazione ai nostri competitor… ad esempio se abbiamo il nostro bel sito dove promuoviamo la nostra attività da freelance… non dobbiamo paragonare le nostre prestazioni con un ecommerce!
Guardiamo invece i nostri competitor e chi affolla le SERP delle nostre parole chiave principali.
Ma quindi se questo strumento non ci convince, che dobbiamo fare?
Individuiamo innanzitutto i parametri su cui focalizzare la nostra attenzione… Comunemente gli sviluppatori si concentrano su tre elementi:
- Time to first byte (TTFB), un valore utilizzato per misurare la reattività di un web server o un’altra risorsa di rete. In pratica misura la velocità con cui, una volta avvenuta una richiesta, il server (o CDN) invia il primo byte di informazione. Idealmente dovrebbe essere sotto i 200 ms (millisecondi), o almeno rimanere sotto i 500 ms (uno studio di Moz ha stimato che molti siti ben posizionati avevano un TTFB intorno ai 350 ms, mentre siti che si posizionavano ad un ranking peggiore si aggiravano sui 650 ms).
- Critical render path/start render, ovvero, quando si carica il contenuto “above the fold“, quello che si vede nella prima schermata della pagina web, senza effettuare uno scroll del mouse; dovrebbe avvenire entro i 1000 ms (ovvero 1 secondo) e comunque mai oltre i 2000 ms (ovvero 2 secondi).
- Full page render, il tempo di caricamento completo della pagina (a differenza del punto sopra che si riferisce solo alla prima schermata di una pagina); idealmente non dovrebbe andare oltre i 3 secondi, sicuramente non oltre i 5 secondi (il noto portavoce di Google John Mueller raccomanda di rimanere sotto i 2, 3 secondi).
Nota che bene che TTFB è un parametro che sarà difficilmente migliorabile con le strategie descritte in questo articolo… Rimane tuttavia un suggerimento utile per valutare se dobbiamo cambiare servizio di hosting o meno!
Come procediamo quindi?
Primo passo: misuriamo!
Esistono diversi strumenti gratuiti per misurare la velocità di una pagina web. Uno tra questi è Web Page Test, un tool in grado di calcolare i tre parametri sopra esposti, nella schermata seguente illustrati come First Byte, Start Render e Load Time.
Un altro strumento molto utile è il WebSite Speed Test di Pingdom che effettua l’analisi completa del caricamento di una pagina web descrivendo in una timeline la cronologia degli oggetti caricati. Nel corso dell’analisi vengono considerati vari elementi:
- Tempo di caricamento DNS;
- Tempo di caricamento del certificato SSL (ove presente);
- Il tempo di connessione del vostro computer al server;
- Il tempo che il server impiega nell’inviare i dati;
- Il tempo che il browser attende i dati (in base alla dimensione del contenuto)
- Il tempo di ricezione (dipende dalla banda a disposizione)
Un altro strumento molto utile è GT Metrix che assegna al tuo sito un grado da F a A. I rapporti sono suddivisi in cinque sezioni diverse, tra cui PageSpeed, YSlow, il video e la cronologia. Puoi verificare e confrontare le prestazioni del sito con diversi tipi di connessione (come il cavo o il dial-up) per vedere come influisce sui carichi delle pagine.
Altre funzionalità avanzate includono una riproduzione video per analizzare dove si sta verificando il collo di bottiglia e anche la possibilità di eseguire Adblock plus. Con gli annunci disattivati puoi vedere come influenzano il caricamento del tuo sito.
Altri ancora sono…
- Key CDN Site Speed Test;
- Varvy Pagespeed Optimization Tool;
- e ce ne sono sicuramente altri ancora, degni di nota.
Cosa fare con tutti questi strumenti?
La cosa che ti consiglio di fare con questi strumenti qua sopra e con il PageSpeed Insights di Google è quella di misurare non solo la home page, ma diverse tipologie di pagine, ad esempio:
- home page e un articolo specifico;
- home page, un articolo, una pagina particolare (ad esempio dove c’è una gallery);
- home page, un articolo, una pagina e una categoria.
- …
Facendo naturalmente attenzione alle pagine che si posizionano meglio (le potresti individuare selezionando ad esempio le Pagine di destinazione con il segmento Traffico organico in Google Analytics).
Una volta individuate le pagine che vorrai testare… le potrai testare su alcuni degli strumenti visti sopra, prendine più di uno, per sicurezza.
Misura quindi i risultati prima e dopo le ottimizzazioni…
Secondo passo: puliamo il codice
Ora… Se abbiamo competenze da sviluppatori (come l’autore di questo articolo 😉 ) potremmo decidere di iniziare a pulire il codice noi stessi e implementare i suggerimenti offerti dagli strumenti illustrati qua sopra (quando queste implementazioni non compromettono naturalmente le funzionalità del nostro sito a cui non vogliamo proprio rinunciare).
In alternativa possiamo cercare tra i plugin di WordPress se c’è qualcosa che faccia al caso nostro…
Il primo plugin da citare è Autoptimize che promette di migliorare i tempi di caricamento del nostro sito attraverso la compressione CSS e JS, unendo tutti i file CSS e JS in uno solo, facendo caching del sito, comprimendo HTML, immagini e anche ottimizzando le installazioni VPS (Virtual Private Server) della piattaforma.
Terzo passo: la cache del Browser
Tra i plugin di WordPress troviamo anche i famosi plugin di cache. Quello che fa un plugin di cache è essenzialmente questo: invece che fare in modo che ad ogni richiesta da remoto si generi una determinata pagina attraverso calcoli che comportano sempre un certo uso di risorse del server… il plugin di cache prepara già una serie di “risposte pronte” che non contemplano l’uso delle risorse del server.
Un plugin che potremmo usare è WP Super Cache, un ottimo plugin di cache che oltre a fare quello che ti ho descritto (come meglio ho potuto 😉 ) qua sopra permette anche di ottimizzare i tempi di caricamento sfruttando la cache del browser, che fa in modo di non dover ricaricare una risorsa (uno dei file che compongono la nostra pagina), se l’ha già memorizzata.
Quarto passo: ottimizziamo le immagini
Infine possiamo addentrarci sul capitolo ottimizzazione delle immagini.
Un plugin che possiamo utilizzare è ad esempio Optimus con il quale si può ridurre la dimensione di un file multimediale sino al 70% mantenendo però immutata (o quasi 😉 ) la qualità.
Durante il processo di caricamento delle immagini nella libreria multimediale, il plugin invia simultaneamente le immagini al server Optimus, dove il materiale in entrata viene elaborato e inviato in forma ottimizzata. Successivamente, il plugin salva la versione dell’immagine in dimensione ridotta nella libreria.
Ci sono anche altri plugin che fanno egregiamente questo lavoro:
Ci sono anche servizi online che svolgono lo stesso compito (e che utilizzeremo in caso prima di caricare le immagini sulla nostra installazione WordPress):
Da tenere presente che in alcuni casi questi plugin potrebbero essere controproducenti da un certo punto di vista. Consideriamo il sito di un fotografo: possiamo ottimizzare tutte le immagini del sito web in massa per aumentare le prestazioni di velocità di caricamento… ma se non stiamo attenti la qualità dell’immagini si potrebbe perdere – e in realtà si perde sempre un pochino – e magari una perdita di qualità impercettibile al nostro occhio, potrebbe non esserlo altrettanto per l’occhio più allenato del fotografo, o comunque influenzare in maniera sottile il look-and-feel del sito.
Infine: ingaggia un professionista!
Possiamo ottenere ottimi risultati implementando queste strategie e configurandole come si deve. Ed è senz’altro un’ottima cosa se tra i nostri obiettivi c’è anche quello di imparare a gestire il nostro sito da soli!
Ma, a seconda dei casi, ci sono cose che ovviamente solo un bravo sviluppatore può fare. Alcune di queste potrebbero essere:
- rimuovere o sostituire determinati plugin che rallentano il sito.
- aggiustare codici, configurazioni del server e configurazioni di WordPress e dei suoi plugin in vista di aumento delle prestazioni.
Ecco quindi che un professionista preparato in materia di ottimizzazione della velocità di caricamento potrebbe fare veramente la differenza nell’ottenere buoni risultati nei test segnalati qui sopra ma soprattutto nel miglioramento dell’esperienza dei nostri utenti!
Se hai bisogno di un consiglio su come trovare questo bravo sviluppatore… Compila il form qui sotto:
🙂
Liberamente tratto da https://searchengineland.com/non-developers-guide-reducing-wordpress-load-times-2-seconds-data-281809.