Optimize WordPress for speed – basic principles

It should always be one your main priorities to optimize WordPress for speed when developing a website. First of all because of the user experience: the slower a website loads, the more likely it is the visitor will opt out before the entire page is loaded. SEO is also an important element. Google considers page speed to be a ranking factor, so it is in your own interest to pay attention to this subject.

Fortunately, WordPress makes live pretty ease to do some quick optimization that can make a huge difference. In this tutorial, we will walk through some basic principles and best practices that you can do without any coding. In future tutorials, more advanced techniques will be discussed as well.

How can I tell if my WordPress website loads fast or not?

There are some widespread online tools where you can conduct tests and get feedback where to improve:

• Google PageSpeed Tool: one of the most famous and popular online tools. You can fill in any url to check and you will see what the score is, both on desktop and mobile devices. You should aim for a score of at least 85/100.
• GTmetrix. This tool gives more detailed results than Google PageSpeed. You can drill down every remark even further. Recently, they switched from Onload time to Fully loaded time too, to display more consistent results.
• Pingdom Website Speed Test: Also a commonly used tool among web developers and definitely worth bookmarking.

If you run a test on any of these tools, you will encounter more or less the same bottlenecks every time:

• Optimize images
• Leverage browser caching
• Minify html, css and JavaScript
• Use a Content Delivery Network (CDN)
• Reduce server response time
• Reduce the number of server requests
• JavaScript and css-files above the fold blocking content
• …

Once again: this is a tutorial about basic principles, so we will limit ourselves to the first five topics. These you can address straight away without diving into any code.

1. Optimizing images

What’s a website without any images? If you run a blog that displays a certain number of posts on the homepage, even thumbnail images, this can have a dramatic effect on page speed. Images are often uploaded rapidly through the back-end, without checking file size. I recently stumbled upon a website where they had uploaded a 2MB .jpg-file, just for the company logo in the header.

Optimizing images will make a huge difference! Here are some quick tools to accomplish this:

• Adobe Photoshop: if you have Adobe’s software at your disposal, this is a good point to start. You can save any given image in a leightweight format, specifically for the web. Simply choose File > Save for web & devices. You can choose different levels of quality there.
• Compressor.io. A free online tool. You can simply drag and drop .jpg, .png, .gif and .svg-files. The tool will maintain a high quality of your images. You can also choose between lossy and lossless compression.
• Tinypng.com: This tool offers more features since it also offers a plugin for Photoshop and a tool where you can run a check of your website to see how munch you can save by optimizing your images
• EWWW Image Optimizer WordPress plugin: One of the most popular WordPress plugins for image optimization out there. It offers perfect compatibility with image galleries such as NextGEN and FooGallery. It is updated regularly and currently holds a score of 4.4 out of 5 stars. Definitely a no-brainer.

2. Leverage browser caching

For those who are not very technical, let us explain the concept of  browser caching. When you visit a website for the first time, it loads from top to bottom, all sorts of scripts are executed, server requests are made to fetch images etc… As soon as this is done, the rendered html-output will be stored in your browser’s cache memory. If you visit the page again after a while, your browser will show you the page with the rendered html-code from it’s cache memory, thus improving speed.

Now, if you have external sources installed on your website, such as Google Analytics, Hotjar, Crazy Egg or social media, these will be out of your reach. After all: these sources are loaded from external servers, so you can’t controll them. If these remarks pop up while conducting a speed test, you will have to settle for it.

However: caching can also be implemented on your website itself. WordPress plugins come to the rescue once again:

• W3 Total Cache. Without a shadow of doubt, the most used caching plugin out there. It features enhanced possibilities that can be overwhelming when you go through them. In most cases, the default settings will do the job already. There is a small catch: do not forget to clear all your cache when you have made changes to the content of your site. You can do this easily through the quick-menu in the toolbar in the backend. This is a great plugin because it also offers vast possibilities for html, css and JavaScript minification. So you don’t have to install separate plugins for these. It also offers a premium (paid) version if you decide to go all the way.
• WP Super Cache. Another popular caching plugin that has been around for some while. It doesn’t offer as many options as W3 Total Cache, but if you want to keep things comprehensible in your admin section, this plugin will do the job just fine.

3. Minify html, css and JavaScript

Your ‘standard’ html, css and JavaScript are files filled with code. In this code, there are whitespaces and breaks. Minifying these files simply means stripping out all unnecessary breaks and spaces. Most of the times it is not a huge gain, but every bit helps. W3 Total Cache offers this possibility (it is possible it will even be enabled by default after intstallation). There are dedicated plugins to minify html, css and Javascript but be careful: once you install a minification plugin and tell it to minify certain files, check if your website still works properly. Minification can break certain functionalities. There are tons of minification plugins out there, way to much to list them all here. So pick one from the WordPress Plugin Directory if your caching plugin doesn’t offer the possibility to minify your files.

4. Use a Content Delivery Network (CDN)

A Content Delivery Network (CDN) is a network with a bunch of servers that are geographically located closer to the user that visits your webpage. This leads to shorter connection distances and decreases latency, thus faster loading. Although this recommendation pops up in many speed test tools and although it does reduce page load, you should ask yourself if you actually need this.

A CDN really comes alive if you have a website with heavy traffic, operating worldwide. If you have a small website for a regional business or a small blog, using this option is probably a bit of overkill. It is also very likely you have to make some adjustments to your DNS-settings, so be sure you have access to these. Cloudflare is a well-known CDN, offering several formulas from free to paid enterprise solutions.

5. Reduce server response time

This is again a point you more or less don’t control. The best thing you can do here is to partner up with a decent host on the web. Cheap hosts are fun if you want to experiment a little bit but if you really want to publish content, make some considerations first. Especially when your website or blog grows over time, it is important your host can assure a constant level of quality towards speed, security and customer service.

These are some quick tips but if you execute them, you will notice the speed of your website can improve seriously. In future tutorials, we will disclose more advanced techniques to tak speed optimization a few steps further.