Velocizzare il proprio sito Mobile: come e perché


Velocità Web Mobile

Le caratteristiche chiave per una buona esperienza mobile da parte dell’utente sono:

  • Design intuitivo e funzionale
  • Velocità di caricamento del sito elevata

Il 53%, secondo uno studio di Doubleclick, rappresenta proprio la percentuale di visite abbandonate se il caricamento avviene in più di 3 secondi. Quando si progetta una strategia di business chiaramente non vogliamo che l’utente abbandoni il nostro sito web prima del previsto, poiché equivalerebbe ad una perdita economica non indifferente. È importante quindi capire PERCHÈ e COME misurare la velocità del nostro sito web:

  • l’importanza della velocità mobile
  • come misurare la velocità mobile
  • le best practices per ottimizzare la velocità

Perché è così importante la velocità mobile?

Grafico Mobile vs desktop

Il grafico, sempre tratto da uno studio recente, risponde chiaramente alla domanda; ovvero a causa del crescente utilizzo sempre maggiore dello smartphone per:

  • semplicità
  • velocità di accesso
  • funzioni sempre maggiori
  • velocità di elaborazione
  • ecc…

la curva di accesso a Internet dell’utilizzo mobile ha superato quella dell’utilizzo desktop (proprio a Novembre 2016). Questo andamento studiato dagli analisti permette di capire l’importanza di uno sviluppo incentrato sul mobile che molto spesso viene sottovalutato dalle aziende. Nel Novembre 2016 si è verificato quello che gli esperti chiamano “Mobile Moment” ovvero un cambiamento epocale nell’accesso a internet dove il mobile si è imposto come dispositivo primario. Addirittura un anno prima si è verificato il “Mobile Moment” per quanto riguarda le ricerche su Google. Per il 46% degli utenti la cosa che infastidisce di più quando si naviga in Internet è proprio l’attesa di caricamento dei siti web. Vi è una forte correlazione tra la % di conversioni e il tempo di caricamento della pagina. Ecco quindi che investire nell’aumento della velocità mobile significa ridurre i costi in quanto aumenta il tasso di conversioni (aumenta il ritorno dell’investimento). Il secondo aspetto riguarda il posizionamento organico in Google che anche in questo caso è influenzato dalla velocità mobile. Un caso reale che comprova il tutto viene fornito proprio da Amazon che ha aumentato l’1% dei ricavi riducendo la latenza mobile di 100ms:

Caso Amazon Velocità Mobile

Considerato il volume economico di Amazon l’1% equivale a un’ammontare davvero non indifferente.

Come misurare la velocità mobile

Per aumentare la velocità mobile dobbiamo prima conoscerla e conoscere le metriche che ci permettano di misurarla. La misurazione è alla base del metodo scientifico sperimentale e quindi non possiamo che non iniziare da lei. I due tool principalmente utilizzati sono:

Webpagetest.org

webpagetest

Inseriamo l’URL completa del nostro sito copiandola proprio dal browser in modo che contenga anche http o https (questo per evitare eventuali reindirizzamenti). Impostiamo i vari parametri (tra cui la velocità da emulare a seconda della connessione che vogliamo testare 3G, 4G, cavo,ecc..) e poi clicchiamo START TEST. Di metriche ce ne sono molte e quindi quale prendiamo?? La metrica più importante è lo Speed Index:

Speed Index

Ovvero la velocità necessaria per caricare tutti gli elementi above the fold (ovvero elementi della pagina caricati senza dover effettuare lo scrolling).

Sotto alla tabella otteniamo la mappa con tutti gli intervalli di caricamento delle varie richieste.

Obiettivo

Chiaramente per poter dire se il nostro sito web è ottimizzato o meno dobbiamo confrontarlo con dei valori di riferimento. Questi valori empirici (ovvero ricavati sperimentalmente) ci permettono di dire se soddisfiamo o meno le 3 metriche principali:

Obiettivo Esperienza Mobile

Best practies

Qualora le metriche siano tutte e 3 soddisfatte abbiamo raggiunto lo scopo e magari possiamo passare all’analisi delle metriche restanti per avere approfondire l’analisi. Se invece risultassero insoddisfatte (una, due o tutte e 3) allora dobbiamo passare allo step successivo: agire sul percorso critico per ottimizzarlo. Il percorso critico lo andiamo a visualizzare sempre in webpagetes.org dove viene visualizzata una tabella con tutte le richieste http effettuate e i relativi tempi di risposta. Dalla tabella individuiamo il/i percorso/i critico/i da dover ottimizzare. In questa fase si andrà ad agire su due aspetti:

  • ottimizzare il dato (agire sull’ottimizzazione del dato da caricare ad esempio compressione, riduzione risoluzione, riduzione del peso)
  • ottimizzare la struttura (agire sul codice del sito web ad esempio riducendo i javascript, ottimizzando il codice minimizzando css, sfruttando il caching del browser, spostando le parti lente dopo il caricamento dei contenuti above the fold)

Ottimizzazione Progressive Rendering

Ottimizzazione mobile

Copyright©2018 https://www.seremailragno.com by Michele Paoletti michelepaol@gmail.com. All rights reserved.
I contenuti presenti  non possono essere copiati, riprodotti, pubblicati o redistribuiti perché appartenenti all’autore stesso.
È vietata la copia e la riproduzione dei contenuti in qualsiasi modo o forma.
È vietata la pubblicazione e la redistribuzione dei contenuti non autorizzata espressamente dall’autore.

Annunci

Rispondi

Effettua il login con uno di questi metodi per inviare il tuo commento:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

w

Connessione a %s...