10 Critical Performance Optimization Steps You Should Take

As the web continues to evolve, performance is starting to become more and more important. Content-heavy web applications like Facebook or Instagram are dealing with megabytes of data. They provide rich user experiences that require heavy scripting in the background — all this at the cost of performance.

But why you should care if your page takes three seconds to load instead of one? It’s not that much of a difference, is it? Why is it essential to optimize performance and reduce load times? And what can we do about it?

Let’s first see the why and then we’ll see the how.


Why Performance Matters

We ideally want to provide the best user experience. Visitors expect a site to be snappy and responsive. They want it to load instantly. If your site takes too long to load, people won’t wait around long before they start to abandon it. Poor performance — because of extra network traffic — can also mean increased costs for users with a limited data plan.

Another reason is improved conversions. Case studies shared on Web Fundamentals show that performance can have a serious positive impact:

“Pinterest increased search engine traffic and sign-ups by 15% when they reduced perceived wait times by 40%.”

But it can also have some serious negative effects:

“The BBC found they lost an additional 10% of users for every additional second their site took to load.”

This is why we must take some time to improve page load speed and performance. So let’s see how we can achieve that.


How Performance Should Be Measured

Before starting to address the problems, we need to know how we can measure changes. There are two things you should keep in mind when dealing with performance improvements:

With this in mind, let’s see the list. Everything starts on the server. We can make huge improvements before we even get our assets.


Server-Side Optimizations

1. Configure compressions

If you haven’t already, enable server-side compression. This can greatly reduce the size of HTTP responses and has the most impact. Compress as many file types as possible. The only exceptions from this rule are some static assets, such as images, fonts, or PDF files. They are already compressed. Trying to compress them will only waste CPU resources, and in some cases, it can even increase file sizes.

To see which type of compression your server supports, go to the Network tab in DevTools. Inspect the Accept-Encoding header in a request and you’ll see all available options:

Server accepts gzip, deflate and brotli compression

According to a benchmark test done by Akamai, Brotli seems to be a better option over gzip. They tested 1,000 websites and found that Brotli outperformed gzip by a median of 21%.

2. Minimize HTTP requests

While compression can save significant amounts of data, you can further cut down page load times by minimizing the number of HTTP requests. Some common techniques you can use are:

3. Use a CDN

Using a content delivery network can help you reduce response times. A CDN is a collection of servers distributed across the globe. It aims to help deliver content to users faster by choosing the server closest to the user’s location.

Illustration of how CDNs work

4. Use a Cache-Control header

Cache each resource to avoid unnecessary network trips. For static assets that rarely change — like images or fonts — you can use a long expiry date in the far future. For other resources, you can use an appropriate Cache-Control header. The time should depend on the frequency of your changes. The more frequently your assets change, the shorter your caches should be.

5. Avoid redirects

Remember that redirects (301, 302) delay everything and slow down page load. Redirects most commonly occur when a trailing slash is missing from the URL. This causes the web page to reload everything with the correct URL.

Now let’s move on to client-side optimizations and see how we can further improve things.


Client-Side Optimizations

When it comes to client-side optimization, we have some common strategies that we can use for all types of assets. These include things like compression/minification and bundling. You should implement both as part of your release process.

6. Optimize HTML

differences between async / defer attributes
document.querySelectorAll('*').length
dom.js
Copied to clipboard!

7. Optimize CSS

// Instead
.class:nth-last-of-type(3n+0) { ... }

// Do
.class--special { ... }
app.scss
Copied to clipboard!
.card {
    height: 200px;
}

// Changing height triggers layout
.card--tall {
    height: 400px;
}
app.scss
Copied to clipboard!
enable paint flashing in Chrome

8. Optimize JavaScript

The coverage tab in Chrome

9. Optimize images

display vs natural size of an image
The display size of the image is 150×146. The natural size, shown as “Intrinsic,” is almost double that.

10. Optimize fonts

<link rel="preload" href="font.woff2" as="font" />
index.html
Copied to clipboard!

I would like to close this article with some recommendations that can help you along the way. You can use them to audit your site and spot potential issues. You’ll also get useful tips on how to resolve them.


Recommendations

All of the tools listed below are free to use.

Lighthouse

Lighthouse will probably be your first audit tool to use. It’s built right inside Chrome. You can reach it through the Audits tab. If you are not using Chrome, you can still use it online as the PageSpeed Insights tool on Google. If you also want to run audits for SEO or accessibility, web.dev will be the way to go.

Lighthouse report

webhint

webhint provides you with deep details not only on performance but other aspects as well, such as common pitfalls or security issues. You can run your audits through its official website. You can use it in VS Code, as a browser extension, or even integrate it into your release process through CLI. It also gives you the ability to write and enforce your own set of rules.

GTmetrix

Just like the previous two, GTmetrix helps you discover performance issues and provides you with optimization opportunities. It generates a report for you with the most impactful issues at the top.

GTMetrix audit

Performance tab

The Performance tab in Chrome lets you analyze runtime performance. It provides you with all sorts of details, ranging from FPS drops to long-running scripts and how long it takes your site to render and paint everything.

The performance tab in Chrome

Performance API

Lastly, to benchmark your JavaScript code you can use the Performance API. It provides you with a means of calculating how long it takes for your code to run. Previously, we could use console.time and console.timeEnd. However, performance gives more accurate results. Take the following code as an example:

performance.mark('startMeasurement');

for (let i = 0; i < 1_000_000; i++) {
    let calc = Math.sqrt(i);
}

performance.mark('endMeasurement');

// With measure() we can create a new entry
performance.measure('record', 'startMeasurement', 'endMeasurement');

// This will give you a PerformanceMeasure object
// with the following properties
console.log(performance.getEntriesByName('record'));

// Returns:
// Where duration tells us how long it took for the loop to run
{
    detail: null,
    name: "record",
    entryType: "measure",
    startTime: 414557.83500001417,
    duration: 5.26999999419786
}
performance.js
Copied to clipboard!

Conclusion

If you go through all steps mentioned above and fix any issues brought up by your audits, your site’s performance will be through the roof. If you would like to see more performance tips, check out my performance checklist on the link below:

The Performance Checklist on GitHub

What are some common performance pitfalls you come across from time to time? Let us know in the comments! Thanks for taking the time to read this article, happy debugging!

📚 Get access to exclusive content

Want to get access to exclusive content? Support webtips to get access to tips, checklists, cheatsheets, and much more. ☕

Get access Support us
Read more on
🎉 Thank you for subscribing to our newsletter. x