Using the Site Speed Section in Thrive Theme Builder

Thrive Theme Builder gives you the possibility to quickly and easily set up basic site speed related settings, to get a head start in optimizing your website’s speed.

In order to set these up, first, you need to access the Thrive Theme Builder dashboard and its “Site Speed” section. To do that, hover over the “Thrive Dashboard” item from the left-side menu of your WordPress admin dashboard.

Then click on “Thrive Theme Builder” from the sub-menu that opens:

Now click on the “Site Speed” section from the left side of the Thrive Theme Builder dashboard:

This will open the “Site Speed Panel”, where you can set up the site speed related settings as follows:

There are four different sections in this panel that you can use:

• Project Lightspeed
• Image Optimization and Delivery
• Minification and Caching
• Accelerated Mobile Pages (AMP)

Important!

The “Site Speed Panel” allows you to set up predefined settings quickly and with no hassle, but the whole process of speed optimization is much more complex than what can be covered in these predefined settings.

Please keep in mind that the options/configurations from the “Site Speed Panel” are not exhaustive, they do not cover every aspect related to speed optimization. Configuring this will not mean that everything related to site speed will now be set up/enabled for your website, or that other settings (like “Lazy Loading” for e.g.) become redundant.

You can either click on the section you want to set up from the left bar of the “Site Speed Panel”:

Or, you can click on the section you want to set up directly in the “Site Speed Panel”:

We will take each of these, one by one, to showcase what you can set up using these sections.

1. Project Lightspeed

Project Lightspeed is what we’ve called our asset optimization process, and it is a tool that you can use in order to optimize the CSS and JavaScript files that are to be loaded on your site.

As this is a more complex tool, we have created a separate article about it, so please check it out if you need help using this tool.

2. Image Optimization and Delivery

This second section in the “Site Speed Panel” allows you to set up and use tools/servers that will optimize your images, in order for your website to perform faster. This way, you can make sure your images will be compressed, and served at the right dimension from a CDN (content delivery network).

To do this, first access the “Image Optimization” section. Either click on it directly, from the “Site Speed Panel”, or click on it from the left bar of the panel:

On the page that opens, you will see two tabs, representing two solutions/plugins available that you can choose from:

• Optimole – which is the fully automated solution
• Smush – which is the basic, no-cost solution

Optimole

Optimole is the plugin, that we recommend because it offers more, it has a more “hands-off” approach (so it is more automated), and it covers all the bases of image optimization. If you use Optimole, the images on your website:

• will be compressed automatically;
• will be rendered automatically, at the right dimensions that they are displayed at;
• will be served from a CDN (content delivery network), a server that is close to the location of the website visitor, so they will be displayed faster.

The services offered by Optimole are free up to 5,000 hits per month. So please be advised that if you will need more, you will also have to upgrade to the paid version of the plugin.

We have full integration with Optimole, so if you will choose to set up this plugin here, the images you use in your Thrive products will be automatically optimized. Here are the steps to do this:

Install the plugin

Click on the “Install Now” button next to Optimole:

The plugin will be installed automatically on your website and you will be redirected to the activation page.

Register & connect an account

Before being able to activate Optimole, you will need an Optimole account, and an API key to connect that account to your website.

If you have previously registered on their website and you already have an API key, then click on the “I already have an API key” button and enter your API key.

If not, and you do not have an API key yet, then click on the “Register & E-mail API key” button:

Another field will appear with the admin email address for your website. Check whether this is the email address you want to use to register to Optimole. If you want to use another email address, you can simply delete the current one, and replace it with the one you want to use.

Once you made sure the email address is the suitable one, click on the “Register & E-mail API key” button again:

In a few seconds, you will be registered to Optimole and you will receive an email with the API key that you need to use to connect your account.

Look for the welcome email from Optimole in your inbox and when you have found it, copy the API key from it.

Then, come back to the setup page (“Connect account” part), paste in the “API key” in the designated “API key” field (below the notification message):

After you completed the “API key” field, click on the “Connect to Optimole Service” button next to the field:

The connection process will take a little while, after which the plugin will be activated on your website and you will be redirected to the Optimole dashboard. There a message will let you know that image optimization is now running on your website:

You will be able to access this Optimole dashboard anytime, by hovering over the “Media” item from the left-side menu of your WordPress admin dashboard, and clicking on “Optimole” from the sub-menu that appears:

Statistics about “Monthly Usage” and “Last optimised images” will also be available here, and you can check the “Settings” tab anytime if you would like to find out more about the configured settings:

Configure Optimole for Thrive

The next step is to configure the plugin by applying the recommended settings that best work for Thrive products. Go back to the “Image Optimization” section of the “Site Speed Panel”, just like described above.

You will see that the plugin is now active. Then, click on the “Configure Optimole for Optimal use with Thrive” button:

A warning message will appear, letting you know that doing this will configure Optimole with the recommended settings for Thrive products. Keep in mind that if you have previously used Optimole, this may cause some of your existing settings to be lost.

Click on the “Yes, configure Optimole” button, to configure this plugin with our recommended settings:

After you do this, Optimole will be configured with the settings that best work with Thrive products:

Note: In case you change something related to these recommended settings in the Optimole dashboard and you want to restore the right settings for Thrive, you can easily do that.

Come back to the “Image Optimization” section here anytime, and repeat the same steps starting with the “Configure Optimole for Optimal use with Thrive” button, in order to configure the settings again, in just a few clicks.

Smush

Smush is the other plugin you can opt for, in the “Image Optimization” section of the “Site Speed Panel”. This plugin is less automated than Optimole.

With Smush, you have to upload images and then compress them, when they come up in the Media Library. Also, if you want to have CDN support and adaptive images, you will have to upgrade to Smush’s pro plan.

Nevertheless, if you are on a budget, their free/no-cost plan can be a solution for you.

If you want to use Smush, then first click on the “No Cost” tab to open it. Then, click on the “Install Now” button next to the name of the plugin:

You will see that in just one click, the plugin will be installed & activated. However, since we do not have full integration with Smush, after you install and activate the plugin here, you will have to configure its settings yourself.

In order to do that, you can access the Smush dashboard anytime by clicking on the “Smush” item from the left side of your WordPress admin dashboard (you might need to refresh the dashboard to see it):

Then, you will be taken to the Smush dashboard and you can start configuring the different settings of the plugin.

3. Minification and Caching

This section allows you to install a caching plugin, using a one-click setup process, to optimize the speed of your website.

What these plugins do, widely speaking, is that they minify/compress what’s happening on the back-end of your website (codes/scripts for example), and they also use caching to make your website load faster.

First access the “Minification and caching” section, by clicking on it directly from the panel, showcased above, or by clicking on it from the left bar of the “Site Speed Panel”:

Then, you will see all of the available caching plugins: WP Rocket, SiteGround Optimizer, WP Fastest Cache and W3 Total Cache:

While WP Fastest Cache, SiteGround Optimizer and W3 Total Cache are free, you will need a Premium account for WP Rocket. They are highly rated caching plugins for WordPress. Choose one of them that you will use and configure.

WP Rocket

One of the recommended caching plugins is WP Rocket. For this one, we have created a separate article, that you can check out here.

The article goes into details about how to configure the plugin with the recommended settings, and it also shows you which those settings are.

SiteGround Optimizer

SiteGround Optimizer is designed to improve WordPress website performance on any hosting environment.

To use Siteground Optimizer on your website, click on “Install Now”:

After the installation is complete, you’ll be able to activate the plugin:

You’ll next have to configure the plugin for optimal caching with Thrive:

You will be asked if you want to overwrite your existing cache settings. if so, proceed with the action:

This will ensure that the plugin is configured with the recommended settings. Once the process is complete, you’ll get this success notification:

SiteGround Optimizer has now been successfully installed and configured on your website:

WP Fastest Cache

If you want to use WP Fastest Cache, click on the “Install Now” button next to it:

This will install the plugin automatically on your website (you will be able to find it anytime in the “Plugins” section of your WordPress admin dashboard).

Then, click on the “Activate” button that appeared after the installation, next to WP Fastest Cache:

You will receive a notification message at the upper-middle part of the panel, letting you know the plugin was activated successfully:

The next step is to click on the “Configure for Optimal Caching with Thrive” button:

Now, all you have left to do is to click on the “Yes, configure the cache” button, from the warning message that appeared:

If you do this, WP Fastest Cache will be configured automatically with the recommended settings that work best with the Thrive products. You will not have to configure these yourself, this will be done automatically.

Note: Please be advised that if you have previously set up this caching plugin, configuring the cache here will overwrite your existing cache settings. This may result in some of your existing settings being lost.

Once the plugin is configured you will see the “Configured” label next to it:

If you will want to, you can take a look at the predefined settings that have been automatically configured in the WP Fastest Cache plugin for Thrive products.

To do that, go to the left side menu of your WordPress admin dashboard, and click on the “WP Fastest Cache” item, that appears after you finish the setup in the “Site Speed Panel” of Thrive Theme Builder (you may need to refresh the WordPress admin dashboard to see it):

This will open the page with your WP Fastest Cache Options and you will see the recommended settings for Thrive Products configured:

W3 Total Cache

The third caching plugin that you can use in the “Minification and Caching” section is W3 Total Cache. The process of setting this up is exactly the same as the one for WP Fastest Cache.

To use this plugin, first click on the “Install Now” button that can be found next to it:

This way, the W3 Total Cache plugin will be automatically installed on your website. Then, click on the “Activate” button that appeared, in order to activate the plugin:

Once the activation is done, you will see a notification message about it appear for a few seconds in the upper-middle part of the panel:

The next step is to click on the “Configure for Optimal Caching with Thrive” button, that appears after the plugin is activated:

Lastly, all you have left to do is to click on the “Yes, configure the cache” button, from the warning message that appeared:

Just as in the case of WP Fastest Cache, here as well, if you click on this button, the caching plugin will be automatically configured with the recommended settings that best work with Thrive products. You will not have to configure any of the settings yourself.

Note: However, please keep in mind that if you already used W3 Total Cache prior to this time, configuring the cache now (clicking on the “Yes, configure the cache” button) could mean that you will lose the existing settings you previously had for this plugin.

After you click on the button, the cache will be configured, and you will see the “Configured” label appear next to W3 Total Cache:

In case you will want to see what are the recommended settings that have been automatically configured in the W3 Total Cache plugin for Thrive products, do the following:

Go to the left side menu of your WordPress admin dashboard, and click on the “Performance” item, (this appeared after you have finished configuring the plugin in the “Site Speed Panel”):

This will open the W3 Total Cache dashboard and you can access different sections, like the “General Settings”, or the “Minify” section, that appear in the left side menu, to see the recommended settings for Thrive Products configured.

Here you can see a list with the recommended settings that we configure automatically for W3 Total Cache:

'minify.reject.logged' 

true

'minify.js.enable'    

true

'minify.js.header.embed_type'

'nb-defer'

'minify.js.body.embed_type'

'nb-defer'

'minify.js.combine.header'

true

'minify.js.http2push'

true

'minify.reject.files.js'   

wp-includes/js/jquery/jquery.js

'minify.reject.files.js'   

wp-includes/js/jquery/jquery.min.js

'minify.reject.files.js'   

wp-content/plugins/thrive-visual-editor/editor/js/dist/modules/*.js

'pgcache.enabled'

true

'minify.enabled'

true

'minify.error.notification'  

'admin'

'minify.html.enable'     

true

'minify.html.inline.css'

true

'minify.html.inline.js

true

'minify.html.strip.crlf' 

true

'minify.css.combine'

true

'minify.css.http2push'

true

'minify.css.imports'

'bubble'

'browsercache.cssjs.cache.control'

true

'browsercache.html.expires'

true

'browsercache.html.cache.control'

true

'browsercache.security.referrer.policy'

true

'common.track_usage' 

true

'objectcache.enabled_for_wp_admin'

false

Restore Settings

If later on, you change the recommended settings in the WP Fastest Cache or W3 Total Cache dashboard, you have the option of restoring them anytime, in the case of both of these caching plugins.

To restore the recommended settings, go to the “Minification and Caching” section of the “Site Speed Optimization Panel” again and simply click on the “Restore recommended settings” option, next to the plugin you have previously configured:

This way the settings will be restored to the recommended ones that best work with Thrive products.

Important!

The recommended settings that are automatically applied, when you configure the plugins, are compatible with the Thrive products, they are the optimal ones that work best with our plugins/theme.

However, we can’t vouch for other plugins. We cannot guarantee how these recommended settings will behave with other plugins that you might have on your website.

This is why we also recommend that you test things after setting up one of these caching plugins, to see how they might affect your other plugins. This way you can make sure that the configured settings will work properly with your other plugins as well, not only with the Thrive products.

4. Accelerated Mobile Pages (AMP)

Last but not least, in the “Site Speed Panel”, you also have the possibility to use the “Accelerated Mobile Pages” technology.

“Accelerated Mobile Pages”, or AMP for short, is a technology developed by Google for creating faster and more optimized content for mobile devices. If this technology is enabled on a page/post, the visitors of the respective page/post, who view it on a mobile device, will receive a ‘cached’ version of the content, directly from Google’s servers. This will make the content load fast.

We have built the AMP technology into Thrive Theme Builder, in order to give you the possibility to build AMP content if you want.

However, please bear in mind that AMP is not the best solution for everyone. If you are not familiar with this technology and you are not sure whether you should enable it on your content, watch the video here, to get further details.

In order to enable AMP, click on the “Accelerated Mobile Pages” section of your “Site Speed Panel”:

This will open the dashboard:

Note: The AMP integration is still in its BETA version. This means that we are doing further development on it, which is why we do not recommend using the options from the “Accelerated Mobile Pages” section on your production site yet.

Also, please keep in mind that not all content can be converted to AMP content. Some examples would include “Tabs” elements, “Toggle” elements, or forms created with the “Lead Generation” element.

Then, click on the switch next to the “Enable AMP” option on the page that opens:

This will open the AMP options you can use, like:

• choosing which content type to enable AMP on;
• converting all your internal links to point to AMP URLs;
• and choosing whether or not to install Google Analytics on AMP Content.

Using all of these options is detailed in our AMP quick start guide here. So if you need further details on these, please check out the guide.

These were the ways in which you can set up and use the “Site Speed” section of the Thrive Theme Builder dashboard. If you need even more details about this, check out this blog post.

If you want to get even more familiar with Thrive Theme Builder, take a look at our knowledge base section here.