Francesco Palazzini.

Come velocizzare le pagine di un sito web

Breve guida sul come velocizzare un sito web per ottenere un miglior posizionamento sui motori di ricerca.

Riassunto

Questo dovrebbe essere abbastanza per farti avere un punteggio attorno agli 80/100 su diversi tools online. Puoi valutare la velocità della tua pagina con PageSpeed Insights di Google.

Preambolo

Google ha indicato che la velocità di caricamento delle pagine di un sito è uno dei segnali utilizzati dal suo algoritmo per classificare i siti web.

Se il tempo iniziale di caricamento delle pagine è lungo (generalmente superiore ai 200ms) l'indicizzazione del sito sui motori di ricerca potrebbe venire influenzata negativamente.

La velocità di caricamento di un sito è importante anche per l'esperienza utente. Le pagine con un tempo di caricamento più lungo tendono ad avere meno visite e un tempo di rimanenza inferiore.

E' stato dimostrato che tempi di caricamento più lunghi influiscono negativamente sulle conversioni.

Ecco come velocizzare le pagine di un sito web.

Ottimizza le immagini

Assicurati che le immagini non siano più grandi del necessario, che siano nel giusto formato e che siano compresse per il web. Considera convertirle in formato webp.

Usa immagini vettoriali (SVG) per creare modelli di immagini, come pulsanti e icone.

Gli SVG possono essere riportati direttamente nel codice html, riducendo le chiamate http che il browser effettua per aprire una pagina.

I file SVG hanno inoltre altri vantaggi:

  • Il testo nelle immagini vettoriali rimane accessibile (il che migliora anche il SEO).
  • Gli SVG si prestano bene allo styling/scripting, perchè ogni componente dell'immagine è un elemento che può essere stilizzato via CSS o reso dinamico via JavaScript.

Esempio di un svg dinamico:

1

Minimizza immagini, javascript e css

Minimizzando il codice (rimuovendo gli spazi, virgole e altri caratteri non necessari) puoi aumentare la velocità delle pagine di un sito.

Rimuovi anche il codice inutilizzato e i commenti.

Google consiglia di usare CSSNano e UglifyJS, io personalmente utilizzo altri stack e altri framework che fanno lo stesso lavoro.

Riduci i tempi di risposta del server

Il tempo di risposta di un server è influenzato dalla quantità di traffico che riceve, dalle risorse che ogni applicativo / sito usa, dal software installato e dalla soluzione di hosting che usi.

Per migliorare il tempo di risposta del tuo server, cerca i colli di bottiglia delle prestazioni come le query lente al database, il routing lento o la mancanza di memoria adeguata. Un tempo di risposta ottimale di un server dovrebbe essere sotto i 200ms.

Altra cosa da considerare è passare ad un piano hosting dedicato.

Utilizza caching lato server o una CDN

Caching lato server

Configura il webserver (generalmente nginx o apache) per effettuare il cache delle pagine.

Quando il caching è abilitato, il webserver salva le risposte in dei file su disco e usa questi file per rispondere ai browser senza dover fare il proxy delle richieste per lo stesso contenuto ogni volta.

Esempio di un sito che vende panini. Il sito è scritto in ruby.

Utente1 va su www.paninibuoni.it, il server ruby processa la pagina (qui perde del tempo per processare la pagina) e la mostra a Utente1.

Il server web nel frattempo salva la risposta in un file chiamato cache.html.

Utente2 va anche lui su www.paninibuoni.it, il server web prende il file cache.html che contiene gli stessi contenuti mostrati prima a Utente1 e lo invia a Utente2.

Nota che in questo caso il server ruby non è stato chiamato, quindi non c'è stato tempo speso a processare la chiamata.

Utente2 è contento della velocità del sito e compra i panini. Il proprietario di www.paninibuoni.it mi ringrazia perchè il sito gliel'ho fatto io. Ok mi fermo con ste cag...

CDN

Le "content delivery network" sono reti di distribuzione dei contenuti che vengono utilizzate per distribuire il carico di consegna dei contenuti.

In parole povere, le pagine del tuo sito sono memorizzate in più datacenter distribuiti in differenti aree geografiche, in prossimità dei visitatori, in modo che abbiano un accesso più veloce e affidabile al sito.

Esempio: Se sono a Venezia, è più probabile che i contenuti di un sito che visito siano provenienti da server colocati a Milano e non a Roma.

Rimuovi gli script bloccanti

I browser salvano la struttura di un sito in un 'albero' chiamato DOM (Document Object Model). Analizzano l'HTML prima di poter mostrare una pagina.

Se il browser, durante questo processo, incontra uno script che modifica il contenuto della pagina o aggiunge effetti grafici, si ferma e lo esegue prima di poter continuare.

Ciò rallenta il tempo di visualizzazione della pagina (ovviamente questi script devono essere rimossi, se possibile).

Contatti


Sono raggiungibile al telefono solo via WhatsApp / Telegram.