Improve Largest Contentful Paint (LCP)

[preschian]

LCP: https://web.dev/lcp/

how to check LCP on chrome devtools:

1. switch to Slow 3G network under Network tabs in chrome devtools
2. click reload button under Performance tabs
3. hover LCP in timings section to see the content

this is our LCP score on the homepage in the previous 21 days

[exezbcz]

thought it was going to be a problem, the svgs are quite large. Is there anything I can change?

[preschian]

thought it was going to be a problem, the svgs are quite large. Is there anything I can change?

hhmm 🤔 I guess nothing wrong with the svgs stuff, maybe we can tackle this from code. let's ask the other first

maybe it's possible with just CSS. unfortunately, I'm not really good with CSS
cc @roiLeo @Jarsen136 @prachi00 is it possible to use CSS for that gradient stuff?

[exezbcz]

thought it was going to be a problem, the svgs are quite large. Is there anything I can change?

hhmm 🤔 I guess nothing wrong with the svgs stuff, maybe we can tackle this from code. let's ask the other first

maybe it's possible with just CSS. unfortunately, I'm not really good with CSS cc @roiLeo @Jarsen136 @prachi00 is it possible to use CSS for that gradient stuff?

i think that would be the best approach, but it would have to match pretty closely :D svgs are generally not meant to be exported with effects on top. The effects should be applied in css afterwards

[exezbcz]

in the end its just this:

with applied blur on top.
filter: blur(200px);

[roiLeo]

thought it was going to be a problem, the svgs are quite large. Is there anything I can change?

we can try to:

• reduce svg size or change file format (webp?)
• async loading with nuxt-img

is it possible to use CSS for that gradient stuff?

not sure it's the best option

[Jarsen136]

thought it was going to be a problem, the svgs are quite large. Is there anything I can change?

hhmm 🤔 I guess nothing wrong with the svgs stuff, maybe we can tackle this from code. let's ask the other first

maybe it's possible with just CSS. unfortunately, I'm not really good with CSS cc @roiLeo @Jarsen136 @prachi00 is it possible to use CSS for that gradient stuff?

IMO, we could try to inline the svg file to the js/html, to avoid fetch too many pic while open landing page. They cost a lot time at the network fetching.

is it possible to use CSS for that gradient stuff?

It may be not that easy to match the design with css.

[Jarsen136]

👋
I would take it a try.

[kodabot]

ASSIGNED - @Jarsen136 🔒 LOCKED -> Saturday, January 21st 2023, 04:26:52 UTC -> 36 hours

[exezbcz]

👋 I would take it a try.

nice, ping me if anything

[preschian]

IMO, we could try to inline the svg file to the js/html

oohh, yes, this may help to improve that 🚀🚀🚀

[kodabot]

ASSIGNMENT EXPIRED - @Jarsen136 has been unassigned.

[Jarsen136]

thought it was going to be a problem, the svgs are quite large. Is there anything I can change?

hhmm 🤔 I guess nothing wrong with the svgs stuff, maybe we can tackle this from code. let's ask the other first
maybe it's possible with just CSS. unfortunately, I'm not really good with CSS cc @roiLeo @Jarsen136 @prachi00 is it possible to use CSS for that gradient stuff?

IMO, we could try to inline the svg file to the js/html, to avoid fetch too many pic while open landing page. They cost a lot time at the network fetching.

I would close this PR #4780 (inline svg file) for two reasons:

1. Though inlining svg would reduce some image network request, it also increase the size of js bundle.
2. We have ServiceWorker which could cache the static file/image, so these svg images request have little impact if hit the cache.

[exezbcz]

in the end its just this: with applied blur on top. filter: blur(200px);

and what about this? @Jarsen136, the only pain would be only with positioning

[Jarsen136]

with applied blur on top. filter: blur(200px);

and what about this? @Jarsen136, the only pain would be only with positioning

In this way, we still need to request some smaller svg and make some transforms by CSS. I guess it would not make too much difference in the LCP time, because there is servicework to cache the file. Maybe someone would have other approaches to improve performerce from code.

[exezbcz]

with applied blur on top. filter: blur(200px);
and what about this? @Jarsen136, the only pain would be only with positioning

In this way, we still need to request some smaller svg and make some transforms by CSS. I guess it would not make too much difference in the LCP time, because there is servicework to cache the file. Maybe someone would have other approaches to improve performerce from code.

ah okay, dont understand this tbh :D