Original post is here: eklausmeier.goip.de
In the previous post Example Theme for Simplified Saaze: Wendt I demonstrated the transition from a website using WordPress to Simplified Saaze. This very blog, which you are reading right now, also uses Simplified Saaze. This post shows how much better performance-wise this transition was. The comparison is therefore between:
- Original: WordPress version, publicomag.com
- Modified: Simplified Saaze version of PublicoMag
The original website https://www.publicomag.com is hosted on Cloudflare. It uses WordPress.
1. Comparison. For the comparison I use the website tools.pingdom.com, which provides various metrics to evaluate the performance of a website:
- Page size
- Number of requests
- Load time
- Concrete tips to improve performance
- Waterfall diagram of requests
- Breakdown of content types
The first few tests in Pingdom were conducted for Europe/Frankfurt, as I host all stuff on below machine in my living room not far from Frankfurt.
The post in question is Inspiration als Energiequelle: Neues vom grünen Hauptmann von Köpenick. The version using Simplified Saaze is here. This post contains 5 images and 13 comments. All images are served directly from https://www.publicomag.com. I.e., no side has any advantage in that respect. I had already blogged on this here: Performance Remarks on PublicoMag Website.
The results are thus:
Original (WordPress) | Modified (Simplified Saaze) |
---|---|
The results for the original website, based on WordPress, are indeed worse on every dimension: page size, load time, number of requests. In comparison to the modified version using Simplified Saaze the ratio is roughly:
- Page size is almost than 3:1
- Load time is almost 8:1
- Number of requests is more than 5:1
So Simplified Saaze is better in all dimensions by a factor. Load time is particularly striking. This is quite noteworthy as the Simplified Saaze version is entirely self-hosted, i.e., upload to the internet is limited to 50 MBit/s!
The recommendations for the original website are therefore not overly surprising:
The missing compression is clearly an oversight on the web-server part.
The breakdown of the content type for the original WordPress website is:
One can clearly see that half of the page size are images, one third is JavaScript, fonts and CSS each have roughly 8%, the actual HTML content is just 2%.
I uploaded the Simplified Saaze version to Netlify, which provides CDN functionality. I measured again the WordPress post requested from San Francisco, and the Simplified Saaze version from San Francisco. The measurements are pretty similar to the Frankfurt results.
Original (WordPress) San Francisco | Modified (Simplified Saaze) San Francisco |
---|---|
Surprisingly, the Simplified Saaze version on Cloudflare has loading time of 5.24 seconds from San Francisco. Vercel is in line with Netlify and has load times of 385 ms.
For comparison I also hosted the Simplified Saaze version on https://www.lima-city.de. Load times are 248 ms for Frankfurt. Load times are 943 ms for San Francisco.
2. Modified website. The breakdown of the modified site, based on Simplified Saaze, is as below.
Actual loading of the modified site will roughly follow below waterfall diagram. This waterfall diagram shows that a major part of the loading time is spent in loading Google's Playfair fonts. This is quite surprising. The other fonts from Google load in record time.
3. Known limitations. Alexander Wendt wrote about some general limitations with the used technical solution so far:
Trotzdem sind wir zuversichtlich, demnächst das eine oder andere technische Problem hoffentlich befriedigend zu lösen. Generell braucht Publico eine schrittweise Erneuerung seiner technischen Plattform, die in ihren Grundzügen von 2017 stammt.
4. Low powered devices. Dan Luu noted in How web bloat impacts users with slow devices that many so-called modern websites are more or less unusable on older or low-powered devices. Some quotes:
If you've never used a low-end device like this, the general experience is that many sites are unusable on the device and loading anything resource intensive (an app or a huge website) can cause crashes.
Software developers underestimate the impacts low-powered devices have, when loading websites:
People seem to really underestimate the dynamic range in wealth and income across the world.