Learning Resources for Software Engineering Students »
Author(s): Marvin Chin
Reviewers: Lu Yang Kenneth, Monika Manuela Hengki
What is Web Performance
Web Performance is a broad term that refers to how performant a web application feels to its users. This includes many aspects such as how long the site takes to load, how quickly the site becomes interactive, and how responsive it feels when the user interacts with the site.
As web applications grow more complex, it becomes increasingly important for web developers to be aware of the factors that affect performance, and consider how performance can impact the user experience.
Why Web Performance Matters
The performance of your web application has a direct impact on its ability to attract and retain users:
- Sites which take more than 3 seconds to load are more likely to be abandoned by users [source].
- Conversely, reducing page load times have been shown to have significant impact on improving user engagement [source].
- In addition, search engines have begun to use page load times as a factor in determining search rankings [source].
- Improving web performance is also essential in making your web application accessible to users from emerging markets, where low-end devices and limited bandwidth are the norm [source].
In order to deliver a positive user experience, web developers must ensure that their applications meet acceptable performance standards.
Key Ideas in Improving Web Performance
There are many factors which affect web performance. Here, we give an overview of some of the key ideas that can be used to improve the performance of your web application.
- Remove unused code (often parts of libraries that are not used in the application) with tree shaking [source].
Idea 2: Optimize Images
Images form a significant portion of the resources loaded on web applications [source]. To improve performance and speed up the site for users, web developers should thus try to reduce the amount of bandwidth used to load images.
Images can be optimized for the web in the following ways:
- Use the correct file format that provides the appropriate balance between quality, detail, and file size. For example, you should use JPEG for photographs that contain lots of colors, PNG for logos and icons which have less colors but contain sharper details, and GIF for animated images [source].
- Compress your images to reduce the amount of data that needs to be loaded [source]. Be careful to strike a balance between image size and quality for optimal user experience.
- Deliver appropriately sized images based on the resolution of the client device [source]. This prevents smaller (often mobile or lower-end) devices from wasting bandwidth loading large images that cannot be displayed at their full resolution on the device.
Idea 3: Use Progressive Rendering
The sooner the user sees content being displayed on the page, the faster they perceives the site to be. Progressive rendering achieves this by avoiding rendering the entire page all at once, but instead ordering the loading of content in a manner that allows some parts of the page to be rendered as quickly as possible.
Here are several ways how progressive loading can be effectively applied:
- Use lazy loading to defer requesting non-critical resources until they are needed [source].
- Show content placeholders while fetching resources to indicate loading progress to the user [source].
Measuring Web Performance
Improving web performance is a continuous, ongoing process. The ability to measure and track performance is necessary for developers to monitor the impact of their changes over time.
Here are some ways that you can measure the performance of your web applications:
- Test your site under various network conditions with Chrome DevTools. This is helpful to get a feel for how the site feels for users on slower devices during the development process.
- Audit web performance using Lighthouse. This provides many useful metrics for understanding the performance of your site and identifying performance bottlenecks under controlled conditions.
- Use WebPageTest to test the performance of your website from multiple locations around the world at real consumer connection speeds. This provides real-world performance indicators that is especially useful if the target audience of your site resides in a different region.
- Collect user-centric performance metrics to help you to monitor how your application actually performs in a real-world scenario, and how your site performance relates to other user engagement metrics [source].