In our previous article, we learned about the relation of site speed and the user experience. We further learned about measuring the user experience by using Core Web Vitals.
Improving the site speed requires few best practices to be followed. Many of such best practices are available across web. Yahoo! pioneered the art of improving speed and came up Performance best practices.
Similarly Google recently published updated rules for improving site speed by focusing on above the fold area of the screen.
The developer community has also released few plugins to analyze the site speed. Lighthouse is one such Chrome plugin being published by Google.
Thus, one can improve the site speed and can know what needs to be done. However one practical problem comes into picture.
How to prioritize top 5 recommendations giving maximum bang for the buck
The easiest way to solve the problem is to believe the 80:20 rule. Thus 80% of the problems will be resolved by focusing on 20% of the issues. We are going to see how to prioritize the top 5 performance recommendations which will give you maximum returns.
All Core Web Vitals indirectly depend on following 3 broad criteria.
Reduce the number of connections above the fold
Any task, which has the ability to reduce maximum number of connections above the fold gets the priority. Depending on the number of connections being reused/ saved, one can prioritize the tasks. Now these tasks may include combining resources/ files, using CSS sprites instead of number of small images, using HTTP/2 (where single connection is opened up) etc. if you are saving just 2 connections, you obviously need to de-prioritize that task over the one which probably saves 10 connections.
Reduce the bytes being transferred for above the fold resources
Second important criteria for prioritization is to reduce the size of the data being transferred between server and client. Depending on the size of the data being transferred, one can prioritize the tasks. These tasks may include, minification of JS, CSS, HTML. Minification is the process of removing white spaces and comments from the code. This reduces the size of the files and hence the data being transferred. These tasks may also include introducing the caching layer in between server and the client, adding expire headers on the components, lossless or lossy compression of images.
Prioritize for the visible content above the fold
The third important criteria in deciding the priority of the task is to check if the task is useful in painting the screen. Any component which is below the fold and is loading quite early in the page waterfall should be de-prioritized. Similarly any component which is used to paint the screen above the fold needs to be loaded early in the waterfall. It is important to note that CSS blocks painting and JavaScript blocks rendering. Hence Javascript should be loaded as late as possible, CSS should be loaded as early as possible. In today’s world, fonts are also gaining the attention of the developers and the designers. However it is worthwhile to note that fonts block painting. Hence reducing the number of fonts or pushing them down after the onload is always desired.
Conclusion
As such, site speed improvement must be evangelized in every company. The developers need to follow best practices and code better products which are performing better right from the day one. However if you need to do this exercise as an afterthought, follow the 80:20 rule. Prioritization of any performance related task should be decided based on the above 3 criteria and its expected gain.
Top Image Credit – https://www.siruss.co.uk/blog/site-speed-social-sharing-cautionary-tale