Building A Low-Tech Website For Energy Efficiency

In an age of flashy jQuery scripts and bulky JavaScript front-end frameworks, loading a “lite” website is like a breath of fresh air. When most of us think of lightweight sites, though, our mind goes to old-style pure HTML and CSS sites or the intentionally barebones websites of developers and academics. Low-tech Magazine, an intentionally low-tech and solar-powered website, manages to incorporate both modern web aesthetics and low-tech efficiency in one go.

Rather than hosting the site on data centers – even those running on renewable power sources – they have a self-hosted site that is run on solar power, causing the site to occasionally go off-line. Their model contrasts with the cloud computing model, which allows more energy efficiency at the user-side while increasing energy expense at data centers. Each page on the blog declares the page size, with an average page weight of 0.77 MB, less than half of the average page size of the top 500,000 most popular blogs in June 2018.

Some of the major choices that have limited the size of the website include building a static site as opposed to a dynamic site, “dithering” images, sparing a logo, staying with default typefaces, and eliminating all third-party tracking, advertising services, and cookies. Their GitHub repository details the front-end decisions  including using unicode characters for the site’s logo rather than embedding an SVG. While the latter may be scalable and lightweight in format it requires distribution to the end-user, which can involve a zipped package with eps, ai, png, and jpeg files in order to ensure the user is able to load the image.

As for the image dithering, the technique allows the website to maintain its characteristic appearance while still minimizing image quality and size. Luckily for Low-tech Magazine, the theme of the magazine allows for black and white images, suitable for dithering. Image sprites are also helpful for minimizing server requests by combining multiple small images into one. Storage-wise, the combined image will take up less memory and only load once.

There are also a few extraneous features that emphasize the website’s infrastructure. The background color indicates the capacity of the solar-charged battery for the website’s server, while other stats about the server’s location (time, sky conditions, forecast) also help with making the website availability in the near future more visible. Who knows, with the greater conscience on environmental impact, this may be a new trend in web design.

38 thoughts on “Building A Low-Tech Website For Energy Efficiency

  1. Ok, but the website is kind of bad too. I find the power bar tinting the bottom half of the entire window yellow distracting, and their figures are such low resolution that any with text or dimensions on them are almost illegible.

    So maybe it’s an art piece making a point, but legibility and accessibility suffered, so I’m not a fan.

    1. Fair point. But I also think you’re missing the larger point. Those are their particular design choices you’re (validly) criticizing. You could use the same principles to do away with the bar and improve the figure resolution and still contribute less to the destruction of life on Earth than most websites. That’s gotta be a good thing.

  2. I’m guessing it mostly goes offline in the evening. Here’s an idea that will blow your mind:
    A Peloton powered website. For extra credit, make the Peloton power the Peloton. Basically a hamster wheel for that hot woman from the commercial, that goes on forever. In the Twilight Zone.

  3. So this is a cautionary tail. If we do find more clean high tech energy sources we might be forced to give up a lot of really useful tech. Got it. Going solar and wind will lead to an unstable power grid. I am not sure that has to be true but it is only reasonable that we must combine it with other sources and use them an opportunistic power source.
    So it is an anti renewable propaganda site.

    1. Having been a reader of lowtech/notech for 5+ years I think that you got it with the cautionary tale bit but then kind of lost it, Kris writes many of his articles on how we given up some of the gains that were made in some forms of alternative/renewable energy in favor of the one path that seemed most feasible at the time. He does not strictly advocate for Green energy without looking at the downsides but also looks at alternatives from the past to contemplate if there is a better possible solution, I find it a refreshing change of pace over many of the mainstream articles on green energy.

      1. I was mainly joking. I will admit that I am not a big fan of the pessimistic outlook that this site does seem to embrace. I do like the super light simple design without the dithering and black and white images.

    2. Well, no. If he spent the money on bigger batteries and more panels, and perhaps a wind generator that isn’t mentioned here, to work at night, then it would go off a lot less. Yes the same lesson does apply to large energy grids, although having a large enough grid means you can send power from where you have more to where you have less. The UK’s had a National Grid since the 1930s.

      So yes you need to over-provision for renewables. And some form of storage is very useful. That’s a big problem since batteries are not up to the task. I read of a small island somewhere that uses a Vanadium flow battery, very interesting. Vanadium has 5 valencies, and charging it up can change it between I and V. Or possibly the other way round, I can’t remember.

      The handy thing is, the vanadium compound is in a liquid, which can be pumped away, once it’s nice and charged, and stored in tanks. Then pumped back in when needed to recharge the battery. So it’s a battery with an external, liquid, storage tank.

      It had a capacity of something like a megawatt-hour, which was fine for this island with it’s renewable energy, and much cheaper than running a cable under the sea to wherever the next bit of land was.

      But even that isn’t practical for a reasonable-sized country. Perhaps investing in more pumped-water sites like Dinorwic in Wales would do, although again, we’d need a lot of them, and creating man-made lakes on convenient mountainsides isn’t easy. Or low-energy.

      Really we’re gonna have to cut our electricity usage a lot. But that’s not actually too bad. LED lights use 10% of the power of incandescents, now banned. TVs use LED backlighting on an LCD panel that uses little power. Efficient computer CPUs are available and of great interest to server farms. We’re gonna have to stop doing stupid things like heating with electricity, but that’s already horribly expensive, nobody uses it if they can avoid it.

      So renewable is possible. Might be more expensive. Might not be. Depends on hundreds of factors including the cost and availability of fuel. Nuclear looks nice short-term but then you’ve got deadly waste that persists for millions of years, way longer than the human race or even the apes have been around. The real cost of that is essntially infinite, mortgaging the future of the human race and whatever thing we evolve into by then! Or what crawls out of the sea after we’ve destroyed ourselves. Not exactly too cheap to meter, if you take responsibility for the whole cost.

      Apparently Americans are used to power cuts every summer anyway thanks to cheapskate electric companies and ubiquitous air-con. So nobody would die. Hospitals might want their own backup of course.

  4. I’m a big fan of plain HTML. Not only does it increase legibility across all browsers and devices, it drastically reduces page weight, too. Even when not powered from solar panels.

    Get rid of the bloat?

    Yeah! Definitely! Please!

  5. I’ve kept track of (and mostly just kept the electronic form of) the 30,000 plus books and 50,000 technical articles I’ve read over the last 50 years – in total a half a terabyte. Since 1995, it has been in form of static web pages. If they had been dynamic, the work at keeping them up to date would be beyond my capability and talent. The solar power for the main (server) computer looks like a good idea.

    1. I challenge your assertion that you read >30,000 books in 50 years. I will go so far as to say it sounds like a lie. And I lie a lot so I know what I’m talking about. Your remark about dynamic webpages is cryptic but that’s your business.

  6. This is a bit of a wake-up call… maybe. Yes the LOW-TECH web page is somewhat of an affectation with its solar server, simple layout and grainy images, but clearly it shows by comparison the bloat of most modern websites without a comparable increase in content.

    I’m viewing this site on an older ASUS eee 1001P and a version of Chromium that can’t be updated, and it struggles on many sites.There are sites it can’t lay out properly. Ditto for a 5 year old Lenovo tablet I have. They haven’t gotten worse with age, it’s that websites now demand that much more from the browser…

    This page on HaD was a 2.1 MB download, with almost 70 cookies set or touched, 55 of which were 3rd party. The BBC News home page was 2.4 MB, with almost 100 (!) cookies, 60 of which are 3rd party.

    How much of this bloat and cookies are content-related, and how much are eating the user’s bandwidth and energy & computing resources for someone else’s gain? Seems there’s room for improvement… or for a stronger pushback from users.

    1. Most users don’t know at all, or care, about stuff like that. Most of the web is consumed by people’s mothers on Facebook who don’t know what a kilobyte is. The same for the bosses of the companies with the websites. Every flashy little gadget impresses them. I guarantee if you reduced file sizes by 50% you’d get a blank look. And web creators come from the arty stream of education now, not the geeks. Using high level tools and horrible things that shit out megabytes of Javascript, often obfuscated. So they don’t know either.

      I’m typing this on a very old and underpowered machine, a P4 1.6GHz with 512MB RAM. I’m surprised how slow it actually is. It’s not running out of RAM, I keep Task Manager up to check that. It’s just amazingly slow for everything, and there’s no bloated accessory garbage on it. I can type in a sentence on this site and it doesn’t appear in the text box for a while after. My main PC needs a repair at the moment so I cobbled this one together out of the scattered corpses I had around the house. I keep something to read to one side of me, for when I’m waiting for web pages to render. It’s something of an education in how awfully overloaded websites are now. We should make every web designer work on a 486 with 8MB of RAM, we’d probably solve global warming in an afternoon!

        1. Yes, It’s a dilemma, and it’s arguable that IT is still such a fast-moving field that fast change is still inevitable. Nonetheless, there’s still many ways for website efficiency to be improved. Such as: a bit more standardization and managed growth around web frameworks and libraries, so that they can be incorporated into browsers instead of being downloads. Renewed diligence with image processing.

          Oh, and maybe a small reduction in the crap-ton of code downloaded that only supports ads and tracking.

    2. Actually, that said… can somebody at HAD speak to whoever’s in charge? 70 cookies is fucking ridiculous even if it’s not unusual for a site that has ads scattered around. 1 cookie to store a poster’s name etc, like you have, is fair enough. But 70!?!? Makes me wonder what nosy advertisers are trying to store about me. Nothing, cos of Adblock. Sorry, but if advertisers hadn’t started enormously taking the piss, nobody would even have written an adblocker. Blame them. I’d probably give the place a whitelist for a couple of static pictures and no cookies at all. Still advertises a product, just doesn’t go all CIA on you.

      I also think a website should work without cookies enabled. Many don’t. There’s a data protection law in Europe that was meant to address this. All that ended up happening was sites pop up a “We’re sending you cookies whether you like it or not”, and an “accept” button. No other button! Not the intended effect and not a well-written law. Citizens are free to go fuck themselves if they don’t like it.

      FWIW I like to avoid buying anything that’s advertised anyway, on god damn principle! I don’t appreciate an industry that tries to manipulate me, and that they’ve been hiring psychologists at advertising agencies for decades I find very annoying. Telling me your toothpaste is the best toothpaste is one thing even if it isn’t true. Trying to take advantage of whatever irrationality and weakness evolved into my brain I take as a personal attack. Even if it’s a personal attack on everyone else, too.

      That TV-advertised ibuprofen sells for something like 15x the price of the identical generic annoys me strongly. Yeah it’s a free world, but the people buying that have been led to think they’re getting something better for their money. Maybe pill adverts should be forced to put disclaimers up. And chemists’ shops (Boots, the largest UK chain) shouldn’t be allowed to sell bloody Bach Flower “remedies”. Homeopathic water on the same shelves as real cures is misleading in itself and taking advantage of the trust people have in a shop they’ve seen on every High Street since they were born.

      So yeah, sorry for adblock but blame 70 cookies and all the other nonsense they pull on a public that mostly isn’t aware how completely they’re being measured and observed.

      You can still have standards, even if the world abandoned them decades ago. There is such a thing as the last sane man! If it’s an evil windmill, tilt at it!

  7. 770KB, or about 5 minutes on a 28K modem. Not impressed! I remember the early web. You can do HTML with not much more data than the text on the page. You don’t need bloody style sheets at all.

    Dithering is probably a mistake. Certainly with GIFs, the type most commonly suffering from dithering, it buggers up the compression by taking away long runs on the same colour. It may well be the same for PNG, it’s a problem of all compression, particularly cos the least-worst form of dithering uses random-ish dot placement, and truly random data doesn’t compress at all. JPEG might be OK cos it throws away lots of detail and works on a general sort of view of the image. Yes, I know, macroblocks a bit like MPEG with cosine transforms. So the dithering will either be lost, or if they use low enough compression to keep it, make the file bigger.

    Since they’re using fewer colours, and JPEG is always 24-bit, I get the impression they are using something with a lossless compression.

    Dithering is a shit idea. It was OK when we didn’t have the video RAM for full colour images. But if you’re trying to reduce file size it’s just about always a wrong decision. I wonder if they experimented with dithered and non-dithered images. Actually a non-dithered image can look OK in JPEG even at quite high compression. The format’s intended for photos so bright contrasty logos can suffer a litte. But still.

    Actually do many browsers suport vector images? I know Firefox has done for a long time. Wikipedia uses lots of vectors, and converts them to PNG bitmaps on the fly on the server. But you can chop off the final extension and view the original vector picture, and of course zoom in as much as you like. THAT would be a lot wiser than dithering! For logos etc. For photos you can chuck away a surprising amount in a JPEG and it’s still either unnoticable, or at least tolerable.

    Sounds like they’re amateurs tinkering and don’t quite know what they’re doing. Anyone feel free to email them and tell them if you like. I might by myself, if HAD readers haven’t drained their batteries already.

  8. Our personal web pages have been served out of an old Wyse thin term running tiny core linux. The web site sits on a USB stick. All simple HTML. This replaced an old dual PIII 900 with mirrored disks and a gig of RAM. The old machine pulled around 200W full time. The new machine runs off of a 20W power cube, and the cube barely gets warm. I suspect it would be easy to go solar with it. The most amazing thing about this set up though is that between the web root being on a USB stick and going from a rather rotund CentOS to a very svelte TinyCore, ditching Apache for Lightttpd, the response is very noticeably faster. Not that it was bad before, it just felt like a web site, but now it feels like a fast web site.

    1. “The web site sits on a USB stick.”

      “I’ll take ‘Meaningless’ for $800 Alex.”

      20 watts? Pfui. You could have your site hosted at a facility where one USB stick more or less wouldn’t make a measurable difference in power consumption. By hosting your own site you are actually wasting energy.

      1. What is meaningless of the site running off a USB stick instead of a mechanical disk?

        Your argument regarding power is like saying the amount of gas your car uses is insignificant to a cruse ship.

        1. Saying “it’s on a USB stick” is like saying “It’s on an SSD.” So what? Pfui.

          The cruise ship analogy is poop.

          The correct analogy is this: a municipal bus will be driving its route regardless of passengers. One passenger more or less will not affect the gas mileage. But you want one municipal bus all to yourself.

  9. I like the idea, but with some CSS wizzardry and proper image compression I think it can look close enough to a ‘normal’ website that noone would ever notice the difference.

  10. so how are they handling communications? it seems that;s the worse power consumer, transmission and reception to wherever their access point lives?

    I want to run a web site off a museum ship, pulling occasional images and data from the wind gauge mounted on the mast. But there’s no telco, and shore power is cut off in evenings. Having to get the Board to budget monthly for a cellphone based data plan is less than ideal, and Im not sure their solar rig would cut it to keep the security and weather feeds online on closed days.

Leave a Reply

Please be kind and respectful to help make the comments section excellent. (Comment Policy)

This site uses Akismet to reduce spam. Learn how your comment data is processed.