19 ms·
How to build a low-tech website? (2018)
- KronisLV 5y agoThis bit really caught my attention: > 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. This, in particular, is an amazing take: > Less than 100% reliability is essential for the sustainability of an off-the-grid solar system Saying that sacrificing uptime is a good thing for achieving a particular goal is a take that's so wildly out of line with what most of the industry believes is refreshing, because it really makes you think. What would the world look like, if instead of being obsessed with SRE we simply assumed or accepted that there will be downtime, and treated it like something perfectly normal. Maybe a nice message at ingress/load balancer level, telling everyone that the site will be back in a bit. I have no illusions that any company would want something like that, or that it's even feasible for many industries, e.g. healthcare, though the Latvian "e-health" system is an accidental experiment of this at the cost of around 15 million euros of taxpayer money: https://www-lsm-lv.translate.goog/raksts/zinas/latvija/par-e-veselibas-galveno-diagnozi-atzist-slikto-planosanu-un-vadisanu.a350191/?_x_tr_sl=auto&_x_tr_tl=en&_x_tr_hl=lt&_x_tr_pto=nui https://www-lsm-lv.translate.goog/raksts/zinas/latvija/par-e... . However, if companies have working hours, why couldn't websites? What a funny thought. Edit: on an unrelated note, it's wild how different setups can be. For example: > The web server uses between 1 and 2.5 watts of power... While at the same time, i have two servers with 200GEs (essentially consumer hardware) running in my homelab, with a TDP of 35W each, though with the UPS and its inefficiencies, as well as the 4G router, the total energy consumption that i have to deal with is around 100W. Granted, i also use them for backups and as CI nodes, but there's still a difference of 20 - 50 times more power usage between one of my servers and one of theirs. I guess one can definitely talk about the differences between x86 and ARM there as well.
- bennyp101 5y ago"However, if companies have working hours, why couldn't websites?" There is a UK Gov website that only works during certain times (I think it's something to do with DVLA) - although I assume that is a technical thing, rather than it being powered by solar!
- blowski 5y agoCompanies House used to have this. You could only register a new company 9am-5pm, Monday to Friday (and public holidays were also excluded).
- gnur 5y ago> Less than 100% reliability is essential This is actually a take most SRE's would / should believe. Every added 9 to the reliability increases the price exponentially. Finding the correct level of reliability is something most companies should focus more on, because sometimes a single physical machine that could go down once a year for a few hours is perfectly capable of providing all the resources a medium seized business could need. Proper backups, monitoring and recovery runbooks can even decrease the downtime of such a simple system to minutes, while easily saving you maybe thousands per month.
- y4mi 5y agoEsp if you consider bare metal servers. I'm currently paying 45€ for a Ryzen server with 64gb ECC ram and 1tb nvme storage (raid1). The speed is incredible if compared to ec2 or root server performance from other vendors. Even if they've dedicated resources.
- jmnicolas 5y ago> These black-and-white images are then coloured according to the pertaining content category via the browser’s native image manipulation capacities. But then thousands of browsers are going to consume more electricity to render the images. So if we're thinking globally it would be better to do the job once on the server.
- dinkelberg 5y agoAgree. They could just add color palettes to their PNG files. The files could essentially stay the same. See: [1] Their use of PNG files for photographs does not make sense anyway, though. If they used 1-component JPEG files (greyscale or possibly including a custom color profile to achieve the tinted effect), they could achieve similar file sizes with greatly enhanced image quality. [1]: https://www.w3.org/TR/2003/REC-PNG-20031110/#4Concepts.Indexing https://www.w3.org/TR/2003/REC-PNG-20031110/#4Concepts.Index...
- haywirez 5y agoWould be fascinating to see a similar tips & tricks breakdown for minimum-viable 3D content.
- geon 5y ago> 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. This is just nonsensical. Inline styles requires no extra request, and you can still use the fonts 99.9999 % of users are guaranteed to have.
- leptoniscool 5y agoInteresting, new technology tends to be "faster" or "more powerful" with energy usage as an after-thought. It's refreshing to see a site dedicated to the opposite end of that spectrum.
- jart 5y agoYes but they're doing it from a political angle. We should be building simpler, snappier, and more resource efficient software because it's the right thing to do and it makes software better.
- dgb23 5y agoI haven’t read anything political on there. Why is wanting to reduce energy consumption „political“. It’s just plain old frugalism mixed with environmental concerns.
- Karrot_Kream 5y agoBecause if you actually wanted to reduce energy consumption, then you'd have actual targets and goals. E.g. I started out at n mW and now I'm at m mW of usage. This article talks about the solar setup they're using now, but not where they started from, and what the energy usage profile of their server is over time. In other words, it's either lazy or greenwashing.
- chrischen 5y agoI don't think that's necessarily true given the rise of mobile computing. We definitely had to optimize for performance, RAM, and energy usage with mobile phones. The M1 for laptops is a direct benefit of those optimizations, where Apple has essentially shown that such power optimizations for battery devices can be useful even for desktop class computing.
- noduerme 5y agoI for one can't wait to run the in-browser regression app I've been working on in JS at the M1 mac I just ordered... a stack that would probably run faster on my old 2015 box if I'd written it in C. Basically proving the OP's point that optimization tends to decrease when you can write easier code and just throw more cycles at it.
- bryans 5y agoThe amount of energy wasted due to poor caching strategies alone could power small countries. Made far worse by the current trend to maximize code readability and organization by using as many dependencies as humanly possible for even the simplest of tasks.
- onion2k 5y agoMade far worse by the current trend to maximize code readability and organization by using as many dependencies as humanly possible for even the simplest of tasks. The current trend is to maximize readability in development and then to use a build pipeline to remove as much of that readability as possible and optimize for size in production. There is only a very loose relationship between what code looks like when you're writing it and what actually pops out of a compiler or bundler to go to production. You could write something close to plain English these days (literate programming with something like Observable), with a ton of dependencies, and still get a reasonably well-optimized website after a bundler does some tree-shaking, dead code removal, transpiling and minification. It's complicated, sure, but your complaint here is the exact reason why it's complicated. We want to easy to write and understand human-optimized code for dev, and to use that to deliver an Internet- and browser-optimized bundle to the user. The step in the middle of those is complex.
- kiba 5y agoIt's not about the readability of code on web pages, but the fact that web pages are unnecessarily bloated in the first place. Even static page generators seem a bit too complicated at time.
- onion2k 5y agoI see this argument a lot on HN, but whenever I look at web pages (which is pretty much all day, every day) I don't see very much that could be removed without radically changing the user experience. I understand that some people don't believe reactive single page apps, that are device responsive, that have accessibility features, and that are localized for different languages are a good idea, but if you do think those things are what you want to deliver then websites aren't "bloated". They're just big. They do lots of things. The argument is less about the code and more about people railing against what the web is these days. Fair enough if that's the case, but at least make the argument that you don't like modern websites rather than try to hide it behind a claim it's about code optimization. The only exception to that is adverts. There's a ton of code delivered in websites that isn't necessary, and it's mostly for displaying ads and tracking people so the ads can be optimized for better conversion.
- TheDudeMan 5y agoLose the dithering and use a sane image format.
- phoenixdblack 5y agoI'm completely with you on that. WebP should be the smallest, best supported solution right now.
- kome 5y agoWebP is a terrible practice and and it has no real value vs jpg https://pagepipe.com/dont-use-webp-image-format/ https://pagepipe.com/dont-use-webp-image-format/ - just because endorsed by google doesn't mean it's good (i would even argue, the contrary is true)
- jazzyjackson 5y ago> Cloudinary says we can reduce that image’s page weight from a 4.6k PNG to a 1.5k webP image. That saves 3.1k. In big letters, they tell us that is a 32-percent savings. I'm not a mathematician but...
- unicornporn 5y agoIf we're comparing lossy compression mode, WebP is close to equal to MozJPEG for higher res images. Check the 1500 px comparison: https://siipo.la/blog/is-webp-really-better-than-jpeg https://siipo.la/blog/is-webp-really-better-than-jpeg
- shepherdjerred 5y agoThis page says that webp produces smaller images…
- vbezhenar 5y agoThis article seems outdated. Webp supported on Safari. Also this article itself confirms that webp saves image size, just author for some reason thinks that it does not matter. Well, this page is not so fast to open for me, definitely not 0.5 second, more like 5 seconds, so I wouldn't be the one listening to his advices.
- HamburgerEmoji 5y agoIt's OK to use energy. There's no shortage of it. Please keep your eye on the target: pollution.
- cjcampbell 5y agoLooks like there was an update in 2020 on the experience of running this server: https://solar.lowtechmagazine.com/2020/01/how-sustainable-is-a-solar-powered-website.html https://solar.lowtechmagazine.com/2020/01/how-sustainable-is....
- kome 5y agoI love the design of this webpage, such a polished look, yet not banal or corporate. It has a strong personality. And it's responsiveness is amazing. That's what good design is about. Also, no JS bullshit. What a breath of fresh air.
- aspett 5y agoI detest the colours with the scroll. Awfully distracting.
- KronisLV 5y agoHmm, personally i think that there are a few nitpicks that could improve readability, though maybe that's in conflict with the current aesthetic that they're going for. For starters, it would be nice not to stretch out the images too much, and instead allow them to take up just a portion of the screen, otherwise they feel overwhelming in contrast to the text. Secondly, maybe the battery charge indicator is a bit distracting (the color difference isn't subtle with the background), though at the same time that's a really cool gimmick! Here's an example of what i'm thinking of: https://imgur.com/a/zFYhz9p https://imgur.com/a/zFYhz9p
- toto444 5y ago> One of the fundamental choices we made was to build a static website. The corollary of this one is : do not offer the possibility of creating a user account when it adds no value. Some analytics that no one cares about does not provide value for instance.
- genewitch 5y agoI have two "diskless" servers that operate as ephemeral file hosting, like a pastebin. One runs Up1, but in tmpfs. When it boots it copies everything to tmpfs and tells all logging to go to /tmp. I run that one on a t1.micro or equivalent - basically a raspberry pi. The storage is touched on boot and that's it. I never bothered to make the rootfs remount read-only, but that would be fun, too. The other one is a message queue sort of thing, and I don't want records of the messages (there's way too many), so it's all done in ram too. Both can be rebooted arbitrarily with a half minute service interruption - and I often reboot them because they run out of 'storage', and I go through and compile "LTS" kernels and patches for the software 2-4 times a year. The nodejs Up1 is so locked down I don't mess with node anymore, though. If I had faster internet I would host everything on low power computers on-site. It's my favorite way to run systems.
- playpause 5y agoValue to the user or value to the website owner? Analytics do provide value to the website owner. I assume you mean value for the user, and I would agree that’s a nice goal, but you make out it’s somehow self-evident and aligned with all relevant incentives.
- human 5y agoI can’t help but say that even WordPress can be served as a "static site" if caching is done right. And maybe the fact that I use an ad-blocker is saving a few watts per week.
- prox 5y agoI use the LiveCanvas builder, and it does just that, output static files on WP. https://livecanvas.com/ https://livecanvas.com/
- keiferski 5y agoThe section on images made me realize how redundant most blog post images are. Usually they are random generic images from Unsplash, Pexels, etc. and are only exist to add some color to the page. The specific image is mostly unimportant. Would it be possible to implement a browser-level image library? Instead of a blogger using a generic Unsplash image, they just select one from the "Firefox Image Library", which is already on the user's computer. This library can be curated and optimized to keep the browser file download manageable. Considering that images are often 70-80% of the page size, the savings would be significant.
- pmlnr 5y agoIf you just want colour, why not add some clever, but simple SVG graphics?
- keiferski 5y agoDefinitely an option, but I don't know if most bloggers know the difference between vectors and rasters. I also think you would need to balance aesthetics and efficiency. No one will use the browser image library if all of the images are just simple graphics. You'd still want some shots of nature, cityscapes, etc.
- riidom 5y agoIf the image has indexed colours (which SVG's often have as well, unless you use gradients), using indexed .png's gives you huge savings. I have an image on my blog (1920x1080), which, as .jpg uses 272kb, but as indexed .png only 76kb, which is 27% the size. I'm using ~16 different colors, I believe. And the .jpg in this comparison is pretty hard compressed already (quality level 60 or 75, iirc). To generate this .png I use Krita, but PS should be able to do so as well. GIMP can do it too, but if you start with a 24bit graphics and need to reduce colors as first step, I got bad results with GIMP (may have been me, though). Krita did a better ootb-job for me here.
- aufhebung 5y agoHave fun explaining to everyone why their browser now takes up 20GB.
- powersnail 5y agoThe only JS I need on my blog is Mathjax. Is there a static site generator that can render latex equations into svg's automatically? On the one hand, I want to get rid of JS. On the other hand, I prefer to keep the plain text equation in my markdowns, rather than generating and linking to an image. I feel like I'm one long weekend away from building my own SSG to do this.
- guyomes 5y agoGladTex [0] converts latex math in html files to SVG images with links. If you prefer to write your source webpage in markdown, you can also use it with pandoc [1] like this (from the manual): ~~~ pandoc -s --gladtex input.md -o myfile.htex gladtex -d image_dir myfile.htex # produces myfile.html and images in image_dir ~~~ [0]: https://humenda.github.io/GladTeX/ https://humenda.github.io/GladTeX/ [1]: https://pandoc.org/MANUAL.html#math-rendering-in-html https://pandoc.org/MANUAL.html#math-rendering-in-html
- dinkelberg 5y agoIs there a reason why you do not want to use MathML for embedding equations in HTML? If not, it might be a good alternative to SVGs because MathML equations can be read aloud by screen readers. (If the screen reader is good.) MathJax, which uses MathML internally, claims to improve accessibility also for users of "bad" screenreaders. [1] Apparently, you can use pandoc to convert markdown files with LaTeX equations to HTML with embedded MathML using "pandoc math.text -s --mathml -o mathMathML.html". [2] [1] https://docs.mathjax.org/en/latest/basic/accessibility.html#screen-reader-support https://docs.mathjax.org/en/latest/basic/accessibility.html#... [2] https://tex.stackexchange.com/a/352636 https://tex.stackexchange.com/a/352636
- boramalper 5y ago> The only JS I need on my blog is Mathjax. Is there a static site generator that can render latex equations into svg's automatically? KaTeX. https://katex.org/docs/api.html#server-side-rendering-or-rendering-to-a-string https://katex.org/docs/api.html#server-side-rendering-or-ren... Though not to SVG, see https://github.com/KaTeX/KaTeX/issues/375 https://github.com/KaTeX/KaTeX/issues/375 tracking the progress.
- tleb_ 5y agoAs they describe being open to ideas and feedback: maybe using static compression could help. The concept is to pre-compress files (have foo.html.gz available next to foo.html) so that the web server does not have to compress on-the-fly. nginx supports it[0] and gzip_static does not appear in their nginx config[1]. It might not make a difference if nginx has a in-RAM cache of the compressed files. Otherwise, it has the potential to be pretty significant assuming most requests are made using "Accept-Encoding: gzip" and assuming the web server does not prefer other compression algorithms (eg. Brotli). [0]: https://nginx.org/en/docs/http/ngx_http_gzip_static_module.html https://nginx.org/en/docs/http/ngx_http_gzip_static_module.h... [1]: https://homebrewserver.club/low-tech-website-howto.html#full-nginx-config https://homebrewserver.club/low-tech-website-howto.html#full...
- deleted 5y ago[deleted]
- masklinn 5y ago> maybe using static compression could help. Maybe but that's not a trivial question to answer: the linked article is 236K, gzipping yields 88K (84 at -9, brotly results in 68), so the questions become: * how much energy does the extra 148K (/ 152 / 168) cost, aka once you've factored in the initial handshake what is the efficiency per byte of the transfer * how much does decompression cost on the client side * what is the mix of clients accepting each compression algorithm (and what is the overlap)
- lqet 5y agoApache also supports this, but the configuration is a bit tricky. For all my private websites, I have a setup where the Apache config filters requests based on the accepted encoding the client sends. For each file, I have three versions on disk: the raw file, a gzipped version, and a brotli-compressed version. Apache picks and sends the correct one. Not only is the file delivered faster, you can also use a higher compression level (gzip with compression level 9 is too slow to be used on each request).
- lambdadmitry 5y ago
- docflabby 5y agoCould probably host 10000+ static websites on a Mac m1, low power usage and built in UPS...
- d3vmax 5y agoDowntime can be avoided by using UPS which can be charged when solar energy is available. Another alternative to Text Only logo would have been to use SVG logo which can be achieved in less than 1.5 KB.
- foxfluff 5y agoThey do have a battery, of course they have a battery. But they want to keep it sustainable, which a large battery is arguably not: https://solar.lowtechmagazine.com/2020/01/how-sustainable-is-a-solar-powered-website.html#embodied https://solar.lowtechmagazine.com/2020/01/how-sustainable-is...
- INTPenis 5y agoLow tech in this case means off grid. Imo low tech does not have to mean low availability, low tech website to me is a static website hosted on object storage with some cloud based CDN infront.
- sexy_seedbox 5y agoYeah, but how green are some of these CDNs?
- INTPenis 5y agoWell then it's a green website. The low-tech part in the title is misleading because it can mean so many things to different people. In this case it's actually green, off grid but complex and relatively high tech for the setup process.
- icebraining 5y agoPretty green. An advantage of running very large infra is that it makes sense to spend engineering time optimizing energy use, even in a fully profit-driven sense.
- jFriedensreich 5y agoSeems also like a perfect usecase for ipfs. Imagine solar powered ipfs nodes, each serving some website and also pinning for other nodes. but its probably hard to get an ipfs node to 2 watt...
- Jyaif 5y ago> 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. The writer lost my trust with that logical error.
- dredmorbius 5y agoIn economics, the Jevons paradox (/ˈdʒɛvənz/; sometimes Jevons' effect) occurs when technological progress or government policy increases the efficiency with which a resource is used (reducing the amount necessary for any one use), but the rate of consumption of that resource rises due to increasing demand.[1] The Jevons paradox is perhaps the most widely known paradox in environmental economics.[2] However, governments and environmentalists generally assume that efficiency gains will lower resource consumption, ignoring the possibility of the paradox arising.[3] https://en.wikipedia.org/wiki/Jevons_paradox https://en.wikipedia.org/wiki/Jevons_paradox
- hgamaral 5y agoI just wonder how much energy does it take to serve content over TLS/SSL. Maybe that's another factor to consider when building a "low tech" website.
- snemvalts 5y agoThis feels a bit like counting the amount of coffee you drink when calculating carbon footprint, or a bit like code golf aiming for 1KB of executable size. Makes more sense to do the 80/20 approach, 20% of work to get 80% of results sustainability wise and the move on to the next.
- hgamaral 5y agoI'm not so sure. According to [1], for 1MB data transfer over TLS there's up to 15% overhead used for encryption on WLANs. That's 15% more data you have to process, which is not quite the carbon footprint of your coffee drink if you consider how many requests you serve. And that's just data, not to mention all calculations necessary to actually encrypt stuff. [1] - https://users.aalto.fi/~siekkine/pub/siekkinen11tls.pdf https://users.aalto.fi/~siekkine/pub/siekkinen11tls.pdf
- admin786 5y agoThanks
- admin786 5y agoNext
- helsinkiandrew 5y agoI wonder what percent of total energy use of viewing the page around the world is from the web server and what from the routers and network infrastructure and rendering on the browser? This is an interesting experiment, but I struggle to see how a 'low-tech' under utilised website would consume less energy in its lifetime (including manufacture, delivery etc) per page view than a high performance, globally cached (CloudFront/Flare etc), highly utilised shared web service in a data centre.
- uhtred 5y agoAs cool as running the website on solar power is, the thing I really like about this website is its simple design, lack of javascript, fast page load, snappiness etc.
- dredmorbius 5y agoFunction follows constraints.
- Cort3z 5y agoWhile reading this article I have started a total of 29 ci/cd workflows, some of which are expected to run for 30 minutes probably consuming at least 200 watts (assuming some kind of xeon computer) each for the duration, I have consumed an estimated 1700Wh (19 * 10 minutes, 10 * 30 minutes), or enough to run this website for between 28 - 71 days. Not sure what to think about that.
- _hao 5y ago> Not sure what to think about that. That right now all aspects of our lives are wasteful and that society won't or can't change fast enough.
- Robotbeat 5y agoThe claim that the last 5% can only be provided by either higher embodied fossil fuel costs in the batteries OR by burning fossil fuels wouldn’t be true, BTW, if you used fuels which are non-fossil to provide that last 5% of energy. It’s problematic to have a sort of alchemical understanding of energy that it HAS to at some point come from fossil fuels OR you have to significantly reduce capability somehow (in this case, website reliability). In fact, the US didn’t use hardly any fossil fuels (virtually all wood or water) until well after the Industrial Revolution (late 1700s to 1820). Even for ironmaking, the US primarily used charcoal (not coal) until around the 1840s, after the first Industrial Revolution, and coal didn’t exceed wood for fuel in the US until the mid 1880s. American industry (and much of Britain’s) was powered by water power, channeled to different buildings, etc. American trains and steamboats ran on biomass. Most US iron used to build these things was made using biomass. (Britain was different because they simply didn’t have as much land and had cut down their trees already.) Sustainably harvested biomass (or electrically synthesized fuels like hydrogen) is a valid source for that last 5%. Ultimately, there’s a large energy cost to non-reliability, BTW. Any kind of real automation (which mass production—and thus abundance and solar panel production—relies on) relies on its components being highly reliable. Non-automated handcrafted everything means large embodied labor, which means energy usage from human metabolism.
- dash2 5y agoCharcoal may not be fossil, but it still releases CO2 into the atmosphere, right?
- amalcon 5y agoSort of. Charcoal is made from wood; the released carbon was generally extracted from the atmosphere by the tree. To parent's point, in pre-industrial and early-industrial times, most of this would have come from pre-existing trees cut for the purpose. This will prematurely release that carbon. If it had come from farmed trees, like it might today, then it could be net zero with respect to CO2 over the whole cycle. The "could" is important there, as the process of turning wood into charcoal doesn't need to be carbon neutral (though it probably could be).
- andrewfromx 5y agoThe author had me right up until “However, visuals are an important part of Low-tech Magazine’s appeal, and the website would not be the same without them.” And the next image was like hmmmm that image is smaller and dithered but was it really needed? If you really cared about the environment you would have just gone without that image and saved 100% of the file size. And then should I have children? Each one will consume more resources might as well have zero. And then wait suicide would get rid of me? Where do you draw the line to still live but be good?
- Cycl0ps 5y ago>Where do you draw the line to still live but be good? You draw it at making the image files a bit smaller, if the article's anything to go on. Not every concept needs to be extrapolated out to the point of a suicide pact. Let good enough be, and try for more tomorrow.
- juloo 5y agoWhat does low tech means in this context ? It's still a computer, with complication on top: solar panels, battery. All the hardware they use requires some energy to be built, the network consumes a lot of energy too. How does this compare to a VPS server at a cloud provider or using the grid electricity (no solar panel) ? I'd expect individual VMs to use less energy compared to a decicated computer. Is it really greener to stop using the grid electricity but instead buy a small solar panel ? Surely that'll be less green than the grid 20 years in the future. The article contains many sources but doesn't compare other solutions. 2.5 watts is impressive, though.
- z3t4 5y agoYou could also take advantage of economy of scale and host your static web site on a CDN - together with thousands of other web sites. And pick a CDN that runs entirely on "green" energy.
- edsonmedina 5y agoThe images are still huge for the quality. There's a lot of gains to be had with proper compression here.
- dang 5y agoOne past thread and a few fragments: How to Build a Low-Tech Website? - https://news.ycombinator.com/item?id=18293409 https://news.ycombinator.com/item?id=18293409 - Oct 2018 (1 comment) How to Build a Low-Tech Website - https://news.ycombinator.com/item?id=18075143 https://news.ycombinator.com/item?id=18075143 - Sept 2018 (183 comments) How to build a (solar-powered) low-tech website - https://news.ycombinator.com/item?id=18073850 https://news.ycombinator.com/item?id=18073850 - Sept 2018 (1 comment) How to Build a Low-Tech Website - https://news.ycombinator.com/item?id=18057331 https://news.ycombinator.com/item?id=18057331 - Sept 2018 (1 comment)