Improving the site speed and the User Experience
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
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.