From 6bb659b2cfa5ff80b7b7f9a0432e6e0738988b21 Mon Sep 17 00:00:00 2001 From: Rohan Kumar Date: Thu, 31 Mar 2022 18:34:53 -0700 Subject: [PATCH] Add TCP-aware opim, reorg Describe round-trip aware optimization Move some sections around to flow better. --- content/posts/website-best-practices.gmi | 272 ++++++++++++---------- content/posts/website-best-practices.md | 277 +++++++++++++---------- 2 files changed, 318 insertions(+), 231 deletions(-) diff --git a/content/posts/website-best-practices.gmi b/content/posts/website-best-practices.gmi index c32b21a..563bb14 100644 --- a/content/posts/website-best-practices.gmi +++ b/content/posts/website-best-practices.gmi @@ -1,4 +1,4 @@ -The following applies to minimal websites that focus primarily on text. It does not apply to websites that have a lot of non-textual content. It also does not apply to websites that focus more on generating revenue or pleasing investors than being good websites. +The following applies to minimal websites that focus primarily on text. It does not apply to websites that have a lot of non-textual content. It also does not apply to websites that focus more on generating revenue or pleasing investors than being inclusive. This is a "living document" that I add to as I receive feedback. @@ -108,41 +108,120 @@ If you must use third-party content, ensure that third-party stylesheets and scr This prevents alteration without your consent. If you wish to be extra careful, you could use SRI for first-party resources too. -For embedded third-party content (e.g. images), give extra consideration to the "Beyond alt-text" section. Your page should be as useful as possible if the embedded content becomes inaccessible. +## Optimal loading -## About fonts +Nearly every Internet user has to deal with unreliable connections every now and then, even the top 1%. Developing regions lack modern Internet infrastructure; high-ranking executives travel frequently. Everybody hits the bottom of the bell-curve. -I recommend setting the default font to "sans-serif". Avoid "system-ui": it causes issues among readers whose system fonts don't cover your website's charset. +Reducing load time is especially useful to poorly-connected users. For much of the world, connectivity comes in short bursts during which loading time is precious. Chances of a connection failure or packet loss increase with time. -=> https://infinnie.github.io/blog/2017/systemui.html Never, ever use system-ui as the value of font-family +Optimal loading is a complex topic. Broadly, it covers three overlapping categories: reducing payload size, delivering content early, and reducing the number of requests and round trips. -If you really want, you could use serif instead of sans-serif; however, serif fonts tend to look worse on low-res monitors. Not every screen's DPI has three digits. Accommodate users' default zoom levels by keeping your font size the same as most similar websites. +### Blocking content -To ship custom fonts is to assert that branding is more important than user choice. That might very well be a reasonable thing to do; branding isn't evil! That being said, textual websites in particular don't benefit much from branding. Beyond basic layout and optionally supporting dark mode, authors generally shouldn't dictate the presentation of their websites; that should be the job of the user agent. Most websites are not important enough to look completely different from the rest of the user's system. +HTML is a blocking resource: images and stylesheets will not load until the user agent loads and parses the HTML that calls them. To start loading above-the-fold images before the HTML parsing finishes, send a "link" HTTP header. -A personal example: I set my preferred browser font to "sans-serif", and map it to my preferred font in my computer's fontconfig settings. Now every website that uses sans-serif will have my preferred font. Sites with sans-serif blend into the users' systems instead of sticking out. +My website includes a "link" header to load an SVG that serves as my IndieWeb photo and favicon: -### But most users don't change their fonts... +``` +link: ; rel=preload; as=image +``` -The "users don't know better and need us to make decisions for them" mindset isn't without merits; however, in my opinion, it's overused. Using system fonts doesn't make your website harder to use, but it does make it smaller and stick out less to the subset of users who care enough about fonts to change them. This argument isn't about making software easier for non-technical users; it's about branding by asserting a personal preference. +### Inline content -### Can't users globally override stylesheets instead? +In addition to HTML, CSS is also a blocking resource. You could pre-load your CSS using a "link" header. Alternatively: if your CSS is under a kilobyte, consider inlining it in the using a