TIL about the term Jank
POSTED ON:
Jank is a term that focuses on how a webpage is performing. It's not about the page load, but how smoothly the page renders.
Why does it work this way? #
Most devices today refresh their screens 60 times a second. If there’s an animation or transition running, or the user is scrolling the pages, the browser needs to match the device’s refresh rate and put up 1 new picture, or frame, for each of those screen refreshes.
Each of those frames has a budget of just over 16ms (1 second / 60 = 16.66ms).
In reality, however, the browser has housekeeping work to do, so all of your work needs to be completed inside 10ms.
When you fail to meet this budget the frame rate drops, and the content judders on screen. This is often referred to as jank, and it negatively impacts the user's experience.
VIA https://developers.google.com/web/fundamentals/performance/rendering
Google actually has a metric for this called Cumulative Layout Shift, which gives you a score of when content keeps moving about even though the page looks like it's fully loaded.
Ideally, you'll apply some CLS optimizations to reduce/eliminate as much jask as possible.
REFERENCE:
Optimizing Web Core Vitals - Cumulative Layout Shift https://web.dev/optimize-cls/
Related TILs
Tagged: seo