Enter your details to view and download the full PDF version
Application performance matters. Web performance, specifically, matters even more, and now more than ever. However, optimizing performance certainly isn’t a walk in the park. That’s why we’ve come up with this resource to help you.
In this guide, you'll learn essential web performance concepts. You'll understand the main villains of web performance and how to beat them for good. Armed with the knowledge from this guide, you'll be able to tackle the many performance challenges you face in your web apps and take their performance to the next level. Let's dig in.
Web performance refers to how quickly users are able to see and interact with a web page or application.
Think about all of the things that happen when you type in a URL and press enter. The browser sends a request to the server, then it downloads the resulting resource, and finally, it renders it for display. Each one of these steps is composed of many smaller ones, making for a complex process.
In the process of clicking a link and seeing the result, there are many things that can go wrong. Or at least, there are many things that could be implemented inefficiently. When they do go wrong, performance suffers because of it.
Poor performance hits you in the pocket. Users aren’t patient. If your website takes too long to load, they’ll just leave it and go somewhere else, as the BBC learned the hard way.
The Financial Times did a case study in which they concluded that “The [poor] speed of the site negatively impacts a user’s session depth, no matter how small the delay.” Even the smallest delay hurt user engagement, which resulted in both less time visualizing advertisements and less subscriptions. In the long term, that might represent a loss in the millions.
Poor performance also hurts you SEO-wise. Google’s PageRank algorithm has recently started to include speed as one of its factors. Yes, that’s right: Google will punish your site or application in the search results if it’s slow. Additionally, Chrome might start adding badges to sites to clearly point out slow and fast loading sites to users.
One of the most important things to keep in mind when thinking about web performance is that many of the problems lie on the client side rather than the server side.
Yes, the back end can certainly cause performance issues. Databases, for instance, can give you many a headache in the performance department. However, at the end of the day, any server side technologies you use results in the famous web development trifecta: HTML, CSS, and JavaScript.
So, understanding how client-side technologies affect performance is essential if you’re serious about web performance optimization.
While traditional performance metrics like load time are still important, they don’t tell the full story in terms of how your users are really experiencing your app.
User-centric performance metrics, such as first paint and first contentful paint, help developers understand how a user perceives the performance of the page. They help to answer questions like, “how long before the user sees the page is loading?” and “when did the user first see something on the page?”
First paint (FP) measures the time between navigation and when the browser renders the first pixels to the screen, rendering anything that is visually different from what was on the screen before navigation.
First contentful paint (FCP) measures when the browser renders the first bit of content from the DOM, providing the first feedback to the user that the page is actually loading. This is usually text, images, non-white images, or SVGs.
First meaningful paint (FMP) measures the amount of time it takes for the first useful or meaningful (for the user) element to be displayed. Of course, this will vary by page and is highly subjective.
Time to interactive (TTI) measures the amount of time it takes a page to become interactive.
A Real User Monitoring tool can help you measure, track and improve these metrics from the perspective of the end user. More granular understanding of how users experience your application, making it easier for development teams to identify poor app performance. For example, visualizations of these metrics help paint the full picture in a rich and actionable way, making it easier to identify poor performance and track the impact of changes you’ve made.
One of the most effective measures you have to take to improve your app’s performance is to bring the number of HTTP requests down. Why is that? We have a whole article on this particular topic. Here’s a quote from it:
“Reducing HTTP requests is the most essential technique to optimize your website. This is particularly important for first-time visitors who have to download all resources instead of loading them from their browser’s cache. In fact, this is where programmers should start looking for optimizations because it has the greatest impact on the performance of websites. Plus, it can quickly be implemented.”
An effective way of reducing HTTP requests is to combine several resources into one. You can combine several CSS files into a single one, for instance. When it comes to images, you can employ the CSS Sprites technique. Here, the gains are considerable, since web apps tend to use a large number of image files for elements like icons and buttons. The CSS Sprites technique combines many smaller images into a single file and then uses coordinates in CSS in order to locate only the correct image or icon you wish to show. It might sound hard to pull off, but there are tools that automate the process for you.
Combining several resources into one is, most of the time, worth it, since the gains you get by having fewer HTTP requests make up for the extra file size. That doesn’t mean you shouldn’t also strive to reduce file size where it’s possible to do so.
As it turns out, there are plenty of opportunities to do so.
Unoptimized images are one of the primary culprits here. Fortunately, there are easy measures you can take to not suffer from this problem. You should use optimization tools for images, remove useless metadata, and also serve images in next-gen formats. Also, don’t resize images directly in the code, since that forces the browser to download the bigger file for nothing.
You can also reduce the size of your JavaScript, CSS, and HTML, by using minification. Minification is the process of reducing a source code file by removing everything that’s unnecessary for the compiler or analyzer. So, things like indentation, white lines, comments, and so on are removed in order to make the files as small as possible.
Also, leverage the power of Gzip. Gzip is an application that allows servers to compress content before sending it to browsers that then uncompress it. Most modern web browsers are compatible with Gzip, which you can easily enable on your web server.
HTML and JavaScript have been evolving. New features that might help you improve performance have been added to them. And there’s no reason not to leverage those features.
A common performance problem related to JavaScript is synchronous scripts blocking page load. Since scripts block the page rendering until they load and execute, the advice here is to put scripts at the bottom of the page, right before the closing tag. That way, the browser only loads the scripts after it’s done rendering the page. Alternately, you can leverage the async or defer attributes in order to avoid loading unnecessary JavaScript before it’s needed.
You can read more in our blog post about the biggest web performance killers.
Solving web performance problems is really about delivering a positive experience for the end user. If you’re not sure where to start, a Real User Monitoring tool will help you to discover, measure, and improve web performance.
