In a blog that is mostly dedicated to fairly arcane (but awesome) developer topics, I thought I’d step in and discuss a platform that is occasionally sneered at, WordPress.
Well, we use WordPress here for the front-end and the blog and find it incredibly versatile and useful. However, it can be slow and you do need to be on top of your game with security.
So, on to the subject of this blog post: Speed. It’s critical and makes a massive difference in user engagement and SEO. An ugly site that loads fast is better than a beautiful fat site that loads slowly.
Here are a few tips on how you can make your WP site incredibly quick:
- First, know where your site is slow. If you use sites like the Pingdom Speed Test, you’ll get a waterfall chart showing where the slowdowns are. I prefer (in Chrome) to right-click, choose Inspect, and click Network. Reload the page (using CTRL-F5) and you’ll see where the slowdowns are. This will highlight possible problems, like too many requests.
- Reduce image size. This is the Big Daddy of optimization and I can’t emphasize it enough. Don’t put up big fat PNGs. Use JPGs. Use Riot or TinyJPG religiously. Also, you don’t always need all the colors — you will often find that 256 color PNG is fine (that’s what we use on all our screen shots).You can actually use Riot right now on all of your images — simply copy all of your web images locally, and batch optimize them. If you need PNGs for transparency, consider instead creating an image that matches what you’re trying to do in an image editor (for example, if you want a logo to float on a particular background, create it in a photo editor, convert it to JPG and then upload it. In other words, don’t use WordPress to do the image work, do it outside with an image editor, and then upload a JPG.)You can also use WP-Smush to automagically optimize images when uploading.But really pay attention to image sizes. It makes a massive difference.
- Expire Future Expire Headers. This is a simple trick which tells a browser not to bother re-downloading content that is static. You can do it manually, but we just use WP Performance Score Booster, which does a bunch of other little tweaks.
- Optimize font delivery. If you use Google Webfonts (which means you’re like everyone else), use the Google WebFont Optimizer.
- Above the fold optimization. “Above the Fold” is the immediately visible part of your website, before people scroll down. Here’s a a weapons-grade tip that will dramatically speed-up your delivery: Use the Above The Fold Optimization plugin. This fantastic tool helps you create a critical path CSS of your CSS. In other words, your CSS is optimized for exactly what needs to be delivered right away. There is a small amount of self-education needed, as it’s a little bit technical. But if you just bear with it, the results are, frankly, stunning in terms of speed improvement.
- Use a cache. We use GatorCache and like it. Others swear by W3 Total Cache and others. Another option is WP-Rocket, which costs a bit of money but apparently works well (we haven’t tried it). Whatever. Just put in place a good cache.
- Lazy load. Use the Unveil.js Lazy Load to load images further down the page slower than the first part of the page.
- Use a dedicated WordPress host. It really does make a difference. WP Engine is popular. HostGator, GoDaddy and many others all offer good plans as well. Dedicated WordPress hosting makes a difference.
- Use a CDN. Content Delivery Networks distribute your key assets (images, CSS, etc.) to places that are nearest to your viewer. MaxCDN can make a massive difference. Feeling cheap? Then you can use a free tool like JQuery CDN, which offloads at least one part of your site to MaxCDN — for free. And it does some nice speed-up tricks as well.
- Use CloudFlare. It’s free. And it works fantastically well.
- Optimize the database. Wordpress is basically a big fat MYSQL database attached to a front end, and you can do a few things to optimize the database. Use WP-Optimize on a regular basis to clean up the database. You could also add WP-DB Manager for scheduled database maintenance. Finally, just the fun of it, you can do a manual optimize in phpMyAdmin, which isn’t really that important if you have a plug-in doing it already for you, but may pick up a few errant fragments of leftover unneeded junk .
- Don’t use a bloated theme. There are good themes, and there are junk themes. Junk themes load your site up with unnecessary garbage. Simplicity is key — the basic twenty-fifteen theme that comes with WordPress may not be pretty, but it is very fast. I’ve read the Thesis theme is fast, but there are others. Look at the reviews, use your best judgement.
- De-crappify your website. Only use what’s essential. Don’t bother with cute widgets that turn your site into a dog’s breakfast. Every single thing you add to your website, even an unused plug-in, has a performance impact. Kill Gravatars. On your blog, only show excerpts, not the full posts. Keep your number of posts to a maximum of 7. Only use social sharing widgets inside of posts. And so on.
- Disable hotlinking. Hotlinking is where people use your images on their site. It sucks bandwidth and can wreak havoc. Disable it with this free tool.
- Disable pingbacks and trackbacks. You can kill these without destroying backlinks to your site. The only people unhappy with you will be spammers. Read about this tip here.
- AMP: Use Google’s free AMP for optimized delivery on mobile devices.
- Bonus point: Let others do the heavy lifting. If you have a photo portfolio, why are you hosting the photos on your site? If your site gets a ton of traffic, welcome to DDOS-A-Geddon. Use a free photo sharing service like Flickr to display them. The same thinking goes with videos and other stuff. Let the big sites tackle these files.
There are plenty of sites to test your speed, like the Pingdom Speed Test, GTMetrix or WebPageTest.org. Take your pick. Google’s PageSpeed Insights is useful, but is not really a speed test — it’s more like a set of guidelines for a faster website (if you are feeling bad about your PageSpeed test rank, just test Google.com itself — it doesn’t have a great score and it’s Google’s own product!).
Good luck and feel free to share any ideas you might have.