How to get a perfect PageSpeed score and speed up WordPress
Site speed is a growing metric for ranking high in the Search Engine Results Pages (SERPS), and Google has hinted that it’s getting more and more important, particularly since the 2015 mobile optimized smackdown. It’s also crucial if you want to retain your site visitors.
I’m a Colorado wedding photographer in Estes Park, and in my case, busy clients don’t have time to sit around and twiddle their thumbs waiting for a 2010 Flash site to load up. They want to see images, and they want them in retina resolution, and they want to see them now. And now generally means 5 seconds ago.
Google likes fast pages and hates slow pages. Witness the fall of Flash sites — they not only were unreadable to the big Googles, but they were excruciatingly slow. Sure, they did some cool stuff, and sure your visitors got to check out some interesting photographic effect or whatever, but I’d wager that more often than not, the visitors were gone before the “loading” icon finished. Fast sites rule.
In 2015, I spent some time learning lots about this and got my headshots site at headshotsdenver.com to load in a half a second, which puts it in the top 2% of sites on the Internet in terms of page load. Granted, there’s not a ton of content on the homepage, but no matter. It performs really well, and I will be using these techniques as I move all my other web sites over in the future to new themes.
My stats are as follows: GTMetrix is at 99% for PageLoad and 93% for YSlow. Google Desktop is 100. Google Mobile is 97 for Load Speed and 100 for User Experience. And Pingdom is a cool 100, with a page load of 433 milliseconds. Ohyeah.
Here’s the GTMetrix grab.
So, start by taking a baseline speed test at the following sites, and write down all your results. As you continue to update your site, you will see what modifications improve and/or slow down your page. Here are the links:
- GTMetrix – Based out of Vancouver, BC.
- Pingdom Tools – Make sure when you run the tests that you click the little dropdown box and consistently choose the same city.
- Google PageSpeed Insights
I’d almost suggest keeping the data in a spreadsheet with comments on how your site was configured when you took the reading. It can get a little confusing if you want to refer back to a fast reading can’t can’t remember what plugins you had installed at the time.
Also, if you have caching software installed, empty the cache each time you do anything and before you run the test, and then run the test twice. The first go-round, you will be generating content for the cache; the second test will measure the speed with the content saved in the cache, which is what you’re after.
Full disclosure, some of the product links are affiliate links, so I will get a small percentage of the sale if you purchase. However, I fully believe in everything I’ve written here!
Step 1: Buy a Fast WordPress Theme
WordPress is a content king, and for good reason. It has evolved into a platform that is easy to update and maintain, and very customizable. A theme sits on top of WordPress giving a site its style.
Right now, I am 100% on board with Elegant Themes’s Divi theme. It is super amazing, and I’ll talk more about it in a few paragraphs. But first, a bit of history.
Some years ago, I was buying Themeforest Themes for my web sites. ThemeForest is a big online marketplace for developers to sell their themes, and there are a lot of nice WordPress themes for $25 to $50. You can go here and search through the WordPress section, and make sure that whatever catches your eye is HTML5 (lots faster) and is responsive. Responsive themes resize based on the browser window and the type of browser (phone, tablet, PC), and are looked upon favorably by Google. The problem is that ThemeForest has a reputation for low quality control, and some of the themes are pretty bloated and don’t run fast. However, there are some great products there if you are careful, and themes like Arvada and X are supposedly good.
As time passed, I bought a custom coded theme that was based on my ThemeForest theme. It had some experimental SEO baked in, but the coders did a crappy job with the CSS and never finished styling it, and I got fed up with working with them. And to boot, the SEO ideas we were experimenting with didn’t really work. I got continually frustrated until one of my sites was hacked, basically because the theme was out of date and I didn’t have a team of developers keeping it modern. So in early 2015 I started searching for a new theme. At first I really considered the highly recommended Thesis and Genesis based themes.
- Thesis Themes – This DIYTheme framework has for a long time been one of the most respected frameworks in WordPress. Basically, Thesis is under-the-hood, and a custom theme sits on top of it.
- Genesis Themes – Similar to Thesis, but even more recommended, as best I could tell. Genesis is uber fast, is optimized well for search engines, and incorporates schema.org markup. Thesis and Genesis are competitors and push each other to built probably the best WordPress themes and child themes out there.
However, they both require lots of coding knowledge that I simply don’t have, and as much as I’d like to learn, I’m a photographer. So, I kept looking, and eventually took a gamble on ElegantThemes’ Divi theme, shown below.
It can be designed into almost any type of web site you can imagine, it’s got a super smart page builder, lots of great features, and, since I bought a lifetime unlimited membership for $250, I can use every single one of ElegantThemes’ themes or plugins on every single web site I own or one day might own. That seemed like a rippin deal. And I get a team of developers at my back offering support and updates for life. Kind of a no brainer if you ask me.
So yes, I am a proud Elegant Themes customer. Click over to ElegantThemes.com to join!
You will probably come across this negative review by Chris Lema as you read about Divi on the Internet. Chris’ main beef is that Divi loads your pages up with shortcode, causing you to get locked into the theme, but the team at ElegantThemes is working on a plugin to export your Divi content out without shortcodes. So one day, should I ever decide to migrate to a new site, I can use that forthcoming plugin (assuming they finish it). I imagine they will and I decided to bank on it.
Besides, almost every web site theme uses shortcodes, so if I switched out from another site, I’d still have to go through and clean my code up. And, I don’t really intend on switching any time soon. But I did have to think about this a lot.
Also, there’s super active Facebook group called Divi Theme Users, who are active and have a lot of knowledge to drop, on top of the developers who patrol the ElegantThemes.com support forums. So, I felt pretty good in my choice.
The only problem I could imagine with Divi is it doesn’t have the speedy reputation that other themes do. I have discovered that reputation to be completely false. With the right setup, it can haul ass.
Step 2: Choose Fast Hosting for Fast Page Loads
Next, switch to faster SSD based hosting if you haven’t done so already. This is pretty key, as WordPress is extremely database intensive. The majority of web hosts run their servers off relatively slow platter based hard drives, versus the newer, faster, more failsafe, and far more expensive solid state drives. SSDs make WordPress sites scream, and can often be found in smaller hosting providers that won’t break your bank. My host is A2Hosting, a small and highly acclaimed web host that runs on renewable energy. Here is a little graphic about the benefits of SSD from them.
For what it’s worth, I ditched Hostgator for A2’s SSD service and my site speed increased 50%. Even better, A2 hosting allows you to choose servers in the US and in Europe to suit your own needs.
If you sign up for a new hosting provider now, you’ll have your site on a new host tomorrow morning and can get to work. Do it and you’ll be stoked. I recommend the following small web hosts, which by default have SSD hosting and are smaller companies with fast tech support.
There are bigger web hosts, cheaper web hosts, but not many that are super fast, have great server up times, and have great customer support. Pricing is an approximation and it may have changed since I wrore this.
- A2Hosting – This is what I use now, and I’ve been totally thrilled. I prepaid for three years of service and got a great deal. Right now there’s a 51% off coupon if you follow the link. Tech support is fast, and the servers run on renewable energy. There is a great backup option called ServerRewind that’s offered for most packages for free. An unlimited domain plan is currently less than $5 a month, and you can speed it up all all sorts of goodies for $9/mo.
- InMotion Hosting – Inmotion’s business hosting starts at $6/month for a 2 domain personal plan, and $8/month for up to 6 domains. You’ll get some free advertising credits with these guys, which might make the extra dollar or two a month worthwhile. Both include SSD drives.
- Arvixe Hosting – If you have only 1 domain, go for the $4/month personal plan and pay a little extra for the private IP, so you’re not sharing a server with a bunch of web sites that you have no idea what they do. You’ll want your own IP because Google might — though nobody knows for sure — dislike you if you share a server with a spammer. If you have up to six domains, go for the $7/month personal plan. Both come with SSDs.
- iPage – While they have super cheap hosting, don’t get the cheapest plan — when you check out, add the WordPress Essential option to your cart. It’s a few dollars more a month, bringing it about on part with the rest of the other hosts, but you get a super fast SSD drive on your server.
If you are looking for the fastest hosts around, check one of these out. They have their own caching software (more on this later) and you won’t need a CDN, so hosting on them requires less setup and fooling, but they are a bit more cash. Performance is widely considered to be amazing. I haven’t tested them but I don’t know how much faster they can be compared to A2Hosting’s service with my site.
- Media Temple, a premium WordPress host that’s one of the absolute fastest in the business.
- WP Engine – Another terrific Wordpress host, and the main competitor to Media Temple. You can’t go wrong with these hosts.
Step 3: Shrink Every Image On The Site
I recommend FTPing into your site, duplicating your wp-content folder (so now you have “wp-content copy”) downloading the entire wp-content folder, and then dragging it and dropping it onto an application called JPEGMini. This is a crazy piece of software that somehow recompresses JPEGs with little to no loss in quality. It’s basically magic and I have no idea how it works. They’ve somehow rewritten JPEG encoding algorithms with an even better way to save files and reduce file size without dropping quality in any noticeable way.
On full res images, expect an 80% savings in file size. For web res images, expect a 40% savings in file size.
Buy JPEGMini here from BHPhoto.com. I can’t recommend it enough.
There are two versions, a Lite version for $20 and a Pro version for $150.
- JEPGMini Lite – $20. If you are just optimizing small web sites and using small web res images, it may be worth it to save the money and buy the Lite version, which is $20. It will rip through small web res JPEGs and PNG files pretty quickly.
- JPEGMini Pro – $150. This, in my opinion, is totally worth it. If you buy the pro version, you’ll get a few huge advantages. First, the software will utilize all cores of your computer. That means, at least on my quad core Macbook Pro, it goes 4x faster. On my 8 core Mac Pro, it goes 8x faster. Also, it comes with an Adobe Lightroom plugin that builds JPEGMini into your workflow, so you can export directly from Lightroom and run the files through the compressor engine. When you export from Lightroom, you can export at 100% Lightroom quality but then LR runs it through JPEGMini and the resulting files are look like 99% quality but are a fifth the size. If you start running it on your entire hard drive, you can save tens of gigs of space, and the extra speed will be worth it in the long run.
I know it’s expensive, but if you get one more booked job because your site is faster and therefore hopped up from the top of page 2 to the bottom of page 1 in the search results, it was worth it.
While you’re at it, drop other folders on it! Maybe your Camera Uploads folder from your iPhone? Whatever! It’s insane. I shrunk my iPhone pictures folder by about 5 gigs.
Wait! You’re not done yet! Afterward, drop all the images again onto a freeware app called ImageOptim. ImageOptim is lossless, so there will be no drop in image quality. It removes metadata and color profiles from images, and although those things take up a relatively minor percentage of an image at full res, they can take up quite a bit of space for web res files.
It is highly recommended that you run the software first through JPEGMini, which is lossy, and then through the lossless ImageOptim second.
Now you can re-upload the entire wp-content folder and overwrite everything with your ultrafast, highly optimized images. If something breaks, just delete your “wp-content” directory, and then delete the word “copy” from “wp-content copy” and you have your backup back in action.
Another contender besides the JPEGMini + ImageOptim workflow, which I heard about on the Divi Facebook user group, is called Kraken.io. Kraken works very similarly to JPEGMini + ImageOptim, but it’s web based.
Essentially Kraken.io has a lossless compressor, which strips away meta info and color profiles just like ImageOptim. And it has a lossy compressor, which recompresses the images and then strips away that extraneous data just like what would happen if you used JPEGMini and followed up with ImageOptim.
The difference is that Kraken charges a monthly fee and its Wordpress install makes calls to Kraken’s servers via an API to crunch images. So you upload files and Kraken takes care of the rest.
Kraken’s pricing as I write this is as follows:
- $5/month for up go 500MB of images
- $9/month for up to 2GB of images
- $19/month or up to 5GB of images
- $39/month for up to 15B of images
- $79/month for up to 60GB of images
The two highest plans have reseller options, where you can create an API key for additional web sites for $5/month. This might be a good option for small web design studios, but it could get costly fairly fast.
Out of curiosity, I decided to run tests on compression ratios and see how well the different options work.
I took all the images from a blog post about horses and ran them through different scenarios. You can see some of the images I’m talking about here.
I crunched 7 different images. The results are as follows:
- No processing – 1,136KB
- ImageOptim Only (lossless)- 1,081KB
- JPEGMini Only (lossy) – 742KB
- JPEGMini + ImageOptim – 709KB
- Kraken.io Lossless – 1,081KB
- Kraken.io Lossy – 728KB
So, Kraken’s lossless compression is identical to ImageOptim’s.
The largest size drop, albeit by a small margin, appears to be the JPEGMini + ImageOptim method.
And then the question of quality. I’ll let you be the judge. Can you tell which image is the regular image without processing, the JPEGMini + ImageOptim image (which is lossy and therefore should suffer a drop in quality) and the Kraken.io image (which is also lossy and should suffer a drop in quality)? I can, but only barely, and I have to look closely at the logo.
The images of the horses are posted in this order: Kraken.io first, JPEGMini + ImageOptim second, and then last is regular jpeg compression.
I personally prefer the JPEGMini + ImageOptim method for a number of reasons:
- I hate monthly fees
- I squeeze a little more kilobytes out of the images
- I can drop entire folders of high images onto the JPEGMini app and free up space on my laptop, which is limited to its relatively small SSD
- I can upload smaller files to my web sites, which doesn’t bog down my 2 megabit upload speeds
- I can do cloud backups of my high res files a lot faster
- I can deliver jobs to clients on very small drives
Professional web masters will need to weigh the advantages and disadvantages of the Kraken.io method, with its monthly fees but seamless integration.
Step 4: General WordPress Plugins for Fast Page Loads
This step is obviously going to be different with every theme and every host, so I am going to tailor this to my own Divi site and my own host, which allows me to install W3 Total Cache. As you start fooling around, do a before and after test on the speed testing tools to see how that particular plugin works. Some of these things may break your web site, so you might need to uninstall them.
Let’s start with the plugins I just installed and forgot about. These plugins are plug and play and require no configuration at all.
- Disable Google Fonts – Set it and forget it. Lots of web sites, including Divi, allow you to choose fronts from a huge Google database of fonts. I want fast load speeds. Maybe my site doesn’t look as snazzy without special fonts, but it loads in 433ms in part because it doesn’t have to make a call to Google and download a font stylesheet when I load a page.
- EWWW Image Optimizer – Smushes images a lot and makes them more optimized. This works automatically on images that you forget to optimize with the above methods.
- Remove query strings from static resources – Set it and forget it. I think W3 allows you to do this, but it required effort. This plugin does it without any fooling around. Query strings are often attached to js files and basically work as a marker to say what version it is, among other things. They are not necessary and prevent caching, so if you remove them, they get cache. At least, that’s my current understanding. If I’m wrong, leave a comment and correct me!
- Use Google Libraries – This is a cool plugin that will use cached .js and other files from Google’s cloud servers, instead of requiring your web site to spit them out each time. It works and helps my site go faster. You just install it and leave it alone. No setup necessary.
I used GZip Ninja Speed Compression for a bit to enable HTTP gzip compression. It is a set it and forget it plugin that compresses stuff. However, it’s made redundant by the fact that W3 Total Cache enables gzip compression, and page load speeds are no different if GZip or W3 are handling compression. So, I opted to have W3 Total Cache handle it since it’s one less thing to worry about.
Anyway, next step: there are the plugins I chose because they are lots faster than the competitors.
I used to use NextGen Gallery, which is one of the most popular image galleries in WordPress. I think it’s easy to use, and is a great way to categorize images. Unfortunately it’s a pig.
I got around this by using Plugin Organizer (more on this in a sec) to only have it load on pages where I wanted to display large portfolios, but worse still is that the images don’t get indexed well by Google. I’m not sure if this is because NextGen and Google don’t play nice, or if it’s because the grid of NextGen images was being created by a plugin called Justified Image Grid, which uses scripting to create a dynamic and very beautiful grid. Justified Image Grid did use noscript tags, but maybe Google doesn’t like them?
Either way, I wanted to try something new, and I knew I wanted compatibility with a particular lightbox that is my favorite. So I chose:
- FooGallery – A super lightweight grid and gallery plugin that just replaced both NextGen and Justified Image Grid. As I mentioned, I have had problems getting JIG-rendered NextGen galleries to get indexed, and the code that Foobox renders looks a lot more bot friendly. So hopefully this will increase image indexing. Also, it’s uber lightweight and goes extremely fast. The downside is it’s not as easy to manage as NextGen, but I’ll take it, especially if I’m not editing galleries that much.
- FooBox – Hands down the fastest lightbox in existence. It actually preloads images while you’re looking at the enlarged image on the screen, so you can sit there and page through images without any delay. It is mobile responsive, serves retina images, and can deregister other light boxes (which often come prepackaged with themes and other plugins), which is how I have this one set up to clean up code on my web site and increase load times. It also has a great social sharing option. You can tell it to work with images on posts, images on pages, or other combinations.
- Udinra All Image Sitemap – Yoast doesn’t create an image sitemap from FooGalleries like it does for NextGen galleries, so I installed this to create an image site map. I have Yoast creating page and post sitemaps and Udinra creating image site maps.
- iThemes Security – After my site was hacked (see above) I wanted to pay more attention to security. Strangely enough, I was using WordFence, but for whatever reason, it didn’t do its job. It’s also a server hog. So I chose iThemes Security, which is a lot faster and less of a server load than WordFence.
Then, I have a some plugins I like to have them installed just to make my life a little easier and to help me get found by Google.
- Elegant Themes Updater – Unrelated to page speed. You’ll need to find this one in your ElegantThemes.com user portal. It’s pretty rad in that it lets you update your theme without having to download and re-upload it every time an update comes out. I like this a lot.
- WordPress SEO by Yoast – The one that everyone uses. It works great. Like I mentioned earlier though, I use Udinra for image sitemaps.
Step 4: W3 Total Cache Tutorial
And last, the complicated part of this post: caching software. This isn’t something I fully understand, but I spent a lot of time with the trial and error method and believe I came up with settings that works well. I’m not sure what more I can do to improve things, but if you have any ideas, let me know!
There are several caching options on the market: WP Super Cache, which worked okay with Divi but not as well as W3 Total Cache. Both of these are free. There’s also a paid product called WP Rocket, but I wanted to stick with something that wasn’t going to generate recurring fees each year. So W3 Cache it is. W3 is extremely complicated, and if don’t want to deal with it you can pay the W3 guys $125 or something and they will configure it for you. But, if you don’t want to do that, here is what I did.
After installing W3 Total Cache, I went to General Settings.
- Toggle all caching types is not enabled (not ticked)
- Page Cache is enabled, with Disk:Enhanced
- Minify is not enabled.
- Database Cache is enabled, with method set to Disk
- Object Cache is enabled, with method set to Disk
- Browser Cache is Enabled
- CDN is not enabled
- Reverse Proxy is not enabled
- Network Performance and Security is not enabled, though it won’t show up anyway unless you have the CloudFlare extension installed, which I do. I will likely install CloudFlare later.
- Monitoring is not enabled
- And in the Miscellaneous tab, I have all unticked except Verify Rewrite Rules.
Keep in mind that my host and server are going to be different than yours, but what I learned the most is that I didn’t want W3 to do Minify, because it broke my site when it started trying to minify things. There is another plugin that I got to work concurrently with W3 that did a much smarter job at minifying things that’s called Autoptimize. More on that in the next section.
Over in the black bar in WordPress, click on the Page Cache section.
- In the General subsection, I have “cache posts page” ticked.
- In the Cache Preload subsection, I have “automatically prime the page cache” ticked, update interval is 900, pages per interval is 10, and there’s a link to my sitemap.
- In the Purge Policy: Page Cache section, I ticked “post page,” “post page,” and “blog feed.” I also ticked “rss2 (default).” Purge limit is 10.
- In the Advanced Subsection, I left it at its default settings, with no boxes ticked.
As I said, I am not using W3 to minify anything.
This box is simple: I ticked “Don’t Cache Queries for Logged In Users” and then left the rest at the default settings.
Default lifetime is 180 seconds, and garbage collection is 3600 seconds. Left the rest at default.
This section is a little complicated, but basically…
- In the General Subsection, I ticked the following boxes: Set Last-Modified Header, Set Expires Header, Set Cache Control Header, Set entity tag, Set W3 Total Cache Header, and Enable HTTP Compression.
- In the CSS & JS Subsection, I ticked Set Last Modified Header, Set Expires Header, Set Cache Control Header, Set entity tag, Set W3 Total Cache Header, and Enable GZIP Compression. Expires Header Lifetime is 31536000, and cache control policy is “cache with max age.”
- HTML & XML Subsection: Tick all the boxes. Expires header lifetime is 3600 seconds; cache control policy is “cache with max-age.”
- Media & Other Files: Tick all the boxes except the last two (“Prevent caching of objects after settings change” and “Disable cookies for static files.”
User Agent Groups and Referrer Groups
Leave both of these at default.
I currently have a CDN disabled, but it’s probably a good idea to enable it, and at least use CloudFlare, which is good.
Without a CDN, I see my site load times vary dramatically when I’m using Pingdom from various locations. In NY, it’s 433ms, and it’s quite a bit higher when I’m using a European test location. CloudFlare will eliminate this by serving content from cloud servers all over the place, optimizing speeds for users in different locations.
So, if you want to use CloudFlare, click over to the Extensions section in W3 and activate the Cloudflare option. I’m not going to go into setting that up, but you’ll need a CloudFlare user name and API.
For what it’s worth, I actually did use CloudFlare on a web site a while back and wasn’t happy with the perceived performance, and since most of my clients are from my general geographic area, I decided to not use it. I didn’t really care if users from other countries had a slower experience.
Turn on the WordPress SEO by Yoast!
Step 5: Minify, minify, minify
Since W3 Total Cache broke my web site when I tried to minify things, I needed a better solution.
Basically, when you minify things, you combine your js and CSS files into one file and stick it at the end of the page and it loads there, after the HTML content loads. The problem is that this can break sites because the CSS and js that is necessary for the page to load properly isn’t in the top of the page, so things get all screwed up.
So, I discovered Autoptimize, a great plugin that is super intelligent in how it manages CSS and js minimization. So, go ahead and install it and activate it.
It managed to minify everything but not break anything. Cool!
However, I was still getting a PageSpeed Insight warning about eliminating render blocking CSS for above the fold content. What to do about that?
I found a great tutorial at wpfaster.com that I followed to squeezed the last little bit of page speed out of my site. Just go there and follow the directions, and then come back here to finish things up: https://www.wpfaster.org/blog/how-to-use-autoptimize-inline-and-defer-css-option.
After I followed that tutorial, my final settings looked like this.
Step 6: Final Bits and Pieces
A few more more things!
After I had my site zipping along, I added the Google Analytics code and I suffered a little bit of drop in performance because I started getting suggestions to leverage browser caching for Google Analytics. The problem is that it won’t work without a little hacking, because the GA script comes from Google itself. The trick was to bring the GA script onto my own web site, so my site no longer has to phone Google and ask for the script. One less thing to do, and one more bump in speed.
Also, download and run P3, the Plugin Performance Profiler. This will give you a good idea of other plugins you run that are database intensive. For my main web site (not the Headshots site), the worst offenders are Disqus, my commenting system, and NextGen, my gallery system.
This is good to know, because you can use a plugin called Plugin Organizer to turn on and off plugins on each page so that your site will load as fast as possible! For example, there’s no reason for me to run my commenting system on my homepage, or run my Gallery system on my contact page. I only want to run a plugin if the page that’s loading requires that plugin. By default, WordPress loads all plugins on each page load, which can dramatically slow down a site. The Plugin Organizer plugin allows you to fine tune your plugin library and speed up your site a lot.
I’ve set up plugin groups, so that I have a gallery group, a blog group, and a contact page group. On the blog group, I’ve got a Pinterest button and my commenting system — and I’ve turned it off on every page that’s not a blog post. For my Gallery group, I’ve got a few plugins that allow visitors to see my portfolio pages, and I can turn them off on every page that’s not a portfolio page. This saves a ton of database access.
That’s it! I hope this helps speed up your site a little!
PS, this page is a work in progress, and I welcome your comments!! I probably misstated some things, got a bunch of stuff completely wrong, and forgot about other things. Leave a comment below on your own tips and tricks to speed up your WordPress installation as you approach a PageLoad score of 100!
Also, please his those share icons and spread the word if you found this post helpful!