How To Speed Up Your WordPress Site

Speed Up Your WordPress Site

it’s easy – and vital

Ready to learn how to speed up your WordPress site and increase performance?

You’ve spent months designing a stunning WordPress site and creating something extraordinary. Now your site is live but wait; it’s kind of slow.

You know that site speed is crucial to the success of your business. Time and time again, you’re hit over the head with scary statistics like nearly half of web users expect a site to load in 2 seconds or less, and users tend to abandon a site that doesn’t load within 3 seconds.

It’s easy to feel frustrated at this point in your project, but no need to fuss. Before you knock down the door of your web host or add a ton of sketchy plugins, follow these easy steps to make your WordPress site run smooth and fast.

Follow along with the complete guide, or use these chapters to jump to the section you need:

  1. Benchmark Your Site With Testing
  2. Use a WordPress Web Host
  3. Audit Your Plugins
  4. Cache Everythinge
  5. Use a Content Delivery Network
  6. Downsize Your Static Assets
  7. Take Care with Writing Theme Logic
  8. Serve Assets on a Silver Platter

1. Speed Up Your WordPress Site – Benchmark Your Site With Testing

Before you get started and make any changes to your site, it’s essential to take measurements and run a few tests to get some benchmarks. Benchmarking helps you understand precisely where you’re at right now. Then you can clearly measure any changes you make. After all, the aim is to improve site speed, not make it worse.

In testing the speed of your site, your best bet is a combination of WebPageTest and Google PageSpeed Insights. WebPageTest gives you a good idea of the actual time (in seconds) that a site takes to load. The metrics will help you know whether it’s the back-end or front-end, causing slow load times.

Google PageSpeed Insights is best for looking at how your site renders by a given browser and can help you identify what you could improve on with the front-end.

Once you have benchmarks, you’ll be able to start understanding where you can make the most significant improvements. Once you make a change to your website, remember to test it again to see how it stacks up to your original numbers, this will save headaches later on, just in case something has the opposite effect and slows your site down.

2. Use a WordPress Web Host

Before we go any further, I want to talk about your WordPress host. No matter how much work you do at your end, your host plays a critical role in your site’s performance.

While the price tag of shared hosting makes it seem like a bargain, it comes at a different cost. The risk of slow site speed, irregular performance, and frequent downtime are things that affect the reliability and speed of your site.

Read my article Cheap Web Hosting – Things To Consider.

The stress isn’t worth it, especially when you can choose a managed WordPress host (like what I offer) that’ll take care of a huge chunk of your performance woes. Check out my Hosting Service.

With my WordPress hosting, you’ll get outstanding performance, even with high traffic websites. Robust caching comes standard on every site, and you can always add a content management network (CDN) to watch your site fly.

3. Audit Your Plugins

The addition of plugins can bring a lot of functionality and fun stuff that makes your site far beyond basic, but unfortunately, many carry a performance cost with them.

I see so many slow sites that are immediately cured just by deactivating a few plugins. The best way to avoid a migraine from managing plugins is to keep performance in mind as you are developing your site.

You don’t want to spend weeks relying on a plugin, only for it to become the bane of your existence when you find out it makes your site extremely slow.

Read reviews, test them regularly, and be sure you’re updating them to the latest version of WordPress when it’s available.

All this negative talk about plugins is to demonstrate the potential risks of using bad ones. The offenders are usually developed by inexperienced programmers or those that make a ton of database queries and require intensive logic processing.

However, there is good news. The WordPress repository hosts thousands of useful plugins that won’t frustrate your users and readers as they use your site. The trick is to use as few plugins as possible. Many functions can be coded into a theme by a web developer (I know a really good one).

If you find that you need to use a plugin, be sure to use a well documented and well-regarded developer.

A good example is the use of the Yoast Plugin. Joost de Valk created Yoast for on-page SEO, specifically for WordPress. Although on-page SEO is possible without it, the job would be manual, tiresome, and open to errors.

SEO plugins are plentiful, but I can assure you that not all are created equal—the Yoast plugin ticks all the boxes, especially for website speed.

A classic case of a plugin that works against website speed is Elementor. Now, Elementor does have its place, and it does offer a good solution for those with no other choice.

Elementor is what’s called a Page Builder and allows absolutely anyone to build a WordPress Website. I’m not going to explain how to use it here, other than to say I’ve used it plenty of times over the years where clients want/need to add pages without relying on my services continually.

I now have a strict No Elementor Policy. The main reason being that way too many files need to be loaded to make it work. The more files required (each file is an HTTP Request), the slower your site speed.

(I’m not belittling Elementor; as I’ve already said, it has its place. But when site speed is essential, Elementor is not going to help things.)

You can track down which plugins might be causing performance losses on your site relatively quickly. In development, I use a plugin called Query Monitor. Query Monitor sifts through your whole site and reports back what percentage of total load time each plugin.

If you’re serious about site speed, you’ll run a test each time you activate a new plugin. It is crucial in ensuring you’re not installing something that will sacrifice speed.

Also, by auditing regularly, you won’t waste time messing with a plugin if it’s not performing well in the long run. If there are plugins that you can’t live without but still make your site slow, there are ways to continue using them.

Generally, if you determine that a plugin is loading slowly, the next step is to talk to your hosting company. They may be able to increase the memory on your server. Upgrading your plan to the next level to get more memory and, thus, more speed may be necessary.

4. Speed Up Your WordPress Site – Cache Everything

Caching, both on the server and client-side, is an integral part of WordPress site speed and performance. Once a user loads your site for the first time, you can take advantage of browser capabilities to cache. Browsers store the contents of that site locally, so on the next visit, the user already has those assets loaded.

Similarly, having a caching layer works wonders for serving your site very quickly on the server-side. The most common way to enable server-side caching with WordPress is by using the W3 Total Cache plugin.

Almost all hosts need W3 Total Cache plugin (or one similar). However, with my web hosting service, I handle server-side caching for you behind the scenes with Varnish.

Using Varnish instead of a plugin will increase speeds dramatically because Varnish never has to talk to PHP. It serves up cached static copies of your site immediately (without even touching the PHP application layer), whereas PHP still runs plugins.

My server-side caching tells the browser how long to cache assets for by setting “expires headers.” The browser won’t ask the server for more information if those headers tell it not to ask.

You mainly have to start thinking about caching when you install plugins or third-party WordPress themes. Theme and plugin developers often set their own headers that override your host’s default settings, adversely affecting the caching mechanisms.

WooCommerce, for example, disables server-side caching by setting cookies. It’s typically not apparent when plugins or themes disable caching, so a good thing to do is reach out to your hosting provider and ask that they force cache your site.

Be careful not to force caching on pages that truly need cookies to work, though, such as WooCommerce cart and checkout pages.

5. Use a Content Delivery Network to speed up your WordPress site

A content delivery network (or CDN) is a network of servers that stores your website and its assets from different locations based on the user’s location.

For example, let’s say you’re not using a CDN and your site is hosted in Sydney. When someone from, say, Barcelona visits your site, they have to retrieve all the assets from your server in Sydney. The long-distance between the two locations takes longer than if someone from Brisbane loads your site (hosted in Sydney).

A CDN, on the other hand, serves your assets from a bunch of different servers based around the world. Locations are in New York, Seattle, Omaha, Paris, London, Beijing, San Francisco, Sydney (and many more).

The concept is that users will load the required assets from the server closest to them and not sacrifice load time.

With a CDN, that same person from Barcelona will now load the assets from a data centre in London or Paris instead of San Francisco. Using a CDN will increase the speed of your site for users throughout the world!

Some of the most popular CDNs include Amazon Web Services, Cloudflare, and MaxCDN. Most of them have free plans, but if you pull many visitors and have lots of assets, you’ll most likely have to pay for it.

Of course, my web hosting service provides a CDN at no extra cost. You can’t beat that.

6. Downsize Your Static Assets If You Want to Speed Up Your WordPress Site

Now it’s time to take a look at your code. If you want to achieve optimal performance, there’s some work needed with static assets before uploading them to your server. This work essentially comes down to compression and minification.

You always want to serve the fewest amount of assets possible and make sure they are correctly compressed to make your site as fast as possible.

Images

Images are often the largest files on a page, responsible for the most significant delay in page load time.

However, the good thing about images is that most browsers load them asynchronously, unlike CSS and JavaScript. That at least helps with the perceived performance of a page. But it would help if you still made sure that you have:

  1. As few images as possible.
  2. Correct compression of images.

Compression tools are necessary for squeezing out as much excess as possible on images. ImageOptim is an excellent Mac app that does this well, along with OptiPNG and jpegtran for use with task runners like Grunt.

TinyPNG is my go-to web-based compression tool. It can become cumbersome doing this with every image, though, and sometimes not even feasible if multiple people contribute content. Thankfully, there are some WordPress specific tools available to help with this task.

When you have multiple sizes of images cropped upon upload (usually defined in most themes), using an image compression WordPress plugin is particularly important. WordPress generates the new images from that; even if the initial image you uploaded is as trimmed and compressed as possible, those new sizes won’t be compressed.

I have used and recommend TinyPNG for WordPress and Ewww Cloud Optimizer to handle the compression and optimization of images uploaded to WordPress.

CSS

The most important thing to do with your CSS before the browser loads the asset is compressing the file(s) and removing unused selectors.

Cultivating a good workflow when developing themes makes this process trivial, especially if you’re using a pre-processor like Sass. I prefer Grunt, which is a JavaScript task runner that executes commands for you while developing.

There’s a plugin for Grunt called grunt-contrib-sass that compiles all your Sass files down into one. It then minifies it, and compresses it. Throw in the grunt-contrib-watch plugin on top of that. It will run the Sass task whenever you save a file.

Don’t lose sleep if you’re not using the latest and greatest CSS methodology, but try to follow a standard while authoring CSS to avoid duplication and huge file sizes.

JavaScript

The golden rules of optimizing JavaScript are simple: Serve as few JavaScript files as possible, minify, and concatenate. Third-party WordPress plugins can be detrimental by bloating your document with un-minified JavaScript files. So it’s essential to be mindful when choosing plugins. Ideally, you’d concatenate ALL JavaScript files into one and then minify the heck out of it.

For times when it’s not possible to concatenate all JavaScript into

one file, there are HTML attributes called “async” and “defer” that will load JavaScript files asynchronously or once the rest of the page is loaded.

7. Take Care with Writing Theme Logic to speed up your WordPress site

You can do many things from a theme development perspective to make your back-end performance as high as possible. Nasty loops that make tons of comparisons and use lots of memory (if, if, if, else, if, else, so on) can slow down the loading of a page.

There are many articles on performant PHP. But my best advice is to just take care in writing your theme logic.

One tool that has saved me from a logic intensive loop taking forever to load is the Transients API. WordPress transients store cached data in the database temporarily, which means the logic only has to run once (whenever the first visitor loads the page) and then the results of that are stored in the database.

The Codex has good documentation on the usage of transients and a host of other articles found with a Google search.

8. Speed Up Your WordPress Site – Serve Assets on a Silver Platter

How you serve up static assets like images, CSS, and JavaScript is critical to the way your site loads? Follow these tips to optimize each type of asset.

CSS

Once your stylesheet is compressed and ready to go, the easiest (and the standard) way to load it is to reference it in the <head>. That way, the browser loads and parses it before the rest of the DOM is loaded.

    
    <head>
    <link rel="stylesheet" href="path/to/style.css">
    <head>
    
    

However, there’s a reasonably new technique where “critical” styles are inlined in the <head>, and then the entire stylesheet is loaded asynchronously using JavaScript.

Critical styles are defined as those that are needed to paint everything that the user first sees (above the fold) when they initially load your page. The best way to grab critical styles from a page is by using Grunt (or another task runner) paired with a task like grunt-critical or grunt-criticalcss. The Penthouse web generator is also a reliable way of extracting critical styles.

Once you have the critical CSS ready, it’s as simple as inserting it into a <style> tag in the head.

    
    <head>
    <style> /* all of your critical styles go here */ <style>
    <head>
    
    

Now to get the full stylesheet loaded, a JavaScript loader like loadCSS is required. The Filament Group has a much more extensive article on using this technique, including examples with loadCSS.

JavaScript

The most common place to reference JavaScript is at the bottom of your document, right before the closing tag. However, there are more advanced techniques to load JavaScript.

Again, the Filament Group has done tons of research on this and has several open source projects that you can use if you’re aiming for a super-fast page load time.

(I’m in no way affiliated with Filament Group, by the way; It’s just that their stuff is fantastic).

The best approach seems to be to load scripts dynamically by inlining a small function in the <head>; that then appends script tags without blocking the rest of the page. For more information, check out the loadJS script.

After you’ve gone through these performance-enhancing practices, if your site is still unreasonably slow, I’d recommend hiring a developer (like me!) who can look into it, find the source of the problem, and fix the issue.

Contact

If you think I can help you with your project, let me know!

(All fields are required because those spammers are a pesky bunch)