Ready to learn how to speed WordPress site and increase performance? Follow along with the full guide, or use these chapters to jump to the section you need!
You’ve spent months designing a stunning WordPress site and working with clients and collaborators to create something special. Now you’ve launched it to the public, and yay! You’re all done. But, wait…it’s kind of slow. You know that site speed is crucial to the success of your business (and that of your clients).
It’s easy to feel frustrated at this point in the project, but don’t fret. 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 smooth, solid, and super speedy.
Benchmark your site with testing
Before you start and make any changes to your site, it’s important to take some measurements and run a few tests to get some benchmarks. This will help you know exactly where you’re at right now and ensure the changes you’re making are improving your site (instead of making things worse)! To test 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, and these metrics will help you know whether it’s the back-end or front-end causing a site to load slowly. Google PageSpeed Insights is best for looking at how your site is rendered by the browser and can help you identify what you can improve on the front end.
Before you make any changes, it’s important to benchmark where you’re at.
Once you have these benchmarks, you’ll be able to start understanding where you can make the biggest improvements in your site. And remember: 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 you some major headaches, just in case something has the opposite effect and slows your site down!
Make sure you’ve got the best host
Before we go any further, we need to talk about your WordPress host. No matter how much work you do on your end, at the end of the day, your host also plays a critical role in the performance of your site.
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. All things that affect the reliability and speed WordPress site. The stress isn’t worth it, especially when you can choose a managed WordPress host that’ll take care of a huge chunk of your performance woes.
Audit your plugins
The addition of plugins to a site can bring a lot of functionality and fun stuff that makes your site far beyond basic, but unfortunately, many bring a performance overhead with them. We’ve seen 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 when it’s available.
You don’t want to spend weeks relying on a plugin, only for it to become the bane of your site’s existance.
Plugins can enhance your site’s functionality but can also slow it down if not managed carefully. To avoid performance issues, keep these tips in mind:
- Choose Wisely: Research plugins before installing. Look for reviews and choose those with good performance records.
- Test Regularly: Use tools like Query Monitor to check how much each plugin impacts your site’s speed. Run tests whenever you add a new plugin.
- Update Frequently: Keep plugins up to date to benefit from performance improvements and bug fixes.
- Optimize: If a necessary plugin slows your site, consider upgrading your hosting plan for more memory to mitigate the impact.
By carefully selecting, testing, and updating plugins, you can keep your site fast and efficient.
Cache everything
Caching is crucial for improving WordPress site performance. Here’s how it works:
- Client-Side Caching: After a user visits your site, their browser can store (cache) site content locally. This means the next time they visit, the site loads faster since it pulls data from their cache rather than re-downloading it.
- Server-Side Caching: On the server, caching helps deliver your site quickly. The W3 Total Cache plugin is a popular choice for setting this up on most hosts. Server-side caching works by serving cached copies of your site directly, which speeds things up since it avoids reprocessing PHP scripts.
Key Points:
- Client-Side Caching: Reduces load times by storing data in the user’s browser.
- Server-Side Caching: Accelerates delivery by using cached copies of your site.
- Caching Headers: Inform browsers how long to store cached content, minimizing server requests.
Server-side caching can drastically speed WordPress site.
You mainly have to start thinking about caching when you start installing plugins or third-party themes. Theme and plugin developers can set their headers that can 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 very 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.
Use a CDN to speed WordPress site
A Content Delivery Network (CDN) improves your site’s performance by distributing your website and its assets across multiple servers around the world.
Here’s how it works:
- Without a CDN: If your site is hosted in San Francisco, a user in Barcelona would have to download all site assets from that San Francisco server, which takes longer due to the distance.
- With a CDN: Your site’s assets are stored on multiple servers in various locations, like New York, Paris, London, Beijing, and more. This means users can download assets from a server closer to them, speeding up load times.
In summary, a CDN reduces the distance data has to travel, which helps your site load faster for users no matter where they are.
The idea is that users will hit the server closest to them and not sacrifice load time since there’s a smaller distance between them and the server. With a CDN, that same person from Barcelona will now hit a data center in London or Paris, instead of San Francisco. Using a CDN will increase the speed of WordPress sites 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 a lot of visitors and have lots of assets, you’ll most likely have to pay for it. They’re typically pretty easy to set up.
Downsize your static assets
Now it’s time to take a look at your code. If you want to achieve optimal performance, there’s some work to be done 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, compressed as much as you can, to make your site as fast as possible.
IMAGES
Images are often the biggest files on a page, responsible for the largest delay in page load time. The good thing about images, however, is that, unlike CSS and JavaScript, most browsers load them asynchronously. That at least helps with the perceived performance of a page, but you still want to make sure that:
- You’re serving as few images as possible.
- Those images are compressed as much as possible.
Compression tools are necessary for squeezing out as much excess as possible on images. ImageOptim is a great Mac app that does this well, along with OptiPNG and jpegtran for use with task runners like Grunt. TinyPNG is our go-to web-based compression tool. It can become cumbersome doing this with every image, though, and sometimes not even feasible if multiple people are contributing content. Thankfully, there are some WordPress-specific tools available to help with this.
When you have multiple sizes of images that are cropped upon upload (usually defined in most themes), using an image compression WordPress plugin is particularly important. Even if the initial image that you uploaded is as trimmed and compressed as possible, when WordPress generates the new images from that, those new sizes won’t be compressed.
We have used and recommended 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 it’s delivered to the browser is simply to compress it and remove unused selectors. Getting a good development workflow down when developing themes makes this process trivial, especially if you’re using a pre-processor like Sass. We’d recommend 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 simply compiles all your Sass files down into one, minifies it, and compresses it. Throw in the grunt-contrib-watch plugin on top of that, and 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 some sort of 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 unminified blocking JavaScript files, so it’s important 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 your links into one, there are HTML attributes called “async” and “defer” that can be used to load JavaScript files asynchronously or once the rest of the page is loaded.
Take care in writing your theme logic
To optimize back-end performance in theme development, consider these tips:
- Optimize Logic: Avoid complex, memory-intensive loops and excessive comparisons, as they can slow down page loading. Writing efficient theme logic is crucial.
- Use Transients API: The Transients API helps by storing cached data temporarily in the database. This means your complex logic only runs once per transient, speeding up page loads for subsequent visitors.
For more details on using the Transients API, check the Codex or find additional resources through a quick Google search.
Serve up 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 by far, the standard) way to load it is to just reference it in the. That way, the browser loads and parses it before the rest of the DOM is loaded.
However, there’s a fairly new technique where “critical” styles are inlined in the <head> and then the full 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-critical CSS. The Penthouse web generator is also a solid 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.
JAVASCRIPT
The most common place nowadays to reference JavaScript is at the bottom of your document, right before the closing tag. However, there are more advanced techniques to load JavaScript. 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.
After you’ve gone through these performance-enhancing practices, if your site is still really slow, we’d recommend hiring a developer who can look into it and find the source of the problem and/or choosing a new WordPress host.
