How to increase your WordPress site performance

Nowadays, if your website doesn’t appear on the first page of Google search results, it means that you are practically invisible to your potential users. And if you want Google to love you more and promote you to the top, one of the most important things you need to do is improve the performance of your WordPress website. Besides, your users will be happier if they do not have to go for a coffee first while your site is loading 😉

Let us take a look at what you can do to optimize your website’s performance.

1) Image optimization

If your website contains images, it is almost certain that they make up the heaviest part of the website. Typically, images account for more than 90% of the size of your website. So it makes sense to optimize them as much as possible, right? There are many techniques for this, and ShortPixel has developed 2 plugins for WordPress that will help you boost the performance of your WP website. Besides, you will not believe how easy these tools are to use!

ShortPixel Image Optimizer (SPIO)

This was their first plugin, and the origin of their success. 

ShortPixel Image Optimizer is a user-friendly and lightweight plugin that lets you compress all your images and PDF documents with a single click.

Let us take a random image from Unsplash as an example. The image we are linking to weighs 4.45 MB and has a resolution of 5184×3456. It looks like an image you would take with a regular camera. This is what it looks like when processed by ShortPixel Image Optimizer:

After setting a Lossy compression and a maximum size of 1920px, we reduced the size by 87.52%! Now it weighs only 398 KB. Impressive. And the quality of the image is almost the same.

If you want to check how ShortPixel’s image optimization service works with your images, you can test it with their web tool. You will be surprised how much they can reduce the size of the photos!

ShortPixel Adaptive Images (SPAI)

The ShortPixel Adaptive Images plugin optimizes your images like SPIO, but provides 2 additional services: a CDN and an image resizing/adjustment service. ShortPixel AI processes the original images taking into account the visitor’s viewport/placeholder and generates new URLs for the images according to the user’s settings. These are then displayed in place of the original images. These images are then optimized and served from our CDN with the appropriate size.

For example, let us take the following website. This is a GTmetrix report (an online tool that lets you check the performance of your WordPress website) before installing ShortPixel Adaptive Images:

And this is after installing ShortPixel Adaptive Images:

And installing and configuring SPAI is even easier than SPIO! This is literally an image optimization plugin that you can install and forget. Download it for your WordPress website now!

If you want to know more about both plugins, take a look at these documents:

– How does ShortPixel Adaptive Images compare to ShortPixel Image Optimizer?
– How does ShortPixel Adaptive Images work?
– How does ShortPixel Image Optimizer work?

What if I don’t have WordPress?

No problem, ShortPixel has got you covered. In addition to the two previous plugins, ShortPixel Image Optimizer and ShortPixel Adaptive Images, they offer the following services to take care of your images:

• A straightforward web interface to their API that is available for any PHP website (Magento, Joomla, Drupal, custom brew, etc.). More information about their Website Optimizer.
• A command line tool that optimizes image folders from the command line, so it can be configured as a cron job (or other task scheduler). More information about their Command Line Tool.
• A reducer API that allows you to resize an image based on the URL of the image. You can call it from any programming language that allows you to send a HTTP POST request. More information about their Reducer API.
• A Post-Reducer API that allows you to resize an image that is not accessible online by uploading it to their servers via a POST HTTP call. You can call the API from any programming language that allows you to send a HTTP POST request. More information about their Post-Reducer API.
• A PHP client library that provides a quick configuration and simple, fluid syntax for accessing ShortPixel’s services. More information about their PHP client library.
• An app for Zapier that allows you to resize images located in Dropbox / Google Drive folders via a workflow connected to Zapier. Since this is still in beta, you need to get an invitation from them. To learn more, here you can find additional information about integrating with Dropbox and here with Google Drive.

2) Get a good hosting

It is annoying to visit a website and see this for more than 0.5 seconds:

This is what happens when you get a hosting service from a company that offers hosting for $1 per month. You’ll have a server that is shared by many other people, all of whom use the same resources as you.

So maybe it’s time to switch web hosts! But where should you start looking? There are a few categories of hosting solutions, for all budgets and needs. Here we describe them and give our honest recommendations:

Shared hosting

This is the cheapest option, suitable for websites with low traffic (around 20,000 visitors per month or less) and without components that require a lot of resources (like WooCommerce or WPML on WordPress).

Best shared hosting providers:

• Cloudey: Very active in online forums, you will not find that many reviews, and that makes them a good option; nowadays the vast majority of reviews are mostly paid
• Lightning Base: A lesser-known provider whose website is not the best, but is one of the best year after year.
• Krystal: UK-based company, with satisfied customers and very good reviews in various Facebook groups and online forums.
• WebHostFace: ShortPixel was once using their services, so you cannot go wrong 😉

In our experience, you should avoid all hosting providers that belong to Newfold Digital, like BlueHost or HostGator. Also, we think you should stay away from GoDaddy, OVH, NameCheap, 1and1 and other low-cost providers. All of these have limited resources and a slow architecture with outdated technology. So why are they so popular? Easy, extremely low prices and affiliate marketing.

Also avoid SiteGround. In another post we will talk more about the subject, but in short, today they live from affiliate marketing, because they are neither cheap nor offer an extraordinary performance.

If you want more recommendations about shared hosting, we recommend that you do your own research, since everyone has different needs and every hosting provider offers something different, but for starters, here are the minimum requirements that you should pay attention to when looking for a new shared hosting provider:

• Avoid unlimited offers: In the hosting world, nothing is unlimited (disk space, domains, bandwidth…), and if the provider offers you that, it means that they are very limited in something else.
• Enough disk space: Calculate how much disk space your website needs (most of it is taken up by image files), and double that so you have enough space for at least one local backup.
• Good support: Make sure your host is there for you 24/7 and that you can reach them via chat, email or phone. You do not want your website to go down on a Sunday and have no one to help you. You can even try sending them a short e-mail or message and see how they respond or how useful they are.
• Free SSL certificates: Your hoster should support Let’s Encrypt, which offers free SSL certificates, and they should be able to install them for you. This is very important not only for the security of your users, but also for better search engine optimization, because Google does not like websites that are not https.
• Backups: A good hosting should at least provide free backups. If you choose a cheap plan, you usually have to pay to restore a backup, but at least you will have a backup.
• LiteSpeed: Try to choose a hosting provider that offers LiteSpeed or NGINX as web server. Apache is already too old and doesn’t offer the same speed advantages.
• Good reputation: Forget about the top results on Google. They are (almost) all paid. Do your research on Reddit, the WP Speed Matters Facebook group, forums like Web Hosting Talk or similar. You will find the best recommendations there.

Managed WordPress hosting

They are expensive but offer higher performance than shared hosting and do not limit hardware resources (at least in theory), but rather limit traffic to ensure high performance. As the name suggests, this type of hosting is suitable for businesses or individuals who don’t have the time or power to deal with the technical aspects, or for websites with high user traffic that outgrow shared hosting. Additionally, they provide you with their own user-friendly control panel with only the necessary options for managing your website.

Finally, it’s worth mentioning that if you’re looking for good support, you’ll find it here. Although that’s to be expected considering what you’re paying…

The drawback is that there are usually many restrictions on what you can install on your website. For example, you’ll notice that most options do not allow caching plugins like WP Rocket or WP Super Cache. Sometimes, they won’t even allow you to install certain plugins, such as image optimizers, backup creators, or others that can consume a lot of server resources. You also won’t know how many resources (CPU, RAM, etc.) they allocate to your site, although you could say that’s the point: you don’t have to worry about it and trust them to take care of everything.

Best Managed WordPress Hosting:

• Kinsta: It’s one of the most popular providers due to its ease of use and excellent performance. Not only that, their support is top-notch.
• Cloudways: Cloudways has an interesting formula; they let you choose the VPS (Virtual Private Server) you want (see below for what a VPS is), so you know exactly how much RAM or CPU you have, and then they add their control panel on top, allowing you to manage everything from there. In the end, you get the performance of a VPS and the ease of use of managed hosting. Compared to Kinsta, it’s slightly less user-friendly but delivers slightly better performance.
• Rocket.net: Don’t confuse it with WP Rocket, the caching plugin; Rocket.net’s secret lies in Cloudflare and its control panel. Very few options, only the necessary ones, and your website is constantly behind Cloudflare. Moreover, it’s impossible to deactivate it, so most of the time, your website will be served through Cloudflare and its hundreds of servers worldwide. Yes, this means you could use any other cheaper provider, set up Cloudflare yourself, and achieve the same results. But Rocket.net makes it much easier to get started.

VPS

With a VPS, you get a “part” of a server. The hosting company provides you with a Virtual Private Server and allocates resources to your account that no one shares with you, unlike shared hosting or managed hosting. Thus, you’ll get better performance than with those, and it’s ideal when your business starts to grow and you don’t mind having to deal with a few technical stuff.

It’s important to note that a VPS (Virtual Private Server) is cheaper but more complex to set up. You’ll need some technical knowledge and system administration skills to configure everything, from managing server updates to setting up the email server. In other words, you rent a server, and the provider gives you access to it and says, “do whatever you want.” If you need more user-friendliness but don’t want to lose all control as you would with managed WordPress hosting plans, it’s a good idea to combine a VPS with a “cloud panel”. Keep reading.

Best VPS hosting providers:

• DigitalOcean: offers unmanaged VPS hosting. If you are tech-savvy and can manage your server yourself, you should go for this provider.
• Linode: an excellent alternative to DigitalOcean, which also offers unmanaged VPS hosting.
• Hetzner: almost unbeatable prices for unmanaged VPS, only recommended if your business is based in Europe or United States, as it is a provider with servers only in those areas and known to perform the best there. An excellent combination that we always recommend is Hetzner+RunCloud (see below).

Cloud panels

As mentioned earlier, what do we do if we want the performance of a VPS but the user-friendliness of managed hosting? The answer is a VPS with a “cloud panel”.

In this case, you contract the server separately from the cloud panel (yes, you’ll have two bills), and then you connect them. To do this, each panel provider has its own instructions, but it usually involves accessing the server and running a series of commands. Once connected, the cloud panel takes care of managing the server: backups, WordPress installation, FTP accounts, and more. All with a few clicks.

Important note: Don’t expect the support team of these panels to guide you on how to do certain basic tasks. If the issue is related to WordPress, it’s your responsibility, not theirs.

The best cloud panels are:

• RunCloud: The best option for managing VPS that offers top-notch performance. It comes with excellent support and is compatible with NGINX and OpenLiteSpeed.
• SpinupWP: From the makers of ACF and WP Offload Media, here comes another wonderful product from them, a cloud panel to manage your VPS. It is one of RunCloud’s competitors and offers similar pricing with excellent performance as well.

Dedicated server

If you find yourself in a situation where Managed WordPress Hosting or a VPS from our recommendations is not enough, then you should opt for a dedicated server (or several). This means a whole server for your website, which may not guarantee the best speed unless the server is purchased from a good provider, but if it is, you’ll have top-notch performance.

Dedicated servers need to be managed by someone, and the performance you can get from them depends on how well that is done and how good the server’s hardware resources actually are. For this reason, we recommend that you get professional advice. You will definitely need it if your business is so successful 😉

3) Use as few plugins as possible

This situation is similar to a newly purchased phone or laptop. It comes with a lot of software that you do not use, and that makes the device slower. With WordPress, the same thing happens when you install a lot of plugins.

Try to keep the list of plugins as small as possible; use only the necessary ones, otherwise you will affect the performance of your WordPress. Here is what you can do to clean up your WordPress installation:

• In general, look at each plugin and ask yourself if you need it. If you do not need it, remove it. Do not keep it “just in case”. For example, do you have a plugin that gives a cool effect to the titles of the administration area? Not needed.
• Do you have two plugins that do the same job? Get rid of one. An example we often see: two cache plugins. This makes no sense, because caching your pages twice has no benefit.
• Are you using a large plugin only for a single function included in that plugin? Try to find a smaller plugin whose purpose is exactly the function you want, or you can even search Google for the code you need.

Remember, the goal is to reduce the number of plugins so WordPress does not have to load too much stuff.

4) Use good WordPress plugins to maintain the performance

A single poorly coded plugin can ruin your entire site and make it very sluggish. To choose the best plugin for each need, keep this checklist at hand. With time, you will be able to easily identify which plugins are the best in each category:

• Last updated: If a plugin has not received an update in the last 6 months, it usually means that it is outdated and probably has functionality or compatibility issues or even security problems. We advise you to avoid outdated plugins unless you know you can use them safely.
• Compatible with the latest WordPress version: If the plugin states that it is compatible with the latest WordPress version, it usually means that the developer has taken the time to test the plugin with the latest version of WordPress.
• Screenshots: This is one of the things that show whether the developer cares about the users or not, as some good screenshots will help them see if the plugin meets their needs or not.
• Good description: It’s important to have a good description so you know what the plugin does and how it works. If you have to install the plugin first to see how it works, that’s not a good sign.
• FAQ: Same as the screenshots. This shows that the developer wants you to understand how the plugin works.
• Average rating: Obvious, but be sure to check them against the number of reviews, because a plugin with a single 5-star rating does not mean it’s better than another with 37 4-star ratings. The single 5-star rating is probably from the author…
• Size: Imagine you want a plugin to add a Google Maps Gutenberg block to your website. Would you take a plugin that is 300 KB or one that is 3 MB? Usually a small plugin will be better coded, optimized and more efficient than a larger plugin, given that both serve the same purpose.
• Support: You’ll want to have good support in case something goes wrong. Check if the plugin or extension has a public area where you can view questions and answers. WordPress, for example, has public support forums. We also recommend that you contact the author(s) of the plugin directly and ask them a simple question. This is not about the answer itself, but about how the support handles your question.
• Developer profile: Rather nerdy ;-), but it’s nice to see who the developer is, what they do… It gives you a more personal feeling about the plugin.
• Test it: Create a test website on tastewp.com or a similar site and install the plugin in question there. A good plugin will keep things simple and follow the WordPress UI guidelines. If you need too much time to understand how the plugin works, or if the plugin has a highly customized UI, you should probably consider another option (although there are always exceptions, of course).
• Check the database: If you have the opportunity to have a test site with access to phpMyAdmin or a database viewer, install the plugin there, activate it, and then uninstall it. Then check the remnants of the plugin in the database tables. If it’s a good plugin, the plugin should clean itself and leave little to nothing behind.
• Avoid multipurpose plugins: f you want to add a small feature to your site that is not natively available in WordPress, you should find a plugin that does just that. For example, let us say you want to add an icon to your page created with WordPress’ native block editor. Why would you install a huge and bloated suite of blocks that happens to include an icon block when you can simply install The Icon Block?

5) Do not use a page builder

Interest in page builders increased significantly in the second half of 2010. WordPress was the most popular system for building websites and everyone wanted one. But WordPress did not have a nice and user-friendly way to create pages. It all depended on the theme itself. And that’s when page builders came into play.

Page builders made creating websites much easier. All you needed to do was install a plugin or two and voilà!, you could create pages by just drag and drop items. And the big boom came with Elementor. A small company from Israel created the most popular page builder today. Just take a look at Google Trends:

But we are already in 2023 and now people demand speed. Page builders have made everything much easier, but because they have to tailor it to millions of people at once, they add a lot of scripts, CSS and functionalities that have to be loaded on every page. This makes the page slow.

Fortunately, WordPress noticed how page builders ruin the user experience and decided to develop Gutenberg: a way to build your pages with blocks. It’s similar to a page builder, but different. You just add the blocks you need (image, heading, video…) and that’s it. And because it’s tightly integrated with WordPress (it is WordPress), it’s very lightweight and streamlined.

Elementor (or any other page builder) vs. Gutenberg

Just look at this comparison. We created this sample page on a new test site first with Elementor and then with Gutenberg blocks. Just a few colors, images and text.

When we open the Developer Tools of the browser and examine the page, these are the results with Elementor:

And this is when we create the page with Gutenberg:

With Elementor, the user has to load more than twice the resources and the browser takes more than twice the time to parse the document. And that’s just for a very small page!

These are the real results of a real browser, but if we apply a speed tester, things are just as interesting. This is the test result for the page created with Elementor:

And this is the same page created with Gutenberg blocks only:

Now, if you are thinking “Well… the difference is not that big…”, remember that this is an extremely simple example page. On a regular web page with sliders, lots of photos, animations, content… the difference is much more drastic.

Bottom line: Do not use a page builder for a new website. Or if your website already exists, just redesign it with Gutenberg. You will notice the difference.

6) Choose a good theme

Something similar happens with a theme. Let’s say you do not using a page builder and build all your pages with Gutenberg blocks. Well, you could ruin everything by choosing a bad theme.

A theme is what gives the website a look. We can divide the theme market into three categories:

1. Simple themes with one design and little to no customization. These are usually free and available on wordpress.org. A Good option.
2. Themes with some basic settings that allow you to change buttons, colors, fonts, or a few pre-made layouts. These usually require a monthly subscription to get access to all the features, but also offer a free limited version on wordpress.org. Also a good option.
3. Bloated themes with an infinite number of options that try to emulate a page builder without being one. That’s what you’ll find on most theme marketplaces like Themeforest. Of course, if you are trying to target the same audience as a page builder, you’ll be forced to include so many settings and features in your theme that the theme will slow down your website. Clear examples are Avada, The7, Betheme, Enfold, Flatsome, Salient, etc.

So we are targeting categories #1 and #2 and trying to avoid #3. Here is another comparison between a good theme and a bad theme.

This is the size and number of requests for one of the demos of the Enfold theme, a top seller on Themeforest:

The screenshot does not show it (it would be too big), but we see that Enfold loads 104 JS, CSS and font files, with a transferred size of 265 KB.

Now let us compare it with Blocksy, one of the best themes money can buy:

Here we can show you the full screenshot. Only 6 requests and 30 transferred KB. The numbers speak for themselves. Of course, this is not the only way to judge a theme, and it should not be, but it helps us see if a particular theme is worth choosing or not.

Below is a small and honest list of recommended themes that you will not regret choosing. Best themes for performance:

• Blocksy
• Neve
• GeneratePress
• Suki
• Kadence
• Genesis
• Astra
• Any standard WordPress theme (Twenty Twenty-Two, Twenty Twenty, etc.)
• Storefront

If these do not meet your requirements, there are many others that are great! Try to follow these guidelines. In our experience, this almost always guarantees that you will choose a good theme:

• Do not buy a theme that requires a page builder to make it work.
• Do not buy themes from mainstream marketplaces.
• Avoid themes that clearly market themselves as “multipurpose themes”.
• If you search, for example, “best themes for WordPress”, ignore the recommendations from the top results on Google. These are almost never honest recommendations from WordPress experts. Your best source of knowledge is communities like Facebook groups.
• Browse the WordPress theme repository, and if you see a theme you like, you should buy or use it if it does not contradict the previous lines.

7) Use a CDN

CDN stands for Content Delivery Network. With a CDN, your website’s resources are duplicated across a worldwide network of servers. This means that your website’s resources will load just as fast in your server’s country as it will for someone on the other side of the world. This is a must WordPress performance setup if your visitors are spread all over the world.

Here’s a quick list of the most famous CDNs for WordPress (and for regular websites) out there:

• Amazon CloudFront: This is the CDN offered by Amazon Web Services. If you use the Internet (and if you read us, you do), you probably use it, as companies like Spotify, Slack or Hulu use Amazon CloudFront.
• Cloudflare: It operates one of the most efficient CDN services in the world, and among many speed and security features they also offer DNS servers since not so long ago: 1.1.1.1. They usually partner up with hosting providers like Cloudways, SiteGround or Kinsta so you’ll have a very deep integration.
• KeyCDN: They offer very low prices, and even if you do not get the largest network, they usually work with hosting companies, so the setup is very simple.
• bunny.net: Guess who uses bunny.net? ShortPixel! The CDN that SPAI is using is based on bunny.net, so if you want to check out where their CDN has points of presence, have a look at this page.
• QUIC.cloud: This CDN was brought to all of us by the developers of LiteSpeed (the web server) and LiteSpeed Cache (the WordPress plugin). It offers free image optimization, page optimization and CDN services, with HTTP/3 and also paid plans for those who need more. It is, of course, very tightly integrated with LiteSpeed Cache, so if you have a LiteSpeed server, you must use it!

8) Cache your site

Multiple page caching services may be available between the user and the server and you did not even know it!

File based caching

Depending on the technology your website uses, you may have some plugins or extensions for page caching. These create HTML files on disk and serve them up on every request, instead of running PHP code and MySQL database queries for every page request. With WordPress, for example, the best are these (they are not all of them, remember that WordPress has more than 50,000 plugins!):

• WP Super Cache
• LiteSpeed Cache
• WP Rocket

It’s worth noting that LiteSpeed Cache can be installed on any WordPress website, but its caching functionality is only available on LiteSpeed servers. So if you do not have a LiteSpeed server, you should opt for WP Super Cache or WP Rocket.

Server cache

Some hosting providers offer you server-caching features under different marketing names. SiteGround offers the Supercacher feature, RunCloud gives you RunCache, Cloudways has Varnish (in this case they did not rename it). These are all server-level caching solutions, technically called “reverse proxies”.

A reverse proxy is a service that runs independently and sits between the client and the website, so it is not part of WordPress, and accepts requests to the WordPress server. Like a cache plugin, it provides a pre-saved copy of a WordPress page on request (although this is not the only function of a reverse proxy). The difference is that cache plugins require WordPress to run, which can become slow as the load increases. Tools like Varnish specialize in serving cache requests directly from the server and can be much more efficient than WordPress itself.

Note that server-based caching does not necessarily replace file-based caching plugins. For example, you can use your favorite caching plugin along with Varnish. This way, if something is not in the server cache, it will be forwarded to WordPress faster because the caching plugin probably has it.

Go check your hosting control panel and check all the cache features!

Browser caching

On the one hand, we have the cache levels that we control server-side (see above), but did you know that your customers can also cache your website so they do not have to request everything again when they revisit your site?

When you visit a website, your browser stores all the assets (JS, CSS, fonts…) on your hard drive so that they load faster on subsequent visits; the browser simply loads the assets from your hard drive instead of requesting them again from a distant server. This is called browser caching and is something you can control (somehow). This is also related to the famous “Leverage browser caching” or “Serve static assets with an efficient cache policy” advice you see on page speed testers.

All you need to do is configure your site to tell browsers how much time they need to save all assets before they need to be requested again. 6 months or 1 year is a good number because, after all, these resources do not change that often. The problem with this is that the configuration is not as simple as it seems, because any level of your website can override the specifications of another.

Feel free to take a look at our guide on the correct way to serve static assets with an efficient cache policy in WordPress.

9) Update your PHP version

If you use PHP, and you do if you use WordPress, make sure you use the latest version of it. You will definitely notice an increase in loading speed, especially if you are upgrading from PHP 5.6 to PHP 8.X. Kinsta has run some benchmarks and the results are clear. The latest version of PHP is the clear winner.

However, updating the PHP version instead of increasing your WordPress performance could cause problems on your website as it is a sensitive part. Make sure you extensively test all parts of your website after updating PHP version and have an easy way to rollback. To help you with this, you can try a sandbox WordPress system where you can test plugins and/or themes without fear of breaking anything. You probably will not have the latest PHP version, but at least an “almost latest” one. Here is a free sandbox system you can use: Quick WordPress Testing & Staging Sites – TasteWP

10) Optimize your code

There are several ways to optimize your website’s code, such as…

Reduce HTTP requests

Every time a web page loads, there are a number of HTTP requests and responses between the client (your browser) and the server. The more requests that are made, the longer it takes for the page to load. To reduce this number of requests, you can do several things:

• Use less code by following all the guidelines here 😉
• Use CSS sprites.
• Inline your Javascript (but only if it’s very small!)
• Combine your CSS and Javascript files (only if you don’t use HTTP/2!).
• Use fewer plugins/extensions that put extra load on the page (see section 3 above).

Depending on the CMS you are using (if you are using one), there are some plugins or extensions available to help you achieve the desired results. For WordPress, for example, you can use the Autoptimize plugin to inline and combine your CSS and JavaScript files.

Minify the code

What does minify mean? Basically, removing all unnecessary characters from your HTML, CSS or Javascript files. What are unnecessary characters?

• New line characters
• White space characters
• Comments

A minified code will usually look like this:

As you can see, there are no new lines, comments or unnecessary spaces.

For WordPress, Autoptimize is again a good plugin for this purpose, which can also improve the performance of your WordPress system. But it’s even better if the minification is done by your CDN (Cloudflare, for instance), so your server does not have to worry about it. Give it a try!

11) Defer JavaScript execution

The vast majority of websites are basically a mix of:

• HTML
• CSS
• JavaScript

While HTML and CSS add content to your website, structure and design it, JavaScript is responsible for (but not limited to) making it interactive. JavaScript controls the behavior of the various elements of your website. Among the capabilities you have with JavaScript are:

• Live searches
• Analytics
• Element animations, such as images or sliders
• Pop-ups
• Data dynamic handling
• Chatboxes
• etc.

As you may be able to see from the list, what JavaScript provides almost never has to take precedence when the page loads. Our goal should be to present the user with a beautiful website as quickly as possible, and load the additional features as late as possible to increase the perceived load time.

There are two main ways to defer the execution of JavaScript:

1. Adding the “async” attribute to your JS scripts
2. Adding the “defer” attribute to your JS scripts

This visual explanation from Growing with the Web is a great way to understand the differences.

In short, consider these things:

• Do not defer anything that affects the content above the fold.
• Deferring may give you better perceived load time, but break more things.
• “Async” is safer
• If you don’t know what you are doing, do not async or defer the “jquery.js” file.
• Test your site extensively!

How to defer JS scripts?

Async JavaScript

A free and probably best option is the plugin Async JavaScript, which comes from the same person who developed Autoptimize. Just install it, go to Settings > Async JavaScript, and at the top you can enable or disable “defer” or “async”.

If you scroll down, you will see some more fields if you want more detailed control, in case you want to include or exclude some scripts, plugins or themes (you will need that).

Cache/Optimization plugins

Another option is to use your favorite caching plugin, like WP Rocket, LiteSpeed Cache or again Autoptimize. These usually include an option to do so.

For example, WP Rocket can help you defer JavaScript execution in the File Optimization section of WP Rocket settings. Look for the option to Load JavaScript deferred.

Add a code snippet in functions.php

There’s always a way to get things done via the functions.php file, right? Here too. Add the following code to your functions.php file:

function defer_parsing_of_js( $url ) {
    if ( is_user_logged_in() ) return $url; //don't break WP Admin
    if ( FALSE === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return str_replace( ' src', ' defer src', $url );
}
add_filter( 'script_loader_tag', 'defer_parsing_of_js', 10 );

This basically tells WordPress to add the “defer” attribute to all your JavaScript files except jQuery.js. Of course, this is not as flexible as Async JavaScript or other plugins, but it is more efficient in terms of speed. Try it out and if you do not notice any problems, stick with it!

12) Optimize your database

Optimizing your database is also important. You may not notice it if it’s a small site, but if you have been running it for a while and/or have a large site, you’ll probably see and feel a difference when you clean up your database.

Every environment and setup is different, so there’s no “magic code” that will do this for you. However, we can give you some tips for the most popular database system, MySQL. WordPress uses it as well.

• Delete orphaned and duplicated metadata from your database. WordPress has a variety of entries that contain additional information. For example, your users have an email address, a website, a bio; your posts have a content, a title, an excerpt; comments have an author, an email field, and so on. This information can sometimes be duplicated or orphaned (not belonging to anything). In such cases, this data is simply worthless and takes up unnecessary space in the database. To clean up all this data, you can use a plugin like WP-Sweep.
• Optimize your database tables. The word “optimize” has a different meaning here: This section is called “Optimize your database” in the sense of cleaning it up, but the database tables can actually be optimized, much like defragmenting a computer. For this, again, you can use a plugin like WP-Sweep. Or, if you are adventurous, you can do this manually via your database management tool like phpMyAdmin. See this article for more detailed information on how to do this.
• The MySQL Tuner script is a script written in Perl that helps you configure your MySQL database and gives recommendations for better performance and stability. Note that you must have very good technical knowledge and access as root to your server to use it.
• Clean up autoloaded data from the wp_options table. The wp_options database table contains all sorts of data for your WordPress website, such as the site URL, plugin settings, theme settings, etc. Autoloaded data is data that is loaded on every page of your WordPress website and is set with the “autoload” field in a database table. They often contain data that is no longer used and left behind by themes/plugins that have already been deleted. The problem with WordPress websites can be that there is a large amount of autoloaded data in the wp_options table, as many developers set the “autoload” attribute to “yes” by default for their plugins/themes, but not every plugin should theoretically load its data on every page. This leads to slower loading time in many cases.
  
  So how can you remove stale autoloaded data? At this point, you need to get your hands dirty and log into your database management software. Here is how you can remove the autoloaded data.

Want to optimize your database even further?

We have written a full article on what you can do to make your database run faster. Read it here: How to clean up the WordPress database

13) Compress your code

Yes! Just like you can compress some files on your computer, web pages can be compressed too! Why should you do that? Quite simply, to save bandwidth and speed up your website. As Pingdom (web performance experts) shows, you can easily reduce the size of your website by more than 75%.

For WordPress, there are several plugins that will help you compress the code and increase the WordPress performance, usually with a single click, like WP Super Cache or WP Rocket. These two in particular are also page cache plugins (see above), so you kill two birds with one stone.

If you do not have WordPress or another CMS that allows plugins or extensions to do this for you, you’ll probably need to configure your web server. If you have Apache, for example, it’s as simple as adding the following code to your .htaccess file:

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# Or, compress certain file types by extension:
<files *.html>
SetOutputFilter DEFLATE
</files>

You should note that some (very) older browsers may have problems with Gzip compression. Take this into account if your website is visited by these older browsers.

Brotli has recently come on the scene as a better alternative to Gzip. It is less supported by hosting providers, but if you have it available, you should use it. Cloudflare supports it too!

14) Use HTTP/2

HTTP stands for HyperText Transfer Protocol. As a protocol it defines how the client (e.g. your browser) and the server should communicate with each other.

HTTP/2 is the latest stable version of this famous protocol. HTTP/2 brought many improvements that are very important for the performance of websites. Probably the most important one is multiplexing. With HTTP/1.1 (the previous version), resources were loaded one after another. So if one resource failed to load, this could block all other resources behind it. In contrast, HTTP/2 is able to use a single TCP connection to send multiple resources at once, so that no resource blocks another. This is very important in today’s world where more and more resources are loaded when a page loads (JavaScript files, CSS files, fonts, etc.).

HTTP/2 should be enabled on both the client and the server. Fortunately, you do not have to worry about the client, as all browsers already support HTTP/2. So you should focus on the server, your server.

How to activate HTTP/2

First, check your website with this tool. If you are using HTTP/2, you are good to go.

If you do not use HTTP/2 yet and your server is managed by someone else (shared hosting, managed VPS…), just ask your hosting provider if they can do it for you. If not, it’s time to change 😉

If you are responsible for managing your server yourself, the steps will change depending on which server you use.

• If you use NGINX, KeyCDN has a nice guide for you.
• If you use Apache, check out this guide.

What about HTTP/3?

HTTP/3 is the next version, which should bring many more improvements, especially because it uses a different communication protocol (UDP) and thus improves the connection and transmission time.

However, it isn’t yet supported by many browsers or hosting providers, so you should wait a bit before thinking about it.

15) Optimize external resources

Almost all websites need to connect to external sites to complete page loading: Google Fonts, Google Analytics, chat popups, comment services, videos, and more. Believe it or not, these can also be optimized, although there are limitations, of course, since they are third-party services.

We have written an article that talks about these services and what you can do to optimize your external resources. It’s constantly being updated, so check it out here: How to optimize your external resources in WordPress | Accelera

16) Other little improvements

These are other improvements you can make that will not have a big impact, but will add to the overall results.

• Control the Heartbeat API
• Clean the <head> of your pages
• Remove the Capital P Dangit filter
• Disable the self-pingbacks
• Preconnect to external sites
• Disable the WP-Cron
• Apply DNS-Prefetch

Be sure to read the relevant articles!

17) Analyze your website speed optimization

Finally, we have the famous website performance test tools that are perfect for a WordPress site performance test. These are websites that analyze other websites (yours) and give you a very detailed report on how your website can improve its speed. Let us take a look at one of the most famous tools: GTmetrix.

1) Enter your URL in the big box:

2) Now wait for the analysis to finish…

3) And now you will be presented with a report. As you can see here, you usually get a score and then some recommendations to improve your webpage performance.

All these tools work in the same way. Here’s a small list:

– GTmetrix
– PageSpeed Insights
– Pingdom Tools
– WebPageTest

do not get obsessed with these tools and try to always get the highest score possible. They are great tools, but you need to take them as a reference. For example, let us say you have this:

The effort and time you spend to get from 99 to 100 will not be worth it; your website will not load noticeably faster and you will not get better SEO rankings.

To learn more, check out what ShortPixel has to say about GTmetrix, PageSpeed Insights and other website speed testers.

We hope this article helps you improve your WordPress’ performance so it gets the boost it deserves!