Read on Twitter
Still thinking about the @JAMstackTORONTO meetup last night and a few of the framework image plugins talking about Blur-up or low-res Image placeholders. I’m skeptical, especially now that we get aspect ratio for free when using `width` and `height` attributes.
Profiling one of the examples it doesn’t seem to help LCP trigger earlier—in fact animating seems to hurt LCP.
The black vertical bar in the following video shows LCP. The high-res image finishes loading at 3s and starts animating but LCP doesn’t trigger until 3.5s.
The black vertical bar in the following video shows LCP. The high-res image finishes loading at 3s and starts animating but LCP doesn’t trigger until 3.5s.
For me—I don’t think this is worth it. Not if it has a JS cost.
Maybe only for huge images (not on by default) and definitely *not* animating it.
Either way, @cramforce has a nice No-JS blur-up demo in his blog post https://www.industrialempathy.com/posts/image-optimizations/#blurry-placeholder
Maybe only for huge images (not on by default) and definitely *not* animating it.
Either way, @cramforce has a nice No-JS blur-up demo in his blog post https://www.industrialempathy.com/posts/image-optimizations/#blurry-placeholder
anyway ask me what I think about skeleton screens which are basically the same thing
and @patrickhulce was kind enough to share the heuristics here if you’d like to learn more about when a low-src can meet the conditions for LCP: https://twitter.com/patrickhulce/status/1352322993758871556
