Martedì
11
Luglio 2023
Come aumentare la velocità del sito web
Come aumentare la velocità del tuo sito web in modo veramente efficace? Devi sapere che è un lavoro lungo e richiede conoscenze tecniche e anche di linguaggi di programmazione.
In questa guida inizieremo dalle basi per poi addentrarci in operazioni più complesse da realizzare, ovvero tutte le ottimizzazioni più efficaci per il tuo sito web.
Ultima precisazione, siccome circa il 40% dei siti web è realizzato con WordPress, questa guida si basa principalmente su questo CMS. Puoi comunque applicare molti di questi consigli anche ad altri CMS o siti web realizzati in codice.
Prima di iniziare dovrai testare la velocità del tuo sito, per vedere quali sono i principali errori da risolvere.
Ci sono tantissimi speed test, uno migliore dell’altro. Dovrai scegliere il più affidabile anche in base alle tue capacità di sviluppo web e alla complessità del progetto che vuoi realizzare.
Cambiare hosting
l primo passo per veder decollare le prestazioni è cambiare hosting, cioè lo spazio web in cui sono presenti tutti i file che compongono il tuo sito.
Ci sono diversi fornitori più o meno performanti e con tantissimi prezzi diversi. Nella maggior parte dei casi, più è alto il prezzo per l’hosting, maggiori saranno le performance generali.
Prima di comprarne uno, ricorda di confrontare le caratteristiche per scegliere il più adatto al tuo progetto.
Questa è forse il fattore che influenza maggiormente sulle prestazioni del tuo sito web in quanto dal tuo hosting dipende il tempo di caricamento di ogni risorsa del tuo sito: file CSS, Javascript, immagini e codice HTML.
L’ho provato io stesso! Cambiando hosting ho raddoppiato il numero di click in pochi mesi!
Ridurre il peso delle immagini
Questa è una pratica molto comune e consiste nel ridurre il peso delle immagini, cioè diminuire i kb delle foto mantenendo però la qualità originaria.
Ci sono diversi strumenti online che consentono questo, io ti consiglio TinyJPG perché è il migliore tra quelli che ho provato.
Ottimizzare le immagini aumenterà anche le prestazioni e il posizionamento in SERP del tuo sito web, infatti dovrai:
- Ridurre le immagini di dimensioni eccessive
- Eliminare metadati presenti nelle foto
- Usare file immagine in formati recenti (es. WebP)
- Inserire solo le foto necessarie a migliorare l’esperienza utente
Ridurre le richieste al server
Ora è giunto il momento di pensare al server e ridurre il lavoro che deve fare per mostrare il tuo sito web.
Immagina ogni immagine, file CSS e Javascript come una risorsa che il browser deve “richiedere” al server su cui è ospitato il tuo sito per mostrarle sullo schermo dell’utente.
È automatico pensare che meno risorse deve richiedere e meno tempo impiegherà il tuo sito per caricarsi completamente.
Per ridurre le richieste del server dovrai:
- Unire file CSS e Javascript in uno unico
- Limitare le immagini non necessarie
- Limitare le risorse di terze parti (Strumenti di monitoraggio, API e file esterni)
- Limitare i plugin installati
- Limitare i font
Per migliorare questo aspetto è necessario talvolta conoscere i linguaggi di programmazione con cui è realizzato il tuo sito, non solo HTML, CSS e Javascript.
Ottimizzare le risorse CSS e Javascript
CSS e Javascript sono in assoluto i file che incidono maggiormente sulle prestazioni generali di un sito. Agli sviluppatori di tutto il mondo piace molto inserire elementi grafici elaborati, animazioni, preloader e tantissimi altri elementi molto invasivi.
Le linee guida fondamentali su questi file sono:
- Se non è fondamentale toglilo
- Verifica che i file vengano caricati solo dove servono veramente, non in tutte le pagine
- Limita i nomi di classi e funzioni troppo lunghi
- Rimuovi CSS e Javascript superflui
- Minimizza il codice, elimina gli spazi bianchi e i commenti superflui (ad esempio usando CSS Minifier o JavaScript Minifier)
Se usi WordPress ti interesserà recuperare l’elenco Handle (ovvero gli ID) dei file css e javascript installati sul tuo sito, per poi verificare se rimuoverli o no.
In caso contrario, ci sono molti plugin che fanno questo lavoro, ad esempio WP Rocket.
Come aumentare velocità sito web con la cache del browser
Ora che hai snellito i file del tuo sito è necessario occuparsi della cache. Sicuramente ne hai già sentito parlare, sì è proprio quella “cosa” che rallenta il tuo PC.
In realtà non è solo questo, vediamo esattamente cosa significa.
La cache è un’unità di memoria temporanea in cui vengono salvate copie dei file dei siti web (immagini, CSS e Javascript) per poterle caricare più velocemente la prossima volta che visiti lo stesso sito.
Abbiamo parlato delle richieste al server nel paragrafo precedente. Ebbene sì, invece di effettuare una richiesta, il browser recupera la copia del file che hai salvato sul PC nella cache, velocizzando il caricamento.
Di contro, con troppi file memorizzati nella cache, il tuo PC sarà rallentato, ma questa non è colpa del sito!
Per abilitare la cache nei siti web puoi utilizzare un plugin di caching come WP Rocket o Autoptimize.
Nel file wp-config.php di WordPress dovrai anche aggiungere questa riga di codice:
define('WP_CACHE', true);Come aumentare velocità sito web eliminando i troppi plugin installati
Una delle principali cause del rallentamento del tuo sito è l’eccesso di plugin. Essi infatti aggiungono delle funzionalità a volte indispensabili ma sei sicuro che non ci sia altro modo?
Innanzitutto ti consiglio di fare una selezione molto rigida tenendo solo quelli indispensabili, poi valuta se esistono semplici porzioni di codice per ottenere lo stesso risultato senza plugin.
Puoi ad esempio usare i nostri codici per creare:
- Modulo di contatto HTML
- Ogni elemento potrà anche essere contenuto in uno shortcode per WordPress, per poterlo gestire al meglio.
Anche il tema è fondamentale per aumentare la velocità del tuo sito web, infatti dovrai:
- Sceglierlo con attenzione
- Creare un tema child per inserire le tue porzioni di codice, eliminando i plugin superflui
Ridurre il Total Blocking Time ovvero le risorse che bloccano la visualizzazione
In qualunque strumento di test del tuo sito web viene evidenziato come problema molto grave la presenza di file (Javascript soprattutto) che bloccano la visualizzazione dei contenuti fino al completo caricamento della pagina.
Questo problema di velocità chiamato TBT si risolve così:
- Spostando i file javascript dalla testa (header) alla fine della pagina (footer)
- Inserendo attributi “defer” e “async” agli script per abilitare il caricamento asincrono (ovvero in contemporanea ai contenuti della pagina)
Se usi jQuery applicare questa miglioria potrebbe far comparire l’errore “$ is not a function”, ho scritto per te una guida su come risolverlo.
Questo problema può essere dovuto molto spesso a:
- Annunci di Google AdSense
- File javascript in eccesso
- Javascript di terze parti
Riduci al minimo il lavoro del thread principale
Questa è un’altra metrica spesso evidenziata dagli speed test e indica il lavoro che deve compiere il server per caricare completamente le risorse necessarie alla pagina.
Per risolverlo dovrai:
- Limitare le immagini
- Limitare il peso delle immagini
- Limitare Javascript e CSS
- Unire file Javascript e CSS in uno unico
- Ridurre le risorse esterne
- Minimizzare il codice
- Ottimizzare la cache
Riduci il CLS: Content Layout Shift
Il CLS è una metrica fondamentale da tenere sotto controllo, infatti indica la variazione di layout degli elementi della pagina durante il caricamento.
Google chiarisce con un esempio:
Immagina di voler cliccare sul tasto “cancella ordine” di un e-commerce e questo viene prontamente rimpiazzato durante il tuo click dal tasto “conferma ordine”. Potresti involontariamente completare l’acquisto!
Forse questo è un caso molto raro ma comunque spiacevole. Nell’uso comune del web capita spesso (o capitava) di vedere elementi della pagina in continuo movimento durante il caricamento, questo potrebbe creare problemi.
Per ridurre il CLS devi analizzare ogni elemento della pagina:
- Specifica le dimensioni (width ed height) in un tag “style” all’interno dell’HTML
- Oppure usa stili in linea, sono ugualmente efficaci
- Specifica ogni altra variazione di layout in linea (padding, margin, flex-direction ecc…)
- Fai attenzione agli elementi posizionati più in alto nel sito perchè potrebbero modificare la posizione degli elementi sottostanti
Le pagine con un alto CLS vengono penalizzate anche nelle posizioni della SERP.
Come aumentare velocità sito web con un CDN
CDN è l’acronimo di Content Delivery Network, tradotto una rete di distribuzione contenuti.
Quando un utente visita il tuo sito (effettuando richieste al server) verrà gestito dal nodo CDN più vicino geograficamente alla sua posizione, senza accollare tutto il lavoro al server principale.
I CDN in sostanza tolgono parte del lavoro al server su cui è ospitato il sito e funzionano molto bene con molti utenti online contemporaneamente sul tuo sito.
Come aumentare velocità sito web evitando i reindirizzamenti
I reindirizzamenti (o redirect) allungano i tempi di caricamento per ovvi motivi: il browser impiega tempo per caricare una pagina che poi deve essere sostituita da un’altra.
Spesso però i redirect sono necessari e, a volte, fondamentali per non perdere utenti. Se proprio devi creare redirect non usare un plugin che appesantisca il sito. Ho scritto per te una guida su come fare i redirect in WordPress senza plugin.
Scrivi un commento