Global Citizen, here again! I wanted to give you an update on one of the to-do items on my personal list – improving the page speed of my blog. This has been dismal for a while now, and today, I decided to take some steps to improve it.

The good news is – there is really only one way to go and that’s UP!

This is a rather large undertaking, so I need to make a plan – a simple 3-step plan. For those of you who have read my posts before, you know that I am a huge fan of 3-step plans.

  1. Establish a baseline
  2. Establish some quick wins
  3. Test, Measure, and repeat

Firstly, by establishing a baseline, I will have a clear understanding of what the situation looks like initially.

Secondly, I will look at the suggestions that PageSpeed gives and stack rank them by effort and impact – my initial hypothesis here is that anything I do will improve the situation so really, I’m going to be looking at level of effort of implementing the recommendations – opting for those that can be solved via plugins and basic code modifications over those that will require me to lift up the hood of the code behind Global Citizen Experiment’s codebase to resolve.

Lastly, as with anything, I will then test the fixes, measure the impact, and repeat this for each item on the list.

Make sense? Let’s get started!

Establish a baseline

Thankfully Google makes this very easy – a simple tool that you can use called PageSpeed to test the speed of your website. The results speak for themselves.

As you can see here, both on the desktop and on mobile, I am scoring a whopping 29 out of 100. I can do better!

Consider the baseline established – 29/100 on mobile, 29/100 on the desktop.

Let’s dig in more and understand these recommendations.

Establish some quick wins

Next, I’m going to look to see what the suggestions are for each experience and see if there are any common suggestions between the two different experiences.

Desktop suggestions

  • Enable compression
  • Optimize images
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content
  • Leverage browser caching
  • Minify CSS
  • Minify JavaScript
  • Reduce server response time
  • Minify HTML

Mobile suggestions

  • Enable compression
  • Optimize images
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content
  • Leverage browser caching
  • Minify CSS
  • Minify JavaScript
  • Reduce server response time
  • Minify HTML

I’m a bit more informed now, and to be honest, a bit excited as well – the suggestions are exactly the same across the two different experiences.

For my next step, I am going to see if I can knock any of these out by installing plugins vs. something more elaborate

  • Enable compression – plugin available
  • Optimize images – plugin available
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content – possible plugin available?
  • Leverage browser caching – plugin available
  • Minify CSS – possible plugin available?
  • Minify JavaScript – possible plugin available?
  • Reduce server response time – code and/or server modification required
  • Minify HTML – possible plugin available?

Now, let’s stack rank these

  • Enable compression – plugin available
  • Optimize images – plugin available
  • Minify CSS – possible plugin available?
  • Minify JavaScript – possible plugin available?
  • Minify HTML – possible plugin available?
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content – possible plugin available?
  • Leverage browser caching – plugin available
  • Reduce server response time – code and/or server modification required

Done, now we have our list – let’s get started.

Test, Measure, and repeat

Enable compression

I’m going to handle this one by installing a plugin – Check and Enable GZIP compression – by Richard’s Toolbox.

Sadly, this did not work for me. I had to roll up my sleeves and do this the old-school say – by digging in the code. It was not really that bad actually. ProTip: you don’t actually need a plugin to make this happen, the steps below will achieve your goal for you, no plugins! Here are the steps:

  1. Backup your .htaccess file
  2. Edit your .htaccess file
  3. Add the following lines to the bottom of your .htaccess file and save.
<IfModule mod_deflate.c>
 <filesMatch "\.(js|css|html|php)$">
 SetOutputFilter DEFLATE
 </filesMatch>
</IfModule>

Done.

Test – a quick test of a gzip checker tool shows that infact gzip is now enabled.

Measure – A reload of the  PageSpeed tool shows improved scores – 39/100 on mobile and 44/100 on desktop.

Optimize images

I’m going to handle this one by installing a plugin – Smush Image Compression and Optimization – By WPMU DEV

Installing this plugin did improve my PageSpeed score, but did not remove this issue entirely.

Before I go in for a closer look, let me try a different plugin – EWWW Image Optimizer – By Shane Bishop

Installing this plugin did improve my PageSpeed score some more, but did not remove this issue entirely.

Test – Going in for a closer look is going to require that I individually handle a list of about 15 images, so I will put this on the back burner and continue with other suggested improvements.

Measure – A reload of the  PageSpeed tool shows improved scores – 41/100 on mobile and 47/100 on desktop.

Minify CSS

I’m going to handle this suggestion by installing a plugin – W3 Total Cache – By Frederick Townes

Wow! W3 Total Cache has a tremendous amount of options. In order to make sure I handle one suggestion at a time, I have started with just Minifying CSS.

Test – my CSS is now minimized.

Measure – A reload of the  PageSpeed tool shows improved scores – 42/100 on mobile and 48/100 on desktop.

Minify Javascript

Now I’m going to enable Javascript minification, still using W3 Total Cache.

Test – my JS is now minimized.

Measure – A reload of the  PageSpeed tool shows no improvement. It seems that this lack of improvement is related to render-blocking JavaScript and CSS in above-the-fold content. The good news is that this plugin (W3 Total Cache) has settings defer or asynchronously load blocking resources.

I’m going to adjust the priority of the render-blocking JavaScript and CSS in above-the-fold content suggestion. Doing this next.

Minify HTML

Now I’m going to enable HTML minification, still using W3 Total Cache plugin

Test – my HTML is now minimized.

Measure – A reload of the  PageSpeed tool shows no improvement. It seems that this lack of improvement is related to render-blocking JavaScript and CSS in above-the-fold content. The good news is that this plugin (W3 Total Cache) has settings defer or asynchronously load blocking resources.

I’m going to adjust the priority of the render-blocking JavaScript and CSS in above-the-fold content suggestion. Doing this next.

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Ugh, no use here, adjusted the settings, and it actually made things worse.

Test – PageSpeed still shows render-blocking JavaScript and CSS in above-the-fold content.

Measure – A reload of the  PageSpeed tool shows some mild improvement in the scores – 49/100 on mobile and 53/100 on desktop. I can do better – will deprioritize this and go back in with surgical precision and handle this via code.

Leverage browser caching

This particular suggestion is interesting, in that there is a reference to Google’s own analytics.js file. The recommendation is that the cache timing be set at 2 hours. The easiest way to knock this one out is to install a plugin specific to this issue.

I’m going to handle this suggestion by installing a plugin – Complete Analytics Optimization Suite (CAOS) – By Daan van den Bergh.

Test – the browser caching issues seem to be resolved, I do not see them on the PageSpeed analysis anymore, however, I’m a bit unsettled that this solution needs to be implemented.

Measure – No difference in PageSpeed scores – 49/100 on mobile and 53/100 on desktop.

A bit frustrating for sure, but this is NOT over.

Now, for the surgical precision

Optimize Images – surgically

There are 13 images that are being flagged – I will spare you the entire list, and talk instead about the process that I will use for each image:

  1. Download the image from the server
  2. Edit the post that uses the image
  3. Optimize the image using ImageOptim.
  4. Delete the original image from the media library
  5. Upload the compressed image to the media library
  6. Replace all instances of the image in the post
    1. Featured image
    2. Interior image (if applicable)

Test – All of the 13 images have been resized and compressed. These files no longer are showing up on the PageSpeed results as opportunities for improvement.

Measure – Hooray! We are now cooking with gas! The new PageSpeed score – 75/100 on mobile and 86/100 on desktop.

Eliminate render-blocking JavaScript and CSS in above-the-fold content – surgically

And now back to my arch-nemesis – eliminating render-blocking JavaScript and CSS in above-the-fold content.

I have a few ideas here on how I can resolve this.

  1. Change the enqueue function to load the JS and CSS files with explicit async and/or defer tags
  2. Use a different theme that has better PageSpeed scoring

Again, stack ranking my options to see which would be fastest and produce similar results

  1. Use a different theme that has better PageSpeed scoring
  2. Change the enqueue function to load the JS and CSS files with explicit async and/or defer tags

After much haranguing, I have decided to table this issue. I will be honest, I am a bit disappointed that I was not able to solve this. I have spent about 3 hours on this particular issue and it seems that my goal of a 100 on both mobile and desktop is nearly impossible with this theme that I’m using. Also, I tested the PageSpeed of other sites – Amazon, Google Analytics, Google Webmaster Tools, New York Times, and the Financial Times – and none of them are scoring 100’s.

This is where the 80/20 rule kicks in – I have gotten it to 80, actually 80.5 if you average out my mobile and desktop scores, and I’m going to leave this be for now.

I hope you found this HOWTO guide useful.