#perfmatters: Técnicas de herramientas para los ninjas del rendimiento
Conocer cómo utilizar tus herramientas de desarrollo es clave para convertirte en un experto en rendimiento. Colt recorrió los tres pilares del rendimiento: la red, el procesamiento y la renderización, y realizó 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 ciclo de iteración del trabajo de rendimiento es recopilar datos, obtener estadísticas, tomar medidas.
- Prioriza los recursos que se encuentran en la ruta de acceso de representación crítica para tus páginas.
- Evita pintar. 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
En general, la red y la latencia representan el 70% del tiempo de carga total de la página de un sitio. Esto es un gran porcentaje, pero también significa que las mejoras que realices cosecharán enormes beneficios para tus usuarios. En esta charla, Ilya repasó 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 tiene un programador de recursos nuevo y mejorado.
- Chrome M28 hizo que los sitios SPDY sean aún más rápidos.
- Se revisó la caché simple de Chrome.
- SPDY / HTTP/2.0 ofrece grandes mejoras en la velocidad de transferencia. Existen módulos SPDY consolidados disponibles para nginx, Apache y Jetty (nombrar solo tres).
- QUIC es un protocolo nuevo y experimental basado en UDP. está en sus primeras etapas, pero, como sea, los usuarios ganarán.
#perfmatters: diseño y renderización en 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 disminución de fotogramas y cómo evitarlas.
- Un fotograma tiene 16 ms de longitud. Contiene JavaScript, cálculos de estilo, pintura y composición.
- Pintar es extremadamente costoso. En una tormenta de pintura, se repite innecesariamente el costoso trabajo de pintura.
- Las capas se usan para almacenar en caché los elementos pintados.
- Los controladores de entrada (objetos de escucha táctiles y de la rueda del mouse) pueden eliminar la capacidad de respuesta. evitarlos siempre que puedas. en las que no se pueden reducir al mínimo.
#perfmatters: Apps web instantáneas para dispositivos móviles
La Ruta crítica de representación hace referencia a todo (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 una obligación, especialmente para los usuarios de dispositivos con restricciones de red, como smartphones en redes móviles. Bryan explicó cómo el equipo de Google realizó el proceso de identificación y priorización de los recursos para el sitio web de PageSpeed Insights, que llevó de un tiempo de carga de 20 segundos a un 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 el procesamiento. publicar solo los estilos necesarios para mostrar el viewport inicial y, luego, publicar el resto.
- Los URI de datos grandes intercalados en CSS que bloquean la renderización son perjudiciales para el rendimiento de la renderización. sino recursos en los que las URLs de imágenes no generan bloqueos.