How to optimize website performance in 5 minutes (aka WordPress performance tuning)

How to optimize website performance in 5 minutes (aka WordPress performance tuning)

This is a tutorial on how to speed up a WordPress website in about 5 minutes. It’s not meant to be deep, intricate or comprehensive. You won’t need to login to your host to edit any configuration files. Think of it as Level 1 performance tuning that anyone running a WordPress website can do. For Level 2 performance tuning, get in touch and we can help you out!
A fast-loading site is important for both user experience and search engine optimization. The longer a page takes to load, the more likely a site visitor is to leave. Google knows this and uses site speed as part of it’s web search ranking method.
loading-time-lrgCheck out the infographic on the right detailing why speed matters.

Step 1: Measure your website speed with GTMetrix

We won’t know how much faster our site is unless we know how slow it was to begin with. We need a baseline performance report for comparison. We use and recommend GTmetrix.
GTmetrix measures every aspect of a site’s performance. It provides grades for both Google’s Pagespeed and the open source Yslow project.
GTmetrix also

  • provides recommendations on fixing each aspect
  • shows a waterfall of how long each element takes to load on a page
  • let’s you download test results to a PDF
  • keeps a record of previous tests
  • and lets you compare tests.

Before you go any further, go to GTmetrix and test your site’s performance – and then save the results.

Step 2: Install the CometCache plugin

WordPress stores everything in a database. When a visitor comes to a page on your site, WordPress asks the database to create the page. It asks what the page looks like and what content the page has. It quickly outputs the complete code for the page for the visitor to see.
Don’t you think it would be faster if WordPress could make a web page without asking the database? (Hint: it is faster)
Imagine reading a book (a real one made with paper). Imagine turning the page and seeing it blank for a second; then seeing all the words and pictures appear. That’s how WordPress usually creates a page.
By caching a web page you are making a copy of the page. This copy is shown to a site visitor without asking the database. The page is there and just waiting to be shown to a site visitor.
You know how when you read a book and turn a page that the next page is already  there? That’s what caching does to web pages.
Our preferred plugin for caching is CometCache (formerly known as ZenCache). Unlike other caching plugins that do a zillion different things, it only caches web pages – and it does it extremely well.
Install CometCache and enable it with all the default options.

A note about caching

These plugins create a cached version of a page after the first time a page is visited. Once the page is created, it saves a copy of it. This is more efficient than automatically creating cached copies of every single page and post on a website. That can negatively affect site performance as it contacts the database over and over and over again.
Once a caching plugin has been enabled, you need to run two performance tests to see how caching affects performance. The first test will measure a page being generated by WordPress’ database; the second test will measure how fast the cached copy of a page loads.

Step 3: Install the WP Performance Score Booster plugin

This plugin does 3 things, all of which are major factors in the Pagespeed and Yslow measurement criteria:

  • It will remove any query strings from static resources (a url with a question mark (?) in the url cannot be cached)
  • It will enable GZIP compression (this shrinks the size of pages & files)
  • It will add Vary: Accept-Encoding header (some proxies can’t used compressed files; this allows them to access uncompressed files)
  • And it will set expires caching – aka it leverages browser caching (this lets your browser save things like scripts and images so when a visitor goes through your site, they won’t have to download your logo etc for every single page they load).

Now we did mention above that we prefer a single tool that does one job well. However, the WP Performance Score Booster plugin does one thing well: it edits a configuration file so you don’t have to (this file is called an .htaccess file).
Install the WP Performance Score Booster plugin and enable it with the default options.

Step 3: Optimize images for the web with the Shortpixel plugin

Optimizing images means reducing the size and/or quality. This makes the images files smaller and thus they can load faster.
This doesn’t mean that the images don’t look as good – the image will look almost the same as their unoptimized images.  The reality is that the quality of images needed for the web is not that high. The highest quality images are needed for printing photos; those images can have their quality reduced by 25-75% and look just as good on the web.
The easiest way to optimize your images is by using the Shortpixel plugin. Once you download and install it, you will need to a create a free account with them to start optimizing images (they provide a key via email to activate the plugin).
You can set Shortpixel to optimize all of your existing photos, automatically. It will optimize 100 images a month for free. You can upgrade to more images for reasonably monthly or one-time fees. It’s worth the money as it will save you a LOT of time!
Install the Shortpixel Image Optimizer plugin and follow the directions it gives you.

Step 4: Minimize your javascript and CSS files with the Autoptimize plugin

Minifying means removing all blank spaces and unnecessary comments in files to reduce their size. For a computer, even a blank space adds to the size of a file.
Autoptimize not only minifies these files, but it also compresses and combines them. So instead of a web page loading 30 such files, it will instead load 1 or 2.
Install the Autoptimize plugin and enable all caching in its settings.
One thing to keep in mind: if you have a lot of plugins and scripts on a site (for sliders and other interactive elements), enabling Autoptimize may cause an element to stop functioning. In that case, you’ll have to root out the affected script and tell Autoptimize to leave it alone. For most sites, this will not be an issue.

Step 5: Measure your site performance again

You should see marked improvements across the board! If you don’t, it’s either 1) that there was very little to optimize or 2) you need level 2 optimization (in which case we suggest getting in touch with us).
That’s it!

What do you think?

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.