~seirdy/seirdy.one

46512c9046bd549d9b998a589edb838f880b9816 — rohan kumar 6 months ago 55543cf
Update with feedback on page size

Added the Web Bloat Size Calculator and a snippet on how people on
trains experience a connection speed drops.

Thanks, u/Snapstromegon from Reddit!
2 files changed, 21 insertions(+), 5 deletions(-)

M content/posts/website-best-practices.gmi
M content/posts/website-best-practices.md
M content/posts/website-best-practices.gmi => content/posts/website-best-practices.gmi +8 -2
@@ 61,7 61,9 @@ Ultimately, surveillance self-defense on the web is an arms race full of trade-o

For users on slow connections, lazy loading is often frustrating. I think I can speak for some of these users: mobile data near my home has a number of "dead zones" with abysmal download speeds, and my home's Wi-Fi repeater setup occasionally results in packet loss rates above 60% (!!).

Users on poor connections have better things to do than idly wait for pages to load. They might open multiple links in background tabs to wait for them all to load at once, or switch to another window/app and come back when loading finishes. They might also open links while on a good connection before switching to a poor connection; I know that I often open 10-20 links on Wi-Fi before going out for a walk in a mobile-data dead-zone.
Users on poor connections have better things to do than idly wait for pages to load. They might open multiple links in background tabs to wait for them all to load at once, or switch to another window/app and come back when loading finishes. They might also open links while on a good connection before switching to a poor connection; I know that I often open 10-20 links on Wi-Fi before going out for a walk in a mobile-data dead-zone. A Reddit user reading an earlier version of this article described a similar experience when travelling by train:

=> https://i.reddit.com/r/web_design/comments/k0dmpj/an_opinionated_list_of_best_practices_for_textual/gdmxy4u/ u/Snapstromegon's comment

Unfortunately, pages with lazy loading don't finish loading off-screen images in the background. To load this content ahead of time, users need to switch to the loading page and slowly scroll to the bottom to ensure that all the important content appears on-screen and starts loading. Website owners shouldn't expect users to have to jump through these ridiculous hoops.



@@ 126,7 128,7 @@ It might seem odd to create a lossless WebP from a lossy PNG, but I've found tha

The 250kb club gathers websites at or under 250kb, and also rewards websites that have a high ratio of content size to total size.

=> https://250kb.club/ https://250kb.club/
=> https://250kb.club/ The 250kb Club

Motherfucking Website generated a lot of buzz when it was created:



@@ 135,3 137,7 @@ Motherfucking Website generated a lot of buzz when it was created:
Motherfucking Website inspired several unofficial sequels that tried to gently improve upon it. My favorite:

=> https://bestmotherfucking.website/ Best Motherfucking Website

The WebBS calculator compares a page's size with the size of a PNG screenshot of the full page content, encouraging site owners to minimize the ratio of the two:

=> https://www.webbloatscore.com/ Web Bloat Score Calculator

M content/posts/website-best-practices.md => content/posts/website-best-practices.md +13 -3
@@ 126,7 126,10 @@ They might open multiple links in background tabs to wait for them all to load a
once, or switch to another window/app and come back when loading finishes. They might
also open links while on a good connection before switching to a poor connection; I
know that I often open 10-20 links on Wi-Fi before going out for a walk in a
mobile-data dead-zone.
mobile-data dead-zone. A Reddit user reading an earlier version of this article
described a [similar
experience](https://i.reddit.com/r/web_design/comments/k0dmpj/an_opinionated_list_of_best_practices_for_textual/gdmxy4u/)
riding the train.

Unfortunately, pages with lazy loading don't finish loading off-screen images in the
background. To load this content ahead of time, users need to switch to the loading


@@ 196,9 199,12 @@ Most of my images will probably be screenshots that start as PNGs. My typical fl
1.  Lossy compression with `pngquant`
2.  Losslessly optimize the result with `oxipng` and its Zopfli backend (slow)
3.  Also create a lossless WebP from the lossy PNG, using `cwebp`
4.  Include the resulting WebP in the page, with a fallback to the PNG using a `<picture>` element.
4.  Include the resulting WebP in the page, with a fallback to the PNG using a
    `<picture>` element.

It might seem odd to create a lossless WebP from a lossy PNG, but I've found that it's the best way to get the smallest possible image at the minimum acceptable quality for screenshots with solid backgrounds.
It might seem odd to create a lossless WebP from a lossy PNG, but I've found that
it's the best way to get the smallest possible image at the minimum acceptable
quality for screenshots with solid backgrounds.

Other places to check out
-------------------------


@@ 209,3 215,7 @@ rewards websites that have a high ratio of content size to total size.
Also see [Motherfucking Website](https://motherfuckingwebsite.com/). Motherfucking
Website inspired several unofficial sequels that tried to gently improve upon it. My
favorite is [Best Motherfucking Website](https://bestmotherfucking.website/).

The [WebBS calculator](https://www.webbloatscore.com/) compares a page's size with
the size of a PNG screenshot of the full page content, encouraging site owners to
minimize the ratio of the two.