1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-09-19 20:02:10 +00:00

Web best practices: async decode + fingerprinting

- Mention image async decoding
- Describe how width-selector use can enable JS-free viewport
  fingerprinting
This commit is contained in:
Rohan Kumar 2021-07-02 20:37:24 -07:00
parent fef8571e40
commit 7ccf84f031
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
2 changed files with 12 additions and 0 deletions

View file

@ -69,6 +69,10 @@ Users on poor connections have better things to do than idly wait for pages to l
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.
A similar attribute that I *do* recommend is the "decoding" attribute. I typically use `decoding="async"` so that image decoding can be deferred.
=> https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-decoding <img> decoding on MDN
### Wouldn't this be solved by combining lazy loading with pre-loading/pre-fetching?
A large number of users with poor connections also have capped data, and would prefer that pages don't decide to predictively load many pages ahead-of-time for them. Some go so far as to disable this behavior to avoid data overages. Savvy privacy-conscious users also generally disable pre-loading since linked content may employ dark patterns like tracking without consent.
@ -172,6 +176,10 @@ Exceptions exist: one or two very simple responsive changes won't hurt. For exam
}
```
Nontrivial use of width-selectors, in CSS or "<source>" tags, is actually a powerful vector for JS-free fingerprinting:
=> https://matt.traudt.xyz/posts/how-css-alone-can-help-track-you-YF4ciVY6/ How CSS alone can help track you
### What about sidebars?
Sidebars are probably unnecessary, and can be quite annoying to readers who re-size windows frequently. This is especially true for tiling window manager users like me: we frequently shrink windows to a fraction of their original size. When this happens on a website with a sidebar, one of two things happens:

View file

@ -77,6 +77,8 @@ Users on poor connections have better things to do than idly wait for pages to l
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.
A similar attribute that I *do* recommend is the [`decoding`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-decoding) attribute. I typically use `decoding="async"` so that image decoding can be deferred.
### Wouldn't this be solved by combining lazy loading with pre-loading/pre-fetching?
A large number of users with poor connections also have capped data, and would prefer that pages don't decide to predictively load many pages ahead-of-time for them. Some go so far as to disable this behavior to avoid data overages. Savvy privacy-conscious users also generally disable pre-loading since linked content may employ dark patterns like tracking without consent.
@ -165,6 +167,8 @@ Exceptions exist: one or two very simple responsive changes won't hurt. For exam
}
```
Nontrivial use of width-selectors, in CSS or `<source>` tags, is actually a powerful vector for [JS-free fingerprinting](https://matt.traudt.xyz/posts/how-css-alone-can-help-track-you-YF4ciVY6/).
### What about sidebars?
Sidebars are probably unnecessary, and can be quite annoying to readers who re-size windows frequently. This is especially true for tiling window manager users like me: we frequently shrink windows to a fraction of their original size. When this happens on a website with a sidebar, one of two things happens: