presentazione standard di powerpoint - zoomday · 2018-12-10 · come si risolve? dobbiamo sapere...
Post on 21-May-2020
1 Views
Preview:
TRANSCRIPT
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.
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
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
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
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.
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
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/
top related