Un resumen de las principales noticias y actualizaciones que se anunciaron durante nuestro evento comunitario en línea de 3 días, y un recordatorio sobre los próximos eventos regionales.
Acabamos de concluir nuestro evento de tres días, web.dev LIVE, donde parte de la comunidad web se reunió en línea para hablar sobre el estado del desarrollo web. Comenzamos cada día en una zona horaria regional diferente, y los Googlers compartían una ronda de actualizaciones, noticias y sugerencias con el objetivo de ayudar a los desarrolladores con herramientas y orientación para mantener la Web estable, potente y accesible.
Si te perdiste parte de la transmisión en vivo, todas las sesiones se graban y están disponibles para que las mires en YouTube. También tendremos eventos regionales próximos en todo el mundo, organizados por Grupos de Google Developers, y ofreceremos sesiones detalladas sobre temas relacionados con los temas de web.dev LIVE.
Veamos en detalle algunas de las noticias y actualizaciones que se compartieron a lo largo de los tres días.
Métricas web
El equipo de Chrome anunció la iniciativa de Métricas web para proporcionar orientación, métricas y herramientas unificadas con el fin de ayudar a los desarrolladores a ofrecer experiencias del usuario excelentes en la Web. El equipo de la Búsqueda de Google también anunció recientemente que evaluará la experiencia de página como criterio de clasificación y que incluirá las métricas de Métricas web esenciales como base.
Los tres pilares de las Métricas web esenciales de 2020 son la carga, la interactividad y la estabilidad visual del contenido de la página. Estas métricas se registran con las siguientes métricas:
- La métrica Largest Contentful Paint mide la velocidad de carga percibida y marca el punto en el cronograma de carga de la página cuando es probable que se haya cargado el contenido principal.
- El retraso de primera entrada mide la capacidad de respuesta y cuantifica la experiencia que sienten los usuarios cuando intentan interactuar con una página por primera vez.
- El Cambio de diseño acumulado mide la estabilidad visual y cuantifica la cantidad de movimientos inesperados del contenido de la página.
En web.dev LIVE, compartimos las prácticas recomendadas sobre cómo optimizar las métricas web esenciales y usar las herramientas para desarrolladores de Chrome para explorar los valores vitales de tu sitio. También compartimos muchas otras charlas relacionadas con el rendimiento que puedes encontrar en web.dev/live, en la programación del día 1.
tooling.report
Desarrollar una plataforma tan amplia como la Web puede ser un desafío. A menudo, las herramientas de compilación son el núcleo de tu proyecto de desarrollo web y desempeñan una función clave en el control del ciclo de vida del desarrollador y del producto.
Todos vimos archivos de configuración de compilación difíciles de manejar, por lo que compilamos tooling.report para ayudar a los desarrolladores web y a los autores de herramientas a conquistar la complejidad de la Web. Es un sitio web que te ayuda a elegir la herramienta de compilación adecuada para tu próximo proyecto, decidir si vale la pena migrar de una herramienta a otra o descubrir cómo incorporar prácticas recomendadas en la configuración de las herramientas y la base de código.
Diseñamos un conjunto de pruebas para determinar qué herramientas de compilación te permiten seguir las prácticas recomendadas de desarrollo web. Trabajamos con los autores de las herramientas de compilación para asegurarnos de usarlas correctamente y representarlas de manera justa.
La versión inicial de tooling.report abarca webpack v4, Rollup v2, Parcel v2 y Browserify con Gulp, que parecen ser las herramientas de compilación más populares en este momento. Desarrollamos tooling.report con la flexibilidad de agregar más herramientas de compilación y pruebas adicionales con la ayuda de la comunidad.
Si nos falta una práctica recomendada que debería probarse, proponla en un problema de GitHub. Si deseas escribir una prueba o agregar una herramienta nueva que no incluimos en el conjunto inicial, te invitamos a contribuir.
Mientras tanto, puedes leer más sobre nuestro enfoque para compilar tooling.report y mirar nuestra sesión desde web.dev EN VIVO.
Privacidad y seguridad en la Web
Chrome cree en una Web abierta que respete la privacidad de los usuarios y mantiene los casos de uso clave que hacen que la Web funcione para todos.
En 2019, Chrome propuso una actualización del estándar de cookies para restringir las cookies a contextos propios de forma predeterminada y requerir que las cookies de contextos de terceros se marquen explícitamente como tales. Específicamente, esto proporciona una línea de defensa contra los ataques de falsificación de solicitudes entre sitios. La propuesta se está adoptando ahora en Chrome, Firefox, Edge y otros navegadores.
Si bien Chrome decidió revertir de forma temporal estos cambios debido al COVID-19, lamentablemente, durante una crisis en la que las personas son más vulnerables, también se observa un aumento de este tipo de ataques. Por lo tanto, con la versión estable de Chrome 84 (mediados de julio de 2020), los cambios comenzarán a implementarse de nuevo en todas las versiones de Chrome a partir de la versión 80. Para obtener más información, consulta la guía sobre cookies de SameSite y la sesión LIVE de web.dev.
Además, debajo del banner de Privacy Sandbox, Chrome presenta una serie de propuestas estándares que tienen como objetivo admitir casos de uso que permiten a las personas ganarse la vida usando la plataforma web, pero que lo hacen de una manera que respete mejor la privacidad del usuario. Chrome busca activamente comentarios sobre estas propuestas y participa en los foros abiertos del W3C para debatir tanto las propuestas como las enviadas por otras partes. Obtén más información sobre esta iniciativa en la sesión Seguridad y privacidad para la Web abierta.
Por último, en cuanto a la seguridad del usuario, Spectre fue una vulnerabilidad que implicaba que un código malicioso que se ejecutaba en un proceso del navegador podría leer los datos asociados con ese proceso, incluso si tienen un origen diferente. Una de las mitigaciones de este proceso es el aislamiento de sitios, es decir, poner cada sitio en un proceso independiente. Para obtener más información, mira la sesión EN VIVO de web.dev sobre las nuevas Políticas de incorporaciones y abridor de origen cruzado (COOP y COEP).
Crea una Web con capacidades potentes
Chrome quiere que tengas libertad para crear aplicaciones web de la más alta calidad que te brinden el mayor alcance a los usuarios en todos los dispositivos. A través de la combinación de la capacidad de instalación y la confiabilidad de las AWP con el proyecto de capacidades (Project Fugu), Chrome se enfoca en tres aspectos para cerrar la brecha entre las apps específicas de la plataforma y la Web, con el objetivo de ayudarte a crear y ofrecer excelentes experiencias.
Primero, los equipos de Chrome trabajaron arduamente para brindar a los desarrolladores web y a los usuarios más control sobre la experiencia de instalación, para agregar una promoción de instalación al cuadro multifunción y mucho más. A pesar de la ubicuidad de la Web, es importante que algunas empresas tengan sus apps en la tienda. Para ayudar, Chrome lanzó Bubblewrap, una biblioteca y la CLI con las que es muy fácil llevar tu AWP a Play Store. De hecho, PWABuilder.com ahora usa la función Burbujas de forma interna. Con solo unos clics del mouse, puedes generar un APK y subir la AWP a Play Store, siempre que cumplas con los criterios.
En segundo lugar, Chrome brinda una mayor integración con el sistema operativo, como la capacidad de compartir una foto, una canción o lo que sea mediante la invocación del servicio de uso compartido a nivel del sistema con la API de Web Share, o la capacidad de recibir contenido cuando se comparte cuando se comparte desde otra app instalada. Puedes mantener a los usuarios actualizados o notificarlos sutilmente sobre la actividad nueva con insignias de app. Además, ahora es más fácil para los usuarios iniciar rápidamente una acción con los accesos directos a apps, que llegarán a Chrome 84 (a mediados de julio de 2020).
Por último, Chrome estuvo trabajando en nuevas funciones que permiten nuevas situaciones que antes no eran posibles, como editores que leen y escriben en archivos en el sistema de archivos local del usuario o que obtienen la lista de fuentes instaladas localmente para que los usuarios puedan usarlas en sus diseños.
Durante web.dev LIVE, hablamos sobre muchas otras capacidades y funciones que pueden permitirte ofrecer el mismo tipo de experiencia, con las mismas capacidades, que las apps específicas de una plataforma. Consulta todas las sesiones en web.dev/live en la programación del día 2.
Novedades de las Herramientas para desarrolladores de Chrome y Lighthouse 6.0
Chrome Devtools: Nueva pestaña Problemas, emulador de deficiencias de color y asistencia para Métricas web
Una de las funciones más potentes de las Herramientas para desarrolladores de Chrome es su capacidad de detectar problemas en una página web y llamar la atención del desarrollador. Esto es más pertinente a medida que avanzamos a la siguiente fase de una Web centrada en la privacidad. Para reducir la fatiga y el desorden en las notificaciones de Console, las Herramientas para desarrolladores de Chrome iniciaron la pestaña Problemas, que se enfoca en tres tipos de problemas críticos para comenzar: problemas de cookies, contenido mixto y problemas de COEP. Para comenzar, mira la sesión EN VIVO de web.dev sobre cómo encontrar y solucionar problemas con la pestaña Problemas.
Además, dado que las Métricas web esenciales se convierten en uno de los conjuntos de métricas más fundamentales para que los desarrolladores web puedan hacer un seguimiento y medirlo, Herramientas para desarrolladores quiere asegurarse de que los desarrolladores puedan hacer un seguimiento fácil de su rendimiento en función de estos umbrales. Por lo tanto, estas tres métricas ahora están en el panel Performance de las Herramientas para desarrolladores de Chrome.
Por último, como cada vez más desarrolladores se enfocan en la accesibilidad, Herramientas para desarrolladores también presentó un emulador de deficiencias en la visión de color que permite a los desarrolladores emular la visión borrosa y otros tipos de deficiencias en la visión. Puedes obtener más información sobre esta y muchas otras funciones en la sesión Novedades de Herramientas para desarrolladores.
Lighthouse 6.0: Nuevas métricas, mediciones del lab de Métricas web esenciales, una puntuación de rendimiento actualizada y auditorías nuevas
Lighthouse es una herramienta automatizada de código abierto que ayuda a los desarrolladores a mejorar el rendimiento de su sitio. En su versión más reciente, el equipo de Lighthouse se centra en proporcionar estadísticas basadas en métricas que brindan una visión equilibrada de la calidad de la experiencia del usuario en comparación con las dimensiones críticas.
Para garantizar la coherencia, Lighthouse agregó compatibilidad con las Métricas web esenciales: LCP, TBT (un proxy para FID, ya que Lighthouse es una herramienta de lab y el FID solo se puede medir en el campo) y CLS. Lighthouse también quitó tres métricas antiguas: Primera pintura significativa, Primera CPU inactiva y FID potencial máximo. Estas eliminaciones se deben a consideraciones como la variabilidad de las métricas y las métricas más nuevas que ofrecen mejores reflejos de la parte de la experiencia del usuario que Lighthouse intenta medir. Además, Lighthouse también realizó algunos ajustes en la medida en que cada métrica influye en la puntuación de rendimiento general en función de los comentarios de los usuarios.
Lighthouse también agregó una calculadora de puntuación para ayudarte a explorar tu puntuación de rendimiento mediante una comparación entre las puntuaciones de las versiones 5 y 6. Cuando ejecutas una auditoría con Lighthouse 6.0, el informe incluye un vínculo a la calculadora con tus resultados propagados.
Por último, Lighthouse agregó varias auditorías nuevas, centrándose en el análisis y la accesibilidad de JavaScript.
Si deseas obtener más información, mira la sesión Novedades sobre herramientas de velocidad.
Más información
Gracias a todos los miembros de la comunidad que se unieron a nosotros para hablar sobre las oportunidades y los desafíos de la plataforma web.
En esta publicación, se resumieron algunos de los momentos más destacados del evento, pero hubo mucho más. Asegúrate de consultar todas las sesiones y suscríbete al boletín informativo web.dev si quieres obtener más contenido directamente en tu bandeja de entrada. Además, visita la sección Eventos regionales en web.dev/live para encontrar un próximo evento de la comunidad en tu zona horaria.