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.
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
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: