The Total WordPress theme is already well optimized for speed, but of course there are always more you can do. Below are some basic tips to help you speed up your site while using this specific theme. These are just some of the most important things for a fast site.
Table of Contents:
- Quality Hosting
- Disable Plugins
- Select Plugin Usage
- Google Page Insights
- Combine & Minify Scripts
- Image Sizes
- 3rd Party Resources
- Disable jQuery Easing
- Optimize Header Menu Dropdowns
- Use Standard Fonts
- Disable Post Types
- Disable Theme Features
- Disable Customizer Panels
- Disable WooCommerce GeoLocate
- Fixing Scroll Lag
- Recommended Plugins & Services
Use A Good WebHost
Where you host your website is going to make the biggest difference in how fast or slow your website loads. Below is a screenshot of Square Media demo showing a perfect score (according to Gtmetrix) and loading in under 1 second. We don’t use ANY optimization plugins on our demo sites, these scores and speeds are all from having good WordPress hosting.
WordPress is resource intensive (as opposed to a standard HTML site) as it needs to query the database for most of it’s output. Also Total is not a simple blogging theme, it is more advanced so it does use a little more “juice”. In order for your site to load quickly the most important thing is to have a good server.
I personally use WPEngine for all my WordPress powered websites which is a great hosting company (from my experience). Of course your needs may not be the same as mine, so just make sure your host can actually support your demands. Many people just buy whatever is cheap and are done…you must properly look at your traffic and server usage and purchase a plan that actually suits your needs. And if your websites are all WordPress powered you may want to consider using a Managed WordPress Host which are setup specifically for WordPress.
Use Caching – Crucial!
Caching is VERY important it will speed up your site greatly and for most shared hosting plan it’s basically a requirement for your site not to crash. On my host (WPEngine) caching is already built-in so there isn’t anything for me to do. Other hosting companies may not have caching built-in so you will need to use a caching plugin.
Disable Unused Plugins
If you aren’t using a specific plugin, disabled it! There is no need to run extra functions on your site if you aren’t using them. Also Total does include both Slider Revolution and the LayerSlider plugins, I would suggest only using 1 slider plugin on the site to keep things faster (I personally much prefer Slider Revolution). With that in mind you should only have 1 plugin for each functionality. There is no need for having multiple plugins that accomplish the same thing, in fact in some cases (such as having multiple backup plugins) it can cause your site to crash or load very slowly.
Be Careful With The Plugins You Install
Not all plugins are well coded. So whenever you install a new plugin be sure to test things out and make sure your site is still running smoothly. Below is a list of plugins that aren’t even allowed to be installed on some shared WordPress hosting plans because they are known for slowing things down:
- Query Monitor (great plugin for finding issues on the site but really slows things down so make sure it’s only active when in use and keep de-activated most the time)
- Broken Link Checker
- Fuzzy SEO Booster
- WP PostViews
- Tweet Blender
- Dynamic Related Posts
- SEO Auto Links & Related Posts
- Yet Another Related Posts Plugin
- Similar Posts
- Contextual Related Posts
Do Not Focus on The Google “Page Insights” Score
While the Total theme can score very high on the Google Page Speed Insights with little to no customization (depends mostly on your server) in no way should you be concerned with the actual score. If your website isn’t running fast most of the “tips” recommended on the Google Page Insights will make little to no difference in your actual site loading time – these are mostly micro-optimizations that would have an affect on a site like Google with millions of visitors but have little affect on your average website. It is more important to look at your actual site loading times using a tool such as GTMetrix or Pingdom Tools and look at the “waterfall” to see what is taking the longest to load on your site and fix those issues.
Here is a great article explaining why Google Page Speeds Scores aren’t as important as you may think and this is also another great article “F*ck PageSpeed” (use of harsh language on this article – viewer discretion is advised).
Even Google’s own page that provides tips on speeding up your site get’s a sub-par score (but it loads very very fast), see below:
Use a CDN for Serving Static Resources
Using a CDN to serve your static resources is one of the best ways to speed up your site, especially if you are on a budget hosting plan. Static resources usually take up most the loading time for your site so by using a CDN that hosts your resources on data centers across the world on very fast servers it can really speed things up. Check out our list of the top free CDN companies.
Combine & Minify Scripts
The Theme scripts are already minified but the theme is optimized to load certain scripts only as needed so they aren’t combined into a single script. Now, some optimization sites recommend combining scripts but it won’t always speed up the site so you will want to test and see if it helps your site speed or not (it may actually be faster to load all the scripts independently).
For combining and minifying scripts my favorite free plugin is Autoptimize, but check with your hosting company first because some hosting companies have this already included, such as SiteGround which offers their SG Optimizer plugin with the capability built-in.
Check Image Sizes
One of the biggest reasons for a poor loading time (or Google page speed score if you care about that) is having very large images on the site. So make sure images displayed on the site are optimized and you aren’t displaying full/massive sized images.
Now, when it comes to images sometimes having large or many images on the page/site can cause your site to have a poor score when testing using Google Page Insights or other testing utilities, however, this doesn’t mean you need to “fix” anything. If the page is still loading fast then you have nothing to worry about. Remember what is important is SPEED not “scores”.
But it is good to always look at a page and think to yourself “is this image needed” or “can I display less items” and adjust accordingly. For example if you have a page with a grid set to display 12 posts and each post displays an image, perhaps you may decide to instead display 8 posts to limit the number of images loaded by 4. Or maybe you have an image added to a page that doesn’t really provide any value to the reader so you can remove it.
Remember…background images are also important. So be careful when setting background images on the site, these should be optimized as well. Besides slowing down your site loading time, having a very massive set as a background can also cause some lag when scrolling down/up the page as well as when shrinking the browser window.
Limit 3rd Party Resources
If you are loading 3rd party scripts on the site this can really affect your loading time and site “scores”. This includes thing such as Facebook widgets, Google advertisements, embeded videos (Youtube, Vimeo or other), tracking scripts (like Google Analytics)…etc. So if you don’t really need something consider not adding it to the page or if you do need it, just keep in mind that it may affect your site speed/scores.
Disable jQuery Easing
jQuery easing is used in the theme by default for “smoother” animations for local scroll sections such as the one in this demo (click any menu item). However, if you aren’t using local scroll sections or you prefer to take advantage of native browser scrolling you can disable easing in the Customizer under General Theme Options > Local Scroll Links.
Use New (v5.3+) Header Menu Dropdown Methods
In Total 5.3 we introduced new new Header Menu Dropdown Methods to select from in the Customizer. Previously the theme always used the SuperFish js script for the header menu dropdowns which requires loading two extra JS files on the site.
By selecting one of the second two options (CSS Hover or On Click) it removes the need for those added scripts so they won’t be loaded. The reason why we kept the theme using Superfish JS by default was to prevent issues with customers updating that may have customized things via a child theme.
Use Standard UI Fonts
Google fonts typically load very fast but if you are looking for extreme speed then you may want to consider using standard browser font stacks instead. At Appearance > Customize > Typography > Body you can select the main Font Family for your whole site. If you select one of the “Standard Fonts” then your site will use whatever is the native font for the device your visitor is using and not load any 3rd party font families.
If you choose to use standard fonts for your site you can also go to the main Theme Panel and enable the option that reads “Remove Google Fonts” to disable them completely.
Disable Unused Post Types (slim the admin)
If you aren’t using any of the theme’s post types, then disable them. You can do so easily via the Theme Panel. This will NOT speed up your site, but it will slim down the dashboard, Customizer and WPBakery a bit to clean things up in the backend.
Disable Unused Theme Features
If you aren’t using any of the theme’s built-in features you should also disable them via the Theme Panel. Just like Post types, disabling any unused features will NOT speed up your site, but it will slim things down in the dashboard and very slightly increase the speed at which some pages are generated by the server.
Disable Un-Used Customizer Panels
Total includes an advanced function for disabling Customizer panels which will greatly speed up your Customizer experience. So if you aren’t going to be customizing various parts of the site you can disable these. Disabling sections won’t disable the actual options themselves but will hide the options from the live Customizer to make it faster while editing your other options. This of course will not speed up your live site but it will speed up the Customizer when you go in and make edits.
WooCommerce – Check Customer Default Address
If you have enabled Geolocate for the default customer address in the WooCommerce settings this can greatly slow down your site. We noticed over 8 second slowness when testing on our live server.
Scroll or WPBakery “Lag”?
If you are having trouble scrolling down a page or you are having a lot of lag while working in the WPBakery front-end composer (hard to scroll and select items) often times this is caused by having many large images on the page. For example if you have a portfolio grid, image grid, slider..etc with really massive images it can slow down the browser and make it seem like the site is lagging. You can test on a new blank page first to confirm the issue is in fact localized to the specific page and if so have a look at the modules on the page to make sure images are trimmed down to a decent size.
Recommended Plugins & Services
- WPRocket Plugin: All-in-one premium solution for caching and optimizing your site. Even if you are already using quality hosting this plugin can really super-charge things.
- Autoptimize Plugin: Free plugin for optimizing your WordPress site’s front-end HTML output and scripts.
- JetPack Boost Plugin – One-click optimizations that supercharge your WordPress site’s performance and improve web vitals scores.
- SG Optimizer: An optimization plugin for Site Ground Hosting customers for caching and optimizing your site.
- CloudFlare: A free CDN (premium plans also available) which also includes added optimizations to cache and speed up your site. We use the “Business” plan for our sites.