Last year, I wrote a small rant called “When did software go off the rails?” which, quite surprisingly, ended up on the front page of Hacker News. Must have been a slow news day.
In any case, the first and most upvoted comment on my blog was: “Writes the guy whose blog post requires 153 HTTP requests, 9 JS files, and shows a blank page with Javascript disabled.”
This cheeky commenter had a good point. I was complaining about a problem, while also being part of the problem. And doing nothing about it. I hate when people are like that 🙂
My “quick fix” was to switch from the default Blogger theme (that was absolutely awful) to a much lighter one. This was a substantial improvement, but it still felt that it was pretty over-engineered and wasteful.
So I began a quest to to build a simple, lightweight blog that was easy to maintain and update, and could be hosted with minimal server resources.
This journey crisscrossed several other projects, had many false starts, and did not reach a final destination for over a year.
From my research, it was clear that statically-generated websites were the way to go for performance and simplicity. I’m not a huge fan of Ruby, so the market-leading Jekyll was off the table. And since I tend to avoid anything in the Node.js realm due to their insane dependency trees, Next.js was out too.
Eventually I did find most of what I was looking for in Hugo.
I had been experimenting with the Go programming language and although it’s a bit weird and quirky for someone like me that tends to think in OO, it ends up being an extremely performant tool for processing and serving websites.
In fact, there are few languages and compilers that can match its runtime performance, unless you drop down to memory-unsafe languages like C and C++.
Hugo compiles and generates my entire new website and blog, consisting of 342 pages and 189 other files, in 2264ms, and I suspect a lot of that is just disk write time. This includes templating, combining, and minification.
That’s faster than some dynamic sites take to render and serve up one page!
And it comes with a nice development server that automatically scans for changes, recompiles, and hot-loads them without a refresh.
After some time messing around with Hugo’s complicated hierarchy and settings, I now have a reasonably nice website and a blogging system that works by creating a simple Markdown file and committing it to Git. Netlify picks up the changes and auto-deploys on demand.
I spent some time hand-coding a very light CSS theme, and my Lighthouse performance ratings are now 99-100 depending on how it feels that day. Files are served up blazingly fast since they’re static.
The most difficult part of this exercise was actually figuring out to get Hugo to do what I wanted to. There’s a decent amount of configuration involved. So my contribution towards making websites more efficient again is a “clone and go” example called SimpleSite.
You can find the source code at github.com/JasonHanley/SimpleSite.
Let me know what you think, and let’s all Make Websites Efficient Again! â„¢ 🙂