So, in order to understand the most efficient way to speed up the website, I conducted three experiments using an artist portfolio site.
First of all, I tried to reduce the weight of the framework. It changed Bootstrap which was originally used for the site to Pure.css. The function of Bootstrap is very powerful. Using Bootstrap, you can easily create responsive design websites. On the other hand, the weak point of Bootstrap is the large data size.
Similarly, there is a framework called “Pure.css" that can create a responsive design website. Pure.css does not have powerful functions like Bootstrap. However, because the size of data of Pure.css is small, it is a good framework to speed up the site loading speed.
As a result of comparing before and after the fix with Google Page Speed Insight, the mobile score has changed from 17 to 52. On the other hand, the desktop score remained 14. I don't know why the desktop score did not improve.
It took three days in total to fix this.
Next, I tried to reduce the data size of all images. Generally, image data accounts for the largest proportion of the data amount of the entire website. Therefore, reducing the data size of the image is considered to be the fastest way to speed up the site.
This time I used an online image compressing tool called Compressor. I. This tool reduces only the data size while maintaining the quality of the image.
As a result of comparing before and after the fix with Google Page Speed Insight, the mobile score has changed from 52 to 60. The desktop score has changed from 14 to 49. Mobile score has exceeded 60.
It took 6 minutes in total to fix this. It was a very cost-effective fix.
Finally, I worked on organizing CSS files and compressing data size of those files.
I first used CSS Compressor to minimize the CSS files. Next, I changed the External style sheet to Internal style sheet.
As a result of comparing before and after fixes in Google Page Speed Insight, the mobile score has changed from 60 to 67. The desktop score has changed from 49 to 50.
It took a total of 5 minutes for this fix.
The loading speed of the site became much faster than the site before the modification. In the experiment I did in my environment, it changed from 5.16 seconds to 1.59 seconds.
Among the three experiments I did, I feel the most cost-effective modification is image optimization.
You can do the image optimization without special skills. But it improves UX and it might affect on SEO. I strongly recommend that all webmasters optimize images ASAP.