Site Optimization – Thrive Themes Project Lightspeed + Clearfy Pro Review

The long waiting of Thrive Themes’ speed optimization was finally finished.

In this upgrade, Thrive team re-organized all the assets and split the CSS, JS into pieces. With the help of HTTP/2 protocol the assets can be loaded concurrently on a single connection, which improves performance significantly.

And now, there is no need to load the big fat CSS, JS files while loading the pages, instead, it only loads the required CSS, JS files in pieces.

Let’s check and see what Project Lightspeed and Clearfy can do to help further improve the Google Core Web Vitals score.

Thrive Themes

First Stage: Modular CSS, JS files

The Old Thrive Themes

Before Project Lightspeed, the CSS, JS files of Thrive Themes are REALLY FAT. Take below files for example:

  • Theme-template – CSS > 500 KB
  • Thrive Architect – CSS > 930 KB
  • Thrive Architect – JavaScript > 270 KB

The overall size of these 3 files already exceeds 1.5 MB.

After Project Lightspeed

After moving to modular management of the CSS, JavaScript files,

  • Theme-template – CSS < 51 KB (split into 3 separate files)
  • Thrive Architect – CSS = 0.3 KB
  • Thrive Architect – JavaScript = 121.3 KB (split into 7 separate files, or more)

The overall size of these files now is merely 172.6 KB.

To allow existing users to have smooth transition and upgrade with Project Lightspeed, in Thrive Theme Builder one can find a simple one-click wizard to walk you through the whole process to analyze the site and optimize the assets. After that, with a little bit of fine tunes you will find the performance of your site improved a lot!

Thrive_suite_small_outline

Below steps are for Thrive Themes’ existing users’ reference only. If it’s your first time installing Thrive Themes, congratulations, you are already using the optimized version.

Project Lightspeed

First of all, go to Thrive Theme Builder, locate Site Speed and then click on the Project Lightspeed to start the journey.

Thrive Themes - Site Speed - Project Lightspeed - Site Optimization

There are 2 main steps for the whole process:

  1. Site assets analysis
  2. Asset Optimization
Thrive Themes - Project Lightspeed - Start - Site Optimization

Step 1 – Analyze the site

How long will this step take depends on the scale of your site. For smaller site it requires only few seconds to complete the analysis. For larger site, it may take 1 to 2 minutes.

Thrive Themes - Project Lightspeed - Step 1 - Analyze the Site - Site Optimization

Once the analysis is done it will show the amount of optimized assets.

Step 2 – Asset Optimization

Next step, click the Continue Optimization button. It will process and optimize all the assets identified on your site.

Thrive Themes - Project Lightspeed - Asset Optimization - Site Optimization

Longer time can be expected for this step. 1 to 2 minutes will be required for smaller site (like mine). For larger site, it may take more than 10 minutes.

Thrive Themes - Project Lightspeed - Asset Optimization Finished - Site Optimization

Once it’s finished, go back to the control panel and then switch on “Display optimized assets on the front end of your site” to activate the Project Lightspeed.

Thrive Themes - Project Lightspeed - Site Optimization

Step 3 – Fine Tune & Remarks

After activating project lightspeed on my site I do experience issues such as page break and content shift. If you ever encountered same issues on your site, make sure to check each of the page and follow below steps to get the issue resovled.

  1. Clear Caches
  2. If ever distribute CSS, JS via CDN, make sure to purge the caches on CDN as well.
  3. If ever utilize other optimization plugins, such as Flying Scripts, Clearfy, make sure to deactivate these plugins and then repeat above 2 steps.
  4. For pages/contents with issues such as break and shift,
    • Pages – open the templates from Thrive Theme Builder and Save the template again.
    • Menu – go to Thrive Dashboard > Global Elements > Headers, open/edit your default Header and Save the Header again.
    • Thrive Ultimatum – I also observed that if Ultimatum is running on the site, it may cause content shift.
      To solve the issue, simply go to Thrive Ultimatum, edit the campaign, edit your ribbon and Save the ribbon again.
    • Thrive Leads – Similar issue as Thrive Ultimatum.
      To solve the issue, go to Thrive Leads, edit the Opt-in Form and Save the Form again.
  5. Once all the above are done, re-activate the optimization plugins one by one and check the performance score to fine tune corresponding configurations.

Per my experience, all the page break, content shift issues can be resolved without needing to upgrade to the fixed versions released after Project Lightspeed.

Clearfy Pro – Site Optimization

Assets Manager

I would say that again, the Assets Manager function of Clearfy is highly recommended for improving WordPress site performance. Especially with convenient and beautiful UI, UX design.

After Project Lightspeed, the CSS, JS files of Thrive Themes have been split into small pieces, the loading of assets will no longer be bottleneck anymore. So there is no need for us to use Flying Scripts plugin and the “defer to footer” function in Assets Manager. (for my site specifically)

In Assets Manager, we utilize the Disable function a lot to unload CSS and JS files. In average, it saves 50 to 200 KB assets usage when loading the pages.

Clearfy Business

Results

Now, let’s take a look of the effects of both Thrive Themes Project Lightspeed and Clearfy Pro to the site speed.

Here we considered 4 different types of pages on my site:

  • Home – Home Page
  • Notes – Blog Page
  • Silo – Silo Page
  • Post – Post Page
PageSpeed Insights - with Thrive Themes Project Lightspeed and Clearfy - Site Optimization

1 – Old Thrive Themes | no GA | no Clearfy

It’s the basis version of the comparison. On the old version of Thrive Themes, we removed Google Analytics codes and Clearfy plugin.

2 – Project Lightspeed | no GA | no Clearfy

Following above steps to complete the upgrade for Project Lightspeed, there are significant improvements to the Google PageSpeed Insights score. Up performed for 20 points in average.

3 – Project Lightspeed | GA | no Clearfy

After that, we put the Google Analytics scripts back to the site. Now, we can see clearly how GA affects the site speed.

4 – Project Lightspeed | GA | Clearfy

As the final step, we utilize Clearfy plugin’s functions to further improve the performance.

  • Assets Manager – removed unnecessary assets per page/page type level
  • Remove unused functions
  • Improve browser caching for Google Analytics

Ta-da!

Now we can see that for the 4 different types of pages we have got scores above 80. (except for long article posts, the best we can have for this kind of post is 70)

And the Google PageSpeed Insights score is now over 90 for the home page!
(Right now, I turned on Thrive Ultimatum so there will be 2-5 points decrease)

PageSpeed Insights - after Thrive Themes Project Lightspeed and Clearfy - Site Optimization

Conclusion

In this review it’s easy and clear for us to know how Project Lightspeed and Clearfy can help to improve the site speed.

If you are interested in Clearfy Pro, you can visit their official site and test with the free plugin first.

Pricing of Clearfy Pro

(Swipe to see more plans on Mobile)

PlanSmall
Business
Business
Revolution
Unlimited
# of sites350unlimited
Annual
Subscription
$39$125$199
Lifetime Deal$99$369$550

And now, Thrive Themes is no longer the big fat theme builder. With all the plugins in Thrive family I believed we can make difference and have better website design than others.

If you are interested, just go and check Thrive Themes’ official site and you will be surprised what they can do with website design, online marketing and e-learning.

Thrive_suite_small_outline

The-Plugin-With-the-Best-Video-Experience-440X231

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *