By this article, I’d like to provide you a checklist that will help you to test your product better and discover it more in-depth. Things that I will describe here are really important to understand at least at primary level, no matter who you are: developer, QA engineer, project manager or even customer.
In this checklist, we will use Google Chrome capabilities a lot, especially Google Chrome DevTools – a beneficial instrument that helps people to explore different properties of websites. To run it press Command+Option+C (Mac) or Control+Shift+C (Windows, Linux, Chrome OS) or F12 within a page you’d like to inspect.
There are two the most critical metrics about your website:
These characteristics show you how things are going with the loading performance of your site. They both identify website loading timings. However, there are differences between these two metrics. First meaningful paint defines the time at which a user sees your main website content for the first time. Time to interact defines the time at which all of the browsers work is done, and the user is free to interact with the browser’s interface. By the convention, TTI is defined as the point where:
The easiest way to determine these metrics is to run Google Chrome built-in Lighthouse audit. To run it you need to follow the next steps:
1.Open DevTools 2.Go to the Audits tab
3. Select the preferred options. Performance is all we need, FMP and TTI metrics are provided exactly by this option. Run an audit
4. Wait till audit completes
5. Explore the audit’s report. Required metrics were measured
Google research says:
53% of visits are likely to be abandoned if pages take longer than 3 seconds to load
One out of two people expect a page to load in less than 2 seconds
Actually it doesn’t define precise timings, this just proves that the less loading time your website has, the more clients you will get. If the website’s whole page loads in less than 2 seconds that’s perfect. Further, we review methods that help to improve the loading performance of the website significantly.
Keep-alive is a mechanism that may affect your loading performance well. It is especially useful when you make many requests to a certain domain regularly. In that case, the browser will not open a TCP connection on each HTTP request, that takes quite a lot time, so Time To First Byte (TTFB) will decrease a lot and browser will be able to start download required content sooner.
1. To explore your networks, you should go to the corresponding tab of the DevTools.
2. You are free to tune your info table so you can explore networks even deeper. Right-click on the top table bar to set up new options to the table.
3. Now, you can modify your networks table as you like. The only we need for now to know is our connection uses ‘keep-alive’.
4. That’s how we can see it.
Caching is a technology that provides reusing of previously loaded data. Caching saves much traffic and doesn’t force the browser to request data when it is already cached, a browser will take it from the cache and return it to the user. To make sure caching is working you need to explore your requests’ headers:
1. Select an appropriate option (starting with steps 1-2 from previous Check-tip)
2. So we have caching properties in front of us.
Briefly, if the value of the ‘Cache-Control’ header has ‘max-age’ data, then it might be able to cache your resource during the determined time. For knowledge about HTTP Caching policy, I’d like to recommend you to familiarise with the following documentation
HTTP/2 is a modern version of HTTP that makes data loading significantly faster.
It is achieved with a few new options:
Therefore, usage of this protocol will increase the quality of network interaction a lot. Investigate if you are using HTTP/2 or older version of HTTP by doing this (in the same tab ‘Network’ as described).
Not always internet connection is so perfect as you have during your development process. It is possible that your future user will have latency is much more and upload & download speed much slower than you had.
Chrome DevTools provides us with an ability to simulate network by our need. You can add your custom network profile with particular download, upload speed and latency. So this option will be quite useful if you are building a project for foreign users.
To simulate network connection speed do the following: Enter DevTools and expand the default menu by clicking the Three dots icon. Next, navigate through the More tools submenu.
You can use default throttling presets.
Or even add your custom network conditions!
Indeed, your website behaves not so well with limited network resources as it behaved with an excellent Internet connection. Of course, load time will increase, and the user will have more idle time. However, make sure, the user will be informed by the gracefully handling like displaying user-friendly loading spinner e.g.
If you worry about new clients and website visitors, than you must also worry about your Search Engine Optimisation. SEO denotes how your product is visible to search engines. The better SEO is – more often your website appears in the results of the search platforms like Google, Yandex, Bing etc. This directly affects how often people visit your website. In short, we can divide Search Engine Optimisation into two groups: content optimisation and application optimisation. The SEO specialist usually handles the first one and his responsibilities are writing valid content, outer optimisation via external links or SMM, keywords consideration. We will look into the last one, application optimisation, it lies in technically valid page building and can be easily handled by HTML coder or programmer. Checking your site’s SEO standards is simple. You need to run an SEO audit, and it will check has been SEO rules met or not.
Go to the audits tab as we did before. But now we will run the SEO audit.
There are 10 website options which were checked for the validness. One failed, and the other nine are valid. I guess every front-end developer is familiar with terms were checked (meta tags, page title, links optimisation etc.). If you are not, the audit provides you links to learn more about each option.
Solid animations give the impression of a well-done product. Making sure that animations are programmed well is essential. It always was not so easy to test animations. Often developers or QA engineers are testing animations by making a specific condition by UI which will trigger the animation. That method is not practical, and it is resource-intensive. Chrome browser provides us with a better solution – great animations inspector tool which significantly simplifies animations check-up. With that tool, you can repeat all animation flow, tune animation timings, slow down animation speed for the sake of clarity. To open an animation inspector select Animations option inside of the More tools menu
On the screenshot below there is the brief review of inspector functions
The official manual to animations inspector is here.
Even if your site works great on your desktop computer, it does not mean that it will work the same way on the weaker mobile devices. Some heavy functions may lag and freeze your application. Animations may not work well as they did before. UX will be ruined.
CPU throttle is a wonderful possibility to test how your interface behaves on the weak devices.
Go to the Performance tab and select a throttling for your CPU
And now you can test performance with throttled CPU. Look for an inappropriate UX behaviour and fix it.
Make sure scroll is smooth enough. Many developers neglect the testing quality of scrolling. Freezing or tearing scrolling is a popular case. Usually, that happens when an event listener intersects with JavaScript runtime thread. However, this problem can be easily fixed by using “passive event listeners”. ‘Passive event listener’ is a mode of usual event listener expect that it doesn’t depend on your main script execution thread. You can simply explore all of the event listeners that have been added to your DOM with Chrome browser. Also, you can explore if your listeners are passive or not.
Go to the Elements tab and select an Event Listeners section inside of the bottom drawer
If you have detected that your scroll listener is not ‘passive’ than the problem may be with that. To make listener passive add this code to the listener declaration.
Code coverage indicates how many of the loaded code is actually used. A common situation when you load .js file 100 kB size and only use 20% of it, 20 kB respectively. Usually, that happens because other 80% of the file is intended for executing due to other website parts.
Enable code coverage inspector
Run it
Explore the coverage
If much code is still unused, you should split up your code to different chunks and use each chunk due to need. In that case, you will not load entire .js file but only some piece of it. Other chunks you may request by the need when you reach another route or fulfil the particular condition. Code splitting will significantly accelerate website load speed.
Well, now you know more about advanced things you can improve on your website. Not all of these features are must-have, but all of them will be useful for you in some instances.
Learn more about how we engage and what our experts can do for your business
Written by:
JavaScript developer
Almost five years of experience in front-end development
How to Use Docker Compose for Automated Testing Many engineers have been confused when designing a method for isolated testing. Fortunately, today we have great…
Introduction Docker is a software platform designed to make it easier to create, deploy, and run applications by using containers and is one of the…
3 Steps to Blur Face with NodeJS and OpenCV: How to Blur Image This reading is about a task which our team had on one…
How to Test React Components with Hooks & Mocks: Detailed Tutorial Having strong unit tests prevents future emergencies, urgent bug fixes, dissatisfied customers, and loss…
How to Update Internet-of-Things (IoT) Devices: Programmer’s Guide The Internet of things is growing exponentially every year. Internet-connected devices are changing the way we work,…
Introduction I want to explain the usage of this post in common use cases: case 1: web application which can send pop-up messages about something…