𝗚𝗼𝗼𝗴𝗹𝗲'𝘀 𝗖𝗼𝗿𝗲 𝗪𝗲𝗯 𝗩𝗶𝘁𝗮𝗹𝘀 ... 𝗪𝗧𝗙!
Please, take a moment to look at the %'s as G see's their value/influence.
Notice that CLS (jump) is only 5%.
Where as LCP is 25%.
googlechrome.github.io/lighthouse/sco…
via
@dsottimano
#SEO #CWV
READ MORE >>>
Please, take a moment to look at the %'s as G see's their value/influence.
Notice that CLS (jump) is only 5%.
Where as LCP is 25%.
googlechrome.github.io/lighthouse/sco…
via
@dsottimano
#SEO #CWV
READ MORE >>>
LCP (Largest Contentful Paint) includes Background Images.
That means if your web design includes a GB Img (not an image for content!), then it impacts the LCP, and thus your CWV score.
Worse - the potential negative of that is far greater than Cumulative Layout Shift (CLS)
That means if your web design includes a GB Img (not an image for content!), then it impacts the LCP, and thus your CWV score.
Worse - the potential negative of that is far greater than Cumulative Layout Shift (CLS)
People wonder why I give G a hard time, and why I doubt their judgement in regards to metrics and figures.
THIS is a shining example of Why!
Why the hell should the usage of a background image negatively impact your performance score?
THIS is a shining example of Why!
Why the hell should the usage of a background image negatively impact your performance score?
More importantly, HOW is that worse than things jumping around on the page?
Surely text/buttons/links moving and jostling is a poorer experience than when a background image renders?
What about interruptions and content-blockers?
Push requests, modals etc.?
(coming soon?)
Surely text/buttons/links moving and jostling is a poorer experience than when a background image renders?
What about interruptions and content-blockers?
Push requests, modals etc.?
(coming soon?)
Again, I would have thought Those were more hurtful to a UX than a flaming background image!!!
So ... what options do you have?
Well, the first is to cut your background image.
Switch to a colour/gradient etc.
Alternatively, use Preload and compress the shit out of that image!
So ... what options do you have?
Well, the first is to cut your background image.
Switch to a colour/gradient etc.
Alternatively, use Preload and compress the shit out of that image!
Unfortunately, due to the current weighting - most optimisations are unlikely to balance as they really should (good job G!).
So, we may need to cheat!
So, we may need to cheat!
Use a a single colour Gif bg image (same/larger dimensions than your actual BG Img) - should come in at less than 2Kb.
Then use a little JS to change the BG img on window load to change to the one you want.
TaDa!
Your BG Img now has only a tiny footprint.
Then use a little JS to change the BG img on window load to change to the one you want.
TaDa!
Your BG Img now has only a tiny footprint.
Doesn't fix G's stupidity, but will help reduce the impact that your big, pretty background image has on "user experience" ;)
Another option to consider is more technical, but look at connection type data, and serve different images based on visitors network/bandwidth type etc.
A major PITA, but best for users.
A major PITA, but best for users.
• • •
Missing some Tweet in this thread? You can try to
force a refresh
