This Page Has a CLS

The first div is on a time out to intentionally create a CLS issue, because I love breaking things on purpose.

There are two divs-- one called "slow_boy" and one called "fast_boy", (neither id uses camelcase-- this is how you know I'm not a real developer.)

Firstly: I want some styles in here.

I spent a few minutes looking at different color swatches for orange and green. Orange = slow, green = fast.

I added a min-height to both elements of 5em.

Now to the JS part.

I ventured to the mean streets of stackoverflow for this one, and found someone in 2014 trying to slow down the next loaded element on the page, but that used jQuery, which won't be touching my nice clean site thank you very much. I won't be doing that.

(Wait, can I just lazy-load this? Natively? Hm. Google says I need to figure out how to break intersection observer to do that. Experiment for another day I guess.

Okay, so this page has three different slow classes, each causing shifts with each other. And just to make it more annoying, I'll add a clickable element in the fast one.

The orange uses a method from Go Make Things for vanilla show/hide. Basic stuff-- I set the div (inline css, don't tell anyone) to display:none, and after 1000 seconds-- display inherit. Then I do it again 2000 seconds later for the "slowest_boy" id.

Now I'm going to submit this URL to Google Search Console and get that sweet red CLS warning.

UPDATE the evening of 04/06

So uh. Lighthouse is giving me full green marks on this one, so back to the drawing board I guess?

← Home