WordPress speed optimization checklist

//WordPress speed optimization checklist

WordPress speed optimization checklist

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.

The elements

 Run a waterfall
 Install and run the Smush.it plugin
 Enable Cloudflare from your cPanel
 Install and configure W3 Total Cache
 Re-run the waterfall

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:

  1. Go to http://www.webpagetest.org
  2. Enter your website
  3. Select the location & browser you want to test from (we just use Amsterdam & chrome)
  4. Click the start test button and wait

The result will look something like this:

WordPress watterfall speed test

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:

Waterfall test ssl

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:

Waterfall file speed test

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:

Speed test google fonts

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

WP Smush.it 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.

  1. Install Smush.it
  2. In your dashboard, go to Media > WP Smush.it
  3. Select ‘Bulk Smush’ and let it run
  4. All newly uploaded images are automatically compressed

Enable Cloudflare

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.

  1. Log into your domain cPanel
  2. Scroll down to the Cloudflare button under the heading ‘Software’
  3.  Choose a username and password (not important)
  4. 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:

User:

  • I want to see this website

Website

  1. Looks in the files for the right HTML
  2. Looks in the database for the right content
  3. Combines the two
  4. 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:

  1. Install W3 Total Cache
  2. In the left bar of your dashboard, go to Performance > General settings
  3. Enable: Page cache, Database cache, Object cache, Browser cache
  4. Select Browser Cache in the left bar and enable everything under General
    WordPress configure W3 Total Cache

Use W3 to Minify

CSS and Javascript code is often:

  • 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.

  1. Click on Performance > General settings
  2. Enable Minify
  3. In the left performance bar, click on Minify
  4. Under HTML & XML enable everything
    1. Check if your website still works as it should
    2. 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.

Important considerations

  • 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.
By | 2018-07-24T15:37:49+00:00 March 20th, 2015|0 Comments