How to optimize the performance of your WordPress theme and website

Tips and best practices to easily improve website performance

The performance of a WordPress website or blog is a very important aspect in order to run a successful website. A fast and reliable website, online magazine or blog will not only make your readers and visitors happy, but since page load time and website performance is also a ranking signal at Google, a fast and well-optimized website may also help to achieve better rankings in search engines and increase your website traffic, at least on the long run.

How to improve the performance of your WordPress website

WordPress Security
Image Source: kpgolfpro – Pixabay.com / License: CC0 Public Domain

WordPress is a very powerful and most popular content management system to build incredible websites, currently running on more than 28% of all websites on the internet. But it is also a heavy ship loaded with tons of features, scripts and stylesheets. If you are using a complex and bloated WordPress theme with various included scripts and stylesheets, it may increase the loading time of your website even more, because all that additional stuff needs to be loaded when someone visits your website. This eventually may lead to performance issues which could affect user experience.

MH Magazine – Fast and SEO optimized WordPress theme

MH Magazine
MH Magazine – Popular Responsive WordPress Magazine Theme

While coding our popular MH Magazine WordPress theme we did not only have SEO aspects and best practices in mind. We also tried to optimize the code and structure of the theme so that performance won’t be an issue. We achieved this by making sure that only resources will be loaded, which are really necessary to view the current page and also by combining several scripts into less files. The results of these efforts are good scores in various speed tests. This article will cover some additional steps you can take to further optimize the performance of your WordPress website:

How to measure page load time and website performance

Pingdom
Pingdom Free Web Service (Image Source: Screenshot)

Before you can start optimizing the performance of your WordPress website, you’ll actually need to measure the performance first in order to determine what exactly is affecting the page load time of your website. There are lots of tools and websites available on the internet to measure and monitor website performance. For us the two most important are Google PageSpeed and GTmetrix.

It’s worth mentioning that whatever performance measurement tool you use, the performance score doesn’t necessarily reflect the real life performance of your website. This is especially true for the PageSpeed Insights tool from Google. Tests have shown that even websites with a poor PageSpeed Insights score are loading quickly. It’s important to understand that the insights from speed measurement tools are only standardized suggestions: The truth about PageSpeed Insights.

What affects the performance of your website?

When you are dealing with a slow website, you may be tempted to immediately contact the developer of your WordPress theme in order to complain about the slow website. This often comes down to the incorrect assumption that your WordPress theme is responsible for everything that happens on your particular website. This assumption is incorrect because there usually are several factors that will affect the performance of your site. A few of these factors are:

WordPress theme

MH Magazine Variations

Your WordPress theme is responsible for displaying the content from your database in a nice and appealing way. Basically the WordPress theme is responsible for the styling and layout of your website, not necessarily for all the functionality on your site. Advanced functionality usually is handled by WordPress itself or by additional WordPress plugins as well.

However, while your installed WordPress theme is only a small factor when it comes to website performance, a poorly coded and bloated WordPress theme can definitely affect the performance of your website in a negative way. That’s why it’s recommended to always choose clean and well-optimized WordPress themes without too much bloat.

Hosting environment

Hosting Server
Image Source: ColossusCloud – Pixabay.com / License: CC0 Public Domain

One of the most important factors when it comes to the performance of your website is your hosting plan. You can have the best optimized WordPress theme in the world, but if you’re running your website on a shitty hosting server, your site usually won’t achieve good performance benchmarks.

Always ensure that your chosen hosting plan reflects what you need based on the size and type of the website you’re running. For example if you’re running a website with extensive traffic on a low-priced shared hosting server, the performance of your website usually will suffer. In that case you may want to upgrade your hosting plan in order to have more server resources available.

Installed WordPress plugins

Deactivate WordPress Plugins
Image Source: Clker-Free-Vector-Images – Pixabay.com / License: CC0 Public Domain

Every plugin you’ve installed will add 3rd party code to your website and usually this needs additional resources in order to function properly. Plugins often also load additional stylesheets or scripts on your website and that may lead to an increase of database and / or HTTP requests. These requests usually will also affect the page load time and performance of your website. That’s why you should only use plugins that you really need in order to not waste valuable server resources.

Advertisements

Popup Advertisement
Image Source: JuralMin – Pixabay.com / License: CC0 Public Domain

A very common reason for slow page load are advertisements. Especially intrusive ads like popups or advertisements that are being loaded from 3rd party servers can negatively affect the performance of your website. Don’t go overboard when implementing ads on your website and choose your advertisers wisely in order to keep the load time of your website at a low level.

Analyze website performance with GTmetrix

GTmetrix
With GTmetrix you can test the performance of your website (Image Source: Screenshot)

For this article we will focus on GTmetrix because it does not only include PageSpeed results, but also YSlow which is the performance measurement tool from Yahoo. GTmetrix is very easy to use and one of our favorite tools for performance optimization. If you want to learn more about the tool, we can recommend this in-depth GTmetrix guide: A deep dive into the GTmetrix speed test tool.

To analyze your website with GTmetrix, just copy & paste your URL into the provided field on their website and you’ll get a detailed report of your site performance with many stats to analyze. You’ll see right away what on your website is already well optimized. In addition you’ll see suggestions with possible improvements for better performance. You can also compare the performance of your website with other websites (e.g. your competitors) by entering additional URLs.

Performance of the MH Magazine WordPress theme

Now we want to have a detailed look at the performance results of the MH Magazine theme. For our initial tests we did not use any tools or optimization plugins. We’ve analyzed the demo of the MH Magazine WordPress theme using GTmetrix. The results were already very good. Remember, these results were without further optimization, it’s just the theme itself:

MH Magazine Performance
Performance MH Magazine before optimization with WP Rocket (GTmetrix)

After the initial test, we’ve done some performance optimization, basically making use of caching and minification which is highly recommended while running a professional website. There are many WordPress plugins for performance optimization available on the market and it’s up to you to find the one which suits best for your personal needs and requirements. For our performance test we’ve used the popular WP Rocket caching plugin. After installing and configuring WP Rocket, the performance results for the MH Magazine theme demo improved even more:

MH Magazine Performance Optimized
Performance MH Magazine after optimization with WP Rocket (GTmetrix)

When having a look at the detailed GTmetrix report, it’s noticeable that almost all performance criteria are already optimized and there is not much room for further improvements:

Performance MH Magazine
MH Magazine – Detailed performance report after optimization with WP Rocket (GTmetrix)

When you compare the results before and after the performance optimization with WP Rocket, it’s noticeable that the PageSpeed score impoved by 2% and results for YSlow did even improve by 9%. However, please keep in mind that these results are for the MH Magazine WordPress theme. If you are using a different WordPress theme, the performance results after enabling caching and minification in WP Rocket may vary and you may need to further tweak your WordPress theme or optimize your site in order to achieve perfect performance results for your website.

Improve GTmetrix score with image compression

When you check the detailed GTmetrix report above, you’ll notice that basically the only thing that could be improved is image optimization. This score basically can’t be improved by your WordPress theme or by WordPress itself as it’s related to your uploaded images, meaning your website content:

GTmetrix Optimize Images

This basically means that the images on your website could be compressed without losing image quality. This results in smaller file size of your images which eventually may lead to faster page load. Luckily you can easily improve the image optimization score by making use of image optimization plugins. Image optimization could take your website near to a perfect GTmetrix score, at least while running MH Magazine in a clean and non-bloated WordPress environment.

How to configure the WP Rocket caching plugin

The WP Rocket plugin is extremely easy to configure. For the optimization tests we used a very basic configuration in WP Rocket. We’ve basically only enabled caching and minification, without making use of further performance optimization, for example through content delivery networks (CDNs). After installing WP Rocket, please ensure to enable the following checkboxes:

WP Rocket Settings

This will enable caching on your website which means that your website will serve static HTML files to your website visitors instead of performing all database and HTTP requests again for every page load. This may heavily speed up your website and also lead to a better user experience.

As you can see on the screenshot, we’ve also enabled minification and concatenation for HTML, CSS and JS code including Google fonts. This means that the code on your website will be minified and compressed in order to further speed up your website because this leads to less bloat and less files to load. If you want, you may also enable LazyLoad for images, iframe and videos to ensure that these elements only will be loaded once they are visible in the viewport of the browser.

In addition you can also enable the checkbox for “Remove query strings from static resources” as this will usually further improve your GTmetrix score as well:

WP Rocket Static Resources

Important: Please be aware that whenever you enable minification and concatenation, this may lead to unexpected display issues on your website due to the combined code and the modified order in which code may be executed. Also when it comes to caching, you may experience issues where changes on your website are not visible in your browser after updating your website.

Performance optimization with caching
Image Source: geralt – Pixabay.com / License: CC0 Public Domain

These caching issues usually are not issues with your WordPress theme or with WordPress itself and you don’t need to send support requests in such cases. Instead you should clear your browser cache, clear the cache of the caching plugin and also ensure that you’ve configured minification and concatenation in a way to prevent display issues on your website.

Alternative caching and performance optimization WordPress plugins

As mentioned before, for the performance optimization tests in this article, we’ve used the WP Rocket plugin. WP Rocket is a premium plugin, that means the plugin is not available free of charge. However, there are also plenty of free performance optimization WordPress plugins available. If you’re looking for free alternative plugins and more information about improving the performance of your website, these resources might be helpful as well:

What if the performance of your website is still bad?

Bad website performance
Image Source: PDPic – Pixabay.com / License: CC0 Public Domain

As mentioned initially in this article, there are many factors that are affecting the performance of your website. If you’re running a clean WordPress theme and in case you have optimized your website by following the instructions and best practices in this article, then you really should already have solved the most common performance issues on your website.

If you’re facing performance issues on your website, then we can only recommend that you have a closer look at the number of plugins you’ve activated on your website. Especially at how much server resources these plugins need. Also, if you’re running a successful website with many visitors, your hosting plan should be able to handle the traffic. That means if you’re running a high-traffic website on a low-priced shared hosting environment, then it’s very likely that you’ll run into performance issues at some point. In that case you may want to upgrade your hosting plan.

PLEASE: Get rid of unused WordPress plugins!

Delete unused plugins
Image Source: Tama66 – Pixabay.com / License: Public Domain CC0

Sometimes WordPress users contact us in order to find out why their website is very slow. When we then take a look at the particular site, in most cases these users have tons of plugins activated and usually these websites also are full of intrusive advertisements and 3rd party scripts. All these things need to load additional resources as well, and that eventually leads to a slower page load.

Really, if you’re running an extensive number of plugins on your website, you usually don’t need to wonder why your website is slow. In that case your website simply is bloated and can even become unusable if you’re taking this to an extreme level. We’ve seen websites with 50+ activated plugins and most of the installed plugins were just redundant and not even used by the webmaster.

In addition to many installed plugins, another common issue is that some WordPress users install several different plugins that basically do the same thing. If you’re running your website like that, it is hard to understand why you are surprised that your website is slow. The slow website simply is a logical consequence of the way how you are managing your site.

Debugging WordPress
Image Source: Mocho – Pixabay.com / License: CC0 Public Domain

It’s very important to understand that every plugin you’ve installed and activated usually will add 3rd party code to your website. The plugins may even load additional files, scripts and stylesheets which eventually will affect the performance of your website, usually in a negative way. If you are using a lot of plugins on your website, you are not only slowing down your site, but you are also increasing the risk of plugin conflicts. So, please always use WordPress plugins wisely:

  • Only install WordPress plugins that you really need.
  • Don’t use multiple different WordPress plugins which do the same thing.
  • Get rid of unused plugins, disable them or better delete them completely.

By the way, if you realize that you need a large number of 3rd party plugins in order to create the site you want, you may not be using the suitable WordPress theme for your purpose. In that case you could have a look if you can find WordPress themes that are more suitable based on your personal needs and requirements. Or you could at least try to reduce the number of plugins on your website in order to improve the usability and performance of your website.

Conclusion: Optimize the performance of your WordPress website

Performance optimization tips
Image Source: fancycrave1 – Pixabay.com / License: Public Domain CC0

In this article you’ve learned what you can do to improve the performance of your WordPress website for faster page load and better usability. It basically comes down to using a clean and optimized WordPress theme, enabling caching and minification on your website and ensure that you don’t get crazy when it comes to 3rd party plugins and scripts. Do you have any other tips and best practices to improve website performance? Please share them in the comments!

Share this with your friends

12 Comments

  1. Like most people I want my page to run a bit faster, and when I analyse my page with Google Insights it strongly suggests that I “Eliminate render-blocking JavaScript and CSS in above-the-fold content” amongst other things, but this is the biggest issue. How can I solve this?

    • Hi Oli, first of all it would be important to check what exactly your page is loading (e.g. scripts, stylesheets, etc…) as you may already be able to reduce this by disabling unused plugins and in general it might be necessary to load particular code above the fold for your website in order to function properly. Apart from that, you could enable caching, minification and concatenation as explained in the article and you should see improved performance results right away.

  2. Hello, I have problems with Google PageSpeed and I need to fix these problems. It says:

    Your page has 7 blocking script resources and 3 blocking CSS resources. This causes a delay in rendering your page. None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML. Remove render-blocking JavaScript.
    • Hi Leutrim, in general please note that what you see in the Google PageSpeed Insights are only standardized recommendations and these may not always make sense as it may be required to load some resources above-the-fold to display your website properly. However, you could of course enable minification and concatenation on your website and that should already solve most of these issues on your website.

  3. Hi there, I have tested my website with the GTmetrix testing tool and I got poor performance:

    PageSpeed Score: C (76%)
    YSlow Score: D (67%)

    I can see there are too many script requests at the beginning of the loading. Is there any way to improve this and move the loading of those scripts to the bottom of the website code? This way the page could show something instead of a white page while it is loading, because this is why visitors leave before the loading is complete. I hope you can support me. Thanks.

    • Hi Johnny, we don’t know what WordPress theme you are using or how many plugins you are running on your website. But you could definitely improve the GTmetrix score by enabling caching, minification and concatenation on your website as explained in the article.

  4. I am getting this message from Google PageSpeed Insights and need to know how to resolve this: Eliminate render-blocking JavaScript and CSS in above-the-fold content.

  5. I just installed and set up the MH Magazine theme and everything went fine. The page looks good. Unfortunately the PageSpeed score went down dramatical to 19/100 resp. 27/100 due to the pictures being too big/large. I optimised the images with the plugins Optimus and Autoptimize before and changed nothing except the theme. What went wrong?

  6. Wow, awesome explanation about speed optimization. Every business needs their website to rank high at Google in order to generate revenue, so speed optimization is a must to rank high in search engines. It can be done by choosing a good web host, using CDN, caching, minification, compression, minimizing HTTP requests, etc..

Leave a Comment

Your email address will not be published.


*