#perfmatters: Técnicas de herramientas para el ninja de rendimiento
Conocer tus herramientas de desarrollo es clave para convertirte en un experto en rendimiento. Colt analizó los tres pilares del rendimiento: red, procesamiento y renderización, y proporcionó un recorrido por el problema clave en cada área y las herramientas disponibles para encontrarlos y erradicarlos.
- Ahora puedes generar perfiles de Chrome en Android con las DevTools que conoces y usas en computadoras de escritorio.
- El ciclo de iteración para el trabajo de rendimiento es el siguiente: recopilar datos, obtener estadísticas y tomar medidas.
- Prioriza los recursos que se encuentran en la ruta de renderización crítica de tus páginas.
- Evita pintar, ya que es muy costoso.
- Evita la rotación de memoria y la ejecución de código durante momentos críticos en tu app.
#perfmatters: Optimiza el rendimiento de la red
Por lo general, la red y la latencia representan el 70% del tiempo total de carga de la página de un sitio. Es un porcentaje alto, pero también significa que cualquier mejora que realices allí generará grandes beneficios para tus usuarios. En esta charla, Ilya analizó los cambios recientes en Chrome que mejorarán el tiempo de carga, así como algunos cambios que puedes realizar en tu entorno para mantener la carga de red en un mínimo absoluto.
- Chrome M27 tiene un programador de recursos nuevo y mejorado.
- Chrome M28 hizo que los sitios SPDY sean (incluso) más rápidos.
- Se actualizó la caché simple de Chrome.
- SPDY o HTTP/2.0 ofrecen grandes mejoras en la velocidad de transferencia. Existen módulos SPDY maduros disponibles para nginx, Apache y Jetty (solo por nombrar tres).
- QUIC es un protocolo nuevo y experimental basado en UDP. Estamos en los primeros días, pero, independientemente de cómo funcione, los usuarios serán los ganadores.
#perfmatters: Diseño y renderización de 60 fps
Alcanzar las 60 fps en tus proyectos se correlaciona directamente con la participación de los usuarios y es fundamental para su éxito. En esta charla, Nat y Tom hablaron sobre la canalización de renderización de Chrome, algunas causas comunes de la pérdida de fotogramas y cómo evitarlas.
- Un fotograma tiene 16 ms de duración. Contiene JavaScript, cálculos de estilo, pintura y composición.
- Pintar es muy costoso. Una tormenta de pintura es cuando repites innecesariamente un trabajo de pintura costoso.
- Las capas se usan para almacenar en caché elementos pintados.
- Los controladores de entrada (objetos de escucha de rueda del mouse y táctiles) pueden anular la capacidad de respuesta. Evitarlos si puedes. Cuando no puedes reducirlos al mínimo.
#perfmatters: Apps web instantáneas para dispositivos móviles
La ruta de renderización crítica hace referencia a cualquier elemento (JavaScript, HTML, CSS, imágenes) que el navegador requiera antes de poder comenzar a pintar la página. Es fundamental priorizar la entrega de recursos en la ruta de renderización crítica, en especial para los usuarios que usan dispositivos con limitaciones de red, como teléfonos inteligentes en redes móviles. Bryan explicó cómo el equipo de Google pasó por el proceso de identificar y priorizar los recursos del sitio web de PageSpeed Insights, lo que redujo el tiempo de carga de 20 segundos a poco más de 1 segundo.
- Elimina los elementos de JavaScript y CSS que bloquean la visualización.
- Prioriza el contenido visible.
- Carga secuencias de comandos de forma asíncrona.
- Renderiza la vista inicial del servidor como HTML y aumenta con JavaScript.
- Minimiza el CSS que bloquea la renderización. Entrega solo los estilos necesarios para mostrar el viewport inicial y, luego, entrega el resto.
- Los URIs de datos grandes intercalados en el CSS que bloquea la renderización son perjudiciales para el rendimiento de la renderización, ya que bloquean los recursos en los que las URLs de imagen no bloquean.