using a 1.15 kb svg as home page image and still have a mobile LCP of 2,850 ms!?!?

[Mpiper]

So I used to have a jpg of my logo as the large image on my homepage with intro text overlaid on it. Then the intro products/collections, etc. load after the fold. The lcp was 3,500 ms. So I switched to a webp version. down to 3,200 ms.  Since it was a simple 2 color logo image, I just recreate dit in illustrator and saved it as an SVG file, got it from 100kb, to 47 kb, to 1.15kb!

But the LCP is still incredibly slow. and it looks like its due a large part to the cdn server???? see the images below.

Yes, I'm looking at the mobile version! That is where supposedly 65% of visitors are viewing stores. for me, its closer to 80% right now.  Desktop score for LCP is 1,310 ms.

Why is mobile so slow?????

[tim · Accepted solution]

First of all, LightHouse tools in my browser give me much better results for your site.
And what actually matter for your SE ratings are Web Vitals collected from visitors sessions, not a Pagespeed result.

Are you getting bad WV message in search console, or trying to prevent it?
If latter, I'd wait to get real results in search console before doing any further optimization.

You can improve your score a bit if you implement image preload as per https://web.dev/articles/preload-responsive-images and https://performance.shopify.com/blogs/blog/introduction-to-resource-hints; pay attention to the "preload" option of the image_tag because "You should always use these over plain HTML as Shopify is going to send them even before the main document response").

(Using responsive image with srcset for SVG image is a nonsence, but if you do not want to change the code in that section, you can leave it as is). 

Or, you can inline the SVG image, but again this will require editing theme code or using a custom liquid section...

There is a LCP-fixing trick, you can learn here https://www.devisedlabs.com/blog/largest-contentful-paint-lcp-hack -- seem to be still effective, but it's a trick.

The real reason is that there is a lot of JS code loaded both by you/theme and Shopify (Google tag, Facebook pixel, JS code for apps) and this code is being loaded/processed concurrently with your image...

[Mpiper]

That makes sense. I'm doing a soft opening. Ads to a few hundred people on facebook ads. Try to see how many follow the link in the ad, and where they go, do they subscribe, do they purchase, etc.  And so far, with a very small sample, most land on the page and leave within 30 seconds. So I'm trying to fix anything that might be causing them to bounce.  Could be content on the landing page. Could be a bad first experience, etc. So I'm trying to get everything as close to ideal and steamlined so that when I start spending real money on advertising, I'm not throwing money away because the store itself doesn't work well enough to get sales from cold/ad traffic.

I know all the mechanics work. orders do process and go to my supplier and shipments go out. so now its getting the "welcome mat" polished both in the content and the functionality.

If your numbers look good, I'll take that as a solution and work on the copy on the page, etc.  Thank you!