Reportaje de SmashingConf Freiburg 2023 🥨

Al inicio del nuevo año escolar, asistí a la conferencia organizada por Smashing Magazine en Friburgo. Uno de los principales patrocinadores fue la empresa SpeedCurve, cuya herramienta utilizamos ampliamente para monitorear los sitios web de nuestros clientes en PageSpeed.ONE.

La conferencia está más bien orientada a la creación de frontend, CSS y diseño web, en lugar de la performance web, pero algunas charlas y presentaciones fueron muy útiles para mi trabajo en PageSpeed.ONE.

Calentamiento con la métrica INP

Justo el domingo después de llegar, participamos en un pequeño taller dirigido por Andy Davies. Andy es consultor de Performance en SpeedCurve y merece la pena seguirlo en X (Twitter), donde ofrece buenos consejos sobre performance web.

En el taller, Andy nos introdujo a la nueva métrica INP, que en marzo de 2024 reemplazará a la métrica FID de la colección de métricas Core Web Vitals. Después de una breve introducción, aprendimos cómo medir la métrica INP, cómo identificar los puntos débiles en un sitio web y algunos consejos para mejorar la métrica INP.

Aquí hay algunos consejos básicos:

• La métrica INP está muy relacionada con la métrica Total Blocking Time.
• Cuanto menor sea el número de elementos DOM, mejor será el Total Blocking Time.
• Si tienes configurada la medición de usuarios reales en el sitio web (RUM), puedes identificar problemas con INP a través de la herramienta SpeedCurve.
• Puedes encontrar el INP en páginas individuales del sitio web también a través de Google Search Console.

Si no puedes medir todos los usuarios en el sitio web, puedes buscar problemas con INP manualmente.

El procedimiento es algo así:

• Abre una ventana de navegador en modo incógnito. Los plugins activos podrían afectar las mediciones.
• Abre DevTools.
• Activa la grabación de Timeline en la pestaña Performance y prueba a navegar por el sitio, desplazarte y realizar otras interacciones.
• En el Timeline, verás las interacciones individuales y la información relevante.
• Nos interesan especialmente las Long Tasks que surgen después de las interacciones.
• Estas Long Tasks deben ser luego analizadas, divididas o pospuestas.

Puedes aprender a probar otras métricas de Core Web Vitals en nuestro artículo de Zuzana Šumlanská.

Primer día de la conferencia

El primer día asistimos a conferencias sobre sistemas de diseño, accesibilidad web, demostraciones de nuevas características de CSS y novedades en DevTools del navegador Chrome.

Jecelyn Yeen en su charla «Modern Web Debugging» mostró muchos consejos de DevTools. Personalmente, me llamó más la atención la pestaña Quick Source, que muestra una vista rápida de los archivos que puedes editar directamente en tu disco local utilizando la función Overrides.

Puedes activar la pestaña con el comando Cmd+Shift+P y escribiendo "Quick source".

Otro consejo que me llamó la atención es la posibilidad de grabar secuencias de comandos en el sitio web usando la función Recorder. Esto permite enviar la secuencia en formato JSON, por ejemplo, a un colega que luego puede reproducirla.

Jecelyn muestra cómo se realiza dicha grabación en su vídeo de YouTube.

Segundo día de la conferencia

El segundo día nos esperaban charlas más técnicas. Por ejemplo, Christine Vallaure en su charla «Design Beyond Breakpoints» presentó muchas novedades de la herramienta gráfica Figma. Miriam Suzanne nos mostró en su presentación todo lo que se puede hacer en CSS usando Container Queries y qué características están por venir.

Durante el almuerzo, hubo la oportunidad de inscribirse en otro mini taller con Andy Davies. Esta vez, Andy mostró en una sesión de una hora los errores más comunes que afectan los Core Web Vitals. Seleccionó tres sitios web de la audiencia y demostró directamente sus deficiencias. Estos eran problemas recurrentes que empeoran las métricas LCP y CLS.

¿De qué debes cuidar en tu sitio web?

• No uses demasiadas fuentes web externas.
• Para las fuentes web, utiliza exclusivamente el formato Woff2.
• No uses lazy loading en la imagen que es el elemento LCP y necesita descargarse lo antes posible.
• Usa hints de prioridad. Añade el parámetro fetchpriority=”high” a la imagen que deseas priorizar para aumentar su prioridad de descarga.
• Retrasa la descarga y el procesamiento de archivos JavaScript innecesarios.
• Asegúrate de que todas las imágenes tengan especificadas las dimensiones width y height.

Fue una demostración práctica de que incluso pequeños ajustes pueden mejorar rápidamente las métricas Core Web Vitals LCP y CLS.

La conferencia se celebró en la hermosa ciudad histórica de Friburgo, en el oeste de Alemania. Pasamos las noches degustando la cerveza local y la cocina alemana. Todo fue excelente y ya estoy deseando asistir a alguna otra conferencia conjunta.

Etiquetas:INPCore Web Vitals