Web Performance is important for user experience and business metrics. Estimating its impact is key to be able to prioritize it, yet it’s difficult to quantify its benefits until the work has been done.

We need to break this chicken-and-egg loop. This post explains several ways of assessing the potential performance gains with little effort and, more importantly, without actually implementing fixes.

What is the business opportunity for web performance improvements?

In the past I have been too naive thinking that every stakeholder would care as much as I do about web performance. “Look, there are many case studies proving a correlation between loading time and business metrics!” —…

Before joining Facebook as a Solutions Engineer I had many questions about what the role implied and if it was a good fit for me. After almost one year into the role I wanted to share more about what we do and inspire you.

Solutions Engineering sign at Facebook

I had been working as a software engineer for 10+ years, mainly building web applications. I was starting to feel that I didn’t enjoy dedicating 100% of my time to coding anymore, and wanted to understand why I was building what I was building.

What kind of metrics was I trying to move? How did I…

Spotify’s web player running on MacOS as a PWA

As Progressive Web Apps make their way on desktop I wanted to talk about why I consider this is a breakthrough. I have talked in the past about different uses cases for PWA. In this post I want to focus on PWAs for desktop.

The current version of Google Chrome stable is Chrome 73. This version lets you install Progressive Web Apps natively on macOS. You can find more information about the release on Pete LePage’s “New in Chrome 73” notes.

Wasn’t this possible before? Well, yes. On Chrome 72 the only option was to wait for a beforeinstallprompt

Poor performance leads to exclusion. When we create heavy sites we limit what users can access our content. Those with more powerful devices and better network will get sites loaded faster. Those with older devices and slower network will need to wait more.

Why performance is important

Study after study shows how slowing sites down results in less engagement, less time on the site and a general decrease in key business metrics. Still, in our development teams we continue to prioritize more highly shipping features over addressing web performance.

Don’t get me wrong, features are important. Serving an empty site is fast, but not…

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.

“seven mason jars of coffee on table” by Nathan Dumlao on Unsplash

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.

What are Progressive Web Apps

If you are a web developer you have probably heard about Progressive Web Apps (PWA). Web sites that load quick, are reliable, feel smooth and take advantage of modern APIs.

There is a lot of buzz about them, partly because Google coined the term and has been leading the implementation of the bits and pieces that composed it.

Implementing a PWA or adapting an existing site to “become a PWA” looks like…

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 that SVG to the browser. …

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.

Performance is a topic that has interested me for a long time. I remember when I learned about dynamic programming, greedy or divide and conquer algorithms. There was something gratifying in taking a code that takes minutes to run and make it run in a handful seconds.

Moving over to web, the performance problems are different. Usually, they are not related with computational complexity, but about serving what’s needed when needed in the best possible way. It might seem like a no-brainer, but it’s more difficult than it seems.

Steve Souders was one of the first in reverse-engineering how browsers…

How to use a High-Order Component to load what is needed, when needed.

Componentization has marked a before and after in web development. The main advantages that are usually mentioned are reusability and modularization. Components are 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.

Picture by Marvin Ronsdorf

We are explicit about our dependencies, so we know what code we need to run a specific component. Lazy-loading and bundle splitting can have a huge impact on page performance: less code requested, parsed, and executed. …

A small detail to show that you care about performance

I was browsing Tim Kadlec’s website and I noticed it showed the time it took the page to load in the footer.

Tim Kadlec’s site shows the page load time 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 window.performance.

I liked the idea and added a similar snippet that shows the page load time in the footer on my site (you should see it if you scroll to the bottom).

If your browser…

A library to create hand-drawn graphics from simple primitives

One of the example visualizations from RoughJS

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 primitives like lines, curves, arcs, polygons, circles, ellipses and paths on a Canvas in a hand-drawn style.

Applying RoughJS to some icons from Font Awesome

The tool can be very handy for given an informal look to diagrams and charts in some slides or presentations. Do check their examples page, which is very impressive.

If you have a SVGs you can draw the different primitives that compose it. In the…

José M. Pérez

Engineer at Facebook. Previously at Spotify. Google Dev Expert in Web technologies. I like JS and performance optimization.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store