Google said that your website should load in less than two to three seconds. So, many website owner want the website load as fast as possible. This is not a very tough job but cost your time.
In this article, we will guide you step by step to make a website load faster. This is a real world case we are doing with a customer’s website.
Now, getting started.
How many Google PageSpeed Insighs score?
Visit this URL to type your website URI/ URL. In our sample, look like:
We will inspect 2 scores: one for mobile, one for PC. Below is for PC desktop/ laptop:
Orange is not bad but if we can make it green will better.
When reading information from audit result, we notes some important factors:
- Many images and image size was not optimized
- Cache lifetime is too short
- Render-blocking resources
Unable to wait for anything… Let’s get to work.
Optimizing images by convert all of them to WebP
Use FTP client to download all image in /wp-content/uploads (there are many sub directories named with year). After that, use XnConvert (we use Ubuntu as main OS) to convert to WebP.
The result is: before converting 731 items, totalling 57,9MB; after converted: 28.6MB
We upload images to appropriate directories. But, wait for a moment because WordPress doesn’t know that images was changed. We force it by replacing all image file extension in wp_posts, wp_postmeta table in database.
Increasing browser caching lifetime
Editing .htaccess file by add lines:
After 2 steps above, score as: mobile 57, desktop 85.
It is a tough job because the complexing of browser’s rendering processes. We do something like: change positions/ orders .css, .js file in Flatsome theme, remove some redundant lines of code.
Now, mobile is 57, desktop 90. It is not perfect but enough for 3s loading your web pages.