Follow

Gathering notes and resources on low-bandwidth and low-energy websites. Will append to it as I find more information.

kokorobot.ca/site/leanerweb.ht

Also, I'm well aware my website isn't as lean as it could be, as it relies heavily on visuals — I'm an artist, after all. I am working at reducing some of the CSS, and I still have a few thumbnails left to optimize.

Show thread

@rek imo the biggest impact things are little to no js to use the site effectively(js is fine if used sparingly), one css style sheet hand written, no custom fonts avoiding animations, images no larger than they need to be with widths and heights set in html (reduces reflow).

@peregrine Yea i had WAY too many animations, I've removed those.

@rek imo its like js. Minimal animations on user interaction are fine so long as the site works without it. Little bit goes a long way.

@peregrine i've got some light animations in the header for the nav bar, i'll likely keep that, but i meant I had some gif animations for some projects that I've removed. As that, was heavy.

@rek The thing about simplicity is knowing when to stop.

Don't go so far that you scrub away any personality! Your site is beautiful.

@stephen Aw, thank you. My aim is to simplify while keeping a similar look, I think I can do it.

@rek For images in your websites, you could go with responsive images in HTML, different formats and native lazy loading: thomasorus.com/all-about-image

Each of these techniques can be used in different circumstances. For ex responsive images is good for your portfolio but useless for grimgrains, whose homepage has little images, but way too many to load and would benefit from lazy-loading.

(Sorry for plugging my own writings on the subjects, hope it helps)

@thomasorus I will likely have some questions soon haha~ thanks for sending me this, I haven't researched image optimization enough, lacking time, so this definitely will help me.

@rek Love it! I made a blogging platform recently, with minimal resources and low-bandwidth considerations in mind: mataroa.blog/

@rek This interests me greatly, as my "everyday retrocomputing" project means "optimized for lynx" websites is a going concern for me.

@FredBednarski Yes of course! The 'How to build a leaner website' section was largely inspired from James :)

@FredBednarski But also, sad that that Bandwidth Conservation Society website doesn't exist anymore

@rek I guess it's time to establish the "New Bandwidth Conservation Society" ;)

@FredBednarski Building a website wouldn't be hard either :), thinking about it~

@rek how did I miss this? I absolutely agree. Making a website small and light is a challenge which is fun, even if you don't care about bandwidth constraints.

@hxii including images maybe the hardest thing. seems 33kb limits you to 2-bit dithered image or a simple SVG.

@rek did you find a compromise for your website yet?

@theruran @rek I guess it depends on the SVG, but you can get a 105844 byte SVG down to 44192 bytes with minification and GZip pre-compression.

I guess you can also use Network Information API (developer.mozilla.org/en-US/do) to serve smaller/larger images.

@theruran @hxii I've got lots of B&W images that i've dithered without sacrificing quality. I've also opted for compressed thumbnails (not done doing this tho) for colour images. Reduced amount of images, but seeing as it is a visual website it's hard to limit it to 1 per section. I've added notes on file sizes to links to images as a warning for ppl with low-bandwidth etc etc

@rek@merveilles.town what's interesting about this advice is that it has a bunch of extra advantages
semantic html, low/no javascript, fewer images all lead to easier browsing for people with disabilities
it's also very future-proof and easier to maintain, especially if the website can be stored and served statically. technology changes and leaves libraries, developers and old code behind, but serving files from a http server hasn't significantly changed since 1991

i think i just find it interesting that using simple and empathetic design almost always solves more problems than originally considered, and almost never has problematic side-effects

@gaeel Yes and yes! So much to gain, so little to lose.

@rek hey, the link at the end of "openness" just directs to

idlewords.com/

maybe you wanted to point a specific article?

@npisanti oh that's because I link the full article further down in the reading materials, but yea, you're right that maybe i should link it there too.

@rek I was a bit puzzled clicking on that and being redirected to something totally different, now it makes a lot more sense =)

@rek ah don't worry, thank you for writing those notes!,

that's something i can point out to people when i talk about my idea of a "better" website

Sign in to participate in the conversation
Merveilles

Merveilles is a community project aimed at the establishment of new ways of speaking, seeing and organizing information — A culture that seeks augmentation through the arts of engineering and design. A warm welcome to any like-minded people who feel these ideals resonate with them.