How to Install and Optimize the Total WordPress Theme

There are a lot of misconceptions about large multipurpose WordPress themes like Avada and the X theme and that they might bring your site to crawl. It is true that most multipurpose themes do have some bloat accompanied with them (especially when paired with WooCommerce), but when optimized correctly they can load fast. So today we are going to take an in-depth look at the multipurpose Total WordPress theme and see just how fast we can get it to load on Kinsta’s servers. This is not your typical WordPress theme review simply stating the features, we are going to put the Total WordPress theme through the ringer!

• What is the Total WordPress Theme?
• Fresh WordPress Installation
• Install Total WordPress Theme
• Optimize Total WordPress Theme

Total WordPress Theme

First off, the Total WordPress theme is created by the team over at WPExplorer, who also run a popular WordPress blog which many of you have probably read at some point in time. It is currently available on ThemeForest for $59.00, and 12 months of support for an additional $17.63. It is a modern multipurpose theme that can easily be used for any type of WordPress site, from online stores (supports WooCommerce), to blogs, forums (supports bbPress),  and even news sites. When it comes to large multipurpose themes like this, really anything is possible. If you can imagine it, you can build it. Check out some real-life examples of sites using the Total theme. Total sites come in all shapes and sizes, so if you’re wondering whether a site uses the Total theme, check out our WordPress theme detector tool.

Features

Being that it is a multipurpose theme it has a lot of features! We won’t go into all of them, but here are a couple important features to be aware of:

• WPML compatible – makes translating much easier
• Drag and Drop page builder (Visual Composer) with 90+ building blocks
• Includes Revolution, Layer sliders, and custom post types
• Child theme compatible and RTL Support
• SEO optimized, cross-browser compatible, and fully responsive for mobile-first indexing
• 40+ pre-built styled demos with XML demo data to get you up and started fast
• Theme customizer with over 300 theme options, easy to change everything such as Google Fonts
• Compatible with all popular WordPress plugins such as Yoast SEO
• Free theme updates and support directly from developers

Fresh WordPress Installation

We started with a fresh WordPress installation on Kinsta (Central US Google Cloud location) with the default Twenty Sixteen theme installed. SSL is setup and HTTPS is enabled. We wanted to run a few tests first before so that we know just exactly how much load time the Total theme adds. We ran 5 speed tests on Pingdom and took the average. As you can see below our fresh install clocks in at 383 ms.

Make sure to check out our in-depth tutorial on how Pingdom works and understanding the waterfall analysis.

Install Total WordPress Theme

The first thing we will do is install the Total WordPress theme and import the dummy data. You can follow their installation documentation or follow our steps below.

Step 1

You can purchase the Total WordPress theme over at ThemeForest. In this tutorial, we will be using the dummy data to get us up and going faster so we select the “All files & documentation” to download.

Step 2

Next, in your WordPress dashboard click into “Themes” under Appearance. Click on “Add New” and then “Upload Theme.” You will want to select the “Total.zip” file within the theme’s folder.

\themeforest-6339019-total-responsive-multipurpose-wordpress-theme\Total-3.6.0\Installable-Theme\Total.zip

Depending upon the speed of your WordPress host it might take a few seconds to install.

Step 3

Then click on “Activate.”

Step 4

The Total theme requires a few plugins you will want to install to access all the features included. Select the recommended plugins and click on “Install.”

Step 5

We then need to install the demo data. Under the “Demo Importer” click on the “Base Lite” theme. You can do the entire “Base” theme but this is not recommended as it is very large. The Base Lite is a slightly stripped down version.

Step 6

It will then prompt you to install “WooCommerce.” If you aren’t using this, we recommend leaving it disabled as WooCommerce can add unnecessary load. However, for this tutorial we will enable it so that we can optimize it later. Simply click on it and it will install, then click on “Next.”

Step 7

If you are on a fresh install select all of the content and click “Confirm Import.” Depending on how fast your WordPress host is, it may take a few minutes to import all of the content. On Kinsta’s servers it only took around 20 seconds.

And that’s it! Your demo data is now imported and your WordPress site should now look like the Base Lite demo as seen below.

Optional – WooCommerce Setup

If you use WooCommerce you will be prompted to finish the setup wizard. Check out our in-depth tutorial on how to setup WooCommerce. We did setup WooCommerce for the examples below.

Optimize Total WordPress Theme

Now for the fun part! We are going walk you through how to optimize the Total WordPress theme a little bit. First, we need to get a base speed to start with. So we ran 5 speed tests on Pingdom and took the average. As you can see below our baseline speed with the demo data installed clocks in at 1.06 seconds, with 54 HTTP requests, and a total page size of 1.4 MB.

Step 1 – Sync Google Analytics Locally (Optional)

Almost everyone uses Google Analytics, so it is fair that we set that up in our testing as 99% of people using the Total theme probably have that running. So we will too. The free Complete Analytics Optimization Suite plugin allows you to sync your Google Analytic’s script locally and can in turn speed things up slightly.

We say this is optional because Google doesn’t officially recommend this method, however, we have used this on a couple large traffic sites and it works fine. By syncing your Google Analytic’s script locally you can help improve your leverage browser caching warning and speed due to the fact that the user’s browser doesn’t have to make a roundtrip to download the file from Google’s external server. Here is an example below of the difference with the above plugin installed. Feel free to try it on your own site and run your own tests.

Normal Google Analytics Installed

First, we ran 5 tests on Pingdom with Google Analytics installed the normal way. As you can see, just adding Google Analytics adds about .25 seconds onto our overall load time and 4 additional HTTP requests. The team over at WPExplorer did a great job on the multipurpose Total theme as these are pretty fast load times to begin with. And of course, Kinsta’s servers are heavily optimized for performance. Kinsta uses server-level caching so there is no caching plugin needed.

Google Analytics Synced Locally

Then, with the CAOS plugin mentioned above, we configured it to sync Google Analytics locally. We then ran another 5 tests on Pingdom. This brings our total HTTP requests down by 2 and our load time down to 1.26 seconds. It is not a lot, but slightly faster than normal Google Analytics setup.

Step 2 – Disable Embeds

If you don’t use auto embeds, the first thing to do is to disable embeds. This generates an additional HTTP request on your WordPress site (as seen below) to load the wp-embed.min.js file. And this loads on every single page.

While this file is only 1.2 KB, things like these add up over time. The request itself is sometimes a bigger deal than the content download size. The easiest way to do this is to simply install a free plugin called Disable Embeds.

If you are interested in alternative ways to do this, see our in-depth post on how to disable embeds. We then ran another 5 tests on Pingdom. This brings our total HTTP requests down by 1 and our load time down to 1.25 seconds. Again, remember that all these things add up by the time we are done.

Step 3 – Remove Query Strings From URLS

Another common issue is dealing with query strings. Your CSS and JavaScript files usually have the file version on the end of their URLs, such as https://domain.com/file.min.css?ver=4.5.3. Some servers and proxy servers are unable to cache query strings. So by removing them you can sometimes improve your caching. There are free plugins like Query Strings Remover which can do this for you automatically in WordPress.

We then ran another 5 tests on Pingdom. As you can see it didn’t improve our speed at all, but it did improve our performance grade. It raised it from a 93 to a 99.

See our in-depth tutorial on how to remove query strings from URLs.

Step 4 – Image Optimization

The next step is to run image optimization on our WordPress media library. This is by far one of the most important optimizations you can make as images make up for on average over 60% of a page’s weight. Especially if you are utilizing large images in your slider on the Total theme. In this example, we are using the Imagify Image Optimizer plugin from the team over at WP Rocket.

In the plugin we go into “Bulk Optimization” under the media library. We leave the default compression level of Aggressive set and click on “Imagif’em all.” We were able to save 7.63mb out of 11.89mb! All with a single click.

We then ran another 5 tests on Pingdom. This reduced our load time again and reduced our overall page size by a whopping 30%. The default images included in the dummy data are fairly small to begin with, so you will easily see much faster performance gains when running this on a live unoptimized site.

Step 5 – Enable a CDN

The next step is to enable a content delivery network (CDN) on the site. This allows us to serve up our content faster all around the globe. Kinsta customers can use the Kinsta CDN that comes with their setup.

Step 6 – Disable Unnecessary Scripts on Homepage

Another way we speed up the site is to disable unnecessary scripts from loading on the homepage, and throughout the rest of the site. WooCommerce has a few scripts that aren’t required to load on the homepage. And if you aren’t using lightbox function, you can also disable that. To do this we use the premium Gonzalez plugin which allows us to individually disable scripts of our choice, such as the following.

//wpdev.ink/wp-content/plugins/woocommerce/assets/js/frontend/woocommerce.min.js
//wpdev.ink/wp-content/plugins/woocommerce/assets/css/woocommerce.css
//wpdev.ink/wp-content/themes/Total/assets/css/wpex-woocommerce-responsive.css
//wpdev.ink/wp-content/themes/Total/assets/lib/ilightbox/minimal/ilightbox-minimal-skin.css

We then ran another 5 tests on Pingdom. This brought us down to a 1.18 second load time and reduced our total number of HTTP requests by 5.

Step 7 – Optimize Slider Revolution Speed

We are not a huge fan of sliders, but they are still used quite a bit. Thankfully, there are a few things you can do in the settings of Slider Revolution to speed it up. We recommend turning on both the “Insert JavaScript Into Footer” and “Defer JavaScript Loading” options.

We then ran another 5 tests on Pingdom. This brought us down to a 1.15 second load time.

One issue we found with Slider Revolution though is that by default it won’t load all of its assets of the CDN. We found that the following three scripts were still loading from our origin server:

https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.slideanims.min.js
https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.layeranimation.min.js
https://wpdev.ink/wp-content/plugins/revslider/public/assets/js/extensions/revolution.extension.navigation.min.js

This is something that should probably be addressed with the developer of the plugin.

Remember HTTP/2

It is also important to remember that with HTTP/2, concatenation (combining) of your scripts is no longer required. In some instances, it can even slow your site down now. To test this we installed the free Autoptimize plugin, enabled HTML/CSS/JS optimization, as well as the CDN option. We then ran another 5 tests on Pingdom. In the end, it actually didn’t help the site at all, and was actually slower. With HTTP/2 and parallelism, it does a great job at loading multiple small files fast. However, if you aren’t running over HTTPS yet, which is what HTTP/2 requires, the Autoptimize plugin can help a lot!

Summary

All in all, we were pretty impressed with the Total WordPress theme from the team over at WPExplorer. Thanks to Kinsta’s fast servers, even a fresh install of it with Google Analytics clocked in at a speedy 1.26 seconds. And once optimized a little bit, a 1.15 second load time is pretty darn fast for a site with WooCommerce installed!  If this Total WordPress theme review was helpful, let us know below in the comments. We could do another deep dive into the Avada theme or Theme X if you want.

Brian Jackson

Brian has a huge passion for WordPress, has been using it for over a decade, and even develops a couple of premium plugins. Brian enjoys blogging, movies, and hiking. Connect with Brian on Twitter.

• LinkedIn
• Twitter