Make WordPress Load Faster Than 1 Second

Dezember 20, 2018 18 mins to read
Share

Understanding how to make WordPress load faster is a must for every website owner, as the loading time massively impacts the perceived quality of your website.

This guide will give you a starting point in optimizing your website to get your loading time below two seconds – ideally below one second. I’ve structured it into four different areas. All of them play an important role in making WordPress load fast. You can think of loading speed optimization as an orchestra that you’re directing.

In the end, you’ll hopefully be able to achieve results similar to my site.

I tried keeping this guide as easy to follow as possible. You’ve probably seen articles about making WordPress load fast that have 40+ points – this is none of them. Actually, there are four areas I worked on to get my site to load within .6 seconds (< 1s on average):

  1. Fast WordPress hosting
  2. Themes & page builders
  3. Cache configuration
  4. Image optimization
  5. CloudFlare DNS settings
  6. Helpful resources and tools

Fast WordPress hosting

One of the most important aspects that make my WordPress site load so fast is having the right hosting. If you have a shared hosting account that costs only a couple of bucks per week, I’m afraid you cannot expect a fast-loading site. ?

One of the most important aspects that make my WordPress site load so fast is having the right hosting.

The reason is that those shared hosting accounts don’t have the technical infrastructure to make WordPress load fast.

That infrastructure requires updated PHP, a well-configured database, several layers of server-side caching, and more. In short, it requires quite a bit of configuration work needed for your hosting company.

That’s why cheaper hosting companies usually rely on very fundamental infrastructure with less optimization (and fewer maintenance efforts required).

Things to consider when choosing a WordPress hosting company

Choosing a hosting company is not an easy task, as there are so many things to consider. Every hosting company is running marketing campaigns to convince you that they’re the best. There is so much money to be made for hosting companies, of course, they’re always claiming that they’re the best.

To help you find the right hosting company that allows for a fast loading WordPress website, I’ve put together a few criteria for you:

  • How much traffic do you get? The hosting company you choose should ideally support at least double that number. That will save you from upgrading when your audience grows.
  • Do they offer 24/? support? You’ll want at least their chat to be present round around the clock.
  • The server location. ?Ensure that the server of your hosting company is physically close to the majority of your audience.
  • How do they compare in reviews from FB hosting groups? Having positive conversations going on about a hosting company always is a good thing.

Recently, I started seeing more and more load test evaluations on hosting companies being published.

While those are pretty technical, they show the hard numbers and facts on how many concurrent website visitors a host can handle. If you’re interested in seeing those, please ping me.

I’m not linking them here, as I think they’re too hard to understand if you don’t have a programming background.

My recommended hosting company

If you’re wondering which host is the right one for your WordPress site, I recommend Cloudways.

All my sites are hosted on Cloudways since 2013 (they sponsored my WP Summit, the WP Agency Summit and Scalefest runs on Cloudways, too). At times, my agency ran 8 servers and 100+ websites on Cloudways – but I since left the agency business.

Since Cloudways only manages WordPress sites and does not offer domain or email services, here’s my recommended setup:

You can manage your domain and emails on any service you want. If you’re now using a host like GoDaddy or HostGator, you can keep the domains and emails there. 

Once you sign up for a Cloudways account, you can point your domain from your current hosting company to your new Cloudways account.

Their support is super helpful with that. You don’t change anything basically, except for one DNS setting (which again, the Cloudways support can help you with).

You can even set up Cloudflare Enterprise CDN for just $5/mo with Cloudways – that’s priced north of $1000/mo if you purchase it directly. I recently did a video for Cloudways explaining the benefits of this CDN, watch it here.

If all of this sounds too difficult or techy for you, my team and I got your back.

When you use our affiliate link for Cloudways to sign up, we will connect your domain for free to your new WordPress site and even do the migration! Simply use the affiliate link and send me an email after you signed up :-) 

More thoughts on hosting

Honestly, there is much more to talk about when it comes to hosting. I could walk you through things like SSH access, SSD hard drives, how much GB of traffic is allowed per month, what software architecture the host is running, whether you can upscale your server as traffic goes, and so on.

The point is, that you will need to move away from cheap hosting when you want your site to load faster than one second. I’m not saying that you need to spend $30 – $40 per month on hosting for a single site, but those $3/mo shared hosting plans aren’t built for fast websites.

I’m not saying that you need to spend $30 – $40 per month on hosting for a single site, but those $3/mo shared hosting plans aren’t built for fast websites.

Those $3/mo shared hosting plans aren't built for fast websites. Klick um zu Tweeten

Fast-loading WordPress themes & page builders

Now that we’ve got hosting out of the way, let’s talk about the next big area that impacts how fast your WordPress is loading – your theme and page builder. By now, almost all themes come with some sort of page builder plugin that allows you to create layouts via drag and drop. I use such a page builder on this website, too.

However, it’s the code-quality of your current theme and the code-quality of your page builder that influence how many scripts, stylesheet files, and other stuff is being loaded from the server. 

When somebody visits your website, think of your site as a warehouser. That warehouser is running around collecting data and files, trying to get all files and data as fast to your website visitor as possible.

Thus, the less files and data is needed to load the website, the faster that warehouser can gather them and the faster your website will load

The problem with many of today’s WordPress themes and page builders is, that they load unnecessary data and files. You can use them to build galleries, testimonial sliders, embed videos, and much more. But some of them always load all their functionality, even if you didn’t use it on a particular post or page.

To give you an example: a friend of mine recently reached out and asked me why his website would always load a script from the video hosting service Vimeo, even though he had no Vimeo video embedded. The answer was, that his theme was coded in a way to always load that script. 

Other themes do that with script for testimonial sliders, galleries, and so on. Heck, even the famous Contact Form 7 plugin loads his form scripts on every page – regardless whether that page has a form on it or not. That has been one of the reasons I moved to Josh’s Caldera Forms. ?

It’s quite simple to identify if plugins load their scripts on pages or posts where you don’t use them. I have another example for that at this current point on my website. When I check my landing page with GTmetrix, I can see that the landing page loads a Stripe script without Stripe being used on the landing page. It clearly shows in the YSLow section for adding expires headers and indicates that I could further optimize the landing page.

You can see the script „https://checkout.stripe.com/checkout.js“ being loaded on my home page, without any Stripe checkout there. That’s an issue with the S2Member plugin.

Cache configuration

Ok, now that we’ve covered themes and page builders quite extensively, it’s time to talk about caching. In fact, I used a caching plugin for optimizing how scripts on my website are loaded and you should do that, too.

My favorite caching plugin is Swift Performance Pro. I use it on WP Mastery and am considering to implement it in my WordPress Care Plans as well. There are a number of powerful caching techniques you can leverage with Swift Performance Pro. ?

Merging scripts and stylesheets in WordPress

Reducing the number of requests it takes to load your WordPress site is crucial for making your website load faster. I’ve gotten mine down to 41, starting from 150+. Some websites my care team works on start with 300+ requests, from all sorts of plugins.

Every single file that is needed to show your website to a visitor creates a request. No matter whether that is a Google font, an image, the JavaScript file handling your nice animations, a CSS file for emojis, and so on. There are countless variations possible. 

Luckily, Swift makes it easy to reduce the number of requests on your website. This function is called „merging scripts“, basically you’re combining all files of the same type into a single file. As you can see in the screenshot below, I have enabled merging of all JavaScript files except for the jquery.js file. That’s a mandatory file that needs to load before all other scripts – so I cannot merge it.

This is the settings screen for optimizing JavaScript loading times. Quite a simple structure.

As you can see, Swift Performance Pro makes it super easy to combine all your Javascript files for reducing the number of requests. However, you need to be careful when merging JavaScript files. It’s easy to break your site and you need to ?test your site carefully. 

The same holds true for your stylesheets, the CSS files that control the look and feel of your site. Almost every active plugin on your website loads CSS files and your theme + page builders likely load multiple CSS files. Each of those files creates a single request. By merging all stylesheets into a single file, you can reduce that number of requests massively.

Optimizing stylesheets with Swift Performance Pro is a breeze.

Just as with the JavaScript files, merging your site’s stylesheets to improve your WordPress loading time is easy as pie. Again, just as with merging JavaScript files, you have to test your site thoroughly when merging stylesheets. As I said earlier, those files control the look and feel of your website, so merging them can break the design. In that case, you try excluding single stylesheets from merging.

Browser caching in WordPress

There is more to setting up your WordPress cache than just merging stylesheets and scripts. We also should talk about things like browser caching and server-side caching.

Let’s define browser caching:

A temporary storage area in memory or on disk that holds the most recently downloaded Web pages. As you jump from Web page to Web page, caching those pages in memory lets you quickly go back to a page without having to download it from the Web again. In order to ensure that the latest page is displayed, the browser compares the dates of the cached page with the current Web page. If the Web page has not changed, the cached page is displayed immediately. If the Web page has changed, it is downloaded, displayed and cached.

Encyclopedia at PCMag.com – https://www.pcmag.com/encyclopedia/term/38971/browser-cache

Just from this definition you can see how browser caching plays a crucial role in your website loading speed optimization process. In fact, if people come to your site more than once, they’ll experience the benefits of proper browser caching. You can specify the timeframe for how long a visitor’s browser should store the cached files. They’re valid until your visitor manually clears their browsing history.

My browser cache is set to 12 hours, as I’m constantly tweaking the website. You could go much higher though.

As you can tell, Swift Performance Pro again makes setting up browser caching super simple. The screenshot above shows one of the configuration screens from the plugin, with the exact settings I currently use on WP Mastery (at least at the point of writing this article). Obviously, I removed the cache path to not give away security-relevant information about the location of my website on my server.

If you feel brave, you don’t need a caching plugin to set up browser caching on WordPress. You can set up caching rules directly in your .htaccess file on the server. That would reduce the loading time even further, as your website would need to load one plugin less. If that put question marks all over your face though, please do not touch your .htaccess file.

If you feel brave, you don’t need a caching plugin to set up browser caching on WordPress. You can set up caching rules directly in .htaccess files.

On WP Mastery, I use the Swift Performance Pro plugin instead of direct caching rules because the plugin gives me much more options to speed up the site than just browser caching.

Server-side caching on WordPress hosts

One of the biggest reasons I love hosting my sites at Cloudways servers is their clever server-side caching infrastructure. A server is nothing but a computer running the software needed to show your website in the Internet. With Cloudways servers (I use Digital Ocean), you also get a number of programs that cache the website on the server already.

You might not know it, but WordPress consists of thousands of files and is connected to a database, where it stores your pages, posts, login information and much more.

Every time somebody comes to your site, WordPress loads a few hundred files and runs queries against the database to load the post or page that’s supposed to be displayed to the visitor. You can imagine, that this is not a fast process.

Let me explain how server-side caching helps speed this up, using a visitor coming to your blog page as an example:

On the first visit to your Blog page, the server has to load all the files and query the database, which is relatively slow. If your host has server-side caching, your website will automatically store all data of the Blog page in the server cache. For the next visitor, the website does NOT load all the files and also does NOT query the database. Instead, it simply loads all information from the cache – which is MUCH faster.

Can you see how important server-side caching is? It saves server resources and makes pages that get visited regularly load a lot faster than they normally would.

The server-side caching on Cloudways is particularly effective because it uses caches with various techniques. They all work hand-in-hand without you having to configure anything. Other hosts have neat setups for server-side caching as well, be sure to check in with the support team of your current hosting company!

Gzip compression

If you want your WordPress site to load faster than one second, you definitely need to implement gzip compression. Again, if you feel ? brave, you can configure that directly in your .htaccess file. If you can do that, skip to the next section, as you’ll already know what gzip compression does to your website’s files.

Still here? Great! Let me explain:

Gzip compression means that, in order to reduce the amount of data transferred when loading your website, the files that make up your WordPress site get ?compressed.

Think of that process as putting images in an archive and then using the Zip program (Winzip, 7zip, et al.) to shrink that archive in size. Nothing else is happening with the files of your WordPress site – but on the fly. Once your website gets visited, your server automatically compresses your files. If you have a proper server-side caching set up, this plays together nicely ;-)

Just as with the other techniques that manipulate your files, please test the impact on gzip compression on your website thoroughly.

Image optimization

Images are one of the biggest reasons for slow loading WordPress sites, as most images on websites are either way too big or have not been saved with the correct file specifications. Usually, website owners can shave off quite some kilobytes of their website’s size by working on their images.

There are two factors that control how fast images can load: their dimensions and their file size. Both need to be at their best settings for your website to load quickly.

Luckily for us, speed analysis tools like GTmetrix give us very specific instructions for making our images load fast. It just takes a bit of time to go through them. The reports show you exactly, what images you need to work on and can even download optimized versions.

A list of images I could optimize on WP Mastery.

That list is incredibly powerful, because GTmetrix shows you exactly which image files you need to work on and which ones are good already. Especially when you’re running online shops like WooCommerce, uploading product images in the correct dimensions and in optimized versions is crucially important. If you run a product page through GTmetrix and notice that you need to work on your images, you can resize the images and tell WooCommerce to use the new product images.

So the first step in uploading images that load fast is to know the correct dimensions of the image. Say, for example, that your post thumbnails are set to 720 pixel width. If your site is retina-ready, you will want to upload the image in 720px width and another variation in exactly twice the width, 1440 pixels. Your site will then automatically show the correct version of the image based on the pixel density of your visitor’s screen. However, uploading the image in any size bigger than 1440px is a waste of resources and will slow down your website.

At this point, you might be wondering how to find out how big an image on your blog should be. Don’t worry, there are plenty of tutorials and it’s quite straightforward once you’ve done it a couple of time. Check out this post to learn more.

Besides uploading images in the correct dimensions, you also need to ensure that the image files aren’t any bigger than they need to be. Image tools often include metadata like information about which ?camera took the image, the ?️location, and other stuff. That information is as irrelevant for showing images on your site as it gets.

Good for us, that Swift Performance Pro can automatically reduce the file size of your images directly while you’re uploading them. You don’t have to do anything, Swift handles the image optimization in the background and helps that your WordPress site loads within one second.

Of course, there are also other tools you can use to reduce your image file sizes. Kraken is a very popular service, as are WP Smush and EWWW Image Optimizer. No matter which one you choose, what matters is that you reduce the file size of your images.

CloudFlare DNS settings

Lastly in this post, I want to touch upon DNS settings. It works as follows:

  1. Somebody wants to open my website and enters wpmastery.xyz in their browser address bar.
  2. The browser asks the Internet provider of your visitor „who is wpmastery.xyz“?
  3. The Internet provider runs through various servers and – at some point – comes to a DNS server that knows that the domain wpmastery.xyz is connected to the IP address 159.65.125.162.
  4. The browser connects to the server at 159.65.125.162 and the server delivers the website to the visitor.

This is a very simplified explanation of the role DNS plays in the ?Internet, it’s part of the backbone of the Internet. The faster this translation from your website domain to your server’s IP address happens, the faster your website will load.

One of the fastest DNS services I have used is CloudFlare. Originally my plan was to use CloudFlare as a security service, but that was loading too slow. Maybe I didn’t configure CloudFlare properly, but I wasn’t able to get loading times below one second when using their security service.

However, their platform still manages the DNS entries for WP Mastery. I’m on their free tier currently and this is how you can get started yourself.

[thrive_leads id=’5871′]

Helpful resources and tools

Articles for further ?reading:

My preferred service providers and plugins:

We provide one-off services to speed up WordPress loading times, click here to get a free quote.

If you’re interested in having us manage your entire website, click here to learn about our WordPress Care Plans. Prices start from $100/mo.

Leave a comment

Lass uns KI einfach machen

In nur 20 Minuten zu Deinem eigenen KI Bot – ich zeige Dir wie es geht. Trage Deine E-Mail Adresse unten ein und ich schicke Dir die Video-Anleitung zu!