4 ms·

Love it, feels like browsing the web about 20 years ago. (Or a few bad websites now…) So this is an example of Cumulative Layout Shift (CLS)[0]. It is a metric

Love it, feels like browsing the web about 20 years ago. (Or a few bad websites now…) So this is an example of Cumulative Layout Shift (CLS)[0]. It is a metric (coined and named by Google) which indicates how much “movement” there is during the initial render of a page, caused by reflowing the layout. Ideally you have very little or none of it for better UX. I believe it can have an impact on organic search ranking and potentially ad rank. The most common cause is images included without width and height attributes, therefore the page has to reflow after the image has been downloaded. Other things that can cause it are multiple css files overriding each other and loading slowly, or JavaScript effecting the layout after it has loaded. You can use Google Lighthouse [1] to measure this (and other things) on a site. 0: https://web.dev/cls/ https://web.dev/cls/ 1: https://web.dev/measure/ https://web.dev/measure/

andrepd 5y ago
>a few
nexuist 5y ago
The irony being that Google themselves doesn't even get good scores on Lighthouse. Check out the report for a simple search for "tomatoes": https://i.imgur.com/qcaMTBh.png https://i.imgur.com/qcaMTBh.png ...although I guess they got a green light on CLS, lol. URL for transparency: https://www.google.com/search?q=tomatoes&sxsrf=AOaemvKVS3_EpuZ4m5jaKqPLiwImb3aRbg%3A1642285667258&source=hp&ei=Y0rjYZj3DIrL_QaGiIjYAQ&iflsig=ALs-wAMAAAAAYeNYc8-wPwXCrioWgQcy7PdRwTomYkjA&ved=0ahUKEwjYtMHu5rT1AhWKZd8KHQYEAhsQ4dUDCAg&uact=5&oq=tomatoes&gs_lcp=Cgdnd3Mtd2l6EAMyCAguEIAEELEDMhEILhCABBCxAxCDARDHARCvATILCC4QgAQQxwEQrwEyBQgAELEDMggIABCABBCxAzIFCAAQgAQyCAgAEIAEELEDMgUILhCABDIICAAQgAQQsQMyBQgAEIAEOgQIIxAnOhEILhCABBCxAxCDARDHARDRAzoLCAAQgAQQsQMQgwE6CwgAEIAEELEDEMkDOgUIABCSAzoNCC4QgAQQxwEQ0QMQCjoHCCMQ6gIQJzoOCC4QgAQQsQMQxwEQowI6CAgAELEDEIMBOggILhCxAxCDAToRCC4QgAQQsQMQgwEQxwEQowI6CwguEIAEELEDEIMBOggIABCABBDJAzoHCAAQsQMQCjoHCC4QsQMQClAAWJsLYJ4MaANwAHgAgAFoiAHxBpIBBDEwLjGYAQCgAQGwAQo&sclient=gws-wiz https://www.google.com/search?q=tomatoes&sxsrf=AOaemvKVS3_Ep...
- sdflhasjd 5y ago
  Google search results have these annoying info boxes that automatically slide open, then they score themselves green
amelius 5y ago
> Love it, feels like browsing the web about 20 years ago. (Or a few bad websites now…) Facebook: scroll down your timeline, scroll back up and everything has changed ... Google: see a nice ad, accidentally click on a different link, click "back", ad is gone ...
- joshspankit 5y ago
  Honestly, this stuff bothers me so much. I’m now subconsciously nervous about clicking the wrong thing and missing the thing I wanted.
  - amelius 5y ago
    Perhaps we should be running a screenrecorder all the time, so at least we can get some of the information back. Or run our software in a "multiverse" VM, where every click/scroll operation makes a snapshot of the entire OS, and allows us to roll back state.
reaperducer 5y ago
feels like browsing the web about 20 years ago. (Or a few bad websites now…) A few? You an I must use very different web sites. Both of the too-big-to-fail bank web sites I went to today have this problem. My health insurance web site does this. I just checked, and unless you're on a really fast connection and a newish computer, Starbucks, Instructables, Pinion Coffee, my local honey farm, Target, PetSmart, and Chewy, Amazon, Twitter, and PetCo all do this.
easrng 5y ago
Also web fonts with fallbacks that have different sizes.
zxcvbn4038 5y ago
Check out https://nypost.com/ https://nypost.com/ - shifts and redraws constantly, freezes completely needing page killed on a regular basis, consumes high while completely idle, makes iPhone hot if left open on NYPost page (swear their ad network must be mining crypto or something), routine usage crashes iOS browsers. No additional css needed!
- jb1991 5y ago
  Doesn't do this for me, but then all the ad blocking stuff I have installed probably helps.
  - zxcvbn4038 5y ago
    Definitely - it’s when their advertising is loading that all the problems manifest, and it’s the advertising that hammers the cpu once it is loaded, on a desktop where I can filter everything out it’s just another site, on iOS where there is no filtering it causes nothing but problems. Do I want to read about local news and probably lose all my tabs when the browser crashes, or avoid the site and keep my tabs another day? Their app has the same issue, I’m sure it’s just a thin wrapper around the iOS web widget (does not even seem to cache or pre-load content), it freezes solid for minutes while loading advertising and pounds the cpu as long as it’s in the foreground.
    - jb1991 5y ago
      I am using iOS, with Firefox and various ad blockers, and behaves fine there. Time to upgrade your browser my friend!
- Sainth 5y ago
  Not only the NYPost, I have an old gen1 or gen2 iPad and it can't render many modern pages. The browser crashes when it tries to load the ads on many pages. Still perfect for reading HN though.

andrepd 5y ago

>a few

nexuist 5y ago

The irony being that Google themselves doesn't even get good scores on Lighthouse. Check out the report for a simple search for "tomatoes": https://i.imgur.com/qcaMTBh.png https://i.imgur.com/qcaMTBh.png ...although I guess they got a green light on CLS, lol. URL for transparency: https://www.google.com/search?q=tomatoes&sxsrf=AOaemvKVS3_EpuZ4m5jaKqPLiwImb3aRbg%3A1642285667258&source=hp&ei=Y0rjYZj3DIrL_QaGiIjYAQ&iflsig=ALs-wAMAAAAAYeNYc8-wPwXCrioWgQcy7PdRwTomYkjA&ved=0ahUKEwjYtMHu5rT1AhWKZd8KHQYEAhsQ4dUDCAg&uact=5&oq=tomatoes&gs_lcp=Cgdnd3Mtd2l6EAMyCAguEIAEELEDMhEILhCABBCxAxCDARDHARCvATILCC4QgAQQxwEQrwEyBQgAELEDMggIABCABBCxAzIFCAAQgAQyCAgAEIAEELEDMgUILhCABDIICAAQgAQQsQMyBQgAEIAEOgQIIxAnOhEILhCABBCxAxCDARDHARDRAzoLCAAQgAQQsQMQgwE6CwgAEIAEELEDEMkDOgUIABCSAzoNCC4QgAQQxwEQ0QMQCjoHCCMQ6gIQJzoOCC4QgAQQsQMQxwEQowI6CAgAELEDEIMBOggILhCxAxCDAToRCC4QgAQQsQMQgwEQxwEQowI6CwguEIAEELEDEIMBOggIABCABBDJAzoHCAAQsQMQCjoHCC4QsQMQClAAWJsLYJ4MaANwAHgAgAFoiAHxBpIBBDEwLjGYAQCgAQGwAQo&sclient=gws-wiz https://www.google.com/search?q=tomatoes&sxsrf=AOaemvKVS3_Ep...

sdflhasjd 5y ago
Google search results have these annoying info boxes that automatically slide open, then they score themselves green

amelius 5y ago

> Love it, feels like browsing the web about 20 years ago. (Or a few bad websites now…) Facebook: scroll down your timeline, scroll back up and everything has changed ... Google: see a nice ad, accidentally click on a different link, click "back", ad is gone ...

joshspankit 5y ago
Honestly, this stuff bothers me so much. I’m now subconsciously nervous about clicking the wrong thing and missing the thing I wanted.
- amelius 5y ago
  Perhaps we should be running a screenrecorder all the time, so at least we can get some of the information back. Or run our software in a "multiverse" VM, where every click/scroll operation makes a snapshot of the entire OS, and allows us to roll back state.

reaperducer 5y ago

feels like browsing the web about 20 years ago. (Or a few bad websites now…) A few? You an I must use very different web sites. Both of the too-big-to-fail bank web sites I went to today have this problem. My health insurance web site does this. I just checked, and unless you're on a really fast connection and a newish computer, Starbucks, Instructables, Pinion Coffee, my local honey farm, Target, PetSmart, and Chewy, Amazon, Twitter, and PetCo all do this.

easrng 5y ago

Also web fonts with fallbacks that have different sizes.

zxcvbn4038 5y ago

Check out https://nypost.com/ https://nypost.com/ - shifts and redraws constantly, freezes completely needing page killed on a regular basis, consumes high while completely idle, makes iPhone hot if left open on NYPost page (swear their ad network must be mining crypto or something), routine usage crashes iOS browsers. No additional css needed!

jb1991 5y ago
Doesn't do this for me, but then all the ad blocking stuff I have installed probably helps.
- zxcvbn4038 5y ago
  Definitely - it’s when their advertising is loading that all the problems manifest, and it’s the advertising that hammers the cpu once it is loaded, on a desktop where I can filter everything out it’s just another site, on iOS where there is no filtering it causes nothing but problems. Do I want to read about local news and probably lose all my tabs when the browser crashes, or avoid the site and keep my tabs another day? Their app has the same issue, I’m sure it’s just a thin wrapper around the iOS web widget (does not even seem to cache or pre-load content), it freezes solid for minutes while loading advertising and pounds the cpu as long as it’s in the foreground.
  - jb1991 5y ago
    I am using iOS, with Firefox and various ad blockers, and behaves fine there. Time to upgrade your browser my friend!
Sainth 5y ago
Not only the NYPost, I have an old gen1 or gen2 iPad and it can't render many modern pages. The browser crashes when it tries to load the ads on many pages. Still perfect for reading HN though.