Finding web performance issues you didn't know you had

A quick look at some of the main web performance culprits. Fixing the easy ones and progressing to tackle the difficult to spot ones.

deck

Mejorando el rendimiento de web apps basadas en componentes

Las herramientas modernas son divertidas y útiles para crear sitios webs con una gran performance.

Better performance for component-based web apps

Modern tools are fun to use and they are useful to create websites with great performance.

Better performance for component-based web apps

Modern tools are fun to use and they are useful to create websites with great performance.

Progressive Image Rendering

This talk addresses the culprit in page size, images. I feel that we like discussing JS and CSS and its payload, but we tend to forget about images, which represent more than half of the bytes of a page. I show ways to save bytes when using images, and creative techniques to render previews of the images in their placeholders.

Cargando imágenes en la web de una forma óptima

Esta charla trata sobre la carga de imágenes en la web. Nos gusta hablar de JS y CSS y cómo optimizarlos, pero tendemos a olvidarnos de las imágenes, que representan más del 50% de los bytes de una página. La petición más eficaz es la que nunca se realiza, y esto supera cualquier optimización de imagen posible. Existen algunos escenarios comunes en los que podemos evitar el uso de imágenes, adoptando un diseño minimalista / flat u ocultando ciertas imágenes en pantallas más pequeñas. Por supuesto, tendremos que usar algunas imágenes en su debido momento. Para estos casos explico cómo el elemento puede ayudar y algunas de sus limitaciones que he encontrado al trabajar con sitios web reales. Uno de ellos es la carga lazy de imágenes, lo que puede aportar grandes ahorros en términos de tráfico de datos, pero también es fácil de implementar erróneamente. Por último, muestro algunas técnicas para "llenar" el espacio de una imagen mientras se carga, pasando de mostrar un área vacía a hacer una carga progresiva desde una imagen borrosa.

Progressive Image Rendering

This talk addresses the culprit in page size, images. I feel that we like discussing JS and CSS and its payload, but we tend to forget about images, which represent 2/3 of the bytes of a page. The most performant request is the one that is never done, and this beats any possible image optimization. There are some common scenarios in which we can avoid using images, being adopting a minimalism/flat design or hiding certain images on smaller screens. Of course, we will need to use some images eventually. For these cases I explain how the picture element might help and some of its limitations I have found when working with real websites. One of them is lazy loading of images, which can bring great savings in terms of data traffic, but it is also easy to implement wrongly. Lastly I show some techniques to "fill" the space for an image while it is loaded, going from just showing an empty area to doing a progressive loading from a blurry image.