Author: Bohdan Tertychnyi
By this article, I’d like to provide you with 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.
We will check the following 10 options:
- Website performance metrics
- HTTP Keep-alive
- HTTP caching
- HTTP/2
- UX with slow connection
- SEO
- Animations
- UX on slower devices
- Scroll performance
- Code coverage
0. Note
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 F12 within a page you’d like to inspect.
1. Check the most important website performance metrics.
There are two the most critical metrics about your website:
- First meaningful paint
- Time to interactive
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 page has displayed useful content
- Event handlers are registered for most visible page elements
- When a user interacts with the page, the page consistently responds within 50ms
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:
- Open DevTools
- 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.
2. Use HTTP Keep-alive
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.
- 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.
3. Use HTTP Caching
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:
- 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
4. Use HTTP/2
HTTP/2 is a modern version of HTTP that makes data loading significantly faster.
It is achieved with a few new options:
- A binary format, instead of textual helps browsers to decode protocol more efficient
- Multiplexing allows multiple response and requests to be in flight at the same time. With HTTP/1.x only one request can be outstanding on a connection at a time.
- Header compression decreases the size of headers
- Server Push feature allows the server to send resources to the client before the client requests them. Thus, while your client aka browser parses HTML, needed assets, e.g. scripts, styles, fonts, were already sent by the server. Page doesn’t need to wait till parsing ends to request assets.
- HTTP/2 requires HTTPS encryption so using this standard is much safer too.
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).
5. Check user experience at a website with slower network
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.
6. What about SEO?
If you worry about new clients and website visitors, then 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.
7. Do you have smooth animations?
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.
8. Will you Website work on slow devices? Try CPU throttle to check.
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 inappropriate UX behaviour and fix it.
9. Scroll performance issues
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.
addEventListener(document, 'onscroll', { passive: true })10. Check your code coverage
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.
Conclusion
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.
Useful links
- Animations inspector documentation
- Lighthouse, the audit tool. Explained here
- Frequently Asked Questions about HTTP/2 are here
Originally published at https://blog.webbylab.com.
