Crazy ones and kids are the only ones who see the world with clear eyes – but you avoid them! We live today in an era of hypocrisy. The truth is not worth anything anymore. Orwell pure, George would be so pleased. Black is white, bottom is up.
How to Build a Low-tech Website?
Our new blog is designed to radically reduce the energy use associated with accessing our content.
Low-tech Magazine was born in 2007 and has seen minimal changes ever since. Because a website redesign was long overdue — and because we try to practice what we preach — we decided to build a low-tech, self-hosted, and solar-powered version of Low-tech Magazine. The new blog is designed to radically reduce the energy use associated with accessing our content.
Why a Low-tech Website?
We were told that the Internet would “dematerialise” society and decrease energy use. Contrary to this projection, it has become a large and rapidly growing consumer of energy itself.
In order to offset the negative consequences associated with high energy consumption, renewable energy has been proposed as a means to lower emissions from powering data centers. For example, Greenpeace’s yearly ClickClean report ranks major Internet companies based on their use of renewable power sources.
However, running data centers on renewable power sources is not enough to address the growing energy use of the Internet. To start with, the Internet already uses three times more energy than all wind and solar power sources worldwide can provide. Furthermore, manufacturing, and regularly replacing, renewable power plants also requires energy, meaning that if data traffic keeps growing, so will the use of fossil fuels.
Running data centers on renewable power sources is not enough to address the growing energy use of the Internet.
Finally, solar and wind power are not always available, which means that an Internet running on renewable power sources would require infrastructure for energy storage and/or transmission that is also dependent on fossil fuels for its manufacture and replacement. Powering websites with renewable energy is not a bad idea, however the trend towards growing energy use must also be addressed.
To start with, content is becoming increasingly resource-intensive. This has a lot to do with the growing importance of video, but a similar trend can be observed among websites. The size of the average web page (defined as the average page size of the 500,000 most popular domains) increased from 0.45 megabytes (MB) in 2010 to 1.7 megabytes in June 2018. For mobile websites, the average “page weight” rose tenfold from 0.15 MB in 2011 to 1.6 MB in 2018. Using different measurement methods, other sources report average page sizes of up to 2.9 MB in 2018.
The growth in data traffic surpasses the advances in energy efficiency (the energy required to transfer 1 megabyte of data over the Internet), resulting in more and more energy use. “Heavier” or “larger” websites not only increase energy use in the network infrastructure, but they also shorten the lifetime of computers — larger websites require more powerful computers to access them. This means that more computers need to be manufactured, which is a very energy-intensive process.
Being always online doesn’t combine well with renewable energy sources such as wind and solar power, which are not always available.
A second reason for growing Internet energy consumption is that we spend more and more time on-line. Before the arrival of portable computing devices and wireless network access, we were only connected to the network when we had access to a desktop computer in the office, at home, or in the library. We now live in a world in which no matter where we are, we are always on-line, including, at times, via more than one device simultaneously.
“Always-on” Internet access is accompanied by a cloud computing model – allowing more energy efficient user devices at the expense of increased energy use in data centers. Increasingly, activities that could perfectly happen off-line – such as writing a document, filling in a spreadsheet, or storing data – are now requiring continuous network access. This does not combine well with renewable energy sources such as wind and solar power, which are not always available.
Low-tech Web Design
Our new web design addresses both these issues. Thanks to a low-tech web design, we managed to decrease the average page size of the blog by a factor of five compared to the old design – all while making the website visually more attractive (and mobile-friendly). Secondly, our new website runs 100% on solar power, not just in words, but in reality: it has its own energy storage and will go off-line during longer periods of cloudy weather.
The Internet is not an autonomous being. Its growing energy use is the consequence of actual decisions made by software developers, web designers, marketing departments, publishers and internet users. With a lightweight, off-the-grid solar-powered website, we want to show that other decisions can be made.
With 36 of roughly 100 articles now online, the average page weight on the solar powered website is roughly five times below that of the previous design.
To start with, the new website design reverses the trend towards increasingly larger page sizes. With 36 of roughly 100 articles now online, the average page weight on the solar powered website is 0.77 MB — roughly five times below that of the previous design, and less than half the average page size of the 500,000 most popular blogs in June 2018.
One of the fundamental choices we made was to build a static website. Most of today’s websites use server side programming languages that generate the website on the fly by querying a database. This means that every time someone visits a web page, it is generated on demand.
On the other hand, a static website is generated once and exists as a simple set of documents on the server’s hard disk. It’s always there — not just when someone visits the page. Static websites are thus based on file storage whereas dynamic websites depend on recurrent computation. Static websites consequently require less processing power and thus less energy.
The choice for a static site enables the possibility of serving the site in an economic manner from our home office in Barcelona. Doing the same with a database-driven website would be nearly impossible, because it would require too much energy. It would also be a big security risk. Although a web server with a static site can be hacked, there are significantly less attack routes and the damage is more easily repaired.
The main challenge was to reduce page size without making the website less attractive. Because images take up most of the bandwidth, it would be easy to obtain very small page sizes and lower energy use by eliminating images, reducing their number, or making them much smaller. However, visuals are an important part of Low-tech Magazine’s appeal, and the website would not be the same without them.
By dithering, we can make images ten times less resource-intensive, even though they are displayed much larger than on the old website.
Instead, we chose to apply an obsolete image compression technique called “dithering”. The number of colours in an image, combined with its file format and resolution, contributes to the size of an image. Thus, instead of using full-colour high-resolution images, we chose to convert all images to black and white, with four levels of grey in-between.
These black-and-white images are then coloured according to the pertaining content category via the browser’s native image manipulation capacities. Compressed through this dithering plugin, images featured in the articles add much less load to the content: compared to the old website, the images are roughly ten times less resource-intensive.
- Custom Image
- Greyscale Conversion Method
- Dithering Method
- Output Format
Default typeface / No logo
All resources loaded, including typefaces and logos, are an additional request to the server, requiring storage space and energy use. Therefore, our new website does not load a custom typeface and removes the font-family declaration, meaning that visitors will see the default typeface of their browser.
We use a similar approach for the logo. In fact, Low-tech Magazine never had a real logo, just a banner image of a spear held as a low-tech weapon against prevailing high-tech claims.
Instead of a designed logotype, which would require the production and distribution of custom typefaces and imagery, Low-tech Magazine’s new identity consists of a single typographic move: to use the left-facing arrow in place of the hypen in the blog’s name: LOW←TECH MAGAZINE.
No Third-Party Tracking, No Advertising Services, No Cookies
Web analysis software such as Google Analytics records what happens on a website — which pages are most viewed, where visitors come from, and so on. These services are popular because few people host their own website. However, exchanging these data between the server and the computer of the webmaster generates extra data traffic and thus energy use.
With a self-hosted server, we can make and view these measurements on the same machine: every web server generates logs of what happens on the computer. These (anonymous) logs are only viewed by us and are not used to profile visitors.
With a self-hosted server, there’s no need for third-party tracking and cookies.
Low-tech Magazine has been running Google Adsense advertisements since the beginning in 2007. Although these are an important financial resource to maintain the blog, they have two important downsides. The first is energy use: advertising services raise data traffic and thus energy use.
Secondly, Google collects information from the blog’s visitors, which forces us to craft extensive privacy statements and cookie warnings — which also consume data, and annoy visitors. Therefore, we replace Adsense by other financing options (read more below). We use no cookies at all.
How often will the website be off-line?
Quite a few web hosting companies claim that their servers are running on renewable energy. However, even when they actually generate solar power on-site, and do not merely “offset” fossil fuel power use by planting trees or the like, their websites are always on-line.
This means that either they have a giant battery storage system on-site (which makes their power system unsustainable), or that they are relying on grid power when there is a shortage of solar power (which means that they do not really run on 100% solar power).
In contrast, this website runs on an off-the-grid solar power system with its own energy storage, and will go off-line during longer periods of cloudy weather. Less than 100% reliability is essential for the sustainability of an off-the-grid solar system, because above a certain threshold the fossil fuel energy used for producing and replacing the batteries is higher than the fossil fuel energy saved by the solar panels.
How often the website will be off-line remains to be seen. The web server is now powered by a new 50 Wp solar panel and a two year old 12V 7Ah lead-acid battery. Because the solar panel is shaded during the morning, it receives direct sunlight for only 4 to 6 hours per day. Under optimal conditions, the solar panel thus generates 6 hours x 50 watt = 300 Wh of electricity.
The web server uses between 1 and 2.5 watts of power (depending on the number of visitors), meaning that it requires between 24 Wh and 60 Wh of electricity per day. Under optimal conditions, we should thus have sufficient energy to keep the web server running for 24 hours per day. Excess energy production can be used for household applications.
We expect to keep the website on-line during one or two days of bad weather, after which it will go off-line.
However, during cloudy days, especially in winter, daily energy production could be as low as 4 hours x 10 watts = 40 watt-hours per day, while the server requires beteen 24 and 60 Wh per day. The battery storage is roughly 40 Wh, taking into account 30% of charging and 33% depth-or-discharge (the solar charge controller shuts the system down when battery voltage drops to 12V).
Consequently, the solar powered server will remain on-line during one or two days of bad weather, but not for longer. However, these are estimations, and we may add a second 7 Ah battery in autumn if this is necessary. We aim for an “uptime” of 90%, meaning that the website will be off-line for an average of 35 days per year.
When is the best time to visit?
The accessibility of this website depends on the weather in Barcelona, Spain, where the solar-powered web server is located. To help visitors “plan” their visits to Low-tech Magazine, we provide them with several clues.
To help visitors “plan” their visits to Low-tech Magazine, we provide them with several clues.
A battery meter provides crucial information because it may tell the visitor that the blog is about to go down — or that it’s “safe” to read it. The design features a background colour that indicates the capacity of the solar-charged battery that powers the website server. A decreasing height indicates that night has fallen or that the weather is bad.
In addition to the battery level, other information about the website server is visible with a statistics dashboard. This includes contextual information of the server’s location: time, current sky conditions, upcoming forecast, and the duration since the server last shut down due to insufficient power.
SERVER. The website runs on an Olimex A20 computer. This machine has 2 Ghz of processing power, 1 GB of RAM, and 16 GB of storage. The server draws 1 – 2.5 watts of power.
INTERNET CONNECTION. The server is connected to a 100 MBps fibre internet connection. For now, the router is powered by grid electricity and requires 10 watts of power. We are investigating how to replace the energy-hungry router with a more efficient one that can be solar-powered, too.
SOLAR PV SYSTEM. The server runs on a 50 Wp solar panel and one 12V 7Ah lead-acid battery (energy storage capacity will be doubled at the end of this month). The system is managed by a 20A solar charge controller.
What happens to the old website?
The solar powered Low-tech Magazine is a work in progress. For now, the grid-powered Low-tech Magazine remains on-line. Readers will be encouraged to visit the solar powered website if it is available. What happens later, is not yet clear. There are several possibilities, but much will depend on the experience with the solar powered server.
Until we decide how to integrate the old and the new website, making and reading comments will only be possible on the grid-powered Low-tech Magazine, which is still hosted at TypePad. If you want to send a comment related to the solar powered web server itself, you can do so by sending an e-mail to solar (at) lowtechmagazine (dot) com. Your comment will be published at the bottom of this page.
Can I help?
Yes, you can.
On the one hand, we’re looking for ideas and feedback to further improve the website and reduce its energy use. We will document the project extensively so that others can build low-tech websites too. To make a comment, please send an e-mail to solar (at) lowtechmagazine (dot) com.
On the other hand, we’re hoping for people to support this project with a financial contribution. Advertising services, which have maintained Low-tech Magazine since its start in 2007, are not compatible with our lightweight web design. Therefore, we are searching for other ways to finance the website:
We will soon offer print-on-demand copies of the blog. These publications will allow you to read Low-tech Magazine on paper, on the beach, in the sun, or whenever and where ever you want.
You can support us through through PayPal, Patreon and LiberaPay.
The solar powered server is built by Kris De Decker, Roel Roscam Abbing, and Marie Otsuka.
Very interesting project! It’ll be interesting to see how well it holds up during the winter.
What software are you running on the server to keep the energy usage so low? (I’m mainly interested in the OS and HTTP server.)
I have a few ideas/suggestions:
I think it should be possible to reach much higher uptime by creating a network of nodes that all host the same set of websites. It wouldn’t be a very simple project, and you might argue that it’s not as lowtech anymore. But hear me out:
Say you have 5 “lowtech websites” each running on its own server (node), and each located in a different place on earth. You could then duplicate the content of each server to the 4 other servers. This only costs you extra storage. The servers only need to communicate with each other when the content changes. The energy/bandwidth cost of this communication should be negligible for static websites that are updated for example once a day.
The main challenge is the DNS. There needs to be some kind of load balancing between these 5 clients. A rudimentary solution would be to use round-robin DNS. Say you have and A record for solar.lowtechmagazine.com that contains all 5 of the nodes’ IP addresses and a lifetime of 5 minutes. Every time a node detects it is going to go down in less than 5 minutes, it updates this DNS record: it removes it’s own IP address. Every time a node boots back up, it re-adds it’s own IP address to the DNS record. I’m not an expert on DNS, so I’m not 100% sure that this would work. But I think it’s worth investigating if you’re thinking about improving uptime. Obviously more complex schemes would be necessary to handle unexpected node downtime. Depending on the type of website this may be overkill.
About the images. I think you may have gone a bit too far in the image compressing. I see that most (all?) of the images on the grid-powered website or stored in the lossless PNG format. In general this is not a good choice for photos (as opposed to icons or other graphics with few colors): the file size will be much larger than when you’re using the lossy JPEG format.
For example: the main picture for this article is 739 KB in PNG (http://krisdedecker.typepad.com/.a/6a00e0099229e88833022ad3b23825200b-750wi)
The dithered version in PNG is 43 KB, which is indeed a huge improvement, but comes at a big cost in image quality (https://solar.lowtechmagazine.com/dithers/sps_close.png)
The B&W JPEG version of the main picture (70% compression) is only 35 KB(https://i.imgur.com/9Z5HkTk.jpg), and I’d say the image quality is much higher than that of the dithered image. (The image resolutions don’t match entirely. For the same resolution the image size of the JPEG would probably be more or less the same as the dithered image, but with increased image quality.) You could even lower the JPEG quality further than 70%, but this quickly becomes rather unpleasant to look at, so you may not want to do this.
Very interesting experiment!
But what about CDN caching and all other kind of caching between your server and each of the browsers?
It might very be the case that CDN will cache the content of this website for some time according to default cache policies, and also that the client’s browsers might also cache part of the website directly.
I’d say that having big caching time for the browser is a big plus, as it would still allow users to access previously accessed pages when they are down at no energy cost.
On the other hand, estimating network caching energy usage might be complicated.
“The design features a background colour that indicates the capacity of the solar-charged battery that powers the website server. A decreasing height indicates that night has fallen or that the weather is bad.”
So that’s what it is! It looks more like a glitch. I think it would be better to just add it to the header: This is a solar-powered website, which means it sometimes goes offline. Battery: xx%
Some other minor issues (in Firefox): The area you can click on links is some places longer than the text. When the window is wide the images become too big and lines denoting cut-out text go much further out than the text, which looks odd.
Quite enjoyed the article, and am interested how you did the image dithering and coloring. Do you have a link that explains more?
PS you could add a logo if you convert /create it in svg and embed it in the page.
(5) Case D
I think it’s a really cool project. I’m a hobbyist website tinkerer with a blog, and I’ve been experimenting with CMSes (I just installed WordPress, but I think it might be too much for what I want to do — really I’d like a flat-file, static site that I can push to from anywhere (i.e., with a webform), which is what I can’t figure out).
I’m writing you because I was curious if you’d share how your publishing workflow works — do you have a CMS that you use? If so, how do you get from a web form to a published post? Is that how you do it?
RSS feed is missing!
jquery-3.3.1.min.js is the biggest file on your page, from the limited amount of JSI saw, it could be easily removed. you could cache the your in a separate js file, this would also prevent uselessly sending your script to browser that won’t support/accept it.
would you mind sharing the dithering script you apply to images?
I discovered LOW TECH MAGAZINE through this article and I’m really happy with the look and feel of the website! Keeping the default typeface is so rare nowadays and it works very well without JS.
(7) kris de decker
RSS feed lives here: https://solar.lowtechmagazine.com/feeds/all.atom.xml
(8) George Dorn
@ Case D (#5)
Look into various static site generators, like Pelican, Jekyll and dozens of others – https://www.staticgen.com/
They require a little bit of effort to set up, design the template, etc, but then whenever you want to publish, you run a command and it (re)generates all of the html. You can run the generator on the server itself, or on any other machine and just send the results to the server (somewhat automatically, via rsync, ftp, scp, etc).
I publish a blog this way via Pelican. I edit a file in reST (other languages also supported) and when I’m ready I run ‘make html’ and ‘make publish’ to send it to the server.
To make a comment, please send an e-mail to solar (at) lowtechmagazine (dot) com.
Why We Need a Speed Limit for the Internet
The energy use of the internet can only stop growing when energy sources run out, unless we impose self-chosen limits.
The monster footprint of digital technology
The embodied energy of the memory chip alone exceeds the energy consumption of a laptop during its life expectancy of 3 years.
Why the Office Needs a Typewriter Revolution
Could we rethink and redesign office equipment, combining the best of mechanical and digital devices?
How to Build a Low-tech Internet
If we want the internet to keep working in circumstances where access to energy is more limited, we can learn important lessons from alternative network technologies.