Just like a good performing car is most sought after, in the same way, a performant website leaves a good impression on the users. Web performance is all about making websites fast, including making slow processes seem fast. Web performance is essentially an objective measurement and perceived user experience of a website or application. One can know a lot about a company/product through the website and its user-friendly interface and good performance.
Why does performance matter?
Users expect convenience, functionality, and speed. Delivering optimized website results in increased customer loyalty, higher search rankings, and enhanced user satisfaction. We know that fast-loading websites are preferred by users. But what you may not be aware of is how speed can impact the bottom line. Google-sponsored research shows that AMP leads to an average of a 2X increase in time spent on page (Learn more about AMP here).
Website performance impacts:
Check more about why speed matters here.
How does the browser render a page?
Before we jump on finding the hacks for making a website super fast, let’s try to understand how the browser renders a page. A browser reads the HTML text and builds the DOM Tree. Then it processes the CSS, checks if it is inline or an external CSS, and builds the CSSOM Tree from it. As these trees are built, the browser then starts working on the Render Tree. As the render tree is done. The browser starts painting the elements individually on the screen.
Critical Render Path
How do we measure the performance of a website?
Lighthouse – Tool for Web Developers
Most developers use Lighthouse to identify the improvements needed in their website. In Lighthouse 6 there are 6 matrices under the performance section that make up the score. Each of these metrics has its own weightage for calculating the ultimate performance of your site. The score for a particular website audit report generated by the lighthouse includes the following matrices:
Note - PageSpeed Insights also uses Lighthouse in the backend.
WebPageTest – Website Performance and Optimization Test
WebpageTest gives you way more insights compared to Pagespeed Insights. This is one of the tools one should use when you need an in-depth report. Here are some other tools that are helpful when performing a performance audit:
Responsible checkpoints of performance bottlenecks
There could be various bottlenecks that could make the website less performant. The most common ones are mentioned below:
How do I optimize my website?
When it comes to optimizing a website performance there are three things which are needed to be kept in mind:
Minimize the Amount of Data To Be Transferred
Note - Include only the things which are very much required for a particular page. And avoid including everything on every page.
Reduce the Total Count of Critical Resources
Shorten the Critical Rendering Path Length
What are the various ways for tuning the performance of the website?
There are several ways to tune the performance of the sites. Below are some basic things which we need to do to make the site more performant:
Minification
Minification reduces the CSS and JS file sizes, which in return reduces the load.
Image optimization
Having all images optimized to their best size help in boosting performance.
Reduce the number of requests
Identify the number of requests from the networking developer tools tab of browsers and try to reduce the number of requests to third-party sites.
Preloading scripts
Another way to not block any DOM paint because of a script is to preload the required scripts.
Limit blocking requests
Still, there can be requests which can’t be preloaded. Identifying such requests and limiting them will help to improve the site loading time.
Intersection observer API
The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.
Conclusion
In this blog, we have covered the basic outline of the web performance from a frontend perspective. Stay tuned with us for a more detailed description of Lighthouse matrices, their importance, what each matrix means and more.