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 riceveranno CPU più veloci, più RAM, GPU più veloci e un accesso alla rete più veloce con la transizione dal 2G e dal 3G al 4G. Nonostante l'incessante fermento, i dispositivi mobili sono sottopotenziati rispetto ai nostri computer. In termini più concreti, il caricamento delle risorse di rete richiede più tempo, lo scompattamento delle immagini richiede più tempo, la visualizzazione della pagina richiede più tempo, l'esecuzione degli script richiede più tempo. È lecito presumere che la tua pagina venga eseguita da 5 a 10 volte più lentamente su un dispositivo mobile.
Batteria
I dispositivi mobili funzionano esclusivamente a batteria. Gli utenti di dispositivi mobili vogliono che la batteria duri il più a lungo possibile. Un sito non ottimale scarica la batteria molto più velocemente del necessario. Riduci al minimo il traffico di rete e le pitture per ridurre il consumo della batteria. Quando recuperi una risorsa, il Wi-Fi o la radio cellulare deve essere attivo, il che scarica la batteria. Quando il browser dipinge un elemento, l'utilizzo della CPU e della GPU aumenta, il che comporta anche un consumo della batteria.
Coinvolgimento
Il rendimento serve ad aumentare la metrica più importante per te. In Facebook ci preoccupiamo dello scorrimento. In un test A/B, abbiamo rallentato scorrimento da 60 fps a 30 fps. Coinvolgimento compresso. Abbiamo detto di sì, quindi lo scorrimento è importante.
Facebook at Edge Conference
Gli utenti di dispositivi mobili si aspettano di poter accedere e uscire rapidamente. Il sito più veloce otterrà il maggior coinvolgimento.
Gestione delle prestazioni
Chrome viene fornito con un ottimo set di strumenti per sviluppatori. Questo articolo spiega come utilizzare questi strumenti per creare il profilo del tuo sito mobile. Se hai già familiarità con Chrome DevTools, ottimo! In caso contrario, dai un'occhiata a questi fantastici tutorial:
Ora che hai recuperato le informazioni, vediamo come accelerare il tuo sito mobile con DevTools. Se è la prima volta che utilizzi Chrome DevTools per Android, consulta la guida introduttiva alla fine dell'articolo.
Utilizzare Chrome DevTools da remoto
Con il dispositivo Android connesso tramite tethering al computer. In Chrome per computer, vai a http://localhost:9222 e apri il tuo sito sul dispositivo Android. Verrà visualizzato un elenco delle schede aperte sul tuo dispositivo Android. Scegli la pagina dall'elenco "Pagine ispezzionabili".
e verrà visualizzata la pagina di Chrome DevTools.
Ah, ecco la familiare barra degli strumenti di Chrome DevTools. La cosa più importante da capire sugli strumenti DevTools di Chrome remoti è che sono gli stessi che utilizzi attualmente sul desktop. L'unica differenza è che il dispositivo Android è responsabile esclusivamente della pagina, mentre il desktop è responsabile di DevTools. Di fondo vengono raccolti gli stessi dati ed è disponibile la stessa funzionalità.
Ad esempio, ho visitato il sito www.sfgate.com/movies sul mio telefono. Utilizzando Chrome DevTools sul mio computer, ho passato il mouse sopra un div nello strumento Elementi e, come accade sul computer, il div è stato 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 esaminare i tempi di pittura.
Informazioni sull'accesso alla rete
Il rendimento della rete è importante ed è ancora più importante sul web mobile. I dispositivi mobili spesso hanno connessioni più lente rispetto ai computer desktop e laptop. Per assicurarti di procedere correttamente, acquisisci un'immagine della rete andando allo strumento di rete e premendo Registra.
Lo screenshot mostra il traffico di rete generato da una ricerca su Google. Osserva le richieste di rete effettuate dal tuo sito e trova il modo di ridurle al minimo. Se il tuo sito invia richieste di polling al server, ti consigliamo di prestare attenzione all'attività utente ed evitare il polling quando l'utente è inattivo. Lo strumento di rete ti consente di visualizzare le intestazioni HTTP non elaborate, utili nel caso in cui le reti mobili le modifichino.
Ottimizzazione dei tempi di aggiornamento
Uno dei principali 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 la pittura di un elemento è dispendiosa, rallenta la pittura dell'intera pagina. Chrome tenta di memorizzare nella cache gli elementi precedentemente dipinti in un buffer offscreen. 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 dallo schermo. L'effetto collaterale è un maggior numero di paint e ogni paint è più lento rispetto al desktop. Per consentire lo scorrimento reattivo, devi ridurre al minimo i tempi di visualizzazione.
Chrome 25 include la modalità di ridipingitura continua della pagina. La modalità di ricolorazione continua della pagina non memorizza mai nella cache gli elementi dipinti e, invece, visualizza tutti gli elementi su ogni frame. Se forzi 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. Anche se la procedura è manuale, è uno strumento inestimabile per monitorare il costo della visualizzazione di ogni elemento nella pagina. La prima regola del club di ottimizzazione è misurare ciò che stai cercando di ottimizzare per ottenere una linea di base. Vediamo un semplice esempio.
Innanzitutto, attiva la modalità di ridisegnare continuamente la pagina:
Dopo l'attivazione, un grafico sarà visibile nell'angolo in alto a destra del dispositivo Android. L'asse x del grafico è il tempo, suddiviso in frame. L'asse Y del grafico misura il tempo di aggiornamento, in millisecondi. Puoi vedere che sul mio dispositivo la pagina impiega 14 millisecondi per essere visualizzata. Vengono visualizzati anche i tempi di pittura minimi e massimi, nonché la memoria GPU utilizzata.
Come esperimento, ho impostato lo stile dell'elemento selezionato su display: none. Vediamo quanto è costosa la pagina da dipingere ora.
I tempi di aggiornamento sono passati da circa 14 millisecondi per frame a 4 millisecondi per frame. In altre parole, la pittura di un elemento ha richiesto circa 10 millisecondi. Se attivi e disattivi gli elementi e gli stili, puoi individuare rapidamente le parti più costose della pagina. Ricorda che tempi di aggiornamento più rapidi significano meno balbuzie, una batteria più duratura e un maggiore coinvolgimento degli utenti. Quando avrai voglia di approfondire l'argomento, assicurati di leggere questo fantastico articolo sulla modalità di ripetizione continua 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, about:gpu-internals, about:appcache-internals e about:net-internals sono disponibili. Durante l'analisi di un problema particolarmente complesso, a volte potrebbero essere necessari più dati per individuare la causa del problema. Sul computer, potresti utilizzare about:tracing. Se non hai ancora familiarità con about:tracing, guarda il mio video sull'utilizzo e sull'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
- Usare Chrome su Android
- Premi Invio nella riga di comando per arrestare lo script adb_trace.py.
Al termine di adb_trace.py, avrai un file JSON che puoi caricare nella cartella about:tracing di Chrome per computer.
Guida introduttiva
Ora che abbiamo esaminato le funzionalità di Chrome DevTools da remoto, vediamo come iniziare la sessione di debug remoto. Se non li hai mai utilizzatiมาก่อน,leggi le istruzioni dettagliate su come iniziare. Se li hai già utilizzati, ma hai dimenticato esattamente come, di seguito sono riportate anche istruzioni abbreviate.
1. Installa l'SDK Android
Forse ti starai chiedendo perché sia necessario installare l'SDK Android quando 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. Attivare il debug USB sul dispositivo
L'opzione per attivare il debug USB è disponibile nelle Impostazioni di Android. Attivala.
3. Connettiti al dispositivo
Se non l'hai ancora fatto, collega il dispositivo Android al computer tramite USB. Se è la prima volta che utilizzi il debug USB, verrà visualizzato il seguente messaggio:
Se esegui spesso sessioni di debug remoto, ti consigliamo 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. Attivare il debug USB in Chrome
Apri Impostazioni > Avanzate > DevTools e controlla l'opzione Attiva il debug web USB come mostrato di seguito:
6. Creazione di una connessione DevTools al tuo dispositivo Android
Esegui questo comando:
adb forward tcp:9222 localabstract:chrome_devtools_remote
crea un bridge tra il computer desktop e il dispositivo Android tramite ADB. Se riscontri problemi per raggiungere questo punto, leggi le istruzioni di configurazione dettagliate qui.
7. Verifica del fatto che sia tutto pronto
Verifica che il dispositivo sia collegato correttamente aprendo Chrome sul computer e visitando la pagina http://localhost:9222. Se ricevi un messaggio 404, un altro errore o non vedi qualcosa di simile al seguente:
Leggi le istruzioni dettagliate sulla configurazione qui.
Conclusione
Gli utenti di dispositivi mobili sono spesso di fretta e hanno bisogno di ottenere rapidamente le informazioni importanti dalla tua pagina. In qualità di creator di siti mobile, è tuo compito assicurarti che la pagina si carichi rapidamente e funzioni bene sui dispositivi mobili. In caso contrario, il coinvolgimento degli utenti diminuirà. DevTools di Chrome da remoto sono funzionalmente equivalenti alle loro controparti desktop. L'interfaccia utente è talmente simile che non è necessario imparare un nuovo set di strumenti. In altre parole, il flusso di lavoro viene trasferito. Ricorda, Facebook non è invincibile nei problemi di prestazioni e neanche il tuo sito. I siti con ottime prestazioni generano un maggiore coinvolgimento degli utenti.