How performance budgets and SpeedCurve are helping us to keep a high performant website

Berry de Witte
Mar 25, 2020 · 6 min read

After competing in the Northern European Page Speed race last year we boosted the performance of our website but we didn’t want to drop the ball after the nice achievements we accomplished. But how do you know what the impact is of your new build feature, added content to your site or how to know if your website is still performing after every release? The answer is measure, measure, and measure because to measure is to know.

That’s why we teamed up with SpeedCurve as they offer the right selection of products like synthetic webpage tests and performance audits which suit our current needs. Here’s the story of how we’re in the lead of keeping our website high performant.

Mobile-first dashboards

Lighthouse analyzes web pages, collecting modern performance metrics and insights on developer best practices.

All results are generated by mobile synthetic webpage tests. Why mobile and why synthetic? Mobile devices tend to have the slowest network connection. If your page is fast on mobile, it sure is on tablet or desktop with wifi or cabled connections. You don’t want to lose mobile users because it takes to long for your page to load.

We also decided to use synthetic tests as these will audit your page as a new visitor. If you would use real user monitoring (LUX), the average line will flatten out as the recurring visitors will already have certain resources cached which improves their performance.

Below you will see two of our graphs on the homepage dashboard. We will talk about the interesting drop in performance in a few moments.

two of our main graphs on the homepage dashboard

Defining performance budgets

The Speed Index is the average time at which visible parts of the page are displayed. It is expressed in seconds and dependent on size of the view port.

If you’re aiming for the best, your javascript bundle should be below 150 KB, performance score over 90 and for the user-centric metrics, Google has the following guidelines.

We defined different budgets for our page types as they don’t all have the same performance and content. If you are just beginning with budgets start with budgets you can maintain and set them higher whilst improving your website. Don’t set the bar too high with budgets you can’t reach, that’s not motivating.

After setting the budgets, SpeedCurve has a nice status page where you can easily see in one overview which budgets are still in the green and which need some TLC. As you can see the Speed Index increased highly and is way above budget.

homepage performance budget status

Notifications

A positive notification about performance increasing

Hey, but what happened to your performance?

Lazy loading is a design pattern commonly used in computer programming to defer initialization of an object until the point at which it is needed

After refactoring and optimizing some code for the main image (we call it the top teaser) on the homepage, we accidentally flagged that image as to be lazy-loaded. This means that the image was loaded after the initiation of the javascript. This caused the Speed Index to increase as the page needs more time to load. By default you always want to eager load images above the fold, because you will always need them at that point.

the main image (top teaser) on the homepage with the brand logo overlay

Unluckily for us, lazy loading wasn’t the only issue that made the performance drop. At almost the same time the bug was released to production, a new top teaser was planned by the content team to go live.

On every top teaser, the content team can place an overlay and in this case one was created with the logo of some brands. Unfortunately the size of that image was over 800 kB which doubled the total request size of the homepage and also resulted in a big performance drop.

After investigating and fixing these issues, performance increased to a score of 86 and the Speed Index decreased to 2.61s which is still a little bit over budget so there’s still room for improvement there. For the Lighthouse we could even raise the budget to 85.

Updated homepage status

Make the web faster!

There are of course more companies or tools like SpeedCurve which can offer the right solution for your needs. You might even try setting up a Lighthouse audit service yourself. In the end, it’s up to you how you want to optimize your website performance.

Thank you for taking the time to read this story! If you enjoyed reading this story, clap for me by clicking the 👏🏻 below so other people will see this here on Medium.

I work at Wehkamp.nl one of the biggest e-commerce companies of 🇳🇱
We do have a Tech blog, check it out and subscribe if you want to read more stories like this one. Or look at our job offers if you are looking for a great job!

wehkamp-techblog

We'll try to keep up and post on the stuff we're doing and…

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

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