Costruire un sito web non è un processo rapido. Ci sono una miriade di problemi da affrontare e una lunga checklist di attività da spuntare. In mezzo a tutta questa complessità, c'è un'area chiave che non può essere sottovalutata: la velocità del sito.

Certo, il tuo sito web potrebbe avere un aspetto fantastico e il design UX potrebbe essere davvero eccezionale. Ma se anche solo una parte del sito è lenta a caricarsi, se si verificano ritardi durante la navigazione tra le pagine, nessuno resterà sul sito abbastanza a lungo da poter apprezzare i dettagli del tuo design all’avanguardia.

Perché la velocità del sito è così importante per le prestazioni

Il mercato online è un campo di battaglia estremamente competitivo. Quando un visitatore del sito – e, ricordiamolo, potenzialmente un cliente – arriva sul tuo sito web, sta almeno cercando di dare un’occhiata ai tuoi servizi, magari con l’intenzione di contattarti o di acquistare da te. E, se c’è un ritardo nel caricamento delle tue pagine, se ne andrà – letteralmente.

La lentezza di caricamento delle pagine è un fattore che allontana notevolmente gli acquirenti online, e le statistiche parlano da sole.Questo articolo di WebsiteBuilderExpert riporta dati secondo cui, se una pagina si carica in due secondi, ha una frequenza di rimbalzo media di appena il 9%. Se la velocità di caricamento della pagina sale a cinque secondi – cosa che, in realtà, non sembra particolarmente lenta – la frequenza di rimbalzo sale al 38%.

Gli alti tassi di rimbalzo influiscono sul posizionamento del tuo sito web nei motori di ricerca. I visitatori arrivano sul tuo sito e lo abbandonano quasi immediatamente? Significa che il tuo sito non sta offrendo molto valore: preparati a un crollo nella classifica.

Tenendo conto di tutto ciò, e pienamente consapevoli dell’importanza della velocità e delle prestazioni di un sito web nuovo o rilanciato, noi del team di Precis abbiamo voluto condividere alcune riflessioni su come siamo riusciti a raggiungere tutti i nostri obiettivi nell’affrontare il nostro progetto.

Quando, nella primavera del maggio 2021, è stato lanciato il nuovo sito web di Precis, portando a termine con successo un progetto che ha richiesto otto mesi di lavoro dall’inizio alla fine, abbiamo effettuato un test per valutare sia la velocità che le prestazioni del sito.

Siamo rimasti entusiasti del risultato: oltre ad aver realizzato un sito web velocissimo, abbiamo ottenuto un notevole miglioramento delle prestazioni organiche, aumentando le sessioni degli utenti del 16,76%, il tempo medio di permanenza sulla pagina del 20,41% e riducendo la frequenza di rimbalzo del 12,41% (dati relativi a 4 mesi dopo il lancio rispetto allo stesso periodo del 2020):

Velocità del sito Precis Digital il giorno del lancio, 26/05/21

I nostri migliori consigli per migliorare le prestazioni del sito web

Allora, come siamo riusciti a ottenere punteggi di prestazioni e metriche di velocità così elevati? Marcus Oskarsson, sviluppatore WordPress presso Awave AB, è stato il capo sviluppatore che ha lavorato al sito web e ha condiviso i suoi migliori consigli per ottenere prestazioni web veloci. A te la parola, Marcus…

1. Ridurre le risorse durante il caricamento delle pagine

“Questa è stata una delle misure pratiche più importanti che ho messo in atto. Ho ridotto la quantità di risorse caricate al momento del caricamento della pagina. Ad esempio, i menu del sito non vengono caricati finché non ci si trova effettivamente sull’intestazione del menu stesso. Ciò significa che la prima cosa che Google legge è il contenuto effettivo della pagina stessa, e non il menu. Ho inoltre implementato AJAX (utilizzato nelle applicazioni web per creare pagine dinamiche e veloci) non appena la pagina ha terminato il caricamento, in modo da ridurre al minimo la quantità complessiva di codice e consentire al browser di caricarlo solo dopo che l’utente si trova effettivamente sulla pagina.”

2. Dare priorità ai contenuti e al testo

“I designer potrebbero amare le immagini e, ovviamente, queste fanno un’ottima figura su un sito web. Ma quando si tratta di realizzare un sito web con una velocità di caricamento elevata, i contenuti e il testo devono avere la priorità. Poiché Google utilizza il parametro FCP (First Contentful Paint), la prima cosa che si vede quando si visita un sito web dovrebbe essere il contenuto vero e proprio; in caso contrario, Google penalizzerà il sito.”

“Poi, ovviamente, abbiamo aggiunto delle immagini, ma abbiamo utilizzato il formato WebP, il formato proprietario di Google per le immagini, invece di jpg o png. Le immagini WebP occupano meno spazio, il che contribuisce a velocizzare i tempi di caricamento.”

3. Utilizzare la programmazione basata su classi di utilità

“Ho utilizzato molto le cosiddette ‘classi di utilità’. Ciò significa che, supponiamo io abbia del codice che definisce l’aspetto delle sezioni del sito web: posso quindi riutilizzarlo più e più volte in tutto il sito, riducendo così la quantità complessiva di codice necessaria.”

“Quindi, ho un file per ogni ‘blocco’, e di solito un blocco contiene quattro o cinque file: CSS, PHP, JSON e JavaScript. Ma in alcuni blocchi il JavaScript non è effettivamente necessario, quindi, anche in questo caso, ho ridotto al minimo la quantità di codice richiesta in alcuni blocchi.”

4. Non caricare sempre i file CSS

“Anche in questo caso, proprio come sopra, siate accorti nel decidere cosa caricare e cosa no. In questo sito web, il file CSS viene caricato solo se è presente in quella specifica pagina, e lo stesso vale per il file JavaScript. Spesso, quando si carica una pagina, anche se non contiene CSS, questi vengono caricati comunque se presenti in altre sezioni del sito – ma il sito Precis non funziona in questo modo.

Il nostro sito non carica l'intero foglio CSS in un unico file. Lo suddividiamo in risorse più piccole e le carichiamo solo quando il blocco corrispondente viene utilizzato in una pagina. In questo modo, il contenuto viene caricato per primo, ma grazie a una soluzione di caching intelligente non si vede quel brutto effetto del carattere Times New Roman in bianco e nero prima che la pagina sia caricata. Tieni presente, però, che i browser meno recenti potrebbero non essere in grado di gestire questa soluzione.

Nel complesso, direi semplicemente di gestire con attenzione le risorse e il momento in cui vengono caricate sulla pagina.”

5. Gestione dei dispositivi mobili

“Per quanto riguarda i dispositivi mobili – dove spesso gli utenti si aspettano un sito web che si carichi più velocemente, dato che lo consultano regolarmente mentre sono in movimento – ecco due modi per affrontare la questione.

Una soluzione consiste nel creare il codice separatamente per dispositivi mobili e desktop e caricarli sempre entrambi. Tuttavia, per il nostro sito, disponiamo di uno script che verifica quale sia l’user agent e quindi carica il codice corretto quando l’utente utilizza un determinato dispositivo. L’idea di realizzare un sito in cui il codice venga caricato contemporaneamente per chi ridimensiona le pagine non funziona nella realtà: gli utenti semplicemente non ridimensionano le pagine con una frequenza tale da giustificare quella quantità di codice.”

E adesso?

Se questo articolo ti è piaciuto (così come il sito web veloce su cui è ospitato), non dimenticare di seguirci su LinkedIn per altri consigli utili e guide pratiche su tutte le discipline del marketing digitale.