4 ms·

> Setting the size of elements before they load, to prevent the content from jumping all over the place. This is especially jarring on a phone. Multiple times

> Setting the size of elements before they load, to prevent the content from jumping all over the place. This is especially jarring on a phone. Multiple times a day, I see this, and it pisses me off each and every time. Nothing like reading an article to all of a sudden have some image load somewhere (likely not even visible on screen) suddenly cause what you're reading to disappear off screen. And I'm not on a slow connection, either. I'm typically on uncongested wifi connected to fiber when at home, 5G otherwise. JavaScript in general is so bad, or rather is being used for so many bad practices, that I've disabled it on my main mobile browser. What little good it's used for doesn't out weigh all of the bad out there. I'm tired of malicious ads hijacking the page, either rendering popups or redirecting me somewhere I don't want to go. If a site doesn't render anything useful without javascript (Twitter is a prime example), I typically turn around and go elsewhere.

tshaddox 5y ago
Layout shift due to responsive images is now easy to prevent, because most up-to-date browsers now correctly set the aspect ratio of a responsive img element if you add the height and width attributes. Before a year or so ago, you had to use hacks like padding percentages to correctly set the aspect ratio. https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ https://www.smashingmagazine.com/2020/03/setting-height-widt...
- sirshmooey 5y ago
  You can automate this in VSCode, very handy. https://christianheilmann.com/2021/04/14/quick-vs-code-tip-automatically-add-image-width-and-height-to-images/ https://christianheilmann.com/2021/04/14/quick-vs-code-tip-a...
- dredmorbius 5y ago
  Depends. There are extensions (Dark Reader, a dark/light mode extension for Firefox, is an example) which trigger multiple redraws of a page on load. On an e-ink device (my principle driver these days), the extension is a near necessity (ironically, to force black-on-white themes on sites, much more readable on e-ink), and page re-paints are all the more jarring and expensive. Simple pages still load quickly and without disruption. Many complex sites don't. (NPR's website comes particularly to mind.)
Arrath 5y ago
> This is especially jarring on a phone. Multiple times a day, I see this, and it pisses me off each and every time. Nothing like reading an article to all of a sudden have some image load somewhere (likely not even visible on screen) suddenly cause what you're reading to disappear off screen. This is the worst on picture rich recipe blogs. I hate it.

tshaddox 5y ago

Layout shift due to responsive images is now easy to prevent, because most up-to-date browsers now correctly set the aspect ratio of a responsive img element if you add the height and width attributes. Before a year or so ago, you had to use hacks like padding percentages to correctly set the aspect ratio. https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/ https://www.smashingmagazine.com/2020/03/setting-height-widt...

sirshmooey 5y ago
You can automate this in VSCode, very handy. https://christianheilmann.com/2021/04/14/quick-vs-code-tip-automatically-add-image-width-and-height-to-images/ https://christianheilmann.com/2021/04/14/quick-vs-code-tip-a...
dredmorbius 5y ago
Depends. There are extensions (Dark Reader, a dark/light mode extension for Firefox, is an example) which trigger multiple redraws of a page on load. On an e-ink device (my principle driver these days), the extension is a near necessity (ironically, to force black-on-white themes on sites, much more readable on e-ink), and page re-paints are all the more jarring and expensive. Simple pages still load quickly and without disruption. Many complex sites don't. (NPR's website comes particularly to mind.)

Arrath 5y ago

> This is especially jarring on a phone. Multiple times a day, I see this, and it pisses me off each and every time. Nothing like reading an article to all of a sudden have some image load somewhere (likely not even visible on screen) suddenly cause what you're reading to disappear off screen. This is the worst on picture rich recipe blogs. I hate it.