This is quite a bold claim. And we’re going to say straight away that this isn’t going to be possible for every WordPress site. But, for a good amount of sites this is entirely possible. This article assumes you already know what caching is. This is not recommended for beginners, but should serve as a good guide for intermediate users. Advanced users may find some value in this, but will most likely want to dig much further.
Having a fast website has long proven to be beneficial not only for SEO, but for keeping visitors on your website. Tools like Google PageSpeed and Yahoo YSlow do a bunch of tests on your site and award you a letter grade (A being the best). These results aren’t gospel though; they are simply recommendations (and opinions) from two companies. It’s entirely possible that a website with a D grade will load faster than one with an A grade.We will discuss performance optimization more in future articles, but for now let’s focus on getting that coveted A grade.
You will notice that we haven’t mentioned getting an A grade in YSlow. This is because YSlow will score you down for expires headers (these tell the browser how long to cache something for) if you are fetching any external JavaScript files that are beyond your control. This includes things such as Google Analytics and Google Fonts.
As mentioned above, this won’t be possible for everyone. Some of the determining factors are:
- Your server stack. This is the server software powering your website. WordPress hosts often use Apache, NGINX or LiteSpeed.
- Your theme. Not all themes are equal. If you are running a behemoth pagebuilder theme then this may not work.
- Plugins. If you are using a million plugins this is also unlikely to work.
Before we start this take a backup of your files and database. You should carry this out on a staging environment before pushing to live. You have been warned.
We are testing this on a LiteSpeed web server. Results may vary on other server stacks but should be similar.
Let’s go!
1. Make a benchmark
The first thing we need to do is test the site. This gives us a benchmark. We test using the excellent GTmetrix. Simply paste in your URL and wait for the test to complete. You should be presented with your PageSpeed letter grade.
2. Let’s cache and optimize
The first plugin we’re going to use is LiteSpeed Cache. This plugin is optimized for LiteSpeed web servers (and has some exclusive features for them) but also works with Apache and NGINX. If you have another caching plugin installed, you’ll need to disable this before proceeding.
LiteSpeed Cache has some really sensible defaults, but there’s also a bunch of advanced options at our disposal to squeeze some extra performance. Go ahead and click the ‘advanced’ tab to reveal these.
Once in the advanced options, head over to the ‘optimize’ tab. Before we change any settings, we need to determine whether the server is running http/2. To do this, simply go to the KeyCDN checker and enter your url.
We’re going to change the following:
Important. With each setting you should purge the cache (in the admin bar) and test your website. Only proceed to the next step if it’s working. If it isn’t, turn the individual setting off and move on to the next step.
- CSS Minify. Turn on. This removes all unnecessary white-space in your CSS files.
- CSS Combine. Turn on. This combines multiple CSS files in to one larger files (lowers requests). This may not be strictly necessary with http/2, but PageSpeed currently doesn’t recognise http/2. More information. If this causes issues either disable it or check out Litespeed’s guide.
- CSS HTTP/2 Push. Turn on. Only if your server supports http/2.
- JS Minify. Turn on. This removes all unnecessary white-space in your JavaScript files.
- JS Combine. Turn on. This combines multiple JS files in to one larger files (lowers requests). This may not be strictly necessary with http/2, but PageSpeed currently doesn’t recognise http/2. More information. If this causes issues either disable it or check out Litespeed’s guide.
- HTML Minify. Turn on.
- Inline CSS Minify. Turn on.
- Inline JS Minify. Turn on.
If this has all gone smoothly, your site should be feeling noticeably faster already.
Optimize your images
Images are the low-hanging fruit of the optimization world. No matter how much JS and CSS optimizing you do, a single image can increase your page size (and thus load time) ten fold.
Optional: Install Imsanity
Ideally, you should be optimizing your images before putting them in your media library, but this is often impossible to police. If you work on client sites you can almost guarantee someone starts to upload images that would fit on the side of a bus almost immediately after handover. To stop this from happening, Imsanity is a super simple plugin that can save you a lot of pain. It’s not intrusive and 100% free. This lets you set a maximum size of image that can be uploaded, if this is exceeded then the image gets resized to the maximum. Very nifty. It can bulk resize existing images, but this may be slow and there are probably more efficient methods of doing this. Once installed, there are only a few settings.
- Images uploaded within a Page/Post. This accepts a width and height in pixels. There is no right answer here as every site is different, but generally speaking this should be the largest possible image size you think you will ever need on your site. On Wp Editorial we use 1500px x 1500px.
- Images uploaded directly to the Media Library. See above.
- Images uploaded elsewhere (Theme headers, backgrounds, logos, etc). See above.
- JPG image quality. The default is 82 (out of 100). This is usually a good number, but if your site really relies on high quality images then you may want to increase this.
- Convert BMP To JPG. The default is yes – we’d suggest you leave it that way unless there’s a good reason not to. Bitmap images are huge.
- Convert PNG To JPG. The default is no – we’d suggest leaving it his way. You will often need PNG’s for transparency.
Install Jetpack
This may be a tad controversial, and for sure not everyone will agree with this. Jetpack is a plugin created by Automattic. It has both a free plan and paid plans, and includes much more than just image optimisation.
This post is not sponsored by Jetpack, but we do use it on WP Editorial.
Some reasons you may NOT want to install Jetpack:
- You have to connect it to a WordPress.com account – if you don’t like the privacy aspect of this then this may not be for you and we’ll go in to some alternatives towards the end of this article.
- Jetpack has a bunch of features you may not need; this adds some bloat, although individual features can be turned on/off.
- There are occasional ads in the WordPress admin for pro features, these are usually pretty tasteful though.
- You can’t easily remove images from the CDN, you have to manually request this.
Some reasons TO install Jetpack:
- Jetpack provides a free image CDN with a super simple setup (just a few clicks). Once enabled it automatically starts serving your images and some other static assets from their global CDN.
- The image CDN automatically optimises images and serves mobile images at appropriate sizes.
- The creators, Automattic own WordPress.com – it’s a product specifically designed for WordPress.
- It has a bunch of other freatures that you may want to use anyway, such as brute force protection for your login.
Ok, let’s get installing:
- Get Jetpack from the WordPress plugin repository
- Connect a WordPress.com account (free)
- In your WordPress admin go to Jetpack >> Dashboard
- Head over to the “Performance” tab
- Check:
- Enable site accelerator
- Speed up image load times
- Speed up static file load times
- Optional: you can also enable lazy loading of images. This is particularly useful for image heavy sites. LiteSpeed Cache can also do this.
That’s it. Your images are now being served from Jetpack’s CDN. It can take a few minutes for this to happen.
Enjoy
You should now re-test your website in GTmetrix. Hopefully you’ve achieved a grade A PageSpeed score. Let us know your success (or failures) in the comments.
Final Thoughts
- You may wish to use Cloudflare for your DNS, not only is their DNS service excellent but there’s also some good (and free) optimisation settings too. On paid accounts, Cloudflare can automatically resize and optimize images which may replace Jetpack.
- Other CDN’s incude KeyCDN, which has a WordPress plugin for easy setup.
Neither KeyCDN or Cloudflare sponsor this article.