A couple years ago, a buddy of mine, who is a circus artist, needed a website to promote his work. Since I didn’t have much space in my schedule at the time, but I really wanted to help my friend out, we agreed to make a simple one-pager to showcase his art and to gather contact requests.
Static website PageSpeed Insights Score
Version 1: Using a WordPress Theme
At the time, I used a pre-built WordPress theme to let him change his content whenever he wanted to, with a built-in content editor. The theme that we used was simple enough and allowed us to display exactly the content that we wanted. It was a quick solution, but we found out that the content editor that I used was too clunky for non-technical persons and after all, my friend didn’t have the time to update his website. So we came to wonder why we needed a content manager in the first place? Since the website’s main goal was to allow visitors to read a bit about the artist and maybe contact him with the contact form, my friend decided that the new contents and pictures should be placed on his social media channels instead, and that the website could stay static for a while.
After two years, I decided to move all my websites from my old server at GoDaddy to a new LiteSpeed server at WHC. This turns out to be a great move, since the website gained a lot of speed upfront. The website was still not perfect though, in my developer point of view. The design still kept the road, but still, I was not satisfied by the global performance and the fact that this one pager had 4168 files (86 MB), mainly from WordPress plugins that we didn’t use but that the theme needed to work properly. To had on top of that, I found out that the spam bots were targeting the form. That was enough, I had to patch this website once and for all, and I decided to simply make a static site.
Version 2: Hand-made Static Website
So that’s what I did! Very simple, with HTML/CSS and a bit of vanilla JavaScript for fade-in effects and mobile menu. No jQuery or frameworks, to keep it the purest possible. For the contact form, since we only had one form, I used FormSpree, with a honeypot to stop the spambots. Including the code files, the images, and the fonts, I went down to 43 files (10 MB). That’s roughly 11.6% of the previous size! In Google PageSpeed Insights, that’s also a 95% note. Last thing I had to do was to optimize the image loading, to minimize my CSS and JS files and I guess I would top the 100% note.
Version 3: The Great Gatsby
Now that the website has come from WordPress to a clean minimal static version, I wanted to port it to Gatsby, so I can easily optimize all that code. For those who don’t know Gatsby, it’s a React based static site generator. It’s basically the same thing as developing directly with React, except Gatsby deals with all things from Webpack to image optimization, letting you only with your components to create. Since the website I had to transfer was already in plain clean markup, I only had to create my different components and had my JavaScript functions to it. Piece of cake! One and a half hour later, I entered the npm run build command and that’s it, I had an optimized and secured static website, weighing only 5 MB and scoring a perfect 100% note on Google PageSpeed Insights. 😄
The fine word
Now hold on, coming all this way from WordPress to Gatsby is a bit more work than just entering the build command, but I think that you get the point. Once I had my website recreated in basic HTML markup, I just had to configure a couple things and split all this code in React components. All the work that Gatsby is making under the hood though, that would have taken me a considerable amount of time (that I don’t have on my hands). From now on, if I want to put a CMS to manage the content, I still can use WordPress with the REST API or any other headless CMS like Directus, Netlify CMS, Contentful, and so on.