How I make a Flatsome website’s loading faster

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:

Google PageSpeed score for mobile/ smartphone

We will inspect 2 scores: one for mobile, one for PC. Below is for PC desktop/ laptop:

Google PageSpeed score on PC

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.

XnConvert is a good tool to convert images to WebP format

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:

<IfModule mod_expires.c>
  ExpiresActive On
  ExpiresByType image/gif A2592000
  ExpiresByType image/jpeg A2592000
  ExpiresByType image/jpg A2592000
  ExpiresByType image/png A2592000
  ExpiresByType image/webp A2592000
  ExpiresByType image/x-icon A2592000
  ExpiresByType text/css A86400
  ExpiresByType text/javascript A86400
  ExpiresByType application/x-shockwave-flash A2592000
</IfModule>

After 2 steps above, score as: mobile 57, desktop 85.

Resolving render-blocking

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.

Leave a Reply