Daniele Capoferri

Daniele Capoferri

Grafico e Web Designer

COME MIGLIORARE LA VELOCITÀ DI UN SITO WEB

Condividi su facebook
Facebook
Condividi su twitter
Twitter
Condividi su linkedin
LinkedIn

SOMMARIO POST

La velocità di caricamento di un sito web è un aspetto fondamentale, perché è diventata un parametro fondamentale nella valutazione da parte dei motori di ricerca nel posizionare le pagine nella SERP (pagina dei risultati di ricerca) ed è altrettanto fondamentale lato utente. 

A nessuno di noi piace navigare su siti o servizi online che hanno tempi di caricamento lenti (per lenti si intende sopra i 5 secondi), bisogna tenere a mente che la maggior parte del traffico web oggi arriva dal mobile, quindi va da se che una rete mobile è tendenzialmente più lenta (ovviamente dipende dalla copertura) di una rete via cavo, magari con collegamento in fibra ottica. Maggiore è la velocità di caricamento minore sarà il tasso di abbandono del sito web e viceversa.

Tendenzialmente quando un utente naviga in rete ed accede ad un sito web, si prefissa (anche inconsciamente) un tempo limite da dedicare a quel contenuto (ad esempio 1 minuto), se il tempo di caricamento del sito o della pagina è di 8 secondi ne rimangono solo 52 secondi per navigare nel sito web e perderemo tempo prezioso per fargli compiere altre azioni nel sito web (ad esempio una vendita nel caso di un E-Commerce, oppure l’iscrizione alla newsletter, etc…).

DUNQUE, COME MIGLIORARE LA VELOCITÀ DEL SITO WEB?

Le principali cose da fare (ce ne sono altre, qui riporto quelle base) per far si che il sito sia più “leggero” sono:

  1. Immagini ottimizzate con il giusto taglio e peso, dimensioni e peso (per fare questo si possono usare i programmi di editing sia professionali come Photoshop piuttosto che dei tool on line)
  2. Concetto di Lazy loading, fare in modo che le immagini siano caricate solo al momento della richiesta del browser, mi spiego meglio: immaginiamo di avere un sito web che ha la maggiore parte delle immagini nella parte centrale e/o bassa del sito, mentre nella parte alta della home page (above the flow) ha solo un’immagine con del testo. Nel momento in cui si carica il sito web dobbiamo fare in modo che le immagini presenti nella parte bassa del sito web siano caricate SOLO quando l’utente scrolla verso il basso, e carichi SOLO l’above the flow del sito (immagine, testo e menù). 
  3. Codice JS, usare meno codice Java Script possibile (serve per il roll over delle immagini, finestre pop-up, validazione dei dati inseriti nei form, animazioni, e altre funzioni…) quindi evitare gli slider in home page soprattutto per la versione lato mobile del sito web, infatti si possono studiare soluzioni ad hoc, ad esempio versione mobile con immagine fissa in home e per la versione desktop prevedere uno slide show. Personalmente tendo ad evitare gli slide show in home page in qualsiasi versione del sito web, sia per i motivi tecnici fin qui riportati e perché francamente nessuno di mette a fissare lo schermo guardando tutte le immagini inserite nello slide show, ma se proprio si vuole un sito web strutturato in questo modo il mio consiglio è quello di non superare mai le 3 immagini. 
  4. Pagine leggere, massimo 1Mb (800 kb è l’ideale) per pagina “ce lo chiede Google”… C’è da dire che la distribuzione del peso tra tutti gli elementi che compongono una pagina web cioé:Html, Css , JavaScript, Immagini, Fonts, eventuale banner pubblicitario.Questi elementi possono variare in base all’obiettivo e tipologia di pagina, ad esempio se parliamo di una pagina prodotto di un E-commerce darò più spazio al peso delle immagini a discapito del codice CSS e HTML. Per capire meglio il concetto fatto il peso di 800 kb questo va diviso tra i 6 elementi quindi nel caso specifico potremo usare una combinazione di elementi così composta: 50 kb di Html, 50 Kb di CSS, 200 kb di JS, 400 kb di immagini, 100 kb per i font e 0 kb per i banner pubblicitari. Insomma gli elementi vanno mischiati in base al tipo di sito web, pagina e obiettivo.
  5. Server: La velocità del sito è condizionata anche dal server in cui è caricato. Non scegliete servizi a basso costo, rischiate di vanificare tutto il lavoro fatto nel sito web, di servizi ce ne sono molti soprattuto a basso costo tipo quelli da 30 €/anno, per esperienza li evito come la peste, soprattutto per i servizi di assistenza che generalmente sono molto scarsi. Il mio consiglio è quello di usare servizi sopra i 100 € all’anno (€ 0,27 al giorno). Verificate cosa vi offrono e soprattutto le garanzie del servizio assistenza! 
  6. Certificato SSL:Installate oppure nel momento della scelta del servizio Hosting, che nel server sia installato il certificato SSL.  Il certificato SSL consente di mettere il sito in sicurezza e di visualizzare nella barra del browser Chrome la dicitura “sito sicuro”.
Certificato SSL, connessione sicura (vista su Chrome).
Certificato SSL, connessione sicura (vista su Chrome).

7 ATTIVAZIONE AMP:

Se hai un blog la tecnologia AMP è tua amica! Consente il caricamento “istantaneo” delle pagine del sito web, ottima soluzione se hai un blog o un sito di notizie o comunque un sito “informativo”. Non è fondamentale implementarlo nelle pagine del sito ma solo nella parte “blog”. 

Dopo aver sistemato queste 7 parti non rimane che verificare il lavoro svolto fin qui, vediamo come si fa.

Puoi usare Chrome DevTools, è già integrato dentro Google Chrome, basta collegarsi al sito web che si vuole analizzare e con il tasto destro selezionare “ispeziona”

Strumento ispeziona attivato con il tasto destro del mouse.
Strumento ispeziona attivato con il tasto destro del mouse.

successivamente nel lato destro di Chrome vi si aprirà una finestra come questa: 

Sezione Network di strumento ispeziona.
Sezione Network di strumento ispeziona.

i dati principali da tenere d’occhio dopo aver selezionato la tab “Network” e nella barra sottostante “All” sono quelli che ho evidenziato rosso in basso, ecco cosa significano:

  • DOM ContentLoaded (in blu):indica il tempo che il browser impiega a caricare tutte le risorse contenute nel server dove risiede il sito web,
  • Load (in rosso): Sono le risorse esterne all’esterno del server (immagini, js, etc…)
  • Finish: Tempo totale che ha impiegato il browser per caricare l’intera pagina. Tenete in considerazione che quando Google fa i test di velocità, attiva una simulazione con banda 3G su uno smartphone Nexus 5, quindi cerca di simulare le condizioni peggiori di collegamento da mobile. Questa simulazione si può fare nella sezione “Audits” e successivamente cliccare il tasto “Run aduits”
Sezione Audits, tasto Run.
Sezione Audits, tasto Run.

Eesistono altri strumenti come Google speed Page , GT Metrics oppure altri tool online come Varvy (ottimo anche per analisi SEO), ce ne sono altri gratuiti e/o a pagamento, l’obiettivo è avvicinarsi il più possibile al verde cioè sopra il 75% di pagina ottimizzata. 

Inoltre bisogna tenere conto che la nostra memoria a breve termine ogni 20 secondi viene ripulita, quindi se un utente che naviga nel nostro sito impiega più di 5/7 secondi per passare da una pagina all’altra molto probabilmente finirà con il non ricordare le pagine che ha visitato precedentemente nel nostro sito web, vanificando tutto il lavoro che è stato fatto a monte per costruire un processo di acquisto (funnel) se ad esempio parliamo di un E-Commerce.

Hai altri suggerimenti per migliorare la velocità di un sito web?

Scrivili nei commenti!

Se ritieni che questo articolo ti sia stato utile condividilo nel tuo social preferito!

Alla prossima! 😉

Condividi su facebook
Facebook
Condividi su twitter
Twitter
Condividi su linkedin
LinkedIn

ALTRI ARTICOLI

WordPress 5.5 aggiornamento

WordPress 5.5, quali novità?

Ieri ho deciso di testare la nuova versione di WordPress (5.5) uscita ufficialmente il giorno 11 agosto. Si tratta di una major

Restyling sito web Rom Renzi

RESTYLING SITO WEB – Rom Renzi

Restyling del sito web per azienda che produce manufatti in metallo. Nella nuova versione il sito web è stato cambiato il layout

Lascia un commento