I was reminded to subscribe three times, for $1/week (after one year this would become $3.75/week). One of these reminders attached itself to the bottom of my screen and followed along as a scrolled. If I scrolled up, it replaced this with a larger banner, which showed me three other articles and an ad. I was asked for my email address once, though I would have had to fill out a captcha to submit it. I took out my phone and repeated the experiment. It took 15 seconds to load, and I estimate the ads took up a vertical space equal to 4 times my phone’s vertical resolution, each ad alone taking up half of my screen.
If these are the symptoms, what is the cure? My basic principles are these:
- Use raster images sparingly, if at all, and optimize them
- Provide interactivity with forms and clever CSS
- Identify wasted bandwidth and CPU cycles and optimize them
I’ve been building sr.ht with these principles in mind, and I spent a few hours this optimizing it further. What do the results look like? The heaviest page, the marketing page, today weighs 110 KB with a cold cache, and 4.6 KB warm. A similar page on GitHub.com2 weighs 2900 KB cold, 19.4 KB warm. A more typical page on sr.ht weighs 56.8 KB cold and 31.9 KB warm, after 2 HTTP requests; on GitHub the same page is 781 KB cold and 57.4 KB warm, 118 requests. This file is 29.1 KB. The sr.ht overhead is 27.6 KB cold and 2.7 KB warm. The GitHub overhead is respectively 751.9 KB and 28.2 KB. There’s also a 174-pixel-tall ad on GitHub encouraging me to sign up for an account, shown before any of the content.
To be fair, the GitHub page has more features. As far as I can tell, most of these aren’t implemented in the page, though, and are rather links to other pages. Some of the features in the page include a dropdown for filtering branches and tags, popups that show detail when you hover over an avatars, some basic interactivity in the search, all things that I can’t imagine taking up much space. Does this justify an order of magnitude increase in resource usage?
Honestly, GitHub does a pretty good job overall. Compared to our New York Times example, they’re downright great. But they could be doing better, and so could we all. You can build beautiful, interactive websites with HTML and CSS alone, supported by a simple backend. Pushing the complexity of rendering your single-page app into the frontend might save you miniscule amounts of server-side performance, but you’d just be offloading the costs onto your visitor’s phone and sucking their battery dry.
And if anyone at Google is reading, you should try recommending these strategies for speeding up pages instead of pushing self-serving faux standards like AMP.
Greater than the vertical resolution of my desktop display. ↩
You may have to log out to see this. ↩
Are you a free software maintainer who is struggling with stress, demanding users, overwork, or any other social problems in the course of your work? Please email me — I know how you feel, and I can lend a sympathetic ear and share some veteran advice.
Articles from blogs I follow around the net
This post explains how to implement heap allocators from scratch. It presents and discusses different allocator designs, including bump allocation, linked list allocation, and fixed-size block allocation. For each of the three designs, we will create a ba…via Writing an OS in Rust January 20, 2020
This month's status update will be a little lighter than usual due to Christmas holidays. I've still got the chance to send a patches to quite a few projects, and… do a lot of releases! Weston, Wayland, Sway, mako and grim all have or will get a r…via emersion January 16, 2020
Inspired by Peter Watts’ The Freeze-Frame Revolution and The Island. Each birth is violent in the same way. I erupt into the void, my mirrored surface riotous with gamma radiation, parafluid sheeting from my forced extremities, ripped away by gravitational sh…via Aphyr: Posts January 15, 2020
Generated by openring