whatsapp
keyboard_arrow_down Contatti

Martedì

11

Luglio 2023

Come aumentare velocità del sito web in modo efficace

Come aumentare la velocità del sito web

  1. blog Come aumentare la velocità del sito web
event_available
schedule

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!

Ariadne's Arts

Shop Online di Spiritualità e Cristalli

Bracciale feng shui pixiu Drusa in ametista Incenso angel protection Pirite grezza Bracciale in occhio di tigre
Visita lo Shop

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.

Cerchi collaborazioni professionali?

Ecco cosa abbiamo creato per te

  • Portale online per professionisti
  • Suggerimenti di profili in linea con la tua riceca
  • Eventi, consigli, nuovi lavori, opportunità di collaborazione
  • Tutto in un unico portale completamente Italiano!

Compila il questionario per saperne di più

Eureka Web

Scopri di più

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 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:

Anche il tema è fondamentale per aumentare la velocità del tuo sito web, infatti dovrai:

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:

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.

Ti è piaciuto questo articolo?

favorite thumb_down
Autore articolo

Fabio

Sono un terribile realista. Pratico e determinato ma anche un grande sognatore, ecco perché do continuamente vita a nuovi progetti online e non. Nel 2019 ho fondato Eureka Web proprio per rendere possibile tutto questo. Insieme possiamo realizzare la tua idea!


Visita il sito
library_books

Leggi anche

Come rimuovere CSS e JavaScript in WordPress senza plugin
Scopri
come testare la velocità del sito web
Scopri
Qual è lo speed test più affidabile
Scopri

Contattami

perm_identity
alternate_email
phonelink_ring
message

Il tuo messaggio è stato inviato con successo!
Ti risponderemo a breve

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

message
perm_identity
alternate_email

keyboard_arrow_up