As I expected, this year I have dedicated more time to my family and less to side projects. I have been on parental leave for 7 months and it has been a great time to put things in perspective.
Engineer at Spotify and GDE in Web Techologies.
Implementing a PWA or adapting an existing site to “become a PWA” can be daunting. There are many new technologies to learn about, but you don’t need to use all of them to improve your website performance and user experience greatly.
On this post I will describe several use cases where Progressive Web Apps (PWA) can be useful to make your website achieve better performance and be more reliable.
Optimizing SVGs is great for performance, but can we go beyond? In this post I will show some common issues with inlined and responsive SVGs applied to a real website.
Scalable Vector Graphics (SVG) are ideal to show logos and drawings on the web due to their small size. SVGs also have other useful applications, such as placeholders for lazy loaded images and animations. In a past post I also explained how to optimize a SVG with several tools that remove unneeded code and simplify shapes.
Even if we optimize our SVG assets, we can still make mistakes delivering those to the browser. In this post I am going to explain some issues I found on Spotify’s website, where the same SVG is inlined several times and where a responsive SVG logo could save additional network requests.
Web Performance is not only about understanding what makes a site fast. It’s about creating awareness amongst both developers and non-developers. Performance is a feature and needs to be prioritized as such.
Componentization has marked a before and after in web development. The main advantages that are usually mentioned is reusability and modularization. Well defined pieces that we can use to build our sites, like bricks of Legos. It turns out this component structure provides a great foundation to improve the performance of our sites.
I see many sites that could take advantage of this, and I wanted to show how some basic techniques to load content as needed.
I was browsing Tim Kadlec’s website and I noticed he had added page load time metrics in the footer.
Tim Kadlec’s site shows how long the page took to load in the footer.
Stoyan Stefanov also realized and wrote “This page loaded in X seconds”, a blog post describing the code used for this. Stoyan also created a bookmark that shows an alert with the load time of the current page. The data is obtained from
I liked the idea and added a similar snippet that shows the page load time in the footer (you should see it if you scroll to the bottom). If your browser supports the Paint Timing API you will see a couple of extra metrics: First Paint and First Contentful Paint.
I love hand-drawn graphs and I have always fantasized about applying it to vector images. That’s why I was very happy to find out about RoughJS, a library that draws SVG primitives like lines, curves, arcs, polygons, circles, ellipses and paths on a Canvas in a hand-drawn style.
I have just published my first article on Smashing Magazine, “Taking A Look At The State Of Progressive Images And User Perception”. There I talk about progressive images and their relation with user perceived performance.
I wanted to look through the existing research that justifies that progressive images are good, and especially the so called “progressive image loading” techniques that exploded in popularity after my post about how Medium applied it.