Introduzione
Oggi, la cosa più importante che puoi fare per il tuo sito è assicurarti che abbia un buon rendimento quando lo visiti da un telefono o tablet. Continua a leggere e scopri 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?
Esibizione
I dispositivi mobili stanno ottenendo CPU più veloci, più RAM, GPU più veloci e un accesso alla rete più rapido durante la transizione dal 2G e 3G al 4G. Nonostante il ritmo costante dei progressi, i dispositivi mobili hanno delle potenze inferiori rispetto ai computer. In termini più concreti, il caricamento delle risorse di rete richiede più tempo, lo scompressione delle immagini richiede più tempo, la colorazione della pagina richiede più tempo, l'esecuzione degli script richiede più tempo. Su un dispositivo mobile, una pagina può essere da 5 a 10 volte più lenta.
Batteria
I dispositivi mobili sono alimentati esclusivamente a batteria. Gli utenti dei dispositivi mobili vogliono che la batteria duri il più possibile. Un sito non ottimale scarica la batteria molto più velocemente del necessario. Riduci al minimo il traffico di rete e il colore per ridurre il consumo della batteria. Quando recuperi una risorsa, il Wi-Fi o il segnale radio cellulare deve essere acceso, consumando la batteria. Quando il browser colora un elemento, l'utilizzo di CPU e GPU aumenta, consumando anche la batteria.
Coinvolgimento
Il rendimento serve ad aumentare la metrica che più ti interessa. In Facebook ci interessa lo scorrimento. In un test A/B, abbiamo rallentato lo scorrimento da 60 f/s a 30 f/s. Coinvolgimento compresso. Abbiamo detto che va bene, quindi scorrere è importante.
Facebook at Edge Conference
Gli utenti di dispositivi mobili si aspettano di poter entrare e uscire rapidamente. Il sito più veloce ottiene il massimo coinvolgimento.
Gestione delle prestazioni
Chrome viene fornito con un'eccezionale serie di strumenti per sviluppatori. Questo articolo spiega come utilizzare questi strumenti per profilare il tuo sito per dispositivi mobili. Se hai già familiarità con Chrome DevTools, perfetto. In caso contrario, guarda questi ottimi tutorial:
Ora che hai finito, vediamo come accelerare il tuo sito per dispositivi mobili con DevTools. Se è la prima volta che utilizzi Chrome DevTools per Android, consulta la guida introduttiva alla fine dell'articolo.
Utilizzare Chrome DevTools in remoto
Con il dispositivo Android collegato al computer. Vai all'indirizzo http://localhost:9222 per computer e apri il tuo sito sul tuo dispositivo Android. Verrà visualizzato un elenco di schede aperte sul dispositivo Android. Scegli la tua pagina dall'elenco delle "Pagine paragonabili".
Si aprirà Chrome DevTools per la pagina in questione.
Ecco la familiare barra degli strumenti di Chrome DevTools. La cosa più importante da capire dei Chrome DevTools remoto è che sono gli stessi DevTools che utilizzi oggi sul tuo computer. L'unica differenza è che il tuo dispositivo Android è responsabile solo della pagina, mentre il tuo computer è responsabile di DevTools. Dietro le quinte, vengono raccolti gli stessi dati e viene resa disponibile la stessa funzionalità.
Ad esempio, ho visitato il sito www.sfgate.com/movies sul telefono. Utilizzando Chrome DevTools sul computer, ho passato il mouse sopra un div nello strumento Elementi e, proprio come sul desktop, il tag div è evidenziato visivamente sul mio dispositivo Android.
Lo strumento Elementi può essere utilizzato anche per attivare e disattivare gli stili, il che sarà utile quando tentiamo di esaminare i tempi di visualizzazione.
Shedding Light sull'accesso alla rete
Il rendimento della rete è importante e lo è ancora di più sul web mobile. I dispositivi mobili sono spesso connessi a una connessione più lenta rispetto ai nostri computer desktop e laptop. Per assicurarti di agire nel modo giusto, crea un'istantanea di rete accedendo allo strumento di rete e premendo Registra.
Lo screenshot mostra il traffico di rete risultante da una ricerca su Google. Osserva le richieste della rete inviate dal tuo sito e trova un modo per ridurle al minimo. Se il tuo sito effettua richieste di polling al server, ti consigliamo di prestare attenzione all'attività degli utenti ed evitare di eseguire il polling quando l'utente è inattivo. Lo strumento di rete ti consente di visualizzare le intestazioni HTTP non elaborate, utile nel caso in cui le reti mobili le modifichino.
Ottimizzazione dei tempi di colorazione
Uno dei più grandi colli di bottiglia nei browser web mobile è colorare la pagina. La pittura è il processo di disegno di un elemento della pagina con lo stile specificato. Quando un elemento è costoso da colorare, rallenta la visualizzazione dell'intera pagina. Chrome tenta di memorizzare nella cache elementi precedentemente dipinti in un buffer fuori schermo. Tuttavia, sui dispositivi mobili la quantità di RAM GPU disponibile è limitata, il che limita il numero di elementi che possono essere memorizzati nella cache fuori dallo schermo. L'effetto collaterale è più colori e ogni colore è più lento rispetto al desktop. Per garantire lo scorrimento reattivo, devi ridurre al minimo i tempi di colorazione.
Chrome 25 include la modalità di ricolorazione continua delle pagine. La modalità di modifica continua delle pagine non memorizza mai nella cache gli elementi dipinti, ma dipinge invece tutti gli elementi per ogni frame. Forzando il disegno di tutti gli elementi in ogni frame, è possibile eseguire dei test A/B dei tempi di colorazione attivando/disattivando gli elementi e gli stili e attivando e disattivando gli stili. Sebbene il processo sia manuale, è uno strumento inestimabile per tenere traccia di quanto costosa la colorazione 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, abilita la modalità di rielaborazione continua delle pagine:
Dopo l'attivazione, verrà visualizzato un grafico nell'angolo in alto a destra del dispositivo Android. L'asse x del grafico è il tempo, diviso in frame. L'asse y del grafico misura il tempo di visualizzazione in millisecondi. Puoi notare che, sul mio dispositivo, la pagina viene visualizzata in 14 millisecondi. Vengono visualizzati anche i tempi di paint minimo e massimo insieme alla memoria GPU utilizzata.
Nell'ambito di un esperimento, ho impostato lo stile dell'elemento selezionato su display: none. Vediamo quanto è costoso
dipingere la pagina ora.
I tempi di visualizzazione sono passati da circa 14 millisecondi per frame a 4 millisecondi per frame. In altre parole, la colorazione di un singolo elemento richiedeva circa 10 millisecondi. Seguendo il processo di attivazione/disattivazione degli elementi e degli stili, puoi restringere rapidamente le parti più costose della tua pagina. Ricorda che tempi di verniciatura più rapidi significano meno sporco, una batteria più lunga e un maggiore coinvolgimento da parte degli utenti. Quando vuoi approfondire l'argomento, assicurati di leggere questo fantastico articolo sulla modalità di rielaborazione continua delle pagine.
Funzionalità avanzate
about:tracciamento
Molte delle funzionalità più avanzate per gli sviluppatori disponibili in Chrome per computer desktop sono disponibili anche in Chrome per Android. Ad esempio, sono disponibili about:gpu-internals, about:appcache-internals e about:net-internals. Durante l'analisi di un problema particolarmente difficile, a volte hai bisogno di più dati per individuare la causa del problema. Sul computer, potresti utilizzare about:tracing. Se non conosci già about:tracing, guarda il video sull'utilizzo e l'esplorazione dello strumento di profilazione about:tracing. Per iniziare, procedi nel seguente modo:
- Scarica adb_trace.py
- Eseguire adb_trace.py dalla riga di comando
- Usare Chrome su Android
- Premi Invio sulla riga di comando per arrestare lo script adb_trace.py.
Una volta completato il file adb_trace.py, avrai un file JSON che potrai caricare nel file about:tracing di Chrome per computer.
Guida introduttiva
Ora che abbiamo visto cosa può fare Chrome DevTools remoto, vediamo come iniziare a utilizzare la sessione di debug remoto. Se non le hai mai utilizzate,leggi istruzioni dettagliate su come iniziare. Se li hai già utilizzati, ma hai dimenticato esattamente come usarli, qui trovi le istruzioni breve.
1. Installa l'SDK Android
Ti starai chiedendo perché devi installare l'SDK Android quando sviluppi per il web. Nell'SDK è incluso adb (Android Debug Bridge). Chrome desktop deve poter comunicare con il tuo dispositivo Android. Chrome non comunica direttamente con il dispositivo Android, ma indirizza la comunicazione tramite ADB.
2. Attiva il debug USB sul dispositivo
L'opzione per attivare il debug USB è disponibile nelle Impostazioni di Android. Attivala.
3. Connetti 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, ti verrà mostrato il seguente prompt:
Se eseguirai spesso sessioni di debug remote, ti consiglio di selezionare "Consenti sempre da questo computer".
4. Verifica che il dispositivo sia connesso correttamente
Esegui adb devices dal prompt dei comandi. Il tuo dispositivo dovrebbe essere visualizzato 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 bridge tra il computer e il dispositivo Android tramite ADB. Se riscontri problemi, leggi le istruzioni dettagliate per la configurazione qui.
7. Verifica del fatto che puoi iniziare
Verifica che il dispositivo sia connesso correttamente aprendo Chrome sul computer e andando all'indirizzo http://localhost:9222. Se visualizzi un errore 404, un altro errore o non vedi qualcosa di simile al seguente:
Leggi le istruzioni dettagliate per la configurazione qui.
Conclusione
Gli utenti di dispositivi mobili hanno spesso fretta e hanno bisogno di ottenere rapidamente le informazioni importanti dalla propria pagina. È tuo dovere in qualità di strumento per la creazione di siti per dispositivi mobili assicurarti che la pagina venga caricata rapidamente e abbia un buon rendimento sui dispositivi mobili. In caso contrario, il coinvolgimento degli utenti diminuirà. Gli strumenti Chrome DevTools remoti sono equivalenti dal punto di vista funzionale delle controparti desktop. L'interfaccia utente è sufficientemente simile che non serve imparare un nuovo set di strumenti. In altre parole, il flusso di lavoro si trasferisce. Ricorda, Facebook non è invincibile da problemi di prestazioni e lo stesso vale per il tuo sito. I siti con prestazioni migliori aumentano il coinvolgimento degli utenti.