#perfmatters: Técnicas de herramientas para los ninjas del rendimiento
Conocer tus herramientas de desarrollo es clave para convertirte en un experto en rendimiento. Colt recorrió los tres pilares del rendimiento: red, procesamiento y procesamiento, y proporcionó un recorrido del problema clave en cada área y las herramientas disponibles para encontrarlos y erradicarlos.
- Ahora puedes generar perfiles de Chrome en Android con las Herramientas para desarrolladores que conoces y te encantan desde el escritorio.
- El bucle de iteración para el trabajo de rendimiento es recopilar datos, obtener estadísticas y tomar medidas.
- Prioriza los elementos que se encuentran en la ruta de renderización crítica de tus páginas.
- Evita pintar, ya que es muy costoso.
- Evita la saturación de la memoria y la ejecución de código durante momentos críticos en tu app.
#perfmatters: Optimiza el rendimiento de la red
La red y la latencia suelen representar el 70% del tiempo de carga total de la página de un sitio. Es un gran porcentaje, pero también significa que cualquier mejora que realices cosechará enormes beneficios para tus usuarios. En esta charla, Ilya explicó los cambios recientes en Chrome que mejorarán el tiempo de carga, así como algunos cambios que puedes hacer en tu entorno para ayudar a mantener la carga de la red al mínimo.
- Chrome M27 cuenta con un programador de recursos nuevo y mejorado.
- Chrome M28 hizo que los sitios SPDY (incluso) sean más rápidos.
- Se modificó la caché simple de Chrome.
- SPDY / HTTP/2.0 ofrece enormes mejoras en la velocidad de transferencia. Hay módulos SPDY maduros disponibles para nginx, Apache y Jetty (por nombrar solo tres).
- QUIC es un protocolo nuevo y experimental compilado sobre UDP. Está en sus inicios, pero el resultado será el que ganarán los usuarios.
#perfmatters: Diseño y renderización de 60 fps
Alcanzar 60 fps en tus proyectos se relaciona directamente con la participación de los usuarios y es crucial 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 evitarlos.
- Un fotograma tiene una longitud de 16 ms. Contiene JavaScript, cálculos de estilo, pintura y composición.
- La pintura es extremely costosa. Una tormenta de pintura es donde innecesariamente repites trabajos de pintura costosos.
- Las capas se usan para almacenar en caché los elementos pintados.
- Los controladores de entrada (objetos de escucha táctiles y de rueda del mouse) pueden finalizar la capacidad de respuesta; si es posible, evítalos. en los que no se puede reducir al mínimo.
#perfmatters: Apps web para dispositivos móviles instantáneas
La Ruta crítica de representación hace referencia a cualquier cosa (JavaScript, HTML, CSS, imágenes) que el navegador necesita para poder comenzar a pintar la página. Priorizar la entrega de recursos en la ruta de acceso de representación crítica es imprescindible, especialmente para los usuarios que usan dispositivos con restricciones de red, como smartphones con redes móviles. Bryan contó sobre cómo el equipo de Google atravesó el proceso de identificación y priorización de los recursos para el sitio web de PageSpeed Insights, desde un tiempo de carga de 20 segundos hasta poco más de 1 segundo.
- Elimina los elementos de JavaScript y CSS que bloquean la renderización.
- Prioriza el contenido visible.
- Carga secuencias de comandos de forma asíncrona.
- Renderiza la vista inicial del servidor como HTML y aumenta la imagen con JavaScript.
- Minimiza el código CSS que bloquea la representación; publica solo los estilos necesarios para mostrar el viewport inicial y, luego, entrega el resto.
- Los URI de datos de gran tamaño intercalados en CSS que bloquean el procesamiento son dañinos para el rendimiento de la representación, ya que bloquean recursos en los que las URLs de imágenes no generan bloqueo.