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:
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.
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.
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.
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.
I kept the number of plugins to the minimum:
Google XML Sitemap Generator
Compress JPEG & PNG images
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?
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.
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.... )
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:
--domains yourwebsite.com \
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