Slide dell'evento Advanced SO Tools 2021 a Bologna.

1. CHROME DEVTOOLS
BASI TECNICHE PER COMPRENDERE MEGLIO LA SEO
Giovanni Sacheli
EVE Milano by Searcus Swiss sagl
Email: info@evemilano.com
Skype: Giovanni Sacheli
Office CH: +41 (0)79 8643035
Mobile: +39 3393668879
Website: searcus.ch
Blog: evemilano.com
Linkedin - Newsletter

2. /about-me
Giovanni Sacheli
NERD, papà di 2 iene, motociclista e videogamer.
Dal 2010 sono appassionato consulente in Search Marketing.
Co-autore del libro "SEO Audit Avanzato".
I <3 Technical SEO
Mio blog: evemilano.com
Mia agenzia: searcus.ch

3. Strumenti di analisi forniti da Google Chrome,
presenti anche in Firefox e altri browser, che un SEO
dovrebbe conoscere e saper utilizzare all'occorrenza.
Per aprire i Chrome DevTools:
Command+Option+C (Mac)
Control+Shift+C (Windows, Linux, Chrome OS)
Oppure più semplicemente F12
Chrome DevChe?

5. Tab Elements
–Differenze tra codice HTML e
DOM
–SSR vs CSR
Tab Console
–...
Tab Network
–...
–HTTP Header
–Priority
–Cache control
Tab Lighthouse
Cosa vedremo in 60 minuti

6. TAB
ELEMENTS

7. Visualizzare e modificare
in tempo reale DOM e
CSS(OM).
Tab Elements: DOM

8. Uno dei primi controlli che eseguo su una pagina web è confrontare il
codice HTML con il DOM per capire se sto lavorando su un sito web
generato da un sistema Server Side Rendering (SSR) o Client Side
Rendering (CSR).
Dato che i due sistemi hanno logiche di funzionamento diverse e
necessitano di processi di analisi SEO differenti, è importante saperli
distinguere prima di avviare un SEO audit ed una scansione con
Screaming Frog.
Codice HTML e DOM

9. Hai mai provato a scansionare un sito web sviluppato in AngularJS
con Screaming Frog impostato su Rendering “Text only”?
Se la tua risposta è affermativa, hai già capito l’importanza della
questione. In caso negativo, ti consiglio di fare alcune prove.
Trova le differenze tra codice HTML e DOM dei seguenti siti web:
https://www.evemilano.com (SSR)
https://www.coopshop.it (CSR)
Crawler: Text only

10. coopshop.it: il codice HTML contiene solo lo scheletro della pagina

11. Perché il codice
HTML è ridotto
all'osso e il DOM
è completo?
Perché la pagina
web completa è
stata generata
dal client e non
dal web server.
coopshop.it: il DOM è completo

12. Codice HTML vs DOM
Cosa cambia?

13. Come si genera una pagina web?

14. Come viene generata una pagina web?
Fonte: rubata da Google Images

15. HyperText Markup Language (HTML) è
un linguaggio utilizzato per creare
pagine sul web.
Il codice HTML è ciò che viene fornito
dal web server in risposta ad una
richiesta HTTP.
Qualsiasi CMS genera codice HTML.
Visualizzando il codice sorgente della
pagina puoi vedere come vengono gestiti
gli elementi come i testi, i percorsi
delle immagini o delle dipendenze della
pagina.
Cos'è il Codice HTML

16. GSC - Statistiche di scansione
Le statistiche di
scansione di GSC
monitorano le
richieste di
Googlebot.
Possiamo filtrare le
richieste di sole
pagine HTML.

17. Il DOM è un modello generato dal
parser HTML dopo aver letto il
codice HTML.
Più precisamente il Document Object
Model (DOM) è un’API di
programmazione per documenti
HTML e XML. Definisce la struttura
logica dei documenti e il modo in cui
un documento è accessibile e può
venire manipolato.
Cos'è il DOM?

18. DOM = interfaccia
di programmazione,
una
rappresentazione
dei dati, degli
oggetti e della
struttura di una
pagina HTML.
Cos'è il DOM?

19. JavaScript può modificare tutti gli elementi HTML nella pagina.
JavaScript può modificare tutti gli attributi HTML nella pagina.
JavaScript può rimuovere elementi e attributi HTML esistenti.
JavaScript può aggiungere nuovi elementi e attributi HTML.
JavaScript può cambiare tutti gli stili CSS nella pagina.
JavaScript può reagire a tutti gli eventi HTML esistenti nella pagina.
JavaScript può creare nuovi eventi HTML nella pagina.
Manipolare un documento HTML? Si, con JavaScript

20. Siti web CSR
Differentemente, con lo scripting lato client, il
web server invia al client uno scheletro HTML
generalmente incompleto e molto leggero, che
richiama alcuni file JS.
Guardando il codice HTML si nota la mancanza di
tutti o buona parte degli elementi visibili in pagina.
Sarà JavaScript che, una volta eseguito dalla Java
Virtual Machine presente nel browser, riempirà i tag
HTML e genererà la pagina web completa.
Lo scripting lato server racchiude numerosi
framework JavaScript:
–AngularJS, VueJS, ReactJS, ...
Siti web SSR
Lo scripting lato server è una tecnica utilizzata
nello sviluppo web che prevede l’utilizzo di script su
un server web che producono una pagina web
completa e personalizzata per la richiesta di ciascun
client. L’alternativa è che il web server stesso
fornisca una pagina web statica.
Lo scripting lato server racchiude numerosi linguaggi
noti:
–Static HTML (i famosi siti web "fatti a mano")
–PHP (WordPress, Joomla, Drupal, Prestashop, ...)
–ASP, Dot.net
–Python, ...
SSR vs CSR

21. C’è sempre qualche differenza più o meno evidente.
Se nel codice HTML vengono richiamati script che manipolano la
pagina, il DOM sarà differente.
Un WordPress con tema semplice che non usa JS ha differenze minime
tra codice HTML e DOM.
Un sito web sviluppato con VueJS, o altri framework JavaScript, ha
differenze evidenti tra codice HTML e DOM (a meno che il sito web
non utilizzi una funzione di pre-render).
Codice HTML e DOM non sono uguali

22. Codice HTML DOM
<div>ciao <div>ciao</div>
Il DOM è sempre un HTML valido

23. Estensione Chrome
https://chrome.google.co
m/webstore/detail/view-
rendered-
source/ejgngohbdedoaba
nmclafpkoogegdpob
SSR: puoi usare spider
text only
CSR: devi usare uno
spider con JavaScript
Engine
Come visualizzare le differenze tra Codice HTML e DOM?

24. Il tab Elements mostra il DOM.
Non confondere DOM e codice HTML, anzi analizza le differenze.
Il DOM include le modifiche apportate da JS.
Con il DOM puoi studiare la struttura e le gerarchie della pagina HTML.
Con il DOM puoi modificare in tempo reale i singoli elementi della pagina web.
Ricapitolando

25. TAB
CONSOLE

26. Con la Console puoi leggere i messaggi ed eseguire
Javascript. I messaggi possono essere errori di script,
avvisi oppure semplici messaggi lasciati dal developer.
Gli sviluppatori web registrano i messaggi
principalmente per 3 motivi:
–Debug
–Assicurarsi che il codice sia eseguito nell’ordine
giusto
–Ispezionare i valori delle variabili in un determinato
momento
Console

27. TAB
NETWORK

29. Visualizza le attività di rete, tutte le
chiamate HTTP necessarie al browser per
disegnare la pagina.
Il pannello Network si utilizza per assicurarsi
che le risorse necessarie al rendering della
pagina HTML vengano scaricate come previsto.
I casi d’uso più comuni sono:
Verificate come e se vengono scaricate le
risorse.
Ispezionare le proprietà di una singola risorsa,
ad esempio intestazioni HTTP, protocollo
utilizzato, tipologia di contenuto, dimensioni, ...
A cosa serve il tab Network?

30. Tabella delle chiamate HTTP

31. Cliccando su ciascun
elemento si apre un
tab secondario con
alcune informazioni
sulla chiamata HTTP
Per prima cosa ci
mostra l'intestazione
HTTP.
Dettagli della specifica chiamata HTTP

32. HTTP Header o Intestazione HTTP

33. Client > Request headers
–Cosa vuole
–Cosa può interpretare
Server > Response
headers
–Conferma
–Altro
Cache-control
Expire
Priority tips
Security
Dettagli della specifica chiamata HTTP

34. Quanto tempo è stato necessario per soddisfare la richiesta?

35. Posso Migliorare i Core Web Vitals con la sola intestazione HTTP?

37. Cosa posso "spingere"
in tutte le pagine?
Cosa devo "spingere"
in determinate
pagine?
Come gestisco le
pageview successive?
But...

38. server {
# Abilita http2 server push
http2_push_preload on;
# cookie sessione per server push
add_header Set-Cookie "server_push_session=1";
add_header Link $resources;
# mappatura risorse http2 server push
map $http_cookie $resources {
"~*server_push_session=1" "";
default "</wp-content/themes/metro-pro/style.css>; as=style; rel=preload";
}
Nginx + HTTP/2 PUSH

39. L'intestazione HTTP Cache-Control contiene direttive per la memorizzazione nella cache delle
dipendenze della pagina (Immagini, Font, CSS, JS, ...).
Direttive Cache request
Direttive Cache-Control standard che possono essere utilizzate dal client in una richiesta HTTP.
--> Direttive Cache response <--
Direttive Cache-Control standard che possono essere utilizzate dal server in una risposta HTTP.
–Cache-Control: public (cache non legata all'utente)
–Cache-Control: private (cache legata all'utente)
–Cache-Control: max-age (tempo in cui una risorsa sarà considerata fresca)
–...
Direttiva Cache-Control

40. Cache-Control

41. Il tab Network mostra le caratteristiche di tutte le chiamate HTTP necessarie al browser per
disegnare la pagina web.
Per capire se la pagina ha margini di ottimizzazione possiamo
–Analizzare l'insieme delle chiamate:
Possiamo ridurre le chiamate HTTP?
Possiamo aggiornare il protocollo ad uno più veloce?
Possiamo richiamare le dipendenze in ordine diverso?
–Analizzare le singole chiamate:
Quali intestazioni HTTP possiamo usare per velocizzare il rendering?
Quali intestazioni HTTP possiamo usare per velocizzare le visualizzazioni
successive?
Cache-control viene usato sulle dipendenze?
La risorsa è lenta da scaricare?
Ricapitolando

42. TAB
LIGHTHOUS
E

43. Lighthouse is an open-
source, automated tool
for improving the quality
of web pages. You can
run it against any web
page, public or requiring
authentication. It has
audits for performance,
accessibility, progressive
web apps, SEO and more.
https://developers.google.
com/web/tools/lighthouse
Lighthouse

44. Per certi controlli è più comodo di PageSpeed

45. Lighthouse Scoring
Calculator
https://googlechrome.githu
b.io/lighthouse/scorecalc/
Come dare un peso a ciascun intervento

46. Il tab di Lighthouse permette di fare diagnosi
con il motore di PageSpeed utilizzando la
propria rete e device.
Utile perché è interattivo con la pagina web:
posso evidenziare l'elemento LCP o CLS, ad
esempio.
Ha qualche funzionalità in più di PageSpeed,
come la checklist della PWA e test di usabilità.
Prima di mettere mano al sito verifica che
impatto può avere ciascuna modifica sui CWV
con Lighthouse Scoring Calculator.
Ricapitolando

47. Grazie, alla prossima!
Newsletter:
evemilano.com/contatti/newsletter/