Introducción
Hoy en día, lo más importante que puedes hacer por tu sitio es asegurarte de que funcione bien cuando lo visites desde un teléfono o una tablet. Continúa leyendo y aprende a optimizar tu sitio para el navegador para dispositivos móviles con las Herramientas para desarrolladores de Chrome y un dispositivo Android.
¿Por qué es tan importante la optimización para la Web móvil?
Rendimiento
Los dispositivos móviles obtienen CPU más rápidas, más RAM, GPU más veloces y un acceso a la red más rápido a medida que pasamos de 2G y 3G a 4G. A pesar del ritmo del progreso, los dispositivos móviles no tienen suficiente potencia en comparación con nuestras computadoras. En términos más concretos, la carga de recursos de red lleva más tiempo, desempaquetar imágenes, pintar la página y ejecutar secuencias de comandos más tiempo. Podemos suponer que la página se ejecuta de 5 a 10 veces más lenta en un dispositivo móvil.
Batería
Los dispositivos móviles funcionan exclusivamente con batería. Los usuarios de dispositivos móviles quieren que esa batería dure el mayor tiempo posible. Un sitio con rendimiento deficiente agota la batería mucho más rápido de lo necesario. Minimiza el tráfico de red y reduce la pintura para reducir el agotamiento de la batería. Cuando recuperas un recurso, la radio móvil o Wi-Fi debe estar activada, lo que agota la batería. Cuando el navegador pinta un elemento, el uso de la CPU y la GPU tiene un aumento repentino, lo que también agota la batería.
Participación
El rendimiento está ahí para aumentar la métrica que más te importa. En Facebook, nos importa el desplazamiento. En una prueba A/B, reducimos el desplazamiento de 60 FPS a 30 FPS. Se contrajo la participación. Dijimos que está bien, por lo que el desplazamiento es importante.
Facebook en la conferencia Edge
Los usuarios de dispositivos móviles esperan poder entrar y salir rápidamente. El sitio más rápido generará más participación.
Administración del rendimiento
Chrome se envía con un excelente conjunto de herramientas para desarrolladores. En este artículo, se explica cómo usar estas herramientas para generar perfiles de su sitio móvil. Si ya estás familiarizado con las Herramientas para desarrolladores de Chrome, ¡excelente! Si no es así, consulta estos excelentes instructivos:
- Genera perfiles de tiempos de pintura prolongados
- Sugerencias y trucos de Herramientas para desarrolladores
- Etcétera
Ahora que ya estás al día, veamos cómo acelerar tu sitio móvil con Herramientas para desarrolladores. Si es la primera vez que usas las Herramientas para desarrolladores de Chrome para Android, consulta la guía de introducción que se encuentra al final del artículo.
Cómo usar las Herramientas para desarrolladores de Chrome de manera remota
Con tu dispositivo Android conectado a tu computadora En la versión de Chrome para computadoras de escritorio, ve a http://localhost:9222 y, en tu dispositivo Android, abre tu sitio. Se te dirigirá a una lista de pestañas abiertas en tu dispositivo Android. Elige la página en la lista de "Páginas que se pueden inspeccionar".
y se te dirigirá a las Herramientas para desarrolladores de Chrome de esa página.
Esa conocida barra de herramientas de Herramientas para desarrolladores de Chrome está ahí. Lo más importante que debes comprender sobre las Herramientas para desarrolladores remotas de Chrome es que son las mismas que usas actualmente en tu escritorio. La única diferencia es que tu dispositivo Android solo es responsable de la página, mientras que tu computadora de escritorio es responsable de las Herramientas para desarrolladores. De forma interna, se recopilan los mismos datos y se encuentra disponible la misma funcionalidad.
Por ejemplo, visité www.sfgate.com/movies en mi teléfono. En las Herramientas para desarrolladores de Chrome, me desplacé sobre un div en la herramienta Elements y, al igual que en el escritorio, el div se destaca visualmente en mi dispositivo Android.
La herramienta Elementos también se puede usar para activar y desactivar estilos, lo que será útil cuando intentemos investigar los tiempos de pintura.
Aclaración sobre el acceso a la red
El rendimiento de la red es importante y es aún más importante en la Web móvil. Los dispositivos móviles suelen tener conexiones más lentas que nuestras computadoras de escritorio y laptops. A fin de asegurarte de hacer lo correcto, ve a la herramienta de red y presiona grabar para tomar una instantánea de la red.
La captura de pantalla muestra el tráfico de red que se genera a partir de una Búsqueda de Google. Observa las solicitudes de red que realiza tu sitio y busca formas de minimizarlas. Si tu sitio realiza solicitudes de sondeo al servidor, te recomendamos prestar atención a la actividad del usuario y evitar sondeos cuando el usuario esté inactivo. La herramienta de red te permite ver los encabezados HTTP sin procesar, lo que resulta útil en caso de que las redes móviles los modifiquen.
Optimización de los tiempos de pintura
Uno de los mayores cuellos de botella en los navegadores web móviles es pintar tu página. La pintura es el proceso de dibujar un elemento en la página con el estilo especificado. Cuando es costoso pintar un elemento, se ralentiza la pintura de toda la página. Chrome intenta almacenar en caché elementos pintados previamente en un búfer fuera de pantalla. Sin embargo, en dispositivos móviles, la cantidad de RAM de GPU disponible es limitada, lo que limita la cantidad de elementos que se pueden almacenar en caché fuera de la pantalla. El efecto secundario es de más pintura y cada pintura es más lenta que la de la computadora de escritorio. Para lograr un desplazamiento adaptable, debes minimizar los tiempos de procesamiento de imagen.
Chrome 25 incluye el modo de repetición continua de pintura de la página. Este modo nunca almacena en caché los elementos pintados, sino que pinta todos los elementos en cada marco. Si fuerzas el procesamiento de todos los elementos para que se pinten en cada marco, es posible realizar pruebas A/B de los tiempos de pintura mediante la activación y desactivación de los elementos y de los estilos. Si bien el proceso es manual, es una herramienta muy útil para descubrir qué tan costoso es la pintura de cada elemento de tu página. La primera regla del club de optimización es medir lo que intentas optimizar para obtener un modelo de referencia. Veamos un ejemplo sencillo.
Primero, habilita el modo para volver a procesar la página de manera continua:
Después de habilitar la función, verás un gráfico en la esquina superior derecha de tu dispositivo Android. El eje X del gráfico es el tiempo, dividido en fotogramas. El eje y del gráfico mide el tiempo de pintura en milisegundos. Puedes ver que, en mi dispositivo, la página tarda 14 milisegundos en pintarse. Los tiempos de pintura mínimos y máximos también se muestran junto con la memoria de GPU usada.
Como experimento, configuré el estilo del elemento seleccionado para que sea display: none. Veamos lo caro que es pintar la página ahora.
Los tiempos de pintura pasaron de unos 14 milisegundos por fotograma a 4 milisegundos por fotograma. En otras palabras, pintar ese elemento tardó alrededor de 10 milisegundos. Si sigues el proceso de activar y desactivar elementos y de desactivar los estilos, puedes acotar rápidamente las partes costosas de tu página. Recuerda que los tiempos de procesamiento de imagen más rápidos implican menos bloqueos, más batería y una mayor participación de los usuarios. Cuando estés listo para profundizar en el tema, asegúrate de leer este excelente artículo sobre el modo para volver a pintar la página de forma continua.
Funciones avanzadas
acerca del seguimiento
Muchas de las funciones para desarrolladores más avanzadas disponibles en la versión para computadoras de escritorio de Chrome también están disponibles en Chrome para Android. Por ejemplo, están disponibles about:gpu-internals, about:appcache-internals y about:net-internals. Cuando investigas un problema particularmente complicado, a veces necesitas más datos para limitar la causa de tu problema. En la computadora de escritorio, es posible que estés usando la herramienta "about:tracing". Si aún no conoces about:tracing, mira mi video sobre el uso y la exploración de la herramienta de generación de perfiles about:tracing. Es posible capturar los mismos datos de Chrome para Android. Sigue estos pasos para comenzar:
- Descarga adb_trace.py
- Ejecuta adb_trace.py desde la línea de comandos
- Usa Chrome en Android
- Presiona Intro en la línea de comandos y cierra la secuencia de comandos adb_trace.py.
Cuando se complete adb_trace.py, tendrás un archivo JSON que puedes cargar en el archivo about:tracing de Chrome para computadoras de escritorio.
Guía de inicio
Ahora que ya repasamos lo que las Herramientas para desarrolladores de Chrome remotas pueden hacer, veamos cómo iniciar tu sesión de depuración remota. Si aún no los usaste,lee las instrucciones detalladas para comenzar. Si ya las usaste, pero no recuerdas bien cómo hacerlo, aquí también se incluyen instrucciones acortadas.
1. Cómo instalar el SDK de Android
Quizás te preguntes por qué debes instalar el SDK de Android cuando desarrollas contenido para la Web. En el SDK, se incluye adb (Android Debug Bridge). Chrome para computadoras debe poder comunicarse con tu dispositivo Android. Chrome no se comunica directamente con el dispositivo Android, sino que enruta la comunicación a través de adb.
2. Cómo habilitar la depuración por USB en tu dispositivo
La opción para habilitar la depuración por USB está en la Configuración de Android. Habilitarla
3. Conéctate al dispositivo
Si aún no lo hiciste, conecta tu dispositivo Android a la computadora de escritorio por USB. Si es la primera vez que usas la depuración por USB, recibirás la siguiente instrucción:
Si realizarás sesiones de depuración remotas con frecuencia, te recomiendo marcar la opción "Permitir siempre desde esta computadora".
4. Verifica que el dispositivo esté conectado correctamente
Ejecuta adb devices desde el símbolo del sistema. Tu dispositivo debería aparecer en la lista.
5. Cómo habilitar la depuración por USB en Chrome
Abre Configuración > Avanzado > Herramientas para desarrolladores y marca la opción Habilitar depuración web por USB como se muestra a continuación:
6. Cómo crear una conexión de Herramientas para desarrolladores a tu dispositivo Android
Ejecuta el siguiente comando:
adb forward tcp:9222 localabstract:chrome_devtools_remote
crea un puente entre tu máquina de escritorio y tu dispositivo Android a través de adb. Si tienes algún problema para llegar a este punto, lee las instrucciones de configuración detalladas aquí.
7. Cómo verificar que estás listo para comenzar
Verifica que el dispositivo esté conectado correctamente. Para ello, abre Chrome en el escritorio y navega a http://localhost:9222. Si obtienes un error 404, otro error o no ves algo como lo siguiente:
Lee las instrucciones de configuración detalladas aquí.
Conclusión
A menudo, los usuarios de dispositivos móviles están apurados y necesitan obtener rápidamente esa información importante de su página. Como creador de sitios móviles, tu deber es asegurarte de que la página se cargue rápidamente y funcione bien en estos dispositivos. De lo contrario, la participación de los usuarios disminuirá. Las Herramientas para desarrolladores remotas de Chrome son funcionalmente equivalentes a sus equivalentes de escritorio. La IU es lo suficientemente similar como para que no necesites aprender a usar un nuevo conjunto de herramientas. En otras palabras, tu flujo de trabajo se traslada. Recuerda: Facebook no es invencible ante los problemas de rendimiento y tu sitio tampoco. Los sitios con buen rendimiento obtienen más participación de los usuarios.