'

The Ultimate Guide to Speed up WordPress 2020

Web Development

You may already know that the load time of your website is important to both Google, as a page ranking factor, and your potential customers. As the size and complexity of websites continue to increase, it is getting even more difficult to speed up WordPress website performance. Without proper speed optimization, you risk impacting the user experience of your website which can hinder your search engine rankings and conversions due to increased load times. In this guide, I’m going to teach beginner and advanced techniques to speed up your WordPress website.

Table of Contents

Chapter 1: Instance Advanced Configurations with Cache Plugins

WordPress is by far the most popular platform for building websites. There are unlimited options for customization, it is easy to find answers online, and it is completely free. If you are thinking about building a website or getting one professionally designed, one thing that has to be one your mind is speed optimization. Some web design agencies create WordPress speed optimized websites, but what if you bought a theme or are attempting to build a website on your own. Follow this guide for some tips to Speed up WordPress and provide the best user experience for your visitors.

Caution: Some techniques in this guide are advanced and can break your website if you implement them wrong. Please consult with a web developer if you have any questions.

WordPress Speed Optimization Plugins

WP Super Cache

A very fast caching engine for WordPress that produces static html files. This is a free option that you can use to easily configure cache settings.

 

WP Fastest Cache

WP Fastest Cache is another plugin that I’ve used with success. It offers both a free and a premium version and has solid features that will help to increase your website’s performance.

WP Rocket

WP-Rocket is my go-to caching plugin. According to their website WP-Rocket is “Recognized as the most powerful caching plugin by WordPress experts.” It is the gold standard. WP-Rocket is best in performance and usability and is packed with features.

Instance Advanced Configuration

Instant Advanced Configs to Speed up WordPress

Mobile Cache  

Both WP-Rocket and WP Fastest Cache can create separate caches for mobile and desktop. This can be helpful when there are particular elements that are mobile specific such as navigation toolbars. This feature adds additional speed optimization benefits to mobile responsive websites.

User Caching 

User cache involves creating and maintaining specific cache files for logged in users. This is essential for membership websites. This can also be helpful on websites that have restricted content. User caching reduces load times for your faithful returning customers.

Browser Caching 

Browser caching allows you to speed up your WordPress website by storing files or parts of pages in your visitors’ browser. Resources or files that aren’t likely to change can be stored in your clients browser so they don’t have to be downloaded each time.

Additional WP-Rocket Features

WP-Rocket has additional features that separate it from other caching plugins, which I will cover below.

Cache Lifespan 

Choose how long to cache certain files or images. For instance, your logo is not likely to change very often. Therefore, setting a longer cache lifespan for this type of file will help to reduce resources and speed up your website.

Pre-fetch DNS Requests 

If you have external resources, the location of these resources must be looked up before they can be loaded. This is called a DNS request. WP-Rocket has the ability to pre-fetch the location of these resources ahead of time resulting in reduced delay and better performance.

Chapter 2: Using File Optimization for Quicker Load Times

Your WordPress website is made up of a lot of files with varying functions that tell your website visitor’s browser how to properly render your website. The larger the files, the longer it will take to send these files to your visitor’s web browser. This chapter is all about reducing the effects of large files in order to speed up your WordPress website.

Minify HTML, CSS, Javascript 

When you minify HTML, CSS, or Javascript you are simply removing all additional whitespace, carriage returns, and other unnecessary characters to make the file size smaller. Because the file size is smaller it is faster to transport and consequently will help you speed up WordPress performance on your website. If we were not talking about WordPress we could simply take our files and run a quick google search for “minify [insert filetype],” but WordPress operate slightly different. The code to render a WordPress webpage is built dynamically through a series of PHP functions and database queries. Therefore, in order to minify with WordPress you must use PHP code to tell WordPress to minify the files as the pieces are being brought together. There are several plugins that you can use to accomplish this or you can simply paste this code into the functions.php file of your child-theme. Here is an example.

Before Minification

1. Globally Applied Styles
*/
html,
body {
position: relative;
height: 100%;
background: #f2f2f2;
color: #505458;
font-family: 'Catamaran', sans-serif;
}

em {
font-family: Lato;
}

#wrapper {
position: relative;
top: 0px;
z-index: 10;
width: 100%;
min-height: 100%;
transform: translate(0, 0);
-webkit-transform: translate(0, 0);
-moz-transform: translate(0, 0);
-o-transform: translate(0, 0);
-ms-transform: translate(0, 0);
background: #f5f7fa;
overflow: hidden;
transition: transform 0.4s ease;
-webkit-transition: -webkit-transform 0.4s ease;
-moz-transition: -moz-transform 0.4s ease;
-o-transition: -o-transform 0.4s ease;
-ms-transition: -ms-transform 0.4s ease;
}

After Minification

html, body {position: relative;height: 100%;background: #f2f2f2;color: #505458;font-family: 'Catamaran', sans-serif;}em{font-family:Lato;}#wrapper {position: relative;top: 0px;z-index: 10;width: 100%;min-height: 100%;transform: translate(0, 0);-webkit-transform: translate(0, 0);-moz-transform: translate(0, 0);-o-transform: translate(0, 0);-ms-transform: translate(0, 0);background: #f5f7fa;overflow: hidden;transition: transform 0.4s ease;-webkit-transition: -webkit-transform 0.4s ease;-moz-transition: -moz-transform 0.4s ease;-o-transition: -o-transform 0.4s ease;-ms-transition: -ms-transform 0.4s ease;}

Minification provides smaller file sizes. This free space is where all of the magic happens. Even though it may seem small imagine if the file on the left was 6,000 lines of code. The space that you save makes the file significantly smaller, which lead to faster load times.

Combine Files

 Another way to speed up WordPress by cutting down the number of requests required to render your webpage is to combine your resource files. There are several caching plugins that you can use to accomplish this, but the easiest way to decrease the impact of multiple resource files is to switch to a hosting provider that has upgraded to HTTP/2. HTTP/2 supports loading resource files in parallel which makes concatenating files unnecessary and will speed up your WordPress site without plugins or custom code. Most Managed WordPress Hosting providers support HTTP/2. If your hosting provider hasn’t upgraded to HTTP/2 and you aren’t ready to make the move then you can install one of the following plugins.

Autoptimize speeds up your website by optimizing JS, CSS, images (incl. lazy-load), HTML and Google Fonts, asyncing JS, removing emoji cruft and more.

If you already have WP-Rocket or are planning to leverage any of the other features they have to offer, this feature is included. It is also very easy to configure.

Minify Files to Speed Up WordPress

Note: Combining Files is not recommended or necessary for HTTP/2 enabled websites. You can check to see if your website is HTTP/2 by doing the HTTP/2 Test by KeyCDN.

Eliminate Render blocking Resources (Optimize Delivery) 

What are Render blocking Resources? 

Render blocking resources are non ATF (Above the Fold) elements in the HTML code of your website that will delay your website from display due to downloading or retrieving resources. Above the fold content is content that is visible immediately upon page load. Elements that aren’t immediately visible should use defer or async to load resources.

The async attribute tells the browser to begin retrieving resources immediately. The HTML parsing and retrieving of resources happen simultaneously. Once resources are available, HTML parsing will be paused so that the resources can be executed.

The defer attribute tells the browser to parse the HTML before attempting to execute any resources. Once parsing is complete all deferred resources will be executed in the order in which they appeared in the document.

How to fix render blocking resources 

Eliminating render blocking resources requires developer experience and the ability to modify source code. Each situation will be different, but as a general rule placing all of your scripts in the section of your website with the defer attribute is the easiest and most efficiently way to load resources. Advanced users who understand both the functionality and the dependencies associated with scripts can apply these principles. If a script has dependencies use defer call your scripts making sure to include the script that your script depends on first. Scripts loaded with async will download and execute scripts asynchronously, so if a script has no dependencies and can be executed as soon as it is downloaded, use async

Your code should look like this:

<script defer src="your-domain/js/dependencies.min.js"></script>
<script defer src="your-domain/js/no-dependencies.min.js"></script>

Using Plugins

If you haven’t heard of this plugin, it allows you to speed up WordPress performance by stopping unnecessary scripts and stylesheets from loading on a page by page basis (I Know Amazing Right!). Asset Cleanup shows you all the CSS and JS files that are being loaded on each page.  You have the ability to select files that aren’t required for that specific page or site-wide. These files will be blocked from loading. Oh and by the way, they also have a Test Mode feature that allows you to try out blocking files in a way that only the logged in administrator  can see. Once you’ve verified that the changes don’t impact the proper rendering of your website, you can disable test mode and the changes are made public. By preventing some CSS/JS files from loading you will automatically minimize the impact of render block resources. For even more control, the Pro Version takes care of eliminating render blocking resources by giving the option to load CSS/JS async or deferred. The cool thing is that this plugin works great with other caching plugins like WP-Rocket as well.

Load CSS & JS files Async with AssetCleanUp Pro to Speed Up WordPress

For the best results use the Asset CleanUp WordPress Plugin to eliminate any resources that aren’t required to properly render your page. Then, simply click to Enable Optimize CSS Delivery and Load Javascript Deferred Options. This will do the advanced configurations for you and eliminate render blocking resources.

Remove Query Strings from Static Resources 

Many WordPress files have something similar to “?ver=2.7.9” appended to the end of them. This “?ver=2.7.9” is simply a query string that exists to identify the proper file version to be loaded.

The main issue with appending query strings to files is that these files do not get cached by most servers. Because of this, these files will have to be downloaded from the server with every request, which is a waste of bandwidth and system resources. This also increases load times, and negatively impacts the user experience of your website.

One way to increase performance and speed up your WordPress website is by completely disabling query strings, which will make your website load faster and provide a better user experience for those visiting your site. There are several caching and performance plugins that can accomplish this, but you can also accomplish this without a plugin. Simply add this code to the end of your functions to remove query strings.

function_remove_script_version( $src ){
    $parts = explode( '?ver', $src );
    return $parts[0];
}

add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );

Chapter 3: Slash Load Times with Image Optimization

The images on your website are by far the largest files that have to be packaged and sent by your web server. You cannot afford to ignore your images. There are several different things that can be done to optimize image delivery. This chapter will give you the details of them all.

Choose the proper file format

The first step in image optimization is understanding the different image files types to choose the best file type for your specific scenario. The most popular image files used on websites are JPG and PNG.

JPG 

JPG files are compressed with lossy compression and are ideally used when the end goal is a smaller file size. Smaller files are more easily packaged and delivered by your web server, consequently reducing bandwidth utilization and offering WordPress speed optimization benefits.  

PNG 

PNG files are compressed with lossless compression which means that it will retain more data in the file, therefore contributing to a larger file size. Even though the file size is greater, there are two specific circumstances where you would want to use a PNG file over JPG.

Transparency 

JPGs do not support transparent backgrounds. Therefore, if you would like your image to have a transparent background you will need to use the PNG file format.

Detailed Images 

The second circumstance is for detailed images, especially if they are required to be scaled. If your image has a lot of details it is better to use the lossless compression of the PNG file format. Understanding the different file types will help to make sure your website looks great and performs well.

Lazy Load

Lazy load is another way to speed up your WordPress website. Lazy load delays the loading of images until they have entered the viewport giving the website a speed boost by not loading all the images at once. There are several plugins that you can use to accomplish this.

Smush – Compress, Optimize and Lazy Load Images

Compress and optimize images with lazy load, WebP conversion, and resize detection to boost performance and make your site load amazingly fast. 

Image Optimization and Lazy Load by Optimole

Automatically compress, optimize and serve scaled images along with next-gen WebP all from CloudFront CDN. Lazy load included

BJ Lazy Load

This plugin replaces all your post images, post thumbnails, gravatar images and content iframes with a placeholder and loads the content as it gets close to enter the browser window when the visitor scrolls the page.

Lazy Load Optimizer

Lazy loading images and iframes to speed up sites page load speed.

a3 Lazy Load

Use a3 Lazy Load for images, videos, iframes. Instantly improve your sites load time and dramatically improve site users experience.

Compression

Image and video files are usually the largest files transported by your web server to your clients. Therefore several multimedia files can drastically slow down the performance of your WordPress website. This is why compression is so important. Image optimization and compression reduces the file size of your images, which will help to speed up your WordPress website. Also if you choose an outstanding image compression plugin (like the ones listed below), you may not even be able to tell a difference in image quality.

Short Pixel 

The ShortPixel plugin installs and integrates seamlessly with WordPress. You have options to optimize specific images or to optimize images upon upload automatically.

Imagify   

Imagify is another plugin with a lot of the same features. You can bulk optimize or choose to optimize automatically. It integrates with WordPress and is the preferred option for WP Rocket users.

Using Imagify to Compress Image Files and Speed up WordPress

Chapter 4: Rock Solid Response times with a CDN

Response times are crucial in today’s fast-paced world. No one wants to be told to pull up at a fast food restaurant and they definitely don’t want to sit and wait for a website to render. Nearly 75% of people will abandon a website that takes more than 5 seconds to load.  With a countless number of websites vying for the same customer’s attention, it is important that when they click on your link that your website is ready to perform. This chapter is going to give you what you need to know to reduce server response times by using a Content Delivery Network (CDN). A CDN is a group of servers disbursed throughout various geographic regions, that work together to deliver content faster and more reliably. The content is served from the server that is able to give the fastest response. 

Decreased Server Load

A CDN allows your server to transition from being a one-woman show to a seasoned manager with the best of delegation skills. Rather than having each request come to your server for processing, client requests will come to edge servers. Because your web server has already pushed out the packaged files for rendering, the edge servers will relay these files on behalf of your web server as long as there hasn’t been any changes.

Reduce Latency & Packet Loss

Imagine that your server is located in Augusta, GA but is being accessed by one client in Grovetown, GA and another client in Los Angeles, CA. The client in Grovetown, GA will receive these files much faster, because they are closer to the server. The client in Los Angeles will experience more latency due to being further away. Utilizing a CDN will cut down this latency by serving the website files from the nearest edge server. CDNs give the allusion that the internet is smaller by bringing potential clients closer, helping your website to load faster for everyone.

Higher Availability

Another one of the benefits of a CDN is that it helps with availability in the event that your web server goes down. Because your files have already been packages and provided to your edge servers, if your web server goes down the edge servers can continue to serve the previously delivered content until your web server can recover.

StackPath recently acquired MaxCDN. Both companies are well respected leaders in the Cloud and Security Industry. The StackPath CDN is one of the best options for implementing a CDN with a straightforward user interface, Firewall, and DDoS protection.

Cloudflare has been around for a while, and I don’t see them going anywhere. They offer free and paid service with CDN and DDoS protection as well. Cloudflare is one of the most popular and trust CDN services.

KeyCDN is another option for implementing a CDN with your WordPress website. The additional of a solid CDN will definitely increase the speed of your website and lower your response times. 

Chapter 5: Managed WordPress Hosting 

All hosting providers are not created equal. If you have implemented several best practices but notice your website isn’t getting any faster; you may benefit from switching to a managed WordPress hosting platform.

Choosing the Right Hosting Provider

A lot of WordPress Web Design Agencies offer their own WordPress hosting solutions such as what we offer at Rebranded.io. There are also a couple of other managed WordPress hosting solutions that you simply can’t go wrong with.

Kinsta is a fully managed WordPress hosting solution built on Nginx and Google Cloud platform. Kinsta has been awarded top-tier status 5 years in a row and is one of only two companies that earned top-tier status on every plan they offer. Kinsta offers free migrations from WP Engine, Flywheel, Siteground and more. 

Flywheel is a developer and designer focus managed WordPress hosting solution built on Nginx and Google Cloud Platform. Local by Flywheel is the standard for developing websites locally. Flywheel is feature rich with great customer support.

WP Engine is another managed WordPress hosting solution that offers a great deal of features, excellent performance and customer support. Also premium WordPress themes and the Genesis Framework comes bundled with WP Engine.

Now let’s transition to the benefits of using managed WordPress Hosting rather than unmanaged or shared hosting.

Server-Level Caching

Unless most web hosting services, Managed WordPress hosting is a specialized type of hosting where it is specifically optimized for WordPress. Managed WordPress Hosting solutions understand WordPress and have geared their solution toward speed, functionality, and availability for this popular platform. Because of this most Managed WordPress Hosting solutions offer caching at the server-level, which eliminates the need for a caching plugin in most cases.

Why do you need Server Level Caching?

When someone clicks on your link to view your website an exchange happens between the client and your web server. Without getting into too much detail essentially the web server that hosts your website packages up all the files necessary to properly display your website and sends them to the client’s browser. The process of packaging up all of the files has a great deal to do with how fast your website is rendered. Also, re-packaging these files for each guest is extremely taxing on your web server. There is no need to reinvent the wheel each time. This is where server-level caching comes in.

How does server level caching work? 

Server level caching will help your website get the files over to your client’s browser faster by pre-packaging them. In a nutshell, when your server senses that no changes have been made, it will send the same package to each client’s browser rather than gathering these files each time. As you can imagine, this is much faster and less labor intensive on your server. The results, your website loads significantly faster and is more efficient.

Dedicated Resources 

Unlike shared hosting solutions who have a tendency to pack as many websites as they can onto a single server, Managed WordPress Hosting platforms tend to use dedicated resources or Virtual Private Servers (VPS) for each WordPress Instance. This means that your website’s performance will not be impacted by other high volume websites. This leads to our next point.

Faster Response Times

Because you are not sharing resources, Managed WordPress Hosting platforms tend to have faster response times than typical web hosting. Also, some enterprise level managed WordPress Hosting platforms are built on Google Cloud Platform, which provides the ability to intuitively scale with spikes of traffic. This simply means that your website’s performance will not suffer because your website is getting more traffic than usual. The last thing you want is to launch a digital marketing campaign that brings additional customers to your site only to have them hit the back button because your page took too long to load. The last benefit of managed WordPress Hosting solutions is an often overlooked gem that will put you ahead of over half the websites currently running on the internet.

WordPress & PHP Updates 

With consistent updates brings bug fixes, security patches, and better optimization. Often times Managed WordPress Hosting Solutions have a built-in automatic update for WordPress versions and are amongst the first to adopt the latest releases of PHP. Because WordPress is written in PHP any updates to the popular programming language will directly benefit website’s speed and security. Also, 80% of websites across the web use PHP as their server-side programming language. Of the 80% more than a third of these websites are still running PHP version 5.2, even though the current version is 7.3. PHP v7.3 has been benchmarked and proven to be over 297% faster than v5.5, which is 3 versions after the version that most websites are running today.

Chapter 6: Cyclical PageSpeed Boosts by Managing Updates 

One of the simplest ways to get consistent incremental page speed increases is through updating plugins. Plugin developers understand the importance of constant improvements to their code’s speed and usability. You can leverage these updates combined with the process of deactivating and deleting unnecessary plugins to speed up your WordPress performance. In this chapter I’ll teach you how to leverage these updates to get consistent page speed increases.

WordPress & PHP Updates 

One of the simplest ways to get consistent incremental page speed increases is through updating plugins. Plugin developers understand the importance of constant improvements to their code’s speed and usability. You can leverage these updates combined with the process of deactivating and deleting unnecessary plugins to speed up your WordPress performance. In this chapter I’ll teach you how to leverage these updates to get consistent page speed increases.

WordPress & PHP Updates 

One of the simplest ways to get consistent incremental page speed increases is through updating plugins. Plugin developers understand the importance of constant improvements to their code’s speed and usability. You can leverage these updates combined with the process of deactivating and deleting unnecessary plugins to speed up your WordPress performance. In this chapter I’ll teach you how to leverage these updates to get consistent page speed increases.

Deactivate & Delete Unnecessary Plugins

If you have downloaded or purchased a premium theme, chances are this theme was made to be general in nature to fit several use cases. If your theme came with plugins that you don’t need and that are not required for your theme, deactivating and deleting them with give you a performance boost and help you to speed up WordPress.

Update Plugins & Themes for Security and Optimization Updates

Another really easy way to speed up WordPress is to simply update your themes and plugins. Developers are constantly improving their code to fix security issues and implement WordPress speed optimization updates.

Note: Because some plugin updates may break functionality or be incompatible with your current theme, always do a backup before updating plugins to avoid issues and downtime!

Chapter 7: Database Optimization 

Never. Ever. underestimate the importance of your WordPress Database. In fact if your database fails to operate, so does your website. Cleaning and optimizing your database will help to avoid errors, increase performance, and speed up your WordPress websites. Think of it like this. If your database is cluttered it will take longer to find the specific pieces of information needed to render your website properly. The cleaner your database is the easier it will be to find your information and the faster your website will load. This chapter will explain how to clean and optimize your database for better performance and speed optimization.

Delete Old Draft Pages & Posts

If you are editing your website, you have the option to save a draft. This draft allows you to save your work without immediately publishing the page or post to the internet. Each one of these drafts is stored in your database. Over time this can add a considerable amount of clutter and negatively impact your database performance. Use the SQL Queries below to clean up drafts and speed up WordPress and database performance.

DELETE FROM `[database-prefix]_posts` WHERE post_status = "draft";
DELETE FROM `[database-prefix]_posts` WHERE post_status = "auto-draft";

 

Delete Unnecessary Post Revisions

WordPress by default stores post revisions in your database, very similar to backups that can be restored in the future. There is a way to disable revisions altogether or you can simply delete old revisions from time to time to help the performance of your database.

Disabling Post Revisions 

To disable post revisions you simply need to add the below code above the “require_once” line of your config.php file, which can be found in your root directory.

/**
* Disabling post revisions
*/
define('WP_POST_REVISIONS', false);

Deleting Unnecessary Post Revisions 

If you work with WordPress long enough you will find yourself in a position where you made a change that didn’t turn out the way you thought it would and need to quickly revert back. If revisions are turned off, and you can’t quickly set things back the way they were, you are in serious trouble. Instead of disabling revisions altogether, in my personal opinion, deleting unnecessary revisions is the better choice. You can delete post and page revisions only when you are sure that you do not need them anymore. I will show you two ways to do this.

MYSQL Query 

To delete post and page revisions from your database you can run the following MYSQL command.

DELETE FROM `[database-prefix]_posts` WHERE post_type = "revision";

WP-Optimize 

The plugin I use for database optimization for all of my WordPress websites is WP-Optimize. WP-Optimize is a WordPress Plugin that allows you to clean your database automatically, allowing it to operate more efficiently.

Remove Spam Comments

If comments are enabled in WordPress, even if you mark a comment as spam, it will still be stored in your database. The same holds true for trashed comments. It is a good idea to clean these comments from your database with a couple of simple MYSQL Queries.

DELETE FROM `[database-prefix]_comments` WHERE comment_approved = "spam";
DELETE FROM `[database-prefix]_comments` WHERE comment_approved = "trash";

Chapter 8: Limit Bandwidth Killers for Increased Performance 

It is definitely easy to forget that more than just potential customers browse our websites. We have potential customers, competitors, various spiders and crawlers, and even potential malicious bots accessing our websites each day. In this chapter, I’ll walk you through how to speed up your WordPress performance by limiting the impact of these common bandwidth stealers.

Google Crawlers

Google’s crawlers are active day and night crawling websites and indexing pages. Google’s intentions are to find the optimum crawl rate that won’t impact the performance of your website. They are actually really good at it. But, if you are experiencing performance issues that you believe are caused by Google’s crawlers, you can adjust the crawl rate. You can find this setting in Google Search Console. You’ll need to click the gear and then site settings.

Note: This can only be done in the old Google Search Console interface.

Bing Crawlers

Bing crawlers have the same purpose and function as Google crawlers. However, limiting the crawl rate for Bing is done slightly different. The easiest way to accomplish this is by logging into your bing Webmaster account. Select “Configure my Site” and then select Crawl Control. Simply change the setting for “When do you receive the most traffic to this site for your local time of day?” This will limit the crawl rate during your high traffic times.

Hotlinking

Another possible bandwidth and performance sapper is Hotlinking. Hotlinking is when someone uses images from your website without your permission. The problem with hotlinking is that although the image is displayed on another website it is still being loaded and served from your web server. If the website that is using your images is a relatively high volume website, this can eat away a lot of your server resources.

How to check for hotlinking without specialized tools? 

This method isn’t perfect but it is a good free way to see if anyone is stealing or hotlinking your images. Simply head over to google and type:

"inurl:[your-website-url] -site:[your-website-url]"