Prestazioni web e velocità: le migliori tecniche
Pubblicato: 2021-08-30La velocità di caricamento e le prestazioni web sono sulla bocca di tutti nelle comunità SEO e webperf e, più in generale, nell'e-marketing e nell'e-commerce.
Come ci ricorda Andy Davies, consulente e riferimento in performance web:
“Il contesto influenza l'esperienza,
l'esperienza influenza il comportamento,
il comportamento influenza i ricavi aziendali”.
Quindi, se stai cercando di aumentare le tue entrate, il tuo SEO o entrambi, devi sapere che le pagine veloci sono essenziali per la qualità della tua esperienza utente. La velocità aiuta anche a inviare i segnali giusti a Google, che ha tenuto conto della velocità sin dall'aggiornamento di Page Experience.
Come sai anche un sito deve soddisfare le aspettative degli utenti prima di soddisfare quelle dei motori di ricerca. Pertanto, la velocità di visualizzazione e l'interattività sono parte dei prerequisiti per un'esperienza utente di qualità, principalmente per promuovere coinvolgimento e conversioni! Si noti ad esempio che, secondo uno studio di Google, il 77% degli utenti di Internet è più propenso a ordinare su un sito o un'applicazione che consente loro di finalizzare rapidamente l'acquisto.
Ma quali tecniche hanno l'impatto più visibile sui tuoi visitatori, al fine di offrire loro un'esperienza di navigazione fluida e un vero senso di velocità?
Ecco una checklist organizzata per leve di ottimizzazione, per una migliore velocità di visualizzazione e interattività.
Ottimizza la velocità di visualizzazione di un sito
Più una pagina è leggera, minore è il tempo necessario per la visualizzazione.
Oltre all'ottimizzazione delle risorse, puoi impostare la velocità di visualizzazione e le dimensioni dei diversi elementi che compongono una pagina per migliorare la sensazione di velocità e usabilità. Ecco alcune tecniche essenziali:
- Compressione delle immagini nei formati più efficienti
I formati di nuova generazione WebP (consigliato da Google) e AVIF (che offre risultati ancora migliori) consentono di ridurre il peso delle immagini fino al 50% rispetto a JPEG, mantenendo una qualità visiva ottimale. Sapendo che il peso delle immagini rappresenta circa il 50% del peso delle pagine, è una leva essenziale per rendere veloci le tue pagine. - Adatta la visualizzazione di media e immagini a schermi diversi
Ridimensiona e definisci le dimensioni dei media e delle immagini a seconda che l'utente visiti il tuo sito da un dispositivo mobile o da un computer. - Riduci il peso delle risorse della pagina
Ottimizza il tuo codice: la minimizzazione (rimozione dei caratteri non necessari) di file HTML, JS e CSS e la compressione delle risorse (formati Gzip e Brotli), e in alcuni casi la concatenazione, sono tutte buone pratiche per ridurre il peso delle pagine, e quindi velocizzare la visualizzazione nel browser. - Caricamento pigro
Questa tecnica consiste nel caricare solo ciò che è visibile sullo schermo, invece di caricare l'intera pagina. In altre parole, il browser fornisce solo lo sforzo strettamente necessario in relazione a ciò che il visitatore deve vedere sul suo schermo. - Ottimizza i caratteri
Puoi ottimizzare il formato dei tuoi font (es. WOFF2, che fa risparmiare dal 30 al 50% sulla dimensione del file), e anche scegliere di visualizzare il testo anche se il font non è ancora stato caricato dal browser, per velocizzare il rendering. - Elimina le risorse di blocco e caricale in modo asincrono
Evita di bloccare il rendering delle tue pagine: preferisci caricare le risorse in modo asincrono, soprattutto per CSS (CSS critico), JS (async e defer) e font (display:swap).
Ovviamente, se non hai scelta perché alcune risorse sono essenziali all'inizio del caricamento della pagina, queste risorse devono essere il più leggere possibile. - Adotta la giusta strategia di memorizzazione nella cache
Per fare in modo che le pagine vengano visualizzate il più velocemente possibile per i tuoi utenti, memorizza nella cache gli elementi statici.
Per fare ciò, è necessario identificare in anticipo il contenuto dinamico e il contenuto statico e definire le regole per la memorizzazione nella cache del contenuto statico: per quanto tempo e su quale cache (browser, origine o CDN).
[Case Study] Gestione della scansione dei bot di Google
Leggi il caso di studioMigliora l'interattività: pagine immediatamente reattive
Oltre alla velocità con cui gli elementi vengono visualizzati nel browser, la possibilità di interagire è fondamentale per fornire una totale soddisfazione ai tuoi utenti.
Altrimenti, li esponi a frustrazione che si traduce in comportamenti come clic di rabbia, movimento frenetico del mouse sulla pagina o scorrimento casuale per verificare che la pagina funzioni.
Nel peggiore dei casi, i tuoi visitatori tornano alla pagina precedente, o lasciano il tuo sito per sempre per fare una nuova ricerca su Google, o vanno dai tuoi concorrenti.
Ricorda che in caso di esperienza negativa, il 43% degli utenti Internet si recherà sul sito di un concorrente per il prossimo acquisto. Devi quindi darti i mezzi per attirare ma anche per trattenere i tuoi visitatori.
Molto spesso, sono gli script di terze parti e Javascript che possono essere responsabili di una cattiva interattività. Infatti, finché il browser è impegnato a recuperare, analizzare ed eseguire JavaScript, non può rispondere alle interazioni dell'utente.
Anche in questo caso, esistono tecniche per ottimizzare il tuo codice e le tue Terze Parti e consentire ai tuoi visitatori di vivere un'esperienza ottimale:
- Ridurre l'impatto di Terze Parti ritardandone il caricamento
Puoi iniziare a caricare ed eseguire script dopo che gli elementi di contenuto prioritari sono stati visualizzati sulla tua pagina. Ma attenzione: tieni presente che posticipare il caricamento di JavaScript non lo rende gratuito in termini di prestazioni!
Può trattarsi di posticipare il caricamento di alcune funzionalità (chat, widget, tracking…) dopo la visualizzazione degli elementi principali per rassicurare l'utente, ma non annulla il tempo necessario al browser per elaborare il codice, lo sposta solo nel tempo. - Riduci il tempo di esecuzione di JavaScript
Suddividi le attività che richiedono tempo al browser (Attività lunghe) e assicurati anche di favorire un'elaborazione breve in risposta alle interazioni dell'utente (ad esempio, evita di ascoltare attivamente determinati eventi come lo scorrimento; e sfrutta i momenti in cui il browser ha tempo libero per eseguire determinate elaborazioni JavaScript). - Riduci il lavoro del thread principale
Il browser sarà in grado di rispondere più velocemente alle interazioni riducendo il numero di richieste e la dimensione degli scambi.
Risparmia anche tempo: automatizza le tecniche di ottimizzazione del tuo sito
Abbiamo appena coperto due aspetti molto importanti dell'esperienza utente: velocità di visualizzazione e interattività. La buona notizia è che tutte le ottimizzazioni che abbiamo appena menzionato in questa checklist possono essere automatizzate!
Inoltre, potresti esserti collegato a due dei Core Web VItals di Google che ti consentono di valutare questi aspetti, rispettivamente: il Largest Contentful Paint e il First Input Delay.
Ovviamente, dovresti anche pensare a migliorare la stabilità visiva delle tue pagine per un'esperienza utente ottimale, lavorando sul tuo punteggio di spostamento del layout cumulativo.
Dovresti sapere che queste 3 metriche (LCP, CLS e Total Blocking Time, o TBT, un equivalente di FID) rappresentano il 70% del punteggio attribuito da PageSpeed Insights.
Quindi, logicamente, qualsiasi cosa tu faccia per velocizzare le tue pagine e ottimizzare queste metriche avrà un impatto positivo sui tuoi utenti, così come sui tuoi punteggi di performance.
In breve, puoi applicare alla tua UX lo stesso approccio che applichi in SEO: contenuti ed esperienza di qualità garantiscono la soddisfazione degli utenti e contribuiscono a essere meglio indicizzati da Google.
Inoltre, come in SEO, le ottimizzazioni webperf devono essere mantenute nel tempo.
Ciò richiede tempo ed esperienza perché le tecniche e le metriche si evolvono rapidamente. Inoltre, anche in team numerosi, le risorse tecniche non hanno sempre il tempo o le conoscenze per mantenere efficacemente la velocità di un cantiere; e impiegare risorse ed energia per un'operazione di commando che cade come un soufflé è molto frustrante e persino scoraggiante.
Quindi, piuttosto che perdere tempo in manutenzione, temendo gli effetti collaterali ad ogni evoluzione del sito, e moltiplicando i plugin rischiando di sovraccaricarlo, è meglio automatizzare l'applicazione di tutte le tecniche di ottimizzazione del frontend con un unico strumento!
Dovresti sapere che nella maggior parte dei casi, per i siti di e-commerce ad alto traffico, il ROI di una soluzione di ottimizzazione webperf è facile da misurare.
In effetti, Google ha stimato che -0,1 secondi di tempo di caricamento possono portare a +8% di conversioni, che una soluzione di ottimizzazione del frontend può ottenere molto facilmente.
In Fasterize, abbiamo riscontrato che spesso anche un aumento dei tassi di conversione inferiore a 1 punto è sufficiente per garantire il ROI della nostra soluzione SaaS; per non parlare del tempo risparmiato dai team tecnici.
Essendo gli affari i tendini della guerra, puoi fare il calcolo da solo ed è facile da fare! Ti consente di comprendere l'interesse dell'automazione dell'ottimizzazione delle prestazioni e di convincere e coinvolgere i tuoi team interni.
Risparmia tempo su tutti i fronti!