With a few simple tweaks, WordPress can run a lot faster. Since speed is important both for SEO and user experience it should be part of your standard webdesign routines. We’ll run you through a simple WordPress speed optimization checklist.
Run a waterfall
A waterfall is a speed test where you can see the loading of different elements. I suggest you keep this test open, or save the link so you can compare pre and post optimization.
The process is simple:
- Go to http://www.webpagetest.org
- Enter your website
- Select the location & browser you want to test from (we just use Amsterdam & chrome)
- Click the start test button and wait
The result will look something like this:
The top bar shows some basic metrics, these should be green.
The table shows load times fir the first time a user opens the website, and load times for after that. The second time should be significantly shorter due to caching.
Click the top waterfall to see it in more detail:
The two most important colors are:
- Green: the first time to byte. This is how long it takes for the server to respond after the user requests a file
- Blue: how long the download of the file takes
We see a number of interesting things here:
- There are a number of big files being loaded
- External font files have a long first time byte
Click any bar to see details, this is how I know the big blue bars are images:
The files at the bottom with a lot of green in their bars do not come from my domain skillcollector.com but from an external source:
In this case the slower files are font files I used from Google Web Fonts. It might be interesting for speed to load these fonts from the local server, or decrease the number of used fonts.
Smush.it WordPress plugin
Images are a big part of your page load time. Compressing them can same a lot of time. This compression is lossless, meaning 0% losst in quality. You could do this manually in photoshop, or let the automatic plugin Smush.it do it.
- Install Smush.it
- In your dashboard, go to Media > WP Smush.it
- Select ‘Bulk Smush’ and let it run
- All newly uploaded images are automatically compressed
The Cloudflare service is pretty amazing. It acts as a CDN, DDOS protecto, website compressor and more. Usually you have to set it up manually, but we’ve integrated it into your cPanel.
- Log into your domain cPanel
- Scroll down to the Cloudflare button under the heading ‘Software’
- Choose a username and password (not important)
- Click the gray cloud, so it becomes orange
Caching with W3
Usually when a user opens your WordPress website what happens is something like this:
- I want to see this website
- Looks in the files for the right HTML
- Looks in the database for the right content
- Combines the two
- Serves the result to the user
This is oversimplified, but basically your website is generated every time a user asks for it. This takes time and resources.
If you use caching what happens is this:
- The website completes the above process and makes a snapshot
- Whenever a user wants the website is doesn’t generate the website but uses the snapshot
- If something about the website changes you have to refresh the cache (make a new snapshot)
W3 Total cache
This plugin manages your caching. It is quite simple to install and use:
- Install W3 Total Cache
- In the left bar of your dashboard, go to Performance > General settings
- Enable: Page cache, Database cache, Object cache, Browser cache
- Select Browser Cache in the left bar and enable everything under General
Use W3 to Minify
- Fluffy with redundant code or blank spaces
- Spread over multiple files
Compressing the code and squashing it onto less files is called minifying. W3 Supports this.
NOTE: Minifying can breat design or functionality, don’t panic, if anything doesn’t work just turn it off.
- Click on Performance > General settings
- Enable Minify
- In the left performance bar, click on Minify
- Under HTML & XML enable everything
- Check if your website still works as it should
- If not, experiment with the ‘Combine only’ options for JS and CSS
Re-run your waterfall
After doing all your optimization, run a waterfall again, and compare your results.
- When you change the CSS or content of a website ALWAYS CLEAR CACHE. otherwise the changes don’t become visible
- Try to minimize external files. External snippets can slow down your website a lot. Spot them in the waterfall
- Reduce the number of separate files that are loaded where you can
- Use as small files (like images) as possible, have a look at the blue section in the first screenshot. That could be reduced.