I was shocked by just how well this imitates me opening up a GitLab issue on my 5 megabit/second wifi. (for anyone wondering just why client-side rendering is more often than not slower than...
I was shocked by just how well this imitates me opening up a GitLab issue on my 5 megabit/second wifi.
(for anyone wondering just why client-side rendering is more often than not slower than server-side rendering, and significantly slower on poor connections, this blog post gives a good explanation.)
Not sure I get the title. Client-side rendering requires a payload which does add to first page load. But that has little to do with Cumulative Layout Shift, which is what this library is...
Not sure I get the title. Client-side rendering requires a payload which does add to first page load. But that has little to do with Cumulative Layout Shift, which is what this library is exaggerating. If anything I would expect a client-side site to have a delayed page paint (FCP), but little layout shift otherwise.
Reducing CLS is much more about defining element sizes rather than letting elements grow, or setting "close enough" fallbacks. For example if you load a heavy webfont, that can result in page shift. You can approximate the word position by setting the correct font-size and line-spacing though.
For large images (especially hero images and the sort), the new aspect-ratio declaration is absolute magic. It allows you to calculate the container size for responsive images before they're loaded. Other tricks like setting a near-enough background color, or loading low-quality versions (or just using a responsive JPG) help too.
Other optimizations include lazy-loading below-the-fold content, or preloading the first image in a prominent slideshow. But these are micro-optimizations that most devs won't need to worry about.
I was shocked by just how well this imitates me opening up a GitLab issue on my 5 megabit/second wifi.
(for anyone wondering just why client-side rendering is more often than not slower than server-side rendering, and significantly slower on poor connections, this blog post gives a good explanation.)
It really does its job quite well. Could use some FOUCs, or even a half-second during which all text becomes invisible ...
Since we're using acronyms, that's FOIT!
Not sure I get the title. Client-side rendering requires a payload which does add to first page load. But that has little to do with Cumulative Layout Shift, which is what this library is exaggerating. If anything I would expect a client-side site to have a delayed page paint (FCP), but little layout shift otherwise.
Reducing CLS is much more about defining element sizes rather than letting elements grow, or setting "close enough" fallbacks. For example if you load a heavy webfont, that can result in page shift. You can approximate the word position by setting the correct font-size and line-spacing though.
For large images (especially hero images and the sort), the new
aspect-ratiodeclaration is absolute magic. It allows you to calculate the container size for responsive images before they're loaded. Other tricks like setting a near-enough background color, or loading low-quality versions (or just using a responsive JPG) help too.Other optimizations include lazy-loading below-the-fold content, or preloading the first image in a prominent slideshow. But these are micro-optimizations that most devs won't need to worry about.