Scoprire i segreti della SEO: presentazione della guida definitiva alla velocità del sito web

La velocità conta sia per gli utenti che per la SEO: nessuno vuole aspettare diversi secondi per caricare un sito web. Gli utenti preferiscono lasciare il tuo sito e rivolgersi a un concorrente piuttosto che perdere tempo ad aspettare. La citazione "il tempo è denaro" è vera ora come lo era quando Benjamin Franklin lo disse secoli fa. Il tempo conta anche per Google. La velocità è uno dei fattori di ranking di Google. A parità di condizioni, più veloce è il sito web, maggiore è il ranking. E non c'è nessuno che sosterrà che avere un sito web veloce non è una necessità al giorno d'oggi. La domanda è: come rendere più veloce il tuo sito web? Il nostro autore ospite in questo Unwrapping the Secrets of SEO è Tomek Rudzki, Head of the Research and Development team di Elephate, vincitore del premio "Best Small SEO Agency" agli European Search Awards 2018. Rudzi offre consigli per velocizzare il tuo sito web e vincere.

Questa guida completa alla velocità del sito Web contiene tre articoli. Leggi i seguenti post qui: The Ultimate Guide to Website Speed ​​- Part 2 e The Ultimate Guide to Website Speed ​​- Part 3.

Studio gratuito sulla velocità delle pagine

1. Il tempo è denaro

Ci sono molte ricerche che indicano che un sito web più veloce equivale a maggiori entrate.

• Pinterest si è reso conto che la riduzione dei tempi di attesa percepiti ha comportato un aumento del 15% del numero di iscrizioni .
• La BBC ha notato che per ogni secondo in più di caricamento del proprio sito Web, il 10% degli utenti se ne va.
• DoubleClick di Google ha studiato che la riduzione del caricamento della pagina da 19 (estremo!) a 5 secondi ha comportato una frequenza di rimbalzo inferiore del 35% e sessioni più lunghe del 70%.
• Lo studio di Amazon rivela che solo un secondo di rallentamento del caricamento del sito Web può comportare un calo delle vendite di 1,6 miliardi ogni anno.

Potresti dire "ok, ma non mi interessa Pinterest, la BBC o Amazon; parlami della MIA attività'”. Google ha creato un simpatico strumento che calcola l'impatto della velocità sulle entrate potenziali . Ho riempito lo strumento con i dati di esempio: visitatori mensili medi 1.000.000, tasso di conversione del 3,26%, con un valore medio dell'ordine di $ 82.

Potresti chiedere: "Tomek, perché hai scelto questi dati: tasso di conversione 3,26, ma non 1% o 4%, o anche 10%?" Ok, ho ricevuto i dati da Statista. Secondo i loro rapporti , il valore medio degli ordini di acquisto online negli Stati Uniti nel 4° trimestre del 2017 (in dollari USA) era 82. Inoltre, il tasso di conversione medio era 3,26.

Sembra che la riduzione della velocità di caricamento della pagina da 5 a 2,8 secondi possa comportare un guadagno di 1,97 milioni di dollari in più all'anno. Suona bene!

Ovviamente è solo una calcolatrice. Ma il calcolatore si basa su dati reali. Non credo che Google aggiunga alcuni zeri alla fine del valore calcolato per farlo sembrare serio.

2. Pensa sempre agli utenti mobili

Secondo Statcounter, a febbraio 2018 oltre il 55% degli utenti si connetteva a Internet tramite cellulare o tablet: statistiche impressionanti!

Al giorno d'oggi, se vuoi soddisfare i tuoi utenti mobili, dovresti:

• assicurati che il tuo sito web funzioni bene sui dispositivi mobili (cioè se è reattivo)
• rendere il sito web davvero veloce.

Devi tenere a mente che gli utenti mobili hanno spesso connessioni scadenti e utilizzano dispositivi di fascia bassa, quindi ogni kilobyte inviato sul "filo" conta davvero. Il tuo sito web potrebbe funzionare velocemente su un personal computer, con tutti gli extra, ma potrebbe essere molto lento sui dispositivi mobili. E le probabilità che tu ottenga il primo non sono più a tuo favore.

3. Usa GTMetrix

C'è un ottimo strumento che ti dice cosa puoi migliorare per rendere più veloce il tuo sito web. Puoi controllare qualsiasi sito Web gratuitamente. Non è necessario essere il proprietario di un sito Web per avviare un audit (ad esempio, ho verificato Giphy.com). Lo strumento combina sia i dati che i suggerimenti di Google PageSpeed ​​Insights e Yahoo Slow.

Vale la pena visitare https://gtmetrix.com/ e digitare l'URL del tuo sito web.

Puoi vedere l'elenco di consigli su come migliorare la velocità del tuo sito web facendo clic sulle schede "PageSpeed" o "YSlow".

Per ora, molte delle informazioni su queste schede potrebbero non essere comprensibili perché sono troppo tecniche. Va bene. Roma non è stata costruita in un giorno. Farò del mio meglio per farti iniziare. C'è un'interessante sezione chiamata "Waterfall" che ti mostra esattamente quando le risorse (file JS e CSS, file di immagine) sono state scaricate e caricate.

Ti consiglio vivamente di ottenere un account GTMetrix (è gratuito!). Gli utenti registrati possono personalizzare il test e modificare la posizione del browser e del server. Inoltre, una volta effettuato l'accesso, puoi abilitare l'opzione "crea video". L'opzione video è fantastica. Ti mostra quanto tempo dovranno aspettare gli utenti prima di poter vedere i cambiamenti visivi sul tuo sito web.

Ma non impazzire con GTMetrix

Sebbene GTMetrix sia un ottimo strumento, a volte i suoi consigli possono portarti all'inseguimento dell'oca selvaggia. Non c'è niente di sbagliato in GTMetrix. È solo che non esiste una regola "taglia unica" quando si ottimizza la velocità, qualcosa di cui GTMetrix è ben consapevole:

Ad esempio, GTMetrix consiglia di impostare la memorizzazione nella cache del browser per le risorse archiviate sul server di Google Analytics o Facebook. A dire il vero, queste risorse sono fuori dal tuo controllo: non puoi fare nulla . Gli sviluppatori di Google e Facebook hanno deciso che, per qualsiasi motivo, queste risorse non dovrebbero essere memorizzate nella cache per un lungo periodo di tempo.

Naturalmente, ci sono molti strumenti simili a GTMetrix, come WebPageTest, (che è molto più potente di GTMetrix). Tuttavia, ho deciso di presentarti GTMetrix per due motivi:

1. GTMetrix è più intuitivo
2. WebPageTest non ti dà consigli chiari su cosa fare.

Vorrei citare un altro strumento interessante: Google Lighthouse (se usi Chrome, lo hai già installato). Kamila Spodymek di Elephate ha scritto un ottimo articolo su come i SEO possono trarre vantaggio dalle metriche delle prestazioni di Google Lighthouse . Sicuramente una buona lettura!

4. Usa la compressione GZIP

C'è una regola che dovresti sapere: se una risorsa pesa meno, il browser può scaricarla molto più velocemente, il che causerà un caricamento più veloce della pagina . I tuoi utenti mobili ne trarranno davvero vantaggio.

Puoi ridurre le dimensioni dei tuoi file di testo (come HTML, SVG, CSS e JS) implementando la compressione GZIP. È abbastanza comune che la compressione GZIP risparmi il 70-80% della dimensione di una risorsa, senza perdere alcuna informazione. È davvero un grosso problema!

Visita https://checkgzipcompression.com/ per verificare quanti kilobyte puoi salvare (o già salvati!) implementando GZIP. Nel caso di Searchmetrics.com, GZIP è abilitato (ha permesso di risparmiare l'83% della dimensione della pagina). Suona bene!

Attenzione, però! A volte, i webmaster commettono un errore e comprimono tutti i file statici, inclusi JPEG, immagini PNG e PDF. Vorrei citare la documentazione di Yahoo Developer Network : “I file di immagine e PDF non devono essere compressi con gzip perché sono già compressi. Provare a gzipparli non solo spreca la CPU ma può potenzialmente aumentare le dimensioni dei file”.

Se vuoi risparmiare kilobyte aggiuntivi, è anche una buona idea minimizzare i tuoi file HTML, JS e CSS .

5. Servi immagini in scala

È un dato di fatto che un sito Web si caricherà molto lentamente (soprattutto sui telefoni cellulari!) a causa di un gran numero di immagini.

Pertanto, a volte potrebbe essere una buona idea ridurre il numero di immagini. Ma piuttosto che limitarli, consiglierei di ottimizzare quelli esistenti . Detto questo, le immagini fornite ai tuoi utenti dovrebbero essere ridimensionate e compresse (senza perdite o con perdite).

Per prima cosa, parliamo del ridimensionamento delle immagini. Diciamo che ci sono dieci miniature 220×220 per pagina, ma hai caricato immagini 800×800 sul server. Dovresti fornire agli utenti le immagini già ridimensionate o forzare il browser a ridimensionarle "al volo"?

La risposta è facile. Se non ridimensioni le immagini sul lato server, il browser deve scaricare molti più kilobyte del necessario. Per niente, perché le immagini verranno comunque ridimensionate. Inoltre, è un lavoro aggiuntivo per la GPU lato client. Per non parlare della velocità di caricamento della pagina ne risentirà.

6. Comprimi le tue immagini

Ora parliamo di compressione delle immagini. Questa è un'altra tecnica indispensabile per il web moderno.

In genere, esistono due tipi di compressione dell'immagine:

• Lossless (fa davvero un buon lavoro, puoi star certo che la qualità non ne risentirà).

• Lossy (di solito rende un'immagine più leggera, ma, come dice il nome: perdi parte della qualità).

Sorge la domanda: quale tipo di compressione è migliore: lossless o lossy?

• Dipende davvero dalla situazione. Se il tuo sito web fornisce immagini dello spazio esterno, ogni dettaglio conta. Ma se fai un blog personale, probabilmente starai bene con una compressione con perdita, anche con un tasso di compressione elevato. Ti consiglio di sperimentare per vedere quali impostazioni si adattano meglio al tuo sito web.

7. Non costringere i tuoi visitatori mobili a scaricare foto Full HD!

Gli utenti mobili hanno schermi molto più piccoli e semplicemente non trarranno vantaggio dalle tue foto HD. Invece, si arrabbieranno se li costringi a scaricare immagini di grandi dimensioni.

Esaminiamo l'esempio di Elephate.com . Abbiamo una foto abbastanza grande (2600×1463 pixel) dei membri della nostra azienda nella parte superiore della nostra homepage (522kb)

Va benissimo per i desktop: possono scaricarlo molto velocemente. Ma, per gli utenti mobili, utilizziamo i parametri "srcset" dell'HTML. Grazie a questa implementazione, gli utenti mobili scaricheranno semplicemente un'immagine molto più piccola (non ne hanno bisogno di una più grande) che ha un impatto positivo sul tempo di caricamento della pagina.

Gli utenti desktop non soffriranno perché vedranno la foto full HD. Ma gli utenti mobili ne trarranno davvero vantaggio.