Lo scrittore Mark Smith
È un dato di fatto che la velocità media di Internet in America Latina è tutt’altro che buona. Ma molti siti web riescono a peggiorare questa situazione, poiché vengono sviluppati senza la dovuta attenzione alla velocità di caricamento e finiscono per diventare una vera e propria prova di pazienza per l'utente.
Immagina la seguente situazione: sei andato in un fast food, famoso per consegnare gli ordini in massimo 5 minuti, ma sono già trascorsi 15 minuti da quando hai effettuato l'ordine e niente. Quanto tempo ti ci vorrebbe per arrenderti? E se il fast food accanto garantisse un ordine simile in soli 3 minuti?
Su Internet la situazione è simile, ma la storia cambia in pochi secondi perché quando vuoi un certo contenuto, entri in un sito e ci metti più di 10 secondi a caricarsi, prima che te ne accorgi sei già di nuovo su Google alla ricerca di un'altra opzione , poiché ogni secondo di attesa sembra un'eternità!
Viviamo nell’era dell’immediatezza, dove il tempo vale ormai più del denaro. E quell’epoca, unita al dinamismo di Internet, rende il nostro pubblico ogni giorno più esigente. Il contenuto del tuo sito web può essere ottimo, ma se la velocità di caricamento non è buona, le persone pagheranno per vederlo?
La velocità influenza i risultati del sito web?
Nel 2010 Google annunciò che il tempo di caricamento della pagina era uno degli oltre 200 fattori di ranking. Ciò significa che il tempo impiegato dal tuo sito web per caricarsi rispetto a quello dei tuoi concorrenti è uno dei punti che influenzano il posizionamento organico dei siti web nella pagina dei risultati. Secondo una ricerca condotta da Backlinko , i siti web più lenti vengono penalizzati.
Oltre ad essere uno dei fattori di ranking organico di Google, la velocità del sito web influenza anche l'esperienza dell'utente e i tuoi risultati, secondo i seguenti dati:
- Secondo Aberdeen Group, ogni secondo in più nel caricamento di una pagina si traduce in un calo dell'11% nelle visualizzazioni di pagina e in un calo del 16% nella soddisfazione del cliente ;
- Secondo una ricerca di Kissmetrics , il 40% dei visitatori abbandona le pagine che impiegano più di 3 secondi per caricarsi e ogni secondo in più nel tempo di caricamento del sito Web riduce le conversioni del 7%;
- Secondo una ricerca di Econsultancy, l'88% degli utenti che hanno avuto una brutta esperienza quando sono entrati in un sito web a causa della velocità di caricamento hanno meno probabilità di acquistare da esso e più di un terzo di questi utenti condividerà la loro brutta esperienza con gli amici .
- Secondo Web Performance Today, l'85% degli utenti mobili si aspetta che la pagina venga caricata almeno alla stessa velocità del desktop .
Ora che sappiamo che la velocità del sito web interferisce con il coinvolgimento dei visitatori, il tasso di conversione e anche il posizionamento organico, vediamo come misurare il tuo carico per iniziare l'ottimizzazione!
Qual è il tempo di ricarica ideale?
Secondo Pingdom , che dispone di uno strumento per misurare la velocità del sito web, il tempo medio di caricamento del sito è di 5 secondi. Nel video Google Site Performance for Webmasters , Maile Ohye afferma che 2 secondi è il limite per una buona prestazione.
Anche lo specialista Geoff Kenyon ha condotto una ricerca in cui ha scoperto che, se un sito web viene caricato in 5 secondi, è più veloce di circa il 25% di Internet; in 2,9 secondi più del 50% della rete; Se si carica in 0,8 secondi, è il più veloce del 94% dell'intero sito web.
Nonostante le statistiche citate, la risposta breve è: il più rapidamente possibile. Sappiamo già che il tempo di caricamento del tuo sito web influenza i tuoi risultati, quindi l'ideale è ottimizzarlo il più possibile per mantenere il tempo di caricamento al minimo!
Come misurare la velocità del sito web?
Attualmente disponiamo di diversi strumenti gratuiti con cui è possibile misurare il tempo di caricamento di una pagina. È anche possibile vedere una diagnosi con un elenco di problemi e avvisi per sapere come ottimizzarla. Gli strumenti più utilizzati sono:
Google PageSpeed Insights
Probabilmente il più conosciuto della lista, PageSpeed Insights è uno strumento in cui, inserendo il collegamento di una pagina, è possibile analizzarne il contenuto e generare suggerimenti per la sua versione desktop e mobile.
Insieme a ogni suggerimento di miglioramento, lo strumento mostra anche come applicarlo. Ogni suggerimento è classificato come indicatore di priorità:
- “Devi correggere”: evidenziati in rosso, sono avvisi di miglioramenti che, se applicati, genereranno un maggiore impatto sul tempo di caricamento della pagina;
- “Considera correzione”: evidenziati in giallo, si tratta di avvisi di miglioramenti che non influenzano molto la velocità della pagina e non dovrebbero essere prioritari;
- “Approvato in…”: evidenziati in verde, questi sono i punti positivi della pagina.
Nonostante sia eccellente per identificare e dare priorità ai problemi, lo strumento non fornisce dettagli sul tempo di caricamento della pagina e non registra il numero di richieste di caricamento della pagina, che sono dati importanti per la diagnosi.
Molto apprezzato dagli specialisti di marketing, GTmetrix è considerato uno degli strumenti migliori e più completi per valutare il tempo di caricamento di una pagina e individuare punti di miglioramento grazie alla facilità d'uso e alla varietà di dati che presenta.
La procedura passo passo per utilizzare lo strumento è molto simile a quella di Pagespeed Insights. Ti basterà inserirlo, includendo il link della pagina che intendi analizzare, e generare il report. Tuttavia, è consigliabile creare un account (anche se gratuito) prima di iniziare l'analisi, poiché ciò permette di modificare la regione in cui verrà eseguito il test, quale sarà il browser e il dispositivo e che tipo di rete, tra gli altri. possibilità di configurazione e ulteriori dati nel rapporto finale. Più il test è vicino all'elenco delle persone che accedono al sito Web (come posizione, tipo di dispositivo e browser), meglio è.
Dopo aver incluso il collegamento alla pagina e avviato il report, lo strumento esegue un'analisi completa e presenta vari dati nella schermata successiva. In alto presenta un riepilogo con due punteggi Performance Scores , uno basato su Pagespeed Insights e l'altro su YSlow, un progetto che analizza la velocità delle pagine in base alle regole del sito ad alte prestazioni di Yahoo. I punteggi presentati sono generalmente diversi, poiché gli strumenti utilizzano criteri diversi per valutare la pagina.
Allo stesso modo di Pagespeed Insights, i colori dei punteggi ne determinano l'urgenza, ma qui abbiamo anche un confronto con la media dei siti web analizzati dallo strumento negli ultimi 30 giorni, dove La freccia accanto al punteggio rappresenta se la pagina è sopra o sotto la media, come presentato nell'esempio seguente.
Sempre nella parte superiore del report, accanto alla valutazione delle prestazioni, lo strumento presenta anche il tempo totale impiegato dalla pagina per caricarsi, qual è la dimensione della pagina e quante richieste vengono generate per il caricamento. Allo stesso modo dei punteggi di prestazione, anche qui abbiamo frecce su e giù, che indicano se è superiore o inferiore alla media.
Nella parte inferiore dello schermo vengono presentati diversi report separati da guide. Attraverso di essi è possibile identificare i punti che necessitano di essere corretti affinché il tempo di caricamento della pagina sia ridotto.
- PageSpeed: basato su Pagespeed Insights, in questa guida troverai un report completo con tutti i punti valutati dallo strumento, ordinati per priorità. Qui possiamo anche vedere il voto che viene assegnato per ciascun criterio a seconda della pagina analizzata, qual è il tipo di configurazione (se è sul server, nel contenuto o in javascript, per esempio) e, infine, cos'è la priorità di tale miglioramento.
- Yslow: simile al report presentato nella guida PageSpeed e organizzato anch'esso per priorità, si basa però sui criteri definiti da Yslow.
- Waterfall: report a cascata che presenta visivamente l'intera sequenza di richieste effettuate per caricare la pagina. Ogni riga rappresenta una richiesta, con il suo stato (se è ok, se è in reindirizzamento o anche se è un errore), qual è il suo peso e anche il tempo necessario per caricarla.
- Tempi: presentazione di una sequenza temporale del caricamento della pagina, con il tempo impiegato da ciascuna fase per caricarsi: reindirizzamento, connessione, backend, TTFB (tempo al primo byte), primo dolore, DOM interattivo, contenuto DOM caricato e Onload .
- Video: per avere il report video è necessario attivarlo e rifare l'analisi della pagina. Il video report non è altro che la visualizzazione pratica del caricamento della pagina, con l'orario cronometrato e le tempistiche mappate.
- Cronologia: abbiamo infine dei grafici che accompagnano lo storico delle prestazioni della pagina riguardo alcuni dati presentati: tempistiche, dimensione della pagina, richieste e note PageSpeed e Yslow.
Un'altra caratteristica eccellente di GTmetrix è quella di confrontare i tuoi risultati con le pagine della concorrenza. Trattandosi di uno strumento utilizzato in tutto il mondo, potrebbe non essere molto interessante utilizzare le sue misurazioni come parametro per la nostra pagina e, a seconda della nicchia, queste misurazioni potrebbero anche non avere senso. Con la funzionalità di confronto dei siti web è possibile confrontarsi con i leader del proprio segmento e avere parametri più affidabili da seguire.
La versione gratuita di GTmetrix è già completa e riesce a generare ricchi report per valutare e ottimizzare il sito web. Ma lo strumento dispone anche di versioni a pagamento più robuste, oltre ad offrire un servizio di ottimizzazione del sito web, contrattabile separatamente.
Oltre a GTmetrix e Pagespeed Insights, ci sono molti altri eccellenti strumenti con versioni gratuite per i test, come:
Cosa fare per velocizzare il caricamento della pagina?
Tutte le ottimizzazioni elencate di seguito influiscono sul tempo di caricamento di un sito Web, ma gli strumenti di test presentati indicano già come rendere la pagina più veloce, dando anche priorità all'impatto generato da ciascuna azione. Pertanto, si raccomanda che il lavoro di ottimizzazione segua i suggerimenti e la definizione delle priorità degli strumenti diagnostici.
Per i siti WordPress, la maggior parte dei suggerimenti presenta la soluzione anche tramite plugin e, in alcuni casi, lo stesso plugin può risolvere più di un problema. Scegli il plug-in che incide maggiormente sulle soluzioni necessarie ed evita più plug-in diversi, perché ciò può compromettere le prestazioni del sito web.
È molto importante ricordare che, prima di apportare qualsiasi modifica, è necessario effettuare un backup del sito per evitare possibili problemi. I siti Web WordPress possono farlo tramite plugin come UpdraftPlus e BackWPup .
Sfrutta la cache del browser
Ogni volta che qualcuno accede a un sito Web, tutto il suo contenuto viene temporaneamente scaricato sul dispositivo finché l'utente non lascia la pagina. Attraverso la cache possiamo dire ai browser, come Chrome e Firefox, di mantenere salvati questi file.
Se la persona accede nuovamente allo stesso sito Web, utilizzando lo stesso dispositivo e lo stesso browser, la pagina impiegherà meno tempo a caricarsi, poiché i file sono già memorizzati nella cache. Se non hai nulla salvato nella cache o il tempo trascorso nella cache è scaduto (è possibile definirlo), viene effettuata una richiesta dei file in questione al server del sito web.
Esistono anche modi per abilitare la memorizzazione nella cache direttamente nell'HTML del sito Web, tuttavia sono considerate tecniche obsolete e non consigliate.
Se il tuo sito web è su WordPress, sono disponibili diversi plugin che svolgono questa funzione. Il più utilizzato è W3 Total Cache , consigliato anche dalle società di hosting. Un'altra ottima alternativa (meno popolare) è WP Fastest Cache , che ha anche altre funzionalità e, rispetto a W3 e altri plugin, presenta prestazioni migliori.
Ridurre il numero di reindirizzamenti
Quando si carica una pagina, a volte è necessario reindirizzare il browser da un URL all'altro. Questo reindirizzamento può essere effettuato per indicare la nuova posizione dei contenuti, tenere traccia di clic e impressioni o correggere diversi tipi di accesso (come quando si reindirizza da www.example.com. a example.com . o da http a https).
Indipendentemente dai motivi, i reindirizzamenti aggiungono latenza di andata e ritorno, aumentando il tempo di caricamento della pagina. Il modo migliore per minimizzare questo problema è limitare l'uso dei reindirizzamenti solo ai casi in cui è necessario e trovare altre soluzioni dove non lo è.
È importante anche fare attenzione a inserire la versione esatta di una richiesta esterna per non generare quel tipo di reindirizzamento durante il caricamento. Quando si aggiunge uno script Facebook, ad esempio, è importante inserirlo con il link corretto, senza reindirizzamenti.
Per gestire i reindirizzamenti interni sui siti WordPress è possibile utilizzare plugin come Yoast SEO e SEO Redirection .
CSS, Javascript e HTML minimizzati
Nello sviluppo di un sito web, il programmatore lavora con un'organizzazione dei dati che include interruzioni di riga, spazi e commenti che non influenzano il contenuto. Tuttavia, anche se non sembra, queste informazioni finiscono per pesare sui file e influenzarne il tempo di caricamento.
Per risolvere questo problema, è possibile minimizzare (rendere più piccoli) quei file, rimuovendo tutte le informazioni non necessarie. Generalmente, questa azione fornisce una riduzione del 20-30% della dimensione del file che, a seconda della dimensione totale, può fare molta differenza.
Ma questo lavoro non ha bisogno (e non dovrebbe) essere svolto manualmente. Vari strumenti gratuiti possono aiutare. Sul sito Minifycode è possibile minimizzare HTML, Javascript e CSS, oltre alla possibilità di rendere nuovamente “carino” il codice, includendo tutte le informazioni necessarie. Nonostante questa funzionalità, è importante conservare un backup di tutti i file originali.
Se il sito è su WordPress, la cosa è più semplice, dato che sono disponibili diversi plugin che svolgono questo lavoro e molti di essi sono gratuiti. I più utilizzati sono Autoptimize , Better WordPress Minify e W3 Total Cache .
Non utilizzare Javascript che blocca il rendering
Quando entri in una determinata pagina, il tuo codice HTML viene caricato dall'alto verso il basso, effettuando le richieste in quell'ordine. Se i file CSS e Javascript sono presenti all'inizio, vengono elaborati prima del contenuto della pagina, il che finisce per aumentare il tempo di caricamento.
Alcuni strumenti di test indicano di inviare Javascript e CSS verso la fine della pagina, prima di </body> , utilizzando CSS in linea per gli stili più importanti, che influenzano direttamente l'aspetto della pagina, in modo che il contenuto non venga caricato “brutto. " ”, solo in HTML. Tuttavia, anche CSS e Javascript in linea richiedono tempo per essere caricati e l'utilizzo degli stili in linea finisce per danneggiare l'organizzazione. Inviare solo il Javascript verso la fine non influenza il contenuto, per questo motivo è consigliabile inviare il Javascript solo verso la fine dell'HTML.
Se il sito web è WordPress, il plugin Speed Booster Pack ha la funzionalità per inviare gli script al footer, risolvendo questo problema.
Abilita la compattazione gzip
Gzip comprime i file del sito, riducendo il tempo di trasferimento dei file in media del 70%.
Prima di tutto è importante vedere se il sito lo utilizza già. Oltre agli strumenti diagnostici presentati, puoi sostenere il test qui . Alcuni servizi di hosting lo fanno già automaticamente.
Sui siti WordPress è possibile abilitare gzip utilizzando plugin come W3 Total Cache e WP Performance Score Booster .
Prova ad abilitare Keep-Alive
Keep Alive consente al server di utilizzare una singola connessione per trasferire più file, riducendo la latenza e anche il consumo della CPU, che incide sul tempo di caricamento della pagina.
Generalmente, i siti Web hanno questa funzionalità disabilitata, poiché la maggior parte delle società di hosting la fornisce come facoltativa, poiché aumenta significativamente l'utilizzo della memoria del server. Pertanto, prima di abilitare la funzionalità, è importante contattare il provider di hosting del sito Web e valutare se ciò è possibile.
Se il sito web è WordPress, è possibile installare un plugin di editing .htacess , come WP Htacess Editor .
Utilizza una rete di distribuzione dei contenuti
Le reti per la distribuzione di contenuti (CDN) lavorano insieme per regionalizzare l'archiviazione dei dati. Ospitano i contenuti su server distribuiti in tutto il mondo, consentendone la distribuzione in modo rapido ed efficiente, indipendentemente da dove sia stato effettuato l'accesso.
Esistono diverse opzioni CDN, con versioni gratuite e a pagamento e facili da integrare nei siti WordPress. I principali sono:
- MaxCDN : uno dei più utilizzati, ha una prova gratuita di 30 giorni e il supporto per l'implementazione in WordPress;
- Amazon CloudFront : dispone di un plugin per l'integrazione con WordPress e di una versione gratuita con limite dati, che può essere un'ottima alternativa per iniziare;
- Azion Technologies : soluzione utilizzata da molti e-commerce, siti EAD e società di media e mercati finanziari. Dispone del supporto WordPress e di piani che variano in base al traffico utilizzato;
- CDN di Microsoft Azure : si integra con altri servizi Azure e ha anche l'integrazione con WordPress. Offre 30 giorni per i test, dopo tale periodo il valore varia in base all'utilizzo dei dati.
Ottimizza le immagini
Uno dei fattori che danneggia maggiormente il caricamento delle pagine è la scarsa cura nell’uso delle immagini. In questo caso, la dimensione dei file, la quantità e anche il formato influenzano la velocità del sito.
L'attenzione alle dimensioni dell'immagine dovrebbe già iniziare in Photoshop o in un altro strumento di modifica se l'immagine viene modificata. Questi strumenti hanno la funzione “Esporta per Web”, che permette di salvare il file già ottimizzato. Inoltre, esistono diversi siti Web e applicazioni gratuiti che svolgono questo lavoro.
Per i siti WordPress, esiste l'eccellente plug-in Smush Image Compression and Optimization , che rimuove automaticamente i dati aggiuntivi e comprime tutti i file di immagine inviati al sito Web.
Ogni immagine diversa che viene inserita nella pagina genera una nuova richiesta, quindi è importante che, prima di riempire una determinata pagina di immagini per renderla più accattivante, controlli se tutte le immagini sono davvero necessarie e rimuovi quelle che non lo sono. Ciò vale per le pagine già attive sul sito, effettuando una diagnosi attuale e rimuovendo le immagini non necessarie.
Una tecnica molto utilizzata per ridurre il numero di richieste, soprattutto per le icone, è l'uso di CSS Sprites, che combina varie immagini in una sola e tramite CSS indica quale parte dell'immagine deve apparire in un determinato posto.
Un ottimo esempio di utilizzo è Facebook : quando si accede al sito tramite desktop, le icone presentate nel menu a sinistra vengono lavorate utilizzando CSS Sprites.
Configura AMP e articoli istantanei
La connessione internet mobile non è buona come quella fissa e utilizzando il cellulare l'utente è ancora più esigente riguardo al tempo di caricamento dei siti web. Per migliorare i tempi di caricamento dei siti web sui dispositivi mobili, Google (insieme ad altre società) ha lanciato Accelerated Mobile Pages (AMP), mentre Facebook ha gli Instant Articles.
Allo stesso modo degli AMP, gli articoli istantanei consentono agli utenti di inserire contenuti ospitati su Facebook stesso e non sul sito Web di origine, facendo caricare le pagine fino a 10 volte più velocemente. Nel caso di siti web che dipendono da inserzionisti, è anche possibile configurarli in modo che durante l'articolo vengano visualizzati annunci pubblicitari. Troverete maggiori informazioni e come configurarli sul sito ufficiale .
Conclusione
Come abbiamo visto, non serve avere un bel sito web, che viene elogiato per il suo design innovativo, ma non dà priorità ai tempi di caricamento e finisce sotto la concorrenza in termini di risultati.
Pertanto, ottimizzare la velocità di caricamento del sito web è un fattore cruciale per la tua strategia di marketing digitale, poiché influenza direttamente il tuo posizionamento organico su Google e altri motori di ricerca, migliora l'esperienza dell'utente e aumenta il tasso di conversione.
Ricorda che non tutte le ottimizzazioni qui menzionate influenzeranno il tempo di caricamento ed è possibile che alcune siano già state applicate al tuo sito web. L'idea è quella di utilizzare strumenti di test per diagnosticare il sito web e dare priorità alle azioni.
Adesso è il momento di mettere tutto in pratica e commentare qui la tua esperienza. E se hai già ottimizzato il tuo sito web e conosci suggerimenti o strumenti diversi da quelli presentati qui, assicurati di condividerli nei commenti.
Domande frequenti
Qual è il tempo di caricamento ideale per un sito web?
Più velocemente possibile. Tuttavia, fonti come Pingdom, Google Site Performance for Webmasters e Geoff Kenyon indicano che il tempo massimo dovrebbe essere di 5 secondi.
Come ridurre il tempo di caricamento del mio sito web?
Riduci il numero di indirizzi, evita di caricare immagini molto pesanti (è meglio comprimerle), evita molte animazioni sul tuo sito e configura l'opzione AMP.
