Website Performance Testing and Monitoring
If you are a web developer and you have build multiple websites, do you know how is your website or a webpage from your website is performing for actual user.
When we talk about performance in web world, it actually means in terms of download speed of your page, usability , how easy is it to use your site is for the user…..etc…
We will look into all these aspects and tools that help you analyse your website and help you to make it better. Let’s get started…..
Tools to measure you web performance:-
- Chrome Lighthouse tab
- Page speed Insights
- WebPage Test
- Page speed api integration
NOTE:- This is not the exhaustive list of tools which are available in industry, its just that these are very easy and handy to use.
Lets start with Chrome LightHouse Tab:-
The above picture tells you about the performance score based on different web vitals for a website. we tried this on redBus mobile web page. We will discuss the vitals one by one in brief:-
First Contentful Paint (FCP) :-
FCP measures how long it takes the browser to render the first piece of DOM content. So basically when user is hitting your website url in browser and request lands to your server. The time which this full process takes and the first DOM element is rendered is FCP. As per webdev:-
Time to Interactive (TTI) :-
Time to Interactive is the total time which is taken from point where your page starts loading to the time when page is ready for user to interact.
A TTI of below 3.5 sec is considered to be very good for the user and it falls in green zone in your audit tools.
Speed Index:- As per webdev-
Speed Index measures how quickly content is visually displayed during page load. Lighthouse first captures a video of the page loading in the browser and computes the visual progression between frames. Lighthouse then uses the Speedline Node.js module to generate the Speed Index score.
Largest Contentful Paint (LCP):-As per webdev
The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport, relative to when the page first started loading.
Cumulative Layout Shift (CLS):-
Cumulative layout shift refers to the unwanted shift in the page components when the user is trying to interact with.
CLS measures the sum total of all individual layout shift scores for every unexpected layout shift that occurs during the entire lifespan of the page.
Page speed Insights
This is a website provided by google itself where you can run your webpage audit for both the versions of your site.(In mobile view and web view.)
One important point which makes it a bit different from lighthouse if that in lighthouse you are doing the audit on your system which might be on a specific network and with specific configurations.
In case of PSI , the audit is done by google servers which is independent of any specific device configurations.
Lets look at one of the reports:-
You can see all the vitals are similar to lighthouse with similar pattern in suggestions.
Web Page Test
Now one common question comes to me all the time is why should we use webpage test if we already have a good tools from google.
So basically the reason behind that is the details which you get the test results done by this tool. Lets understand this from the image below:-
So as you can see in the above image we have very good details regarding all the assets which browser is downloading for my webpage.
I can see which page lifecycle took how much time and we can optimise the page accordingly.
FINAL WORDS
To conclude, I would suggest every web developer to analyse this aspect of website performance from users perspective also. Our website might have a lot of features but it is worth if user can use it.
Follow me on https://amitkumar-v.medium.com/
