Google Lighthouse

 

Step 1. Select a better server

Because this website is designed as a multilingual blog, the visitors may come from most of the countries. However, because of the bandwidth limit between Chinese mainland and the other countries, the connection speed of Chinese visitors is pretty laggy. Fortunately, it is a nice solution to place the server in Hong Kong. I finally decide to buy Google's Hong Kong cloud server.

 

Step 2. Compress your CSS, JS, Font files and other resources

Jake's website is developed with Joomla! CMS and T3 framework. It is not that hard to implement these features from the back-end. It is also a nice idea to combine your CSS and JS files, which can reduce the number of requests.

 

Step 3. Detach your resources into small modules, let the visitors load them by needs.

It's smart to let the visitors load whatever they need instead of load all resource; so it can release a huge amount of bandwidth and CPU. For example, to highlight some Python code lines within an article; I don't have to load the Javascript program which is used for highlighting C++, Ruby, PHP, Java, etc; also, I don't have to load this program in any page where the code is not inserted.

If you do so, it can boost the loading speed of pages so that the bounce rate of your visitors can be decreased as well.

 

 

Step 4. Asynchronize the JS resources

It's not bad to load some unneeded Javascript resources after the rendering of your main content; so that the main content can be shown to the visitors ASAP.

 

Step 5. Load the resources after <head>, or before </body>?

As we aforementioned, it is preferred to load the non-critical resources in <body> to decrease the time of First Meaningful Content Print. Put your CSS resources in <head>, and the JS resources in </body>.

 

Step 6. Compress and Resize your Photos when editing

You can apply the new-gen technology to compressing the photos (e.g. in JPG-2000 format); the photo can be compressed smaller but better. Also, the photos can be cropped into a smaller scale while editing, which can significantly reduce the size.

 

Step 7. Load the text and frame of the pages before the photos are loaded

It is a nice choice to load other contents before the photos are loaded, only if you have a lot of photos on your pages. In this case, thumbnail pre-loading is suggested. 

 


Share with friends on:

Follow Jake on:

 

 

Related articles