Today I Learned - Rocky Kev

TIL Triggering Reflow

POSTED ON:

TAGS: seo html

Have you ever been reading an article online when something suddenly changes on the page? Without warning, the text moves, and you've lost your place. Or even worse: you're about to tap a link or a button, but in the instant before your finger lands—BOOM—the link moves, and you end up clicking something else! Via Google's CLS description

Google ranks that metric and calls it the Cumulative Layout Shift, within it's Core Web Vitals.

It happens when you trigger a reflow on the page.

For example:

Why? Because changing absolute positioning properties uses the CPU, while transform causes the browser to create a GPU layer for the element.

Translate(), the element still occupies its original space (sort of like position: relative), unlike in changing the absolute positioning. And overall, Translate() is more efficient and will result in shorter paint times for smoother animations.

@Paulirish created a list of all the JS elements that trigger reflow:
https://gist.github.com/paulirish/5d52fb081b3570c81e3a

And you can find more information about it here as well:
https://developers.google.com/speed/docs/insights/browser-reflow

Related TILs

Tagged: seo

TIL IndexNow

IndexNow is an open-source protocol that allows website publishers to instantly index across participating search engines, updating results based upon the latest content changes.

TIL lighthouse scores are simulations, not real world

So if you run Lighthouse on your high-powered developer machine and get great scores, that may not be reflective of what the users experience in the real world, and so what Google will use to measure your website user experience.

TIL using code-splitting to improve your First Contentful Paint (FCP) score

Code splitting is a technique where you send only the necessary modules to the user in the beginning.