Introduzione
Oggi, la cosa più importante che puoi fare per il tuo sito è assicurarti che funzioni bene quando viene visitato da uno smartphone o un tablet. Continua a leggere per scoprire come ottimizzare il tuo sito per il browser mobile utilizzando Chrome DevTools e un dispositivo Android.
Perché l'ottimizzazione per il web mobile è così importante?
Prestazioni
I dispositivi mobili sono dotati di CPU più veloci, più RAM, GPU più veloci e un accesso alla rete più rapido grazie alla transizione dal 2G e 3G al 4G. Nonostante il ritmo del progresso, i dispositivi mobili sono meno potenti rispetto ai nostri computer. In termini più concreti, il caricamento delle risorse di rete, la decompressione delle immagini, la visualizzazione della pagina e l'esecuzione degli script richiedono più tempo. È lecito presumere che la pagina venga eseguita da 5 a 10 volte più lentamente su un dispositivo mobile.
Batteria
I dispositivi mobili sono alimentati esclusivamente a batteria. Gli utenti di dispositivi mobili vogliono che la batteria duri il più a lungo possibile. Un sito non ottimale scaricherà la batteria molto più velocemente del necessario. Riduci al minimo il traffico di rete e i paint per ridurre il consumo della batteria. Quando recuperi una risorsa, il segnale radio Wi-Fi o cellulare deve essere attivo, il che consuma la batteria. Quando il browser visualizza un elemento, l'utilizzo della CPU e della GPU aumenta, il che consuma anche la batteria.
Coinvolgimento
Il rendimento serve ad aumentare la metrica che ti interessa di più. In Facebook ci interessa lo scorrimento. In un test A/B, abbiamo rallentato lo scorrimento da 60 fps a 30 fps. Coinvolgimento compresso. Abbiamo pensato: "Ok, quindi lo scorrimento è importante".
Facebook alla conferenza Edge
Gli utenti mobile si aspettano di poter entrare e uscire rapidamente. Il sito più veloce otterrà il maggior coinvolgimento.
Gestione del rendimento
Chrome include un ottimo set di strumenti per sviluppatori. Questo articolo spiega come utilizzare questi strumenti per profilare il tuo sito mobile. Se hai già familiarità con Chrome DevTools, ottimo. In caso contrario, dai un'occhiata a questi fantastici tutorial:
Ora che hai un quadro più chiaro, vediamo come accelerare il tuo sito mobile con DevTools. Se è la prima volta che utilizzi Chrome DevTools per Android, consulta la guida introduttiva in fondo all'articolo.
Utilizzare Chrome DevTools da remoto
Con il dispositivo Android collegato al computer. In Chrome per computer, vai a http://localhost:9222 e sul tuo dispositivo Android apri il tuo sito. Verrà visualizzato un elenco di schede aperte sul tuo dispositivo Android. Scegli la tua pagina dall'elenco "Pagine ispezionabili".
e si aprirà Chrome DevTools per la pagina.
Ah… la familiare barra degli strumenti di Chrome DevTools è proprio lì. La cosa più importante da capire su Chrome DevTools remoto è che si tratta degli stessi DevTools che utilizzi oggi sul tuo computer. L'unica differenza è che il dispositivo Android è responsabile solo della pagina, mentre il computer è responsabile di DevTools. In sostanza, vengono raccolti gli stessi dati e sono disponibili le stesse funzionalità.
Ad esempio, ho visitato www.sfgate.com/movies sul mio smartphone. Utilizzando Chrome DevTools sul mio computer, ho passato il mouse sopra un div nello strumento Elementi e, proprio come sul computer, il div viene evidenziato visivamente sul mio dispositivo Android.
Lo strumento Elementi può essere utilizzato anche per attivare e disattivare gli stili, il che sarà utile quando tenteremo di analizzare i tempi di visualizzazione.
Chiarimenti sull'accesso alla rete
Le prestazioni della rete sono importanti, e lo sono ancora di più sul web mobile. I dispositivi mobili sono spesso connessi a reti più lente rispetto ai computer desktop e laptop. Per assicurarti di eseguire l'operazione corretta, acquisisci un'istantanea della rete andando allo strumento Rete e premendo Registra.
Lo screenshot mostra il traffico di rete risultante da una Ricerca Google. Osserva le richieste di rete effettuate dal tuo sito e trova modi per ridurle al minimo. Se il tuo sito effettua richieste di polling al server, ti consigliamo di prestare attenzione all'attività utente ed evitare il polling quando l'utente è inattivo. Lo strumento Rete ti consente di visualizzare le intestazioni HTTP non elaborate, utili nel caso in cui le reti mobili le stiano modificando.
Ottimizzazione dei tempi di visualizzazione
Uno dei maggiori colli di bottiglia nei browser web mobile è la visualizzazione della pagina. La pittura è il processo di disegno di un elemento sulla pagina con lo stile specificato. Quando un elemento è costoso da visualizzare, rallenta la visualizzazione dell'intera pagina. Chrome tenta di memorizzare nella cache gli elementi precedentemente visualizzati in un buffer fuori schermo. Tuttavia, sui dispositivi mobili la quantità di RAM della GPU disponibile è limitata, il che limita il numero di elementi che possono essere memorizzati nella cache fuori schermo. L'effetto collaterale è che le operazioni di paint sono più numerose e ognuna è più lenta rispetto alla versione desktop. Per avere uno scorrimento reattivo, devi ridurre al minimo i tempi di visualizzazione.
Chrome 25 include la modalità di ridisegno continuo della pagina. La modalità di ridisegno continuo della pagina non memorizza mai nella cache gli elementi disegnati e, invece, disegna tutti gli elementi di ogni frame. Forzando la visualizzazione di tutti gli elementi in ogni frame, è possibile eseguire test A/B dei tempi di visualizzazione attivando e disattivando gli elementi e gli stili. Sebbene il processo sia manuale, è uno strumento prezioso per monitorare il costo della visualizzazione di ogni elemento della pagina. La prima regola del club di ottimizzazione è misurare ciò che stai cercando di ottimizzare per ottenere una base di riferimento. Vediamo un semplice esempio.
Innanzitutto, attiva la modalità di ridisegno continuo della pagina:
Dopo l'attivazione, nell'angolo in alto a destra del tuo dispositivo Android verrà visualizzato un grafico. L'asse x del grafico è il tempo, diviso in frame. L'asse Y del grafico misura il tempo di visualizzazione in millisecondi. Come puoi vedere, sul mio dispositivo la pagina impiega 14 millisecondi per essere visualizzata. Vengono inoltre mostrati i tempi di visualizzazione minimi e massimi, insieme alla memoria GPU utilizzata.
Come esperimento, ho impostato lo stile dell'elemento selezionato su display: none. Vediamo quanto è costoso il rendering della pagina ora.
I tempi di visualizzazione sono passati da circa 14 millisecondi per frame a 4 millisecondi per frame. In altre parole, la visualizzazione di quell'elemento ha richiesto circa 10 millisecondi. Seguendo la procedura di attivazione e disattivazione di elementi e stili, puoi individuare rapidamente le parti più dispendiose della pagina. Ricorda che tempi di visualizzazione più rapidi significano meno jank, una batteria più duratura e un maggiore coinvolgimento degli utenti. Quando vuoi approfondire l'argomento, assicurati di leggere questo fantastico articolo sulla modalità di ridisegno continuo della pagina.
Funzionalità avanzate
about:tracing
Molte delle funzionalità per sviluppatori più avanzate disponibili in Chrome per computer sono disponibili anche in Chrome per Android. Ad esempio, sono disponibili about:gpu-internals, about:appcache-internals e about:net-internals. Quando esamini un problema particolarmente difficile, a volte hai bisogno di più dati per individuare la causa del problema. Su computer, potresti utilizzare about:tracing. Se non hai ancora familiarità con about:tracing, guarda il mio video sull'utilizzo e l'esplorazione dello strumento di profilazione about:tracing. È possibile acquisire gli stessi dati da Chrome per Android. Per iniziare, segui questi passaggi:
- Scarica adb_trace.py
- Esegui adb_trace.py dalla riga di comando
- Utilizza Chrome su Android
- Premi Invio sulla riga di comando per arrestare lo script adb_trace.py.
Al termine di adb_trace.py, avrai un file JSON che puoi caricare in about:tracing di Chrome per computer.
Guida iniziale
Ora che abbiamo esaminato le funzionalità di Chrome DevTools remoto, vediamo come iniziare la sessione di debug remoto. Se non li hai mai utilizzati, leggi le istruzioni dettagliate su come iniziare. Se le hai già utilizzate, ma hai dimenticato esattamente come fare, ho elencato anche qui delle istruzioni abbreviate.
1. Installa l'SDK Android
Ti starai chiedendo perché devi installare l'SDK Android se stai sviluppando per il web. L'SDK include adb (Android Debug Bridge). Chrome per computer deve essere in grado di comunicare con il tuo dispositivo Android. Chrome non comunica direttamente con il dispositivo Android, ma instrada la comunicazione tramite adb.
2. Attiva il debug USB sul dispositivo
L'opzione per attivare il debug USB si trova nelle Impostazioni di Android. Attivala.
3. Connettiti al dispositivo
Se non l'hai ancora fatto, collega il tuo dispositivo Android al computer tramite USB. Se è la prima volta che utilizzi il debug USB, verrà visualizzato il seguente messaggio:
Se eseguirai spesso sessioni di debug remoto, ti consiglio di selezionare "Consenti sempre da questo computer".
4. Verifica che il dispositivo sia collegato correttamente
Esegui adb devices dal prompt dei comandi. Dovresti vedere il tuo dispositivo nell'elenco.
5. Attiva il debug USB in Chrome
Apri Impostazioni > Avanzate > DevTools e seleziona l'opzione Attiva debug web USB come mostrato qui:
6. Creazione di una connessione DevTools al tuo dispositivo Android
Esegui questo comando:
adb forward tcp:9222 localabstract:chrome_devtools_remote
crea un ponte tra il tuo computer desktop e il tuo dispositivo Android tramite adb. Se riscontri problemi fino a questo punto, leggi le istruzioni dettagliate per la configurazione qui.
7. Verifica che tutto sia pronto
Verifica che il dispositivo sia collegato correttamente aprendo Chrome sul computer e andando all'indirizzo http://localhost:9222. Se ricevi un errore 404 o un altro errore o se non vedi un messaggio simile al seguente:
Leggi le istruzioni di configurazione dettagliate qui.
Conclusione
Gli utenti mobile spesso hanno fretta e hanno bisogno di ottenere rapidamente informazioni importanti dalla tua pagina. In qualità di creatore di siti mobile, è tuo dovere assicurarti che la pagina si carichi rapidamente e funzioni bene sui dispositivi mobili. In caso contrario, il coinvolgimento degli utenti diminuirà. Chrome DevTools da remoto è funzionalmente equivalente alla versione per computer. La UI è abbastanza simile da non richiedere l'apprendimento di un nuovo set di strumenti. In altre parole, il tuo flusso di lavoro viene trasferito. Ricorda che Facebook non è invincibile ai problemi di rendimento e nemmeno il tuo sito lo è. I siti con ottime prestazioni generano un maggiore coinvolgimento degli utenti.