How I Got 100/100 On Google's PageSpeed Insights With A Wordpress Website

Share this on:

This article relates to this site:My Adventures In Art Online

If you have tried you will know how frustrating it is to get a good page speed score on Google's PageSpeed Insights.


You change one thing and it messes up something else, and there are so many issues and items that you have to take in account, it's a never ending battle


But it is possible.


Not easy, but it is possible, this is how I did it.


Note: to achieve some aspects of this yourself you will need to be able to code.

First Major Issue

This is for a Wordpress website. I wanted to use Wordpress because the website is a blog and Wordpress is blogging software.


Wordpress like most other blogging platforms generates its web pages “on the fly”, that is, when a page is requested the page is constructed from various components like: the common header, footer and sidebar. This all needs database queries and cpu cycles which all take time.  And the more successful your site the more competition there is for the servers resources and the slower your pages will load.


The best and fastest scenario is if your web page is just a file that is waiting there to be sent on request with no db queries or page building. What I wanted was a “static site”, all the pages are files allready and are just sat there waiting to be requested.


Question: But how could I do this with Wordpress?


Answer: With a plugin called Simply Static https://en-gb.wordpress.org/plugins/simply-static/
(*This stopped working for me just now, see end of article for new solution*)


Question:  How does Simply Static work?


Answer:  You host your Wordpress site somewhere other than where your main site is going to be. You work on your website as you normally would with Wordpress. Then when you’re ready you use Simply Static to generate a static version of all the pages on the site. You can set it up so that Simply Static generates those files straight to your hosting area.


This also has a couple of other advantages:


  1. A static website is much less likely to get hacked as there is no code being run to generate pages, no database needs to be accessible.

  2. You now have a staging site to develop your website before it goes live.

You will have to make some compromises.

Wordpress has evolved over time to try and do everything for everyone but at it's core it is an easy to use blogging platform.


That ease of use was the main reason for using it.


The downside was that because it tries to satisfy everyone, depending on the theme, it adds loads of  shit to the page, and loads of shit slows things down.


Loads of shit like javascript libraries.


This depends on your theme and the plugins you add. The fancier the theme and the more plugins you add the more load you add to the pages.


So for my purposes, and my goal of scoring 100/100 with PageSpeed Insights I decided to go for a minimal theme.

A customized Wordpress theme

I looked at a few available minimal themes but they still had too much stuff for my liking.


Why does everyone have to have an image carousel at the top of their website? I hate them! I think people have them because everyone else has them.


Anyway, I decided to write my own. And I called it “SuperFast”.


It’s built from the ground up. I didn’t want to start with a child theme as I didn’t want to inherit any other theme's nonsense.


Anyway the theme is a very basic, no frills and, most importantly, lightweight as you can see here: https://my-adventures-in-art.online/


One of the main things I noticed when building the theme was the amount of stuff Wordpress adds to a web page by default. There is lots of code in my theme that says “don’t add this” and “don’t add that”.

No blog comments (yet)

One of the consequences of a static site meant that Wordpress's comment system didn’t work.


I added Disqus but this added “render blocking javascript” to my pages so I decided to not have comments on my blog posts.


At least to start with.  At some point I will add some sort of lightweight commenting system that doesn’t slow down page load time. I will write it myself if necessary, it will probably be necessary because I’ll have to connect a static site with my Wordpress staging site somehow.

What about other dynamic components like contact and subscription forms?

Because I removed the dynamic Wordpress elements from the site the standard way of dealing with dynamic actions like forms wouldn’t work. So I had to write these myself. This takes a bit of time but isn’t too difficult if you know how to code.

Minimal plugins

I kept the number of plugins to the minimum:


Simply Static

Google XML Sitemap Generator

HTML Minifier

Compress JPEG & PNG images

Yoast SEO


I had to try a few to arrive at these as they all had to work with Simply Static. They are all chosen with search engine optimisation and page speed in mind.

No Google Analytics

Another factor that slowed page speed (ironically) was having the Google Analytics code on the page.


So I decided to forego Google Analytics. Who needs it anyway? You can use Awstats and the server logs  to get the information you need, does Google Analytics give you anything extra that you actually use that you can’t get from the server logs?

Proof of the pudding

Did it work?


Yes. Mostly.


https://my-adventures-in-art.online/


Try it:

https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fmy-adventures-in-art.online%2F


Most of the time it gets 100/100.


Sometimes it gets a little less. I think this is down to the site being on a shared server on which the load can vary.


Many of the blog posts score 100 or are in the 90s. One reason is some of the images aren’t optimized as much as Google would like. They get compressed automatically so I can only go with the quality of that compression plugin, and it seems to do well on most of them so I’m willing to accept that for now.


The other pages that don’t do quite as well are the gallery pages that come in around 85/100. The reason for this is the addition of a nice javascript library to display the images in a slide show. As the site is an image based site this was a compromise I was willing to make

Conclusion

So there it is, a very fast site according to Google’s PageSpeed Insights tool and you would hope that because Google rates it as such it will help in its Google ranking.


But even if it doesn’t at least you know the users are going to have a better experience in terms of download speeds compared to most other sites, especially relevant as more browsing is done from mobile devices.


(And yes I know the OnSiteNow site isn't optimised, yet, I'll get round to it at some point.... )


Update

As stated above the Simply Static plugin stopped working for me

I'm not sure why, maybe the nature of my cloud hosting, or an issue with CloudFlare, the error I got was:

Checking if WordPress can make requests to itself from XX.XXX.1.226 Received a 301 response. This might indicate a problem.

I tried all sorts of ways to fix it, but couldn't resolve the issue.

So my solution was to use the power of my home linux computer (which is Ubuntu 16.04 LTS) and it's increadibly useful utility commands.

  • First I download the whole dynanic wordpress site using wgets from the staging site.
  • Then I use find, xargs and sed to delete any reference to the staging directory name
  • Then use rsync to copy the files to the live website

That worked fine, and in some ways is better as I don't have to rely on a third party Wordpress plugin, and I have a backup of the static site on my home computer.

A more detailed description of how I did it:

1. Make a copy of the dynamic site on local machine:


wget \
     --recursive \
     --no-clobber \
     --page-requisites \
     --html-extension \
     --convert-links \
     --restrict-file-names=windows \
     --domains yourwebsite.com  \
     --no-parent \
      --trust-server-names \
https://yourwebsite.com/stagingFolder/

2. Get copies of the files that aren’t linked from the dynamic pages

wget --no-clobber --page-requisites --html-extension --convert-links --restrict-file-names=windows /
--domains yourwebsite.com --no-parent --trust-server-names   /
https://yourwebsite.com/stagingFolder/contact-thankyou/

wget --no-clobber --page-requisites --html-extension --convert-links --restrict-file-names=windows /
--domains yourwebsite.com --no-parent --trust-server-names   /   
https://yourwebsite.com/stagingFolder/xmlsitemap.xml

wget --no-clobber --page-requisites --html-extension --convert-links --restrict-file-names=windows /
--domains yourwebsite.com --no-parent --trust-server-names   /   
https://yourwebsite.com/stagingFolder/thanks-for-accepting-the-challenge/

3. Get rid of “stagingFolder” from all the files just downloaded

find . -type f | xargs sed -i  's/stagingFolder\///g';
find . -type f | xargs sed -i  's/stagingFolder///g';

4. Copy the files back to the hosting directory using rsync

rsync -vrz yourwebsite.com/stagingFolder/ username@your-hosting-account:public_html

When using rsync do not use --delete option if you have any custom scripts (for handling forms etc.) you need for the static site, because it will delete files that aren't in the source directory, its Syncing them!

And what do all those options for wget mean?

  • --recursive: download the entire Web site.
  • --domains yourwebsite.com: don't follow links outside yourwebsite.com.
  • --no-parent: don't follow links outside the directory stagingFolder/.
  • --page-requisites: get all the elements that compose the page (images, CSS and so on).
  • --html-extension: save files with the .html extension.
  • --convert-links: convert links so that they work locally, off-line.
  • --restrict-file-names=windows: modify filenames so that they will work in Windows as well.
  • --no-clobber: don't overwrite any existing files (used in case the download is interrupted and resumed).
  • --trust-server-names use the nice URLs, ie just the folder name; without this wget creates filenames like "index.html@=113.html" ugly!

And all that can be put in a bash script so it's all done with one command. rsync will require some human interaction though when you need to type in your password, but again you can avoid this by using an expect script

Share this on:
Mike Nuttall

Author: Mike Nuttall

Mike has been web designing, programming and building web applications in Leeds for many years. He founded Onsitenow in 2009 and has been helping clients turn business ideas into on-line reality ever since. Mike can be followed on Twitter and has a profile on Google+.