Web Performance Testing Workshop

Optimització de Performance i Temps de càrrega | SEOday Girona

Els temps de la càrrega inicial d'un lloc web són de vital importància per aconseguir un bon rati de conversió. En una època en la qual creiem que les visites tindran una bona connexió i un bon dispositiu, juntament amb els patrons de desenvolupament on es delega al client l'execució de la major part de la lògica de negoci, hem de posar especial atenció a l'optimització de la càrrega de recursos.

Instant navigation with Speculation Rules API

Discover how the Speculation Rules API can help us improve the UX of our website's navigation flows. We'll learn how the API works, and how to use it to "pre-render" pages (in Chromium browsers) to achieve instant navigation.

Web Performance Testing - DevBcn 2024

That Web Performance is an issue that impacts user experience, SEO positioning and, therefore, visits, and business metrics, is a reality. Knowing the most relevant Web Performance metrics and being able to test them in every pass we make to production will save us a lot of trouble. In this talk we will tell you how to configure and implement an automated system to test Web Performance with Lighthouse CI, and thus avoid degrading the UX of our product.

JavaScript Loading Priorities and Adaptive Loading | Codemotion 2024

First, we will talk about adaptive loading, an essential technique in today's online world. Adaptive loading allows your website to adapt to different devices and internet capabilities, ensuring that users don't have to deal with extremely long loading times or performance issues. We will discuss techniques such as image optimization, progressive loading, and methods for evaluating site loading speed on different devices. Next, we will move on to resource loading prioritization, a technique that can truly make a difference in site performance. We will explore how the browser loads resources of a website and how HTML tags can be used to specify the loading priority of each resource. We will also share practical techniques such as loading custom fonts and deferred JavaScript to implement prioritized resource loading. By the end of the talk, you will have the knowledge to apply these techniques to your own projects and take user experience and site performance to the next level. So get ready to enhance your web development skills and create even more impressive websites!

Copy of about

About Joan León

JavaScript Loading Priorities and Adaptive Loading | Commit Conf 2024

First, we will talk about adaptive loading, an essential technique in today's online world. Adaptive loading allows your website to adapt to different devices and internet capabilities, ensuring that users don't have to deal with extremely long loading times or performance issues. We will discuss techniques such as image optimization, progressive loading, and methods for evaluating site loading speed on different devices. Next, we will move on to resource loading prioritization, a technique that can truly make a difference in site performance. We will explore how the browser loads resources of a website and how HTML tags can be used to specify the loading priority of each resource. We will also share practical techniques such as loading custom fonts and deferred JavaScript to implement prioritized resource loading. By the end of the talk, you will have the knowledge to apply these techniques to your own projects and take user experience and site performance to the next level. So get ready to enhance your web development skills and create even more impressive websites!

La importancia de implementar una Product Performance Culture en tu producto

En la industria, hablamos de Web Performance para referirnos al rendimiento de una web, donde nos centramos en optimizar el código y carga de recursos, ayudándonos en las métricas Core Web Vitals definidas por Google. Conseguir un buen rendimiento en nuestro producto va más allá de optimizar los recursos y código de ejecución: - Herramientas de monitorización - Métricas y observabilidad - El rendimiento es cosa de todos los equipos: producto, desarrollo, marketing - Optimización centrada en nuestras visitas En esta charla os quiero explicar estos puntos con el objetivo de despertar vuestro interés por implementar una Product Performance Culture en vuestro producto.

Detectando problemas de Web Performance con Chrome DevTools - Workshop Fest 2023

Las Chrome DevTools son una serie de herramientas integradas en el navegador para ayudarnos en nuestro desarrollo. Hay muchas utilidades en ellas, y varias para analizar el rendimiento de nuestra web o aplicación. Google sigue mejorando y añadiendo herramientas para facilitarnos el trabajo a la hora de detectar puntos de mejora en el rendimiento. En esta charla te mostraré las diferentes herramientas que tenemos para detectar mejoras en Web Performance, y cómo usarlas para sacarles el máximo rendimiento, así como algunos snippets para ser unas/os auténticas/os magas/os detectando puntos de mejora.

Optimizing Images in Next.js with Cloudinary

We will dive into image optimization in Next.js projects through Cloudinary's powerful tool. You will discover how to improve the efficiency and performance of your website by optimizing, resizing and customizing your visual assets. Through practical examples, we will unveil the key techniques to turn image optimization into a competitive advantage, providing valuable insight on how to effectively integrate Cloudinary into your Next.js project.

Detectant problemes de web performance amb DevTools - DevFest 2023

Les Chrome DevTools són una sèrie d'eines integrades en el navegador per a ajudar-nos en el nostre desenvolupament. Hi ha moltes utilitats en elles, i diverses per a analitzar el rendiment de la nostra web o aplicació. Google continua millorant i afegint eines per a facilitar-nos el treball a l'hora de detectar punts de millora en el rendiment. En aquesta xerrada et mostraré les diferents eines que tenim per a detectar millores en Web Performance, i com usar-les per a treure'ls el màxim rendiment, així com alguns snippets per a ser unes/us autèntiques/us magues/us detectant punts de millora.

Web Workers

Service Workers

CSS Houdini Training 2023

CSS, el estándar marginado

Como si de un lenguaje de programación se tratara, CSS sigue evolucionando para facilitarnos el desarrollo web. Conoce todo lo nuevo por venir y cómo utilizarlo hoy.

Optimización de imágenes para la web

Como profesionales del desarrollo web, invertimos tiempo y esfuerzo en seleccionar los mejores frameworks, aplicar buenas prácticas en Javascript y CSS, y optimizar el SEO de nuestro contenido. Sin embargo, a menudo pasamos por alto un aspecto crucial: ¡las imágenes! Según el Web Almanac 2022, aproximadamente el 85% de las imágenes en la web se encuentran en formatos como JPEG, PNG y GIF, y sorprendentemente, el 10% de las páginas contienen al menos una imagen que pesa cerca de 1 MB o más. Cargamos imágenes innecesarias, utilizamos formatos inadecuados y no las adaptamos al tamaño de pantalla del usuario. Esto resulta en una experiencia deficiente para nuestros visitantes. Pero no te preocupes, ¡tenemos la solución! Descubre cómo utilizar herramientas de análisis, optimización y validación que te permitirán reducir el peso de tus imágenes y mejorar significativamente la velocidad de carga de tu página. ¡Eleva la experiencia de tus usuarios a un nuevo nivel! Ya seas desarrollador, editor de contenido, especialista en marketing o producto, esta información es fundamental para garantizar que tus proyectos web destaquen en todos los aspectos. Atrévete a optimizar tus imágenes y marca la diferencia en la percepción de velocidad de tus usuarios.

Detectando problemas de Web Performance con Chrome DevTools - Open South Code 2023

Las Chrome DevTools son una serie de herramientas integradas en el navegador para ayudarnos en nuestro desarrollo. Hay muchas utilidades en ellas, y varias para analizar el rendimiento de nuestra web o aplicación. Google sigue mejorando y añadiendo herramientas para facilitarnos el trabajo a la hora de detectar puntos de mejora en el rendimiento. En esta charla te mostraré las diferentes herramientas que tenemos para detectar mejoras en Web Performance, y cómo usarlas para sacarles el máximo rendimiento, así como algunos snippets para ser unas/os auténticas/os magas/os detectando puntos de mejora.

JavaScript Loading Priorities and Adaptive Loading

First, we will talk about adaptive loading, an essential technique in today's online world. Adaptive loading allows your website to adapt to different devices and internet capabilities, ensuring that users don't have to deal with extremely long loading times or performance issues. We will discuss techniques such as image optimization, progressive loading, and methods for evaluating site loading speed on different devices. Next, we will move on to resource loading prioritization, a technique that can truly make a difference in site performance. We will explore how the browser loads resources of a website and how HTML tags can be used to specify the loading priority of each resource. We will also share practical techniques such as loading custom fonts and deferred JavaScript to implement prioritized resource loading. By the end of the talk, you will have the knowledge to apply these techniques to your own projects and take user experience and site performance to the next level. So get ready to enhance your web development skills and create even more impressive websites!

about

About Joan León

Core Web Vitals

Discover how to improve user experience and search engine ranking by understanding Core Web Vitals. Learn how to measure and improve them, as well as other important metrics. Presented by @nucliweb.

Mejora la UX de tu web optimizando las imágenes

Uno de los recursos de más peso en nuestras webs son las imágenes, optimizarlas mejorará la User eXperience, así como adaptarlas el tamaño correcto según el dispositivo, y servirlas formatos de nueva generación según el soporte. En esta charla veremos: - Formatos de nueva generación - Compresores y aplicaciones de optimización - Responsive images - Optimización automática - Validación del nivel de compresión - Optimización de la carga para mejorar la Web Performance Después de la charla, serás capaz de mejorar las imágenes de tu web para conseguir una mejor experiencia.

Detectando problemas de Web Performance con Chrome DevTools - Commit Conf 2023

Las Chrome DevTools son una serie de herramientas integradas en el navegador para ayudarnos en nuestro desarrollo. Hay muchas utilidades en ellas, y varias para analizar el rendimiento de nuestra web o aplicación. Google sigue mejorando y añadiendo herramientas para facilitarnos el trabajo a la hora de detectar puntos de mejora en el rendimiento. En esta charla te mostraré las diferentes herramientas que tenemos para detectar mejoras en Web Performance, y cómo usarlas para sacarles el máximo rendimiento, así como algunos snippets para ser unas/os auténticas/os magas/os detectando puntos de mejora.

nucliweb

Frontend Engineer at @AdevintaSpain | @perfreviews_ Co-Founder | Web Performance @GoogleDevExpert | #MDE @cloudinary | ⚡️ Web Performance Consultant

Programació amb Processing

Processing Community Day és un esdeveniment que se celebra a diferents ciutats per tot el món, entre els dies 15 de gener i 15 de febrer de 2019. https://pcd2019-girona.glitch.me/

Web Performance Testing

Que la Web Performance es un tema que impacta a la experiencia de usuarias/os, al posicionamiento SEO y, por tanto, a las visitas, y a las métricas de negocio, es una realidad. Conocer las métricas de Web Performance más relevantes y poder testearlas en cada pase que hacemos a producción nos ahorrarán muchos problemas. En esta charla te contaremos cómo configurar e implementar un sistema automatizado para testear la Web Performance con Lighthouse CI, y conseguir así no degradar la UX de nuestro producto.

Split CSS in Media Queries

Errores de performance en el desarrollo web

Errores de performance en el desarrollo web

El JavaScript que esperan encontrar las visitas a nuestra web

Si he conseguido llamar tu atención con el "clickbait", esta charla es para ti. Lo primero que quiero que sepas es que tus visitas no esperan encontrar JavaScript. Esperan encontrar información, documentación, experiencias... la gran mayoría de las personas que hay detrás de esas visitas no saben qué es JavaScript, así que no están esperando encontrarse con el último framework, las últimas funcionalidades que han salido del TC39, o esa arquitectura crafter que has aprendido en tu último artículo leído. Lo que esperan encontrar es una buena experiencia, no tener problemas, y esperan poder consultar el contenido en la mayor brevedad posible. Y de esto va esta charla, de poner atención en la Web Performance para mejorar la UX en tiempos de carga, en tiempos de interacción y fluidez en la navegación.

🔒 Optimización de Imágenes y Vídeo para la Web

Programando en CSS Houdini como un mago

CSS has always been considered the least controllable, complicated, magical and sometimes somewhat random part. Houdini offers us a set of APIs and Javascript tools that give us the possibility to extend CSS to access the design process and style of the browser rendering engine.

PostCSS, the Babel for CSS

With the PostCSS Preset Env project (based on cssdb) we can say that it is the Babel for CSS, with different states of the features as we have in EcmaScript. Finally we can focus on knowing and developing with the specifications that are being defined as CSS standards for the web.

CSS Houdini { Medellín CSS }

Medellín CSS | Nov 2020: CSS has always been considered the least controllable, complicated, magical and sometimes somewhat random part. Houdini offers us a set of APIs and Javascript tools that give us the possibility to extend CSS to access the design process and style of the browser rendering engine.

La web performance sigue estando de moda

Image Optimization Tools for Designer

Houdini: programming in CSS { Stay At Home Conf }

Stay At Home Conf March '20: CSS has always been considered the least controllable, complicated, magical and sometimes somewhat random part. Houdini offers us a set of APIs and Javascript tools that give us the possibility to extend CSS to access the design process and style of the browser rendering engine.

Unos estáticos muy dinámicos

En muchos proyectos, tenemos una series de recursos que no son dinámicos: imágenes, vídeos, iconos, tipografías o textos i18n. Las imágenes suelen ser las menos cuidadas, desde el punto de vista de la performance. Y lo sé de primera mano, así que os quiero contar cómo pasamos de una carpeta images desplegada en un S3, a un repositorio con unas guidelines de la estructura, naming, automatización de compresión de imágenes y generación de “Responsive Images”, test de regresión visual e incluso un garbage images collector, para hacer limpieza de esas imágenes que quedan en el olvido.

CSS Performance

La Web Performance está ganando popularidad, tanto en los departamentos técnicos como en los de producto y negocio. Mantener una web, o aplicación, rápida y ágil mejora la experiencia de usuario y aumenta los ratios de conversión. Solemos ver mucho foco en la optimización de las peticiones de recursos, la caché, protocolo HTTP/2, en las imágenes con lazy loading y responsive image, en modularizar y “bandelizar” el Javascript. Todo eso está muy bien, pero ¿qué pasa con el CSS? En CSS tenemos margen de mejora para optimizar la performance de la web, no sólo en la carga inicial optimizando el CSS necesario en cada página, sino también en la navegación, interacciones y animaciones mientras los usuarios están en nuestra web o aplicación. En esta charla conoceremos herramientas para detectar dónde podemos mejorar nuestro CSS, algunos trucos avanzados y ejemplos de una optimización CSS para conseguir la máxima fluidez para mejorar la experiencia de usuario.

Web Performance con Domini Code

Varios estudios demuestran que la velocidad de carga de una página o aplicación afecta mucho en la conversión. Vivimos en un entorno muy dinámico, cualquier distracción, como una notificación de Whatsapp o Twitter, nos hace perder el foco con gran facilidad. Como desarrollador@s debemos dar la importancia que merece a la web performance. La performance va más allá de mejorar el tiempo de carga, las animaciones y las interacciones del usuario también están llenos de puntos de mejora.

Optimización de imágenes JAM Stack

Las imágenes son un recurso que está presente en cualquier proyecto web. Hay muchos formatos de imágenes, muchos compresores y cientos de posibles configuraciones. En esta charla veremos una series de buenas prácticas en optimización de imágenes y daremos un repaso a las posibilidades que tenemos para mejorar la experiencia de usuario optimizando nuestras imágenes en un JAMStack.

Unos estáticos muy dinámicos

En muchos proyectos, tenemos una series de recursos que no son dinámicos: imágenes, vídeos, iconos, tipografías o textos i18n. Las imágenes suelen ser las menos cuidadas, desde el punto de vista de la performance. Y lo sé de primera mano, así que os quiero contar cómo pasamos de una carpeta images desplegada en un S3, a un repositorio con unas guidelines de la estructura, naming, automatización de compresión de imágenes y generación de “Responsive Images”, test de regresión visual e incluso un garbage images collector, para hacer limpieza de esas imágenes que quedan en el olvido.

Web Performance

Varios estudios demuestran que la velocidad de carga de una página o aplicación afecta mucho en la conversión. Vivimos en un entorno muy dinámico, cualquier distracción, como una notificación de Whatsapp o Twitter, nos hace perder el foco con gran facilidad. Como desarrollador@s debemos dar la importancia que merece a la web performance. La performance va más allá de mejorar el tiempo de carga, las animaciones y las interacciones del usuario también están llenos de puntos de mejora.

PostCSS, the Babel for CSS

With the PostCSS Preset Env project (based on cssdb) we can say that it is the Babel for CSS, with different states of the features as we have in EcmaScript. Finally we can focus on knowing and developing with the specifications that are being defined as CSS standards for the web.

Optimización de Imágenes y Vídeo para la Web

Como profesionales del desarrollo web, nos preocupamos de escoger el mejor framework, aplicar buenas prácticas en Javascript y CSS, ser cuidadosos de la semántica en el HTML para mejorar el SEO, de la accesibilidad de nuestro contenido, empaquetar los archivos para optimizar la carga, pero ¿qué pasa con la imágenes? Las imágenes representa hasta el 60% del contenido de los sites, desde julio de 2017 en un site promedio de 3.0Mb, 1.7Mb son imágenes. Cargamos imágenes innecesarias, con formatos inadecuados y sin estar adaptadas al tamaño de pantalla del usuario. Todo esto se convierte en una peor experiencia para el usuario. Pero hay solución! Veremos cómo usar herramientas para el análisis, la optimización y la validación que harán nuestras imágenes y vídeos más ligeros, mejorando así la carga de la página y la percepción de velocidad.

Houdini: programming in CSS { May '19 }

Barcelona May '19: CSS has always been considered the least controllable, complicated, magical and sometimes somewhat random part. Houdini offers us a set of APIs and Javascript tools that give us the possibility to extend CSS to access the design process and style of the browser rendering engine.

Creative Coding T3chFest 2019

La programación es maravillosa, nos ofrece todo un mundo de posibilidades para crear webs, aplicaciones, herramientas, videojuegos, incluso dotar de IA a asistentes que llevamos en nuestros bolsillos. También podemos crear arte con nuestras líneas de código... no todo va a ser SOLID, DDD, TDD, BDD. Eso no quiere decir que no debamos usar buenas prácticas de programación, pero en este caso el objetivo es crear algo expresivo, más que algo funcional. Podemos utilizar multitud de lenguajes en el Creative Coding, desde Java, Python, C++, C#, Kotlin, Rust, como no Javascript y CSS (sí, sí, eso para poner colores a los botones en una web). Los lenguajes más clásicos, nos obrecen mejor performance y mejores interfaces para trabajar con diferentes dispositivos de entrada. Por otro lado, con librerías como P5.js de la Processing Foundation nos facilita utilizar este recurso en entornos web. La filosofía del Creative Coding es la de ofrecer lenguajes de programación a la gente creativa, pero también es una buena puerta de entrada para iniciarse en el desarrollo, ya que tiene un enfoque mucho más visual. El objetivo de la charla es dar a conocer el apasionante mundo del Creative Coding, conocer casos de uso e interactuar en vivo, con vuestros móviles, para generar arte dinámico entre tod@s.

Curso de Optimización de Imágenes para la Web

Aprende a optimizar las imágenes de una web o aplicación y mejora rápidamente los resultados del proyecto. https://escuela.it/cursos/curso-optimizacion-imagenes-web

Processing Community Day 2019 Girona

Processing Community Day és un esdeveniment que se celebra a diferents ciutats per tot el món, entre els dies 15 de gener i 15 de febrer de 2019. https://pcd2019-girona.glitch.me/

PostCSS Preset Env, the Babel for CSS

With the PostCSS Preset Env project (based on cssdb) we can say that it is the Babel for CSS, with different states of the features as we have in EcmaScript. Finally we can focus on knowing and developing with the specifications that are being defined as CSS standards for the web.

Houdini: programming in CSS

Codemotion Madrid 2018: CSS siempre se ha considerado la parte menos controlable, complicada, mágica y en ocasiones algo aleatoria. Houdini nos ofrece un conjunto de APIs y herramientas Javascript que nos dan la posibilidad de extender CSS para acceder al proceso de diseño y estilo del motor de renderizado del navegador.

Image Optimization + Machine Learning v2

Como profesionales del desarrollo web, nos procupamos de las buenas prácticas en Javascript y CSS, de la semántica en HTML, de la accesibilidad de nuestro contenido, pero ¿qué pasa con la imágenes? Las imágenes representan hasta el 60% del contenido de los sites, desde julio de 2017 en un site promedio de 3.0Mb, 1.7Mb son imágenes. Ahora que sabemos que deberíamos dedicar tiempo a optimizar las imágenes, veamos los diferentes niveles de optimización, cómo automatizarlos y cómo con la ayuda del Machine Learning conseguir reducir un 15-17% el peso de algunas imágenes. En esta charla veremos herramientas para el análisis de las imágenes, la optimización, la validación (aka Tests) y cómo reducir el peso de alguna imágenes con la ayuda del reconocimiento de objetos con Machine Learning. Un frontend hablando de Machine Learning, ¿qué puede salir mal? 🤗