Introducción
Hoy en día, lo más importante que puedes hacer por tu sitio es asegurarte de que funcione bien cuando se lo visite desde un teléfono o una tablet. Sigue leyendo y descubre cómo 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 optimizar para la Web móvil?
Rendimiento
Los dispositivos móviles tienen CPU más rápidas, más RAM, GPU más rápidas y acceso a la red más rápido a medida que pasamos de 2G y 3G a 4G. A pesar del ritmo constante del progreso, los dispositivos móviles tienen menos potencia que nuestras computadoras. En términos más concretos, la carga de recursos de red, el desempaquetado de imágenes, la renderización de la página y la ejecución de secuencias de comandos tardan más. Es seguro suponer que tu página se ejecuta de 5 a 10 veces más lento en un dispositivo móvil.
Batería
Los dispositivos móviles funcionan exclusivamente con batería. Los usuarios de dispositivos móviles quieren que la batería dure el mayor tiempo posible. Un sitio que no esté optimizado agotará la batería mucho más rápido de lo necesario. Minimiza el tráfico de red y reduce las operaciones de dibujo para disminuir el agotamiento de la batería. Cuando recuperas un recurso, la radio Wi-Fi o móvil debe estar encendida, lo que agota la batería. Cuando el navegador pinta un elemento, el uso de la CPU y la GPU aumenta, 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, ralentizamos el desplazamiento de 60 fps a 30 fps. Se contrajo la participación. Dijimos que sí, por lo tanto, el desplazamiento es importante.
Facebook en la Edge Conference
Los usuarios de dispositivos móviles esperan poder entrar y salir rápidamente. El sitio más rápido obtendrá la mayor participación.
Administración del rendimiento
Chrome incluye un excelente conjunto de herramientas para desarrolladores. En este artículo, se explica cómo usar estas herramientas para generar perfiles de tu sitio para dispositivos móviles. Si ya conoces las Herramientas para desarrolladores de Chrome, ¡genial! Si no es así, consulta estos excelentes instructivos:
- Cómo generar perfiles de tiempos de pintura prolongados
- Sugerencias y trucos de las Herramientas para desarrolladores
- Etcétera
Ahora que ya estás al tanto, veamos cómo acelerar tu sitio para dispositivos móviles con las 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 forma remota
Con tu dispositivo Android conectado a la computadora. En Chrome para computadoras, navega 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 tu página de la lista de “Páginas inspeccionables”.
y se te dirigirá a las Herramientas para desarrolladores de Chrome de esa página.
¡Ah! La conocida barra de herramientas de las Herramientas para desarrolladores de Chrome está ahí. Lo más importante que debes comprender sobre las Herramientas para desarrolladores de Chrome remotas es que son las mismas que usas hoy en tu computadora de escritorio. La única diferencia es que tu dispositivo Android solo es responsable de la página, mientras que tu computadora es responsable de las Herramientas para desarrolladores. En segundo plano, se recopilan los mismos datos y están disponibles las mismas funciones.
Por ejemplo, visité www.sfgate.com/movies en mi teléfono. Con las Herramientas para desarrolladores de Chrome en mi computadora, coloqué el cursor sobre un elemento div en la herramienta Elementos y, tal como sucede en la computadora, el elemento div se destaca visualmente en mi dispositivo Android.
La herramienta Elements también se puede usar para activar y desactivar estilos, lo que será útil cuando intentemos investigar los tiempos de pintura.
Aclara el acceso a la red
El rendimiento de la red es importante, y lo es aún más en la Web móvil. Los dispositivos móviles suelen tener conexiones más lentas que las computadoras de escritorio y las laptops. Para asegurarte de que estás haciendo lo correcto, toma una instantánea de la red. Para ello, ve a la herramienta Red y presiona Grabar.
En la captura de pantalla, se 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 que prestes atención a la actividad del usuario y evites el sondeo 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 alteren.
Optimiza los tiempos de renderización
Uno de los mayores cuellos de botella en los navegadores web para dispositivos móviles es la renderización de la página. La pintura es el proceso de dibujar un elemento en la página con el estilo especificado. Cuando un elemento es costoso de pintar, se ralentiza la pintura de toda la página. Chrome intenta almacenar en caché los elementos renderizados anteriormente en un búfer fuera de pantalla. Sin embargo, en dispositivos móviles, la cantidad de RAM de GPU disponible es limitada, lo que restringe la cantidad de elementos que se pueden almacenar en caché fuera de la pantalla. El efecto secundario es que se realizan más renderizaciones y cada una es más lenta que en computadoras de escritorio. Para tener un desplazamiento responsivo, debes minimizar los tiempos de pintura.
Chrome 25 incluye el modo de repintado continuo de páginas. El modo de repintado continuo de páginas nunca almacena en caché los elementos pintados y, en su lugar, pinta todos los elementos en cada fotograma. Si fuerzas que todos los elementos se pinten en cada fotograma, es posible realizar pruebas A/B de los tiempos de pintura activando y desactivando elementos y estilos. Si bien el proceso es manual, es una herramienta invaluable para hacer un seguimiento de lo costoso que es pintar 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 de repintado continuo de la página:
Después de habilitarla, aparecerá 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 renderización en milisegundos. Puedes ver que, en mi dispositivo, la página tarda 14 milisegundos en pintarse. También se muestran los tiempos de renderización mínimo y máximo, junto con la memoria de GPU usada.
Como experimento, configuré el estilo del elemento seleccionado como display: none. Veamos qué tan costoso es pintar la página ahora.
Los tiempos de dibujo pasaron de alrededor de 14 milisegundos por fotograma a 4 milisegundos por fotograma. En otras palabras, pintar ese elemento llevó aproximadamente 10 milisegundos. Si sigues el proceso de activar y desactivar elementos y estilos, puedes reducir rápidamente las partes costosas de tu página. Recuerda que los tiempos de renderización más rápidos implican menos bloqueos, una mayor duración de la batería y una mayor participación de los usuarios. Cuando quieras profundizar en el tema, asegúrate de leer este excelente artículo sobre el modo de repintado continuo de páginas.
Funciones avanzadas
about:tracing
Muchas de las funciones para desarrolladores más avanzadas disponibles en Chrome para computadoras de escritorio 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 difícil, a veces necesitas más datos para acotar la causa del problema. En la computadora, es posible que uses about:tracing. Si aún no conoces about:tracing, mira mi video sobre cómo usar y explorar 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
- Cómo usar Chrome en Android
- Presiona Intro en la línea de comandos para cerrar la secuencia de comandos adb_trace.py.
Una vez que se complete adb_trace.py, tendrás un archivo JSON que podrás cargar en about:tracing de Chrome para computadoras de escritorio.
Guía de inicio
Ahora que revisamos lo que pueden hacer las Herramientas para desarrolladores de Chrome remotas, veamos cómo comenzar tu sesión de depuración remota. Si nunca las usaste, lee las instrucciones detalladas para comenzar. Si ya las usaste, pero olvidaste exactamente cómo hacerlo, también incluí instrucciones resumidas aquí.
1. Instala el SDK de Android
Quizás te preguntes por qué tienes que instalar el SDK de Android cuando desarrollas 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 se encuentra en la configuración de Android. Habilítala.
3. Conéctate al dispositivo
Si aún no lo hiciste, conecta tu dispositivo Android a la computadora de escritorio con un cable USB. Si es la primera vez que usas la depuración por USB, verás el siguiente mensaje:
Si vas a realizar sesiones de depuración remota con frecuencia, te recomiendo que marques "Permitir siempre en esta computadora".
4. Verifica que el dispositivo esté conectado correctamente
Ejecuta adb devices desde el símbolo del sistema. Deberías ver tu dispositivo en la lista.
5. Cómo habilitar la depuración por USB en Chrome
Abre Configuración > Avanzada > Herramientas para desarrolladores y marca la opción Habilitar depuración web por USB, como se muestra aquí:
6. Cómo crear una conexión de DevTools 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. Verificando que todo esté listo
Para verificar que el dispositivo esté conectado correctamente, abre Chrome en tu computadora de escritorio y navega a http://localhost:9222. Si recibes un error 404 o de otro tipo, o no ves algo como lo siguiente:
Lee las instrucciones de configuración detalladas aquí.
Conclusión
Los usuarios de dispositivos móviles suelen tener prisa y necesitan obtener rápidamente esa información importante de tu página. Como creador de sitios para dispositivos móviles, tu deber es asegurarte de que la página se cargue rápidamente y funcione bien en dispositivos móviles. De lo contrario, la participación de los usuarios disminuirá. Las Herramientas para desarrolladores de Chrome remotas son funcionalmente equivalentes a sus contrapartes 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 mantiene. Recuerda que Facebook no es invencible a los problemas de rendimiento, y tu sitio tampoco. Los sitios con buen rendimiento obtienen una mayor participación de los usuarios.