Optimising Largest Contentful Paint
csswizardry.com
csswizardry.com
Eventually performance of my site got to be pretty good. If nothing else going through the procedures to make improvements has been quite educational. With all the discussion around energy costs due to web inefficiency doing something to reduce wasteful cycles feels like a small but definite contribution.
Interestingly I used Lighthouse to measure many websites other than my own. I mean, why not see what the "big guys" are doing? Incredibly disappointing to say the least. Almost all sites have been poor performers, some scoring 25 or less on the performance section of Lighthouse. I won't name names but really it's shameful to preach efficiency and then perform so badly.
The article makes some good points and anyway LCP is the biggest single factor (weighted at 30%) of the total performance score, so it makes a lot of sense to focus on reducing LCP first.
It seems to be a very specific thing for very specific sites, to squeeze out a small performance increase, which could be cancelled out by any number of factors anyway.
For instance, the /only/ thing I did for our work site was to strip down the JS/CSS to what is actually needed, compress the images (and serve webp as well) ... and that was it. The same as I've been doing for 20 years. And according to https://pagespeed.web.dev it gets a 98% of desktop and 92% on mobile.
The one I /am/ down for, is not having the site load 10mb+ of assets to just look at a couple of images and text! (I'm looking at you, Wix and others) - that is just insane!
If the site hasn't loaded any content I can read after 5 seconds or so, I'm gonna hit refresh and give it another go, 5 more seconds and I'll close it out and either come back later or just move on - but maybe thats because I remember 28kbps internet, or maybe Im just mellowing with age :)
I guess there must be a use for all these things, but I personally can't see where the reward is > than effort
They will be particularly aggrieved that the Google are saying their FCP and CLS are in need of serious attention, despite not having the first clue what this actually means.
Joking aside, layout shift can be a tad annoying.
Yes. It has a measurable, statistically significant impact on sales. It's reported by users. It's even an issue for you because you say "If the site hasn't loaded any content I can read after 5 seconds or so..." I doubt you're measuring that. You're using a gut feel, finger in the air measure of 5 seconds. A "This site feels slow!" judgement. For a lot of people their threshold is 3s rather than 5s. That's compounded if the site is something you'd load several times a day.
the /only/ thing I did for our work site was to strip down the JS/CSS to what is actually needed, compress the images (and serve webp as well) ... and that was it.
That's a lot more than many devs would do if CWV or Lighthouse wasn't giving them a number to judge their effort by. It's all you really need to do for most sites. HTML and CSS are fast. It's only once you move into web apps and super-highend complex brochure sites that the advice from sites like csswizardry starts to be useful.
Most people would get a site to load faster just be stripping out the things they don't need. If they aren't doing that but they are following the advice in an article like this one, and it makes their site faster anyway, that's still a win for the users.
- Faster loading times
- Less shifting of the layout while the website is loading
- Better behavior for users with slow connections
Most unpleasantly slow sites I encounter aren’t slow because they’re 10 MiB or whatever. They’re slow because it takes multiple seconds before a connection is even established and/or the bytes roll in. It’s 2022. Unless hosting on solar power, that’s not acceptable.
I think the web vitals stuff is awesome anyway, if only in bringing attention to the topic. I have some (junior-y) colleagues who simply do not care at all. Hundreds of requests, images popping in late, fonts being requested dozens of times, layout shifts. They need to learn that this is important. Also, the clients. They need to learn this is important, too.
That aside, the article sounds suspiciously like management techniques that define "important" metrics and then optimize for those metrics (while neglecting everything else).