Pubblicato il 16/08/18 - aggiornato il  | 1 commento :

Come migliorare le performance SEO di un sito con Chrome

Come monitorare le performance delle pagine o dei siti da desktop o da mobile con Chrome, tramite un addon, o con gli Strumenti per gli Sviluppatori
Google ha rilasciato diversi tool per monitorare le performance di siti e pagine web, relativamente alla loro velocità di caricamento, alla facilità o meno con cui si visualizzano dai dispositivi mobili, alla correttezza dell'inserimento dei dati strutturati.

Lighthouse è una estensione di Chrome che aggiunge al browser uno strumento open source per migliorare le prestazioni, la sicurezza e la correttezza di siti pagine web. Quando si controlla una pagina, Lighthouse la illumina come un Faro, da cui il nome, attraverso una raffica di test che determinano una serie di indicatori. Viene quindi generato un rapporto sulla efficacia della pagina e indicati i punti in cui migliorarne le prestazioni.

Naturalmente si può monitorare la homepage di un nostro sito, come una singola pagina. È anche possibile testare le performance di siti con cui siamo in concorrenza, per paragonarne le prestazioni. Gli utenti di Wordpress non si possono limitare alla semplice installazione di un plugin che si occupa dell'aspetto SEO, e gli amministratori di siti su piattaforma Blogger non possono lasciare fare tutto a Google.

Lighthouse è un addon di Chrome che simula l'accesso da mobile e che verifica la performance della pagina nelle varie categorie. Comunque non date eccessivo peso ai dati ricavati da questo tool, perché per esempio ho monitorato il sito di Aranzulla, che notoriamente è uno dei meglio piazzati nelle SERP di Google, e ho potuto constatare che ha delle performance peggiori di questo blog. Come dice lo stesso Google, le performance sono importanti, ma lo sono di più altri fattori come il contenuto, l'autorevolezza, e la permanenza degli utenti.





Inoltre è evidente che se nei post inserisci molte immagini o video, le performance per quello che riguarda la velocità del sito peggioreranno, ma i lettori saranno certamente più soddisfatti dei contenuti. Si clicca su +Aggiungi per poi andare su Aggiungi estensione per aggiungere l'addon Lighthouse a Chrome.

Verrà aggiunta una icona con un piccolo faro nella Barra del browser. Si può monitorare la homepage di un sito oppure un qualsiasi post. Si apre nel browser la pagina web da monitorare e si clicca sulla icona di Lighthouse. Su Options possiamo selezionare le categorie su cui avere un "audit" e generare un report.

lighthouse-chrome

Di default vengono incluse nel report tutte le categorie che sono Performance, Progressive Web App, Accessibility, Best Practices e SEO. Si clicca su Generate Reports e si attende l'analisi della pagina.

performance-lighthouse

Per ogni categoria viene assegnato un punteggio con un massimo di 100. I dati verranno mostrati in un'altra finestra del browser e potranno essere analizzati dall'utente. Vediamo brevemente le metriche analizzate.






PERFORMANCE


Nella sezione Performance vengono presi in considerazione i seguenti parametri:
  1. First Contentful Paint - abbreviati in FB e FCP, sono metriche che individuano i punti, immediatamente dopo la navigazione, quando il browser esegue il rendering dei pixel sullo schermo.
  2. Speed Index - mostra la velocità con cui vengono visualizzati i vari elementi della pagina
  3. Time to Interactive - è il tempo che intercorre perché la pagina diventi completamente interattiva
  4. First Meaningful Paint - il tempo che occorre affinché i contenuti primari di una pagina siano visibili
  5. First CPU Idle - la metrica misura il tempo che occorre alla pagina per diventare minimamente interattiva
  6. Estimated Input Latency - stima del tempo che occorre alla pagina per rispondere agli input dell'utente
Per migliorare questi dati occorre essenzialmente diminuire la dimensione e il numero delle immagini.





PROGRESSIVE WEB APP


Per avere dei dati più precisi, gli utenti di Blogger con temi non responsive, debbono effettuare un test direttamente con l'indirizzo della pagina a cui si è aggiunta la stringa ?m=1.

Vengono indicati gli audit che hanno passato il controllo e quelli che abbisognano di un miglioramento. Una cosa che non si capisce è perché, nella versione mobile, vengono considerati senza tag Alt le immagini che invece hanno tale tag nella versione desktop. Altra cosa che ho trovato è la mancanza del tag Title nel codice degli iframe di dei video. Il codice fornitoci da Youtube non ha tag Title. Dovremmo provvedere da soli.

ACCESSIBILITY


Questa metrica misura l'accessibilità di un sito e anche in questa sezione vengono rilevate le immagini senza tag Alt nella versione mobile. Anche le miniature mostrate nella home della versione mobile sono rilevate senza tag Alt. Presumo che nella versione mobile di Blogger non vengano aggiunti i tag Alt e Title presenti in quella desktop.

BEST PRACTICES


In questa sezione vengono rilevate delle pratiche non corrette. Alcuni rilievi riguardano le unità pubblicitarie e altri javascript di Blogger. In questo sito viene considerata una pratica non corretta una foto con un rapporto inadeguato tra larghezza e altezza. Si tratta però dell'Header e non vedo come mostrarlo con un ratio 16:9.

SEO


La metrica sull'aspetto SEO della pagina è quella che ha dato il massimo risultato di 100.  Gli audit presi in considerazione dal report sono ben tredici: mobile friendly, dati strutturati, presenza del metatag viewport, font con testo leggibile, presenza dell'elemento title, presenza della meta descrizione, link con testo descrittivo, pagina con hreflang (per definire la lingua della pagina) e con rel=canonical, pagina che non ha bisogno di plugin, correttezza dell'HTTP, pagina con indicizzazione non bloccata e validità del file robots.txt

Lighthouse mostra i dati con tre colori: rosso, marrone e verde. I dati in rosso debbono preoccupare, quelli in marrone vanno migliorati mentre quelli in verde sono già molto buoni.
 

LIGHTHOUSE NEGLI STRUMENTI PER SVILUPPATORI DI CHROME


Lighthouse in realtà può anche essere rimosso da Chrome, visto che tale addon è integrato negli Strumenti per gli sviluppatori. Si apre la pagina da monitorare e, nella tastiera, si digita F12.

Si clicca sulla scheda Audits che è quella più a destra tra quelle mostrate.

audits-chrome-dev-tools


Si può quindi scegliere di effettuare un monitoraggio per tutte le categorie, o per una soltanto, sia per la versione mobile sia per quella desktop. Per iniziare si va in basso nella pagina su Run Audits.

performance-dev-tool-chrome

Concludo il post ricordando che questi tool di Google sono utili per migliorare la performance dei siti ma non è detto che siano risolutivi per posizionarsi bene nelle SERP dei risultati di ricerca. Va sempre considerato quello che è il contenuto del post e il suo eventuale apprezzamento da parte dei lettori.




1 commento :

  1. Ho notatato che le best practices SEO risultano (quasi sempre) con valore 100 sui siti su piattaforma Blogger mentre su altri che non lo sono (nonostante le identiche cure SEO....) risultano valori seo attorno al 70/75.....e mi riferisco a siti web del sottoscritto (credo) molto ben curati dal punto di vista SEO.

    RispondiElimina

Non inserire link cliccabili altrimenti il commento verrà eliminato. Metti la spunta a Inviami notifiche per essere avvertito via email di nuovi commenti.
Info sulla Privacy