Analisi Speed Test delle tue pagine: Quali strumenti utilizzare
Uno dei fattori più importanti, che un buon consulente seo deve tenere in considerazione per l’ottimizzazione on-page, è la velocità di caricamento del sito. Infatti una pagina che impiega molto tempo per caricarsi, verrà, molto probabilmente, abbandonata dall’utente che effettuerà una nuova ricerca. Quindi possiamo dedurne che gioca un ruolo molto importante per il ranking.
Per ottenere una buona velocità di caricamento della pagina web, è fondamentale la scelta dell’hosting, infatti la scelta di server scadenti può rendere inefficaci le tecniche, applicate al fine di per velocizzare il caricamento delle pagine.
Se il sito avrà un traffico prettamente in italia è preferibile scegliere hosting che abbiamo i loro server in Italia, i tempi di risposta saranno, infatti, inferiori.
Online sono presenti molti strumenti che possiamo utilizzare per analizzare e valutare il nostro sito web, uno di questi è senza dubbio: page speed test di google.
Inserendo l’URL del sito che intendiamo analizzare, ci vengono indicati aspetti che dobbiamo migliorare al fine di diminuire il tempo di caricamento della pagina web.
Indice
Core Web Vitals
Google ha introdotto ulteriori 3 fattori che bisogna tenere fortemente in considerazione in quanto sono un fattore di Ranking, questi parametri prendono il nome di:
Core Web Vitals
Per approfondimenti: https://web.dev/vitals/
Per Analizzarli: https://web.dev/measure/
Minimizzazione css, js e non solo
Inoltre con il passaggio al mobile fist index di Google analizza la pagina corrente emulando il caricamento su rete 3G, mettendo in risalto eventuali opportunità di ottimizzazione e controlli superati.
- Minimizzare css
- Minimizzare js
- Ottimizzare le immagini
- Abilitare la compressione Gzip
- Sfruttare la caching del browser
Quando parliamo di minimizzazione dei file css e js, intendiamo eliminare tutti gli spazi che ci sono tra una riga di codice e l’altra, infatti gli spazi e i ritorni a capo servono soltanto allo sviluppatore per rendere il codice più comprensibile, ma non al browser, che effettuerà il rendering della pagina web.
Ecco alcuni strumenti per minimizzare i css e javascript:
I file javascript bloccano i download paralleli. Quindi se il browser sta scaricando uno script, non verrà scaricato nient’altro affinchè tale script non è stato scaricato.
- Inserire i javascript in fondo alla pagina, in questo modo verranno caricati quando la pagina è già stata reindirizzata
- Utilizzare la versione asincrona (se disponibile). In questo modo i file possono essere scaricati in background. Oggi molti script sono asincroni come quelli di google analytics, google adsense, google plus, pinterst […]. Ecco una guida su come utilizzare file js asincroni.
- Inoltre agli script .js può essere applicato l’attributo defer in modo da rimandare alla fine dell’elaborazione della pagina, l’elaborazione dello script, in questo modo il browser non dovrà aspettare che il file .js sia caricato prima di riprendere l’analisi della pagine.
Ecco un esempio di utilizzo:
<script scr=”path file javascript” defer>
Come ottimizzare le immagini
Quando inseriamo un’immagine, dobbiamo indicare gli attributi width e height, in questo modo si riduce il tempo di caricamento della pagina, perchè il browser non deve aspettare di caricare l’immagine per capire quanto spazio occuperà.
Se un immagine è molto grande, mentre nel nostro sito dovrà occupare uno spazio minore, dobbiamo utilizzare programmi che permettono di ottimizzare la dimensione delle immagini, uno di questi è fotosizer.
Ancora, bisogna ridurre la dimensione del file dell’immagine, anche per questa operazione possiamo utilizzare vari software, uno di questi è Tinypng.
Attributi HTML5
E’ stato introdotto un nuovo attributo che ci permette di effettuare il caricamento ritardato delle immagini senza dover scrivere alcuna riga di codice javascript:
<img src=”…” loading=”lazy” ..>
Gli attributi del tag loadign possono essere:
- auto: caricamento predefinito del browser. Equivale a non includere l’attributo.
- lazy: posticipa il caricamento della risorsa fino a quando non raggiunge una distanza calcolata dal viewport.
- eager: carica la risorsa immediatamente, indipendentemente da dove si trova sulla pagina.
Integrazione: https://web.dev/browser-level-image-lazy-loading/
Compressione gzip: A cosa serve
La compressione gzip, permette al browser di ricevere dal server, il contenuto della pagina web in maniera compressa, risparmiando banda e, di conseguenza, il tempo di caricamento dell’intera pagina web sarà più basso.
Tale compressione si può attivare solo su server apache mediante il modulo mod_deflate del file htaccess.
Se il sito è stato realizzato utilizzando joomla come cms, tale compressione può essere abilitata dal pannello di controllo di joomla.
Sistema –> Configurazione Globale –> Server –> Compressione Gzip
Come abilitare a cache del browser
E’ consigliabile inserire i file css e js esternamente al codice, e non inserirli all’interno di ogni singola pagina, in questo modo i file vengono memorizzati nella cache del browser e quindi non devono essere scaricati ogni volta.
Per migliorare la velocità di caricamento dobbiamo sfruttare, quindi, le cache del browser.
L’abilitazione delle cache varia a secondo del linguaggio di programmazione. Se stiamo creando un sito, utilizzando php come linguaggio di programmazione, dobbiamo configurare la sezione mod_expires del file htaccess.
Mentre se il sito è stato realizzato mediante altri linguaggi, come ad esempio ASP.NET, potete seguire la guida realizzata da Microsoft.
Volete sapere come configurare il file htaccess, il file htaccess di joomla, il file htaccess di wordpress, oppure come effettuare la riscrittura dell’url mediante url_rewrite del file htaccess. Presto verrà pubblicato un articolo in merito.
Quindi le competenze che un buon consulente seo deve avere per ottimizzare al meglio la velocità di caricamento delle pagine web sono tantissime e senza competenze di programmazione questo non è possibile farlo.