Un resumen de las principales noticias y actualizaciones que se anunciaron durante nuestro evento de 3 días para la comunidad en línea, y un recordatorio sobre los próximos eventos regionales.
Acabamos de finalizar nuestro evento de tres días, web.dev LIVE, en el que 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 compartieron 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 tenemos próximos eventos regionales en todo el mundo que están organizados por los Grupos de Google Developers y que proporcionarán sesiones de estudio a fondo sobre temas relacionados con lo que cubrimos durante web.dev LIVE.
Analicemos algunas de las novedades y actualizaciones que se compartieron durante los tres días.
Web Vitals
El equipo de Chrome anunció la iniciativa de Web Vitals para proporcionar orientación, métricas y herramientas unificadas que ayuden a los desarrolladores a ofrecer excelentes experiencias del usuario en la Web. El equipo de la Búsqueda de Google también anunció recientemente que evaluará la experiencia de página como un criterio de clasificación y que incluirá las métricas de las Métricas web esenciales como base.
Los tres pilares de las Core Web Vitals de 2020 son la carga, la interactividad y la estabilidad visual del contenido de la página, que se capturan con las siguientes métricas:
- Largest Contentful Paint mide la velocidad de carga percibida y marca el punto en el cronograma de carga de la página en el que es probable que se haya cargado el contenido principal de la página.
- El First Input Delay mide la capacidad de respuesta y cuantifica la experiencia que sienten los usuarios cuando intentan interactuar por primera vez con una página.
- El Cambio de diseño acumulado mide la estabilidad visual y cuantifica la cantidad de movimiento inesperado del contenido de la página.
En web.dev LIVE, compartimos prácticas recomendadas para optimizar las Métricas web esenciales y usar las Herramientas para desarrolladores de Chrome para explorar los valores de las métricas de tu sitio. También compartimos muchas otras charlas relacionadas con el rendimiento que puedes encontrar en web.dev/live en el programa del día 1.
tooling.report
Desarrollar para una plataforma tan amplia como la Web puede ser un desafío. Las herramientas de compilación suelen ser el núcleo de tu proyecto de desarrollo web, ya que desempeñan un papel clave en la administración del ciclo de vida de tu producto y de tu desarrollo.
Todos hemos visto archivos de configuración de compilación difíciles de manejar, por lo que, para ayudar a los desarrolladores web y a los autores de herramientas a superar la complejidad de la Web, creamos tooling.report. 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 las prácticas recomendadas en la configuración de tus herramientas y tu base de código.
Diseñamos un conjunto de pruebas para determinar qué herramientas de compilación te permiten seguir las prácticas recomendadas para el desarrollo web. Trabajamos con los autores de las herramientas de compilación para asegurarnos de que las usamos correctamente y las representamos 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. Creamos tooling.report con la flexibilidad de agregar más herramientas de compilación y pruebas adicionales con la ayuda de la comunidad.
Si falta una práctica recomendada que se deba probar, proponla en un problema de GitHub. Si quieres 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 crear tooling.report y mirar nuestra sesión de web.dev LIVE.
Privacidad y seguridad en la Web
Chrome cree en una Web abierta que respete la privacidad de los usuarios y mantenga los casos de uso clave que permiten que la Web funcione para todos.
En 2019, Chrome propuso una actualización del estándar de cookies para restringirlas a contextos propios de forma predeterminada y exigir que las cookies para contextos de terceros se marquen explícitamente como tales. En particular, esto proporciona una línea de defensa contra los ataques de falsificación de solicitudes entre sitios. Chrome, Firefox, Edge y otros navegadores están adoptando la propuesta.
Si bien Chrome decidió revertir temporalmente 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 el lanzamiento de la versión estable de Chrome 84 (mediados de julio de 2020), los cambios comenzarán a implementarse nuevamente en todas las versiones de Chrome a partir de la 80. Consulta la guía de cookies de SameSite y la sesión de web.dev LIVE para obtener más información.
Además, bajo el estandarte de Privacy Sandbox, Chrome presenta una serie de propuestas de estándares que tienen como objetivo respaldar los casos de uso que permiten a las personas ganarse la vida usando la plataforma web, pero 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 las propuestas, así como las que envían 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 era una vulnerabilidad que implicaba que el código malicioso que se ejecutaba en un proceso del navegador podía leer cualquier dato asociado con ese proceso, incluso si provenía de un origen diferente. Una de las mitigaciones del navegador para esto es el aislamiento de sitios, es decir, colocar cada sitio en un proceso independiente. Mira la sesión de web.dev LIVE sobre las nuevas políticas de incorporación y apertura de origen cruzado (COOP y COEP) para obtener más información.
Crea una Web con capacidades potentes
Chrome quiere que tengas la libertad de crear apps web de la más alta calidad que te brinden el mayor alcance a los usuarios en todos los dispositivos. Combinando la capacidad de instalación y la confiabilidad de las AWP con el proyecto de capacidades (proyecto Fugu), Chrome se enfoca en tres aspectos para cerrar la brecha entre las apps específicas de la plataforma y la Web, y ayudarte a crear y ofrecer experiencias excelentes.
En primer lugar, los equipos de Chrome han estado trabajando arduamente para brindarles a los desarrolladores web y a los usuarios más control sobre la experiencia de instalación, agregar una promoción de instalación al cuadro multifunción y más. A pesar de la ubicuidad de la Web, para algunas empresas sigue siendo importante tener su app en Play Store. Para ayudar, Chrome lanzó Bubblewrap, una biblioteca y una CLI que facilitan la incorporación de tu AWP a Play Store. De hecho, PWABuilder.com ahora usa Bubblewrap de forma interna. Con solo unos clics, puedes generar un APK y subir tu PWA a Play Store, siempre que cumplas con los criterios.
En segundo lugar, Chrome proporciona una integración más estrecha con el sistema operativo, como la capacidad de compartir una foto, una canción o lo que sea invocando el servicio de uso compartido a nivel del sistema con la API de Web Share, o la capacidad de recibir contenido cuando se comparte desde una app instalada diferente. Puedes mantener a los usuarios actualizados o notificarles sutilmente sobre nuevas actividades con insignias de apps. Además, ahora es más fácil para los usuarios iniciar rápidamente una acción con los accesos directos de la app, que llegarán a Chrome 84 (mediados de julio de 2020).
Por último, Chrome ha estado trabajando en nuevas funciones que permiten nuevos casos de uso que antes no eran posibles, como editores que leen y escriben en archivos del sistema de archivos local del usuario o que obtienen la lista de fuentes instaladas de forma local para que los usuarios puedan usarlas en sus diseños.
Durante web.dev LIVE, hablamos sobre muchas otras funciones y capacidades que pueden permitirte ofrecer el mismo tipo de experiencia, con las mismas capacidades, que las apps específicas de la plataforma. Consulta todas las sesiones en web.dev/live en el programa del día 2.
Novedades de las Herramientas para desarrolladores de Chrome y Lighthouse 6.0
Herramientas para desarrolladores de Chrome: Nueva pestaña Problemas, emulador de deficiencias de color y compatibilidad con Web Vitals
Una de las funciones más potentes de las Herramientas para desarrolladores de Chrome es su capacidad para detectar problemas en una página web y llamarlos a la atención del desarrollador. Esto es muy pertinente a medida que avanzamos hacia la siguiente fase de una Web que prioriza la privacidad. Para reducir la fatiga por notificaciones y el desorden en la consola, las Herramientas para desarrolladores de Chrome lanzaron la pestaña Problemas, que se enfoca en tres tipos de problemas críticos para empezar: problemas con las cookies, contenido mixto y problemas con la COEP. Mira la sesión de web.dev LIVE sobre cómo encontrar y corregir problemas con la pestaña Problemas para comenzar.
Además, dado que las Core Web Vitals se están convirtiendo en uno de los conjuntos de métricas más importantes para que los desarrolladores web realicen un seguimiento y midan, las Herramientas para desarrolladores quieren asegurarse de que los desarrolladores puedan realizar un seguimiento de su rendimiento en relación con estos umbrales con facilidad. Por lo tanto, estas tres métricas ahora se encuentran en el panel Rendimiento de las Herramientas para desarrolladores de Chrome.
Por último, con un número cada vez mayor de desarrolladores que se enfocan en la accesibilidad, las Herramientas para desarrolladores también introdujeron un emulador de deficiencias en la percepción del color que les permite a los desarrolladores emular la visión borrosa y otros tipos de deficiencias visuales. Puedes obtener más información sobre esta y muchas otras funciones en la sesión Novedades de DevTools.
Lighthouse 6.0: Nuevas métricas, mediciones de laboratorio de Core Web Vitals, una puntuación de rendimiento actualizada y nuevas auditorías
Lighthouse es una herramienta automatizada de código abierto que ayuda a los desarrolladores a mejorar el rendimiento de sus sitios. En su versión más reciente, el equipo de Lighthouse se enfocó en proporcionar estadísticas basadas en métricas que te brindan una vista equilibrada de la calidad de la experiencia del usuario en comparación con las dimensiones fundamentales.
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: Primer renderizado con contenido, Primer tiempo de inactividad de la CPU y FID potencial máximo. Estas eliminaciones se deben a consideraciones como la variabilidad de las métricas y las métricas más recientes 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 general de rendimiento según los comentarios de los usuarios.
Lighthouse también agregó una calculadora de puntuación para ayudarte a explorar tu puntuación de rendimiento, ya que proporciona 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 completados.
Por último, Lighthouse agregó un montón de auditorías nuevas, con un enfoque en el análisis de JavaScript y la accesibilidad.
Para obtener más información, mira la sesión Novedades de las herramientas de velocidad.
Más información
Agradecemos a todos los miembros de la comunidad que se unieron a nosotros para analizar las oportunidades y los desafíos de la plataforma web.
En esta publicación, se resumen algunos de los aspectos más destacados del evento, pero hubo mucho más. Asegúrate de consultar todas las sesiones y suscribirte al boletín informativo de web.dev si quieres recibir más contenido directamente en tu bandeja de entrada. Y visita la sección Eventos regionales en web.dev/live para encontrar un próximo evento de la comunidad en tu zona horaria.