IVANO DI BIASI

MOBILE INDEX

Migliorare un sito web per il Mobile Index

Al proprietario del sito https://www.miosito.com/,

Questo significa che noterai un aumento del traffico nei tuoi log da Googlebot per smartphone. Potresti notare anche che gli snippet nei risultati della Ricerca Google sono generati dalla versione per dispositivi mobili dei tuoi contenuti.

Background: l'indicizzazione con priorità ai contenuti per dispositivi mobili comporta l'utilizzo da parte di Googlebot della versione per dispositivi mobili del tuo sito per l'indicizzazione e il ranking, per aiutare meglio gli utenti (soprattutto su dispositivi mobili) a trovare i contenuti che cercano. I sistemi di scansione, indicizzazione e rankingdi Google hanno sempre utilizzato la versione desktop dei contenuti del tuo sito, il che può dar luogo a problemi per gli utenti che eseguono ricerche dai dispositivi mobili quando la versione desktop è diversa da quella per dispositivi mobili. La nostra analisi indica che le versioni per dispositivi mobili e desktop del tuo sito sono equiparabili.

Se un sito andava bene per Desktop si posizionava bene anche su Mobile, ora è l’esatto contrario

Tralasciando le ottimizzazioni SEO strutturali ed OnPage, che rimangono identiche, gli unici aspetti

che possano influire pesantemente sul ranking sono le performance e l’usabilità

I siti che hanno subito cali considerevoli di traffico dopo il 1 agosto 2018 (Medic Update) hanno qualcosa in comune,

ma è possibile che tutti abbiano problemi di contenuti come dicono in tanti?

No! Infatti non sono crollati del tutto, sono stati semplicemente limitati nei risultati di ricerca,

molto probabilmente sulle query maggiormente effettuate da dispositivi Mobile

I siti che hanno subito cali considerevoli di traffico dopo il 1 agosto 2018 (Medic Update) hanno qualcosa in comune,

ma è possibile che tutti abbiano problemi di contenuti come dicono in tanti?

Performance

RETE

CPU

RAM

Usabilità

Above the fold

CSS

Navigazione

GLI ASPETTI FONDAMENTALI

Google LighthouseQuando il template del sito può fare danni seri

OPS!Non è una questione SEO

Ma c’è anche da dire che le performance sono solo uno dei fattori

Performance bassissime

E nonostante tutto il sito si posiziona benissimo, c’è sicuramente dell’altro

E dopo il 1 Agosto ha anche avuto un lieve miglioramento di traffico

I fattori fondamentali sono tre

Performance da Mobile Autorevolezza Contenuti di qualità

I fattori fondamentali sono tre

Performance da Mobile Autorevolezza Contenuti di qualità

1. Complessità HTML2. Javascript3. CSS4. Font5. Immagini6. Usabilità7. Cache8. Server

I fattori fondamentali sono tre

Performance da Mobile Autorevolezza Contenuti di qualità

1. Complessità HTML2. Javascript3. CSS4. Font5. Immagini6. Usabilità7. Cache8. Server

1. Schema.org2. Link Building3. Brand Awareness

I fattori fondamentali sono tre

Performance da Mobile Autorevolezza Contenuti di qualità

1. Complessità HTML2. Javascript3. CSS4. Font5. Immagini6. Usabilità7. Cache8. Server

1. Schema.org2. Link Building3. Brand Awareness

1. Publisher Trust2. Author Trust3. Search Intent4. Content Lenght5. Linking interna

Oggi parliamo di Performance

Anche se gli Smartphone sono spesso più potenti di un PC, sono soggetti a condizioni che richiedono grande attenzione

Problema 1 : La copertura della rete

Queste due persone se navigano lo stesso sito web avranno due esperienze utente molto diverse

Problema 1 : La copertura della rete

Queste due persone se navigano lo stesso sito web avranno due esperienze utente molto diverse

Ma è possibile fare in modo che siano identiche!

Ma l’area visibile mostra solo un’immagine, un titolo ed una pubblicità!

Ha senso caricare tutte le immagini che sono invisibili al momento?

No e vi spiego perchè

Abbiamo una pagina con tantissime immagini

Problema 1 : La copertura della rete

Come viene creato il DOM

Vediamo il flusso di elaborazione di un Browser, sia da Desktop che da Mobile

Ogni elemento del DOM sarà ‘pronto’ quando lo saranno tutti i suoi figli, e i figli dei figli, e così via fino alla fine di ogni ramo dell’albero.Document Object Model

Come viene creato il DOM

Ogni elemento del DOM sarà ‘pronto’ quando lo saranno tutti i suoi figli, e i figli dei figli, e così via fino alla fine di ogni ramo dell’albero.Document Object Model

Questo elemento sarà pronto quando tutti gli elementi sottostanti saranno pronti. Si tratta di elaborazione ricorsiva.

Come viene creato il DOM

Ogni elemento del DOM sarà ‘pronto’ quando lo saranno tutti i suoi figli, e i figli dei figli, e così via fino alla fine di ogni ramo dell’albero.Document Object Model

Questo elemento sarà pronto quando tutti gli elementi sottostanti saranno pronti. Si tratta di elaborazione ricorsiva.

IMG

E se qui c’è un’immagine che richiede 5 secondi per essere scaricata, su rete 3G potrebbe fare da collo di bottiglia per l’intera pagina web.

Come viene creato il DOM

Utilizziamo il Lazy Loading per le immagini

Caricate immediatamente

Caricate poco prima di entrare nella schermata

Il Lazyload viene fatto in Javascript ed il riferimento all’URL delle immagini non esiste nel DOM ma non spaventatevi, Google è in grado di renderizzare le pagine e rilevare quelle inserite con il Lazyload

Come si fa?

Caricate immediatamente

Se avete un CMS realizzato da voi dovrete farlo in Javascript sfruttando un IntersectionObserver

IntersectionObserver

Come si fa?

Se avete un CMS come Wordpress troverete decine di plugin adatti allo scopo come WPRocket

Rimanendo sul tema immagini

Ha senso utilizzare immagini ad altissima risoluzione se il 90% dei device non lo richiede?

Abbiamo 2 soluzioni

La prima è la più semplice ma non ottimale.

Scegliere una dimensione di immagine che sia accettabile per tutti i dispositivi, anche per quelli ad alta risoluzione, facendo attenzione che l’immagine ingrandita non perda troppa qualità

Abbiamo 2 soluzioni

La seconda, decisamente più efficace, prevede i srcset

Forniamo più versioni dell’immagine in varie risoluzioni ed aiutiamo il browser a scegliere quella ottimale.

Rimanendo sul tema immagini

Piccolo problema: E’ supportato solo dal 76% dei browser

Nuovo formato WebP

Ma il problema più grande è che non è ancora supportato da Firefox, ma hanno annunciato che ci stanno lavorando e quindi a breve sarà disponibile

Rimanendo sul tema immagini

Utilizzare la compressione Lossless

Prima di caricarle sul sitoApp Desktop

Mentre le caricate sul sitoWeb Service/Plugin

Rimanendo sul tema immagini

Se configurati bene la perdita di qualità è nulla

Preconnect a risorse note

https://developers.google.com/web/fundamentals/performance/resource-prioritization#preconnect

<link rel="preconnect" href="https://sitoesterno.com">

Stabilire connessioni spesso richiede tempo con reti lente, in particolare quando si tratta di connessioni sicure, poiché potrebbe comportare ricerche DNS, reindirizzamenti e diversi roundtripsul server finale che gestisce la richiesta dell'utente. Prendersi cura di tutto ciò in anticipo può rendere la tua applicazione molto più veloce per l'utente senza influire negativamente sull'utilizzo della larghezza di banda. La maggior parte del tempo per stabilire una connessione è speso in attesa, piuttosto che per scambiare dati.

Minify delle risorse CSS, JS e dell’HTML

Fate lavorare poco il Browser

Come detto in precedenza, per elaborare la pagina è necessario molto lavoro da parte del browser, proviamo a ridurlo.

Fate lavorare poco il Browser

Non lasciamoci tentare dalle funzionalità realizzate in Javascript, su Mobile non sono necessarie, ed attenti alle ADS

Fate lavorare poco il Browser

Un elemento molto annidato nell’albero del DOM e che richiede una risorsa bloccante può bloccare tutta la pagina

Fate lavorare poco il Browser

Un elemento molto annidato nell’albero del DOM e che richiede una risorsa bloccante può bloccare tutta la pagina

BlockingNon può essere renderizzato se non carica prima tutto

Come si risolve?

Dobbiamo sapere quali parti della nostra pagina saranno renderizzate per prime e fare in modo che al browser non manchi nulla per poterlo fare! Bisogna progettare adeguatamente HTML e CSS.

In termini di performance le due casistiche sono identiche, 1,5 secondi per disegnare l’intera pagina, quello che cambia è l’esperienza utente. Nel caso 2 potrebbe decidere di abbandonare immediatamente il sito web.

Ogni sito è diverso dagli altri, ma le regole sono le stesse

DOM CSSOM<!DOCTYPE html><html><head>

<meta name="viewport" content="width=device-width,initial-scale=1"><link href="style.css" rel="stylesheet"><title>Critical Path</title>

</head><body>

<p>Hello <span>web performance</span> students!</p><div><img src="awesome-photo.jpg"></div>

</body></html>

body { font-size: 16px }p { font-weight: bold }span { color: red }p span { display: none }img { float: right }

Quando il Browser ha costruito il DOM ed il CSSOM può disegnare la pagina web sul dispositivo, vediamo cosa accade dietro le quinte per poter capire dove sia il caso di intervenire

Partiamo dalla pagina HTML

Più è complesso ed annidato l’HTML più tempo sarà necessario per svolgere tutte queste operazioni

Ogni file CSS viene scaricato ed elaborato

Tutti gli elementi del DOM che utilizzano dei riferimenti nei CSS dovranno attenderne l’elaborazione per poter essere disegnati

Il render Tree

Vengono scartati tutti i nodi che non hanno attributi di visibilità, mentre per tutti quelli visibili vengono prese le info da CSSOM

OMESSO

Come velocizzare tutto il processo

Evitare la struttura a Matrioska, o scatole cinesise preferite.

MA SOPRATTUTTO

- Ridurre il numero di risorse critiche- Ridurre il numero di byte critici- Ridurre la lunghezza del percorso critico

Il mondo ideale per il mobile?

ZERO DIPENDENZE

OUTPUT

Sappiamo bene che non è possibile, ma …

TUTTI I CSS CRITICI DI LAYOUTE FONT SONO GIA’QUI NELL’HTML

POSSO DISEGNARE SENZA ATTENDERE ALTRO

TUTTO QUELLO CHE VERRA’ DOPO LO CARICO DEFERRED O LAZYLOADED

Per i CSS non critici potreste optare per https://github.com/filamentgroup/loadCSS

Eliminiamo CSS e JS inutilizzati, il TAB Coverage di Chrome

Possiamo snellire i nostri CSSEliminando regole non utilizzate

Quello di cui vi ho parlato è solo un punto di partenza

Qui troverete numerosi approfondimenti su ogni singolo aspetto

https://developers.google.com/web/tools/lighthouse/

GRAZIE