~seirdy/seirdy.one

seirdy.one/content/posts/website-best-practices.md -rw-r--r-- 18.1 KiB
Mention ELinks, Netrik

They're not very actively maintained, but they're still good for
testing.
Update some article tags
Add more details about image compression

- Include a sample command
- Describe my approach to deciding on the level of compression/cropping
Stylistic fixes (minor)

Nothing new, just re-phrasing and capitalization.
Add link to avifenc
Add idea for website testing: site translation
Update preferred approach to image processing

- Include AVIF
- Include dark/light variants if applicable
Article update: mention brotli

Brotli support is more prevalent than zstd
Reformat markdown with mdfmt
Shorten alt-text to recommended <100 char limit
Article update: include advice on avatar image

Include info on using an avatar image/profile photo without
significantly increasing the footprint of a website, by re-using the
favicon image.
Add 10 KB Club to web best practices article
Include layout in web best practices

Article update: decribe good layout in the website best practices
article.
Fix bad link

Sourcehut updated its per-object log URLs
Metadata: description + cache-bust manifest icons

- Add a cache-busting fingerprint to all the icons in the webmanifest
- Add a <meta> and open graph tag for a description.
- Include a 512px icon in the manifest
Article fix: put <body> in backticks

<body> was getting interpreted as an HTML tag instead of text.
Use a smaller image in an article
Update web best practices article: add testing

- Add information about testing edge cases
- Re-word some long sentences
CLS: Declare original image dimensions in HTML

Reduce Cumulative Layout Shift (CLS) by declaring original image
dimensions in HTML before re-scaling with CSS. This tells browsers the
image's aspect ratio before the image and the stylesheet load, allowing
browsers to block out space accordingly to avoid making elements "jump"
during loading.

More info: https://web.dev/optimize-cls/
Clarify HTTP Observatory scores
Add bit about alt-text, clarify page size
Next