I moved my website from Wordpress to Hugo on August 2022.
Now it is time to present some performance benchmarks between Wordpress and Hugo.
Also a few words about the plugins, pricing and technical details in both Wordpress and Hugo.
Why I replaced Wordpress by Hugo
I wanted a simple and performant framework for both the content creator (me) and the site visitor. I had heard about Hugo while exploring some alternatives and it seemed to tick all the boxes.
Hugo is an established tool written in powerful Go language .
Most alternatives were Javascript based tools. Even though they seem versatile, I personally find the JS ecosystem a bit confusing.
Technical specs of the old Wordpress site
My old Wordpress site was running in a web hotel powered by cPanel
admin dashboard. The enterprise plan guranteed that I was never even close to the limit with CPU, http requests or memory.
The stack was WordPress 6.0
, PHP 8.0
and MySQL
database running on Apache
. Being a shared hosting environment, not all configurations were on my hands.
I had 20+ Wordpress plugins installed including a few paid components.
The site had around 10 000 page views per month during 2020-2021 which has since dropped to current 5 000.
Technical specs of the new Hugo site
At the moment I use Hugo
version 0.101.0
. I mostly develop on my laptop using the unofficial but recommended
Hugo Docker image
.
Hugo does not have an SQL database. Everything is file based.
Hugo does not have similar unified graphical UI like Wordpress does. There are some options but I have stayed on code editors so far. It would be possible to create or edit blog posts in GitHub directly even on mobile phone.
The Hugo code for my site lives in a private GitHub repo. My current Hugo hosting provider Vercel picks any changes from the main
branch.
Hugo vs Wordpress hosting resource consumption
Many hosting providers offer Hugo website hosting for free. Here is a summary of service providers that I tried.
Hugo hosting provider | Review |
---|---|
Vercel | My choice. Easy setup, fast and generous free tier. Quite fast page loads. |
Cloud Flare | Fast but requires CDN setup. |
Digital Ocean | Fast page loads but file upload slow after build. |
Netlify | Surprisingly slow page loads. |
Render.com | Deployment took forever and eventually did not work. |
Gitlab + KeyCDN | Setup was complex and worked only partially. |
Let’s make a calculation to understand why Hugo hosting is so much more resource efficient compared to Wordpress.
Wordpress runs on server 720 hours per month.
A typical Wordpress site requires a shared web server running 24/7. The database might run in the same server or purchased as an individual component. During one month the web server runs 30 x 24 = 720
hours. Even a relatively large enterprise site does not have visitors all the time meanwhile the server keeps the resources allocated.
Hugo runs on server 0.5 hours per month.
Hugo has two steps that consume server resources:
- Bulding the static web pages
- Serving the static web pages
I was a bit concerned about the resource footprint of the build process in the beginning. Because waiting the pages to build feels like a long time.
Then I crunched the numbers. In the long run I would deploy a new version of the site maybe 10 times a month.
After optimizing the build process Hugo generates (or reads from cache) 4000 images, 500 redirection pages and 650 regular pages in 1.5 minutes. When developing on laptop the re-rendering happens practically instantly.
Vercel’s web server is a black box to me. Most likely one physical or virtual server can host tens or hundreds of websites like mine. Even my old Wordpress server could have easily done that. The shared static website server probably does not have much idle time because the traffic from multiple sites makes a steady flow of requests.
Let’s say that each request to my site reserves the server for 10 milliseconds. Maybe one page load has 10 requests totaling 100 ms per page view. This is a pessimistic guess, probably the duration is less.
This is how much my Hugo website would consume the server resources.
Operation | Operations per month | Time per operation (s) | Total per month (min) |
---|---|---|---|
Build | 10 | 100 | 16:40 |
Page load | 10 000 | 0.1 | 16:40 |
Total | 33:20 |
Building and serving would take equal amount of time in my case. In total my new Hugo website reserves half an hour per month compared compared to 720 hours for Wordpress. That is efficient!
I estimate that in the above scenario the Wordpress web server and Hugo build server could have equal CPU power. Even though it is possible that the Wordpress hosting provider can also allocate the resource in a more intelligent way than what I described.
Wordpress and Hugo cost comparison
My Wordpress site costs were around 200 $ per year at minimum setup for performance optimized solution. Additionally I had another parked domain incurring costs and a bit too powerful web hotel subscription.
The whole setup brought the costs close to 300 $ per year. It made a lot of sense to cut off the unnecessary parts.
Here is the annual pricing summary of different services in Wordpress vs Hugo.
Service | Wordpress costs | Hugo costs |
---|---|---|
Hosting / Web hotel | 75 $ | 0 $ |
CDN | 50 $ | 0 $ |
Theme | 50 $ | 0 $ |
Performance optimizer | 35 $ | 0 $ |
Domain | 10 $ | 10 $ |
0 $ | 30 $ | |
Analytics | 0 $ | 60 $ |
SQL database | 0 $ | 120 $ |
Other backend functionality | 0$ | ~0$ |
Total | 220 $ | 220 $ |
In the end the website migration was not about Wordpress vs Hugo as tools. Rather, the website renewal was about separating different components, making the site fast, respecting visitor privacy and cleaning up the old environment.
The total price of Hugo and Wordpress ecosystems became the same. With a minimal setup it would be possible to run a Hugo site practically free though.
The web hotel had some additional services bundled together like email, DNS management etc. After giving up my web hotel I needed to get these services from other providers.
As Google Analytics is shutting down next year, I wanted to already replace it with another vendor.
Even though Hugo does not need an SQL database, I have a small instance from Google Cloud for other hobby projects.
Plugins in Wordpress and Hugo
Here is the list of the plugins and web services in Wordpress and Hugo. As you can see, are a ton of things to manage aside of the site’s content.
Component | WP Plugin | Hugo Implementation |
---|---|---|
Translation | Polylang | Integrated to Hugo |
Image optimization | EWWW Image Optimizer | Integrated to Hugo |
Extra file types | WP Extra File Types | Integrated to Hugo |
Header and Footer HTML | Insert Headers and Footers | Integrated to Hugo |
Redirection | Redirection | Integrated to Hugo | Vercel |
CDN | KeyCDN | Vercel |
Content optimization | WP Rocket | Custom Hugo theme |
SEO | Yoast SEO | Custom Hugo theme |
Expandable sections | Collapse-O-Matic | Javascript |
Theme | Sydney Pro | Custom Hugo theme |
Search | Integrated to theme | Javascript + JSON index |
Cookie consent | GDPR Cookie Consent | Not needed |
Embed PDF | PDF Embedder | Not needed |
Contact Forms | Ninja Forms | Google Cloud Run & Email Labs |
Comments | Integrated to Wordpress | Google Cloud Run & Javascript |
I probably could have used more readily available libraries or themes in Hugo. And customize Wordpress more to get rid of plugins. But I wanted more freedom to manage the new website.
Wordpress vs Hugo performance benchmark
I used private window in Brave browser at width of 1200 pixles. Browser cache was disabled. The stats were calculated as average per page load when tested on these urls:
Benchmark | Wordpress | Hugo | Explanation |
---|---|---|---|
Total resources MB | 7.8 | 0.5 | HTML, images and libraries required for the page |
Transferred resources MB | 7.4 | 0.4 | Less than the total thanks to caching and transfer compression |
Requests | 49 | 11 | Number of requests sent to the server to fetch the resources |
DOMContentLoaded ms | 980 | 300 | Essential parts of the page rendered |
Load ms | 1400 | 380 | All delayed scripts completed |
Easy to say, Hugo smashed Wordpress in the performance benchmark. But it is not just Hugo as a framework because many aspects of the site were redesigned. For example using lighter CSS
files is possible on any web framework.
I ran the performance benchmark from Finland while my Wordpress server was located in Estonia, just 300 km away. Hugo was hosted by US company Vercel having gloabl CDN.
Here are some conditions that might affect to benchmark like this:
- Server or CDN cache
- Server cold start
- Browser cache
- Geographical location
I had noticed that the old Wordpress site was really slow from abroad. It could load even several seconds. The new site should be somewhat location agnostic.
Write a new comment
The name will be visible. Email will not be published. More about privacy.