Rewriting My WordPress Site In HTML/CSS & Comparing Performance

By Kev Quirk

This weekend is Easter weekend here in the UK. That means a 4-day weekend; couple that with isolation due to COVID-19 and I have a lot of time on my hands. So I decided to rewrite my WordPress site in HTML/CSS and compare their performance.

If you want to take a look at the fork of this site, check out https://testing.kevq.uk.

All HTML/CSS*

I’ve completely hand coded that entire site. It isn’t generated using a static site generator (SSG), so you may see a few typos in the code. The site is entirely HTML/CSS with one exception.

There is a single line of JavaScript on the Close button when in the menu. This is because the menu is a separate HTML page, so clicking the Close button invokes a tiny line of JS that takes you back 1 page.

javascript:history.back()

If you know how to accomplish this without JavaScript, please do let me know.

I haven’t forked every post, as that would take too long (more on that later). But I have forked most pages on this site, as well as a few of my recent posts.

Speed Comparison

Ok, lets run some tests to see how the static version of this site compares to the WordPress one. I decided to use my Drawing A Sugar Skull post for the tests. Mainly because it has lots of large images, and is probably the heaviest single page on this site.

I’ve optimised this site by adding caching, a CDN and a few other bits. For the static site all I did was use the same optimised images, and configured Nginx caching & Gzip compression. Nothing fancy there.

For these tests I’m going to use GTmetrix, and since my web server is located in the UK, I’ll be testing from London with Firefox.

WordPress Performance

With all the optimisations I’ve made, the WordPress page is 1.24MB in total, creates 19 requests and loads in 0.8 seconds. I’m pretty happy with that for such a heavy page. If you want to read the full report, you can download the PDF here.

WordPress did pretty well, but let’s see how the static version of that page will do.

Static Site Performance

Don’t worry about the YSlow score – that is reduced because I’m not using a CDN and I haven’t set expires headers on the static site.

So we’re pretty close here. The static version of my post is also loading in 0.8 seconds. The page is around 400KB larger than my WordPress site, and the request number is the same. You can download the full report for the static site here (PDF).

Conclusions

I think it’s interesting that the speed tests were exactly the same for both sites. However, I haven’t done any significant optimisations to the static version of the site, so I’m confident I could get it running a little faster than WordPress.

But at 0.8 seconds for either site, would shaving a few milliseconds off either time really make that much of a difference? Probably not, I think.

Will I Migrate?

Rewriting my WordPress site in HTML/CSS has been a lot of fun, and an interesting experiment. It has showed that WordPress and static site performance can be comparable. I’ve also proven (I think) that it is possible to make good looking, functional sites in HTML and CSS only, albeit with a single line of JavaScript. 🙂

I won’t be migrating away from WordPress any time soon though. That’s because manually managing every aspect of the site would be a nightmare.

Limitations

When I write a post on WordPress, I type it up, add a category or two and hit publish. Job done.

On the static site, I’d have to write the content of the post in a markdown editor, then export it to HTML and paste the result into the body of the post HTML.

Obviously I could just code the post direct into the HTML page, but markdown is easier to write with, I think.

I’d then have to set all the metadata for the post, for SEO. Set the page title, and upload the HTML file along with images etc. Once that’s done, I’d then need to edit my homepage to include the link to the new post, then move the oldest post link into an archives page.

I’d also have to update any category pages with the link, as well as update my RSS feeds and sitemap. That’s a lot of work for very little savings in page load times!

Yes, I could use a static site generator to do all that for me, but then I’d introduce the issues I spoke about in my previous post.

I’m happy I rewrote my WordPress site in HTML/CSS it was a fun little project. But overall I think I will be sticking with WordPress. If anyone wants me to release the code for the static site, let me know and I’ll dump it on Github or something.