[Resolved] Unable to reduce LCP/FCP for mobile homepage

[Robert]

Hi! First, the theme has been a godsend: nearly every Page Speed metric across desktop and mobile have skyrocketed after installing GP and adjusting things across the board.

URL: https://travelbagexperts.com

However, for whatever reason, even when I reduce the quality of the hero image used on the homepage (that appears above the fold), I can’t seem to reduce the mobile FCP and LCP enough to effectively “pass.”

Is there anything else I can do theme-wise to improve the speed of the page, particularly on those fronts? Let me know if there’s any other info I can provide.

Thanks in advance!

[Adrien]

To do that you make two different background images. One for Desktop 1920px width and the same for mobile 768px width.
Then you go on your container block and go to advanced background image. There you create the two images and assign one to show on Desktop and tablet and the other on Mobile.

Also make sure all images above the fold are not Lazy loaded. This is important.

Thanks GP 😉

[Ying]

Hi Robert,

It seems you are using some kind of lazyloading options for mobile, the background image didn’t load on my phone.

It might also be an issue for performance.

Can you try disabling the lazyload option for us to inspect?

And the Advanced background option in GB Pro allows you to set different bg images for different devices.

Hi Adrien,

Thanks for helping 🙂

[Robert]

Thanks for checking Ying!

I think that at the very moment you were checking, I had enabled “inline” loading of the hero image, which causes it to disappear (and consequently, the score/speed to shoot up a bit haha).

How do I get to you advanced background images in GB Pro? I was clicking around and quickly searching but unable to find a way to enable that option.

[Robert]

Appreciate the help Adrian!

I exported those two versions of the photo and am now pinging Ying to see if I can find the advanced background image menu option. That very much sounds like it could solve the issue for me on mobile.

[Adrien]

Fantastic. I’ve learned this from Kyle in this video that I recommend you watch:

[Ying]

The video is a good find 🙂

The bg image on mobile is now showing correctly, the image size is 311k which is pretty big for mobile.

Do you have GB pro installed? If so, can you try adding a smaller image for mobile and crop it so it fits the mobile screen?

Once it’s done, we can have another look at the performance!

Let me know!

[Robert]

I just realized… GB Pro is another charge after Generate Premium? I didn’t think there’d be another expense/unlock once premium had been unlocked, especially since there really isn’t any mention of it anywhere. Didn’t even see it on the page when purchasing either.

This is all supposition, but I’m assuming this specific feature isn’t included in the premium version of GP? I guess at this point I’m just trying to green light my CWVs with GP, which I just bought, but it seems like that may not be possible?

What might you suggest within the constraints of regular GB? Downgrading the photo? Appreciate all the help Ying =)

[Ying]

GB Pro is another charge after Generate Premium?

That’s correct.

GB is an independent product, it can be used in any theme, not just GP.

For more info about this feature: https://docs.generateblocks.com/article/advanced-backgrounds/

A workaround here is to use custom CSS:

@media (max-width:767px) {
.gb-container-9842a29d:before {
    background-image: url(your-new-image-url);
}
}

Just replace your-new-image-url with the image URL that you prepared for mobile.

[Robert]

Ok awesome thanks, Ying. Two last (I think) questions:

Does that CSS need the image URL for the 768px image? (Which I’d upload separately to the media library) Or is it simply telling the original 2048px image to not go any larger than 768px in mobile?

Oh, and just wanted to make sure: 767px is the correct figure there, right? I’m adding this all to the “additional CSS” setting in WordPress. That’s… definitely more than two questions haha

[Ying]

Does that CSS need the image URL for the 768px image?

yes, it requires the new image URL for 768px image.

Oh, and just wanted to make sure: 767px is the correct figure there, right?

Well it’s hard to define 🙂 sometimes people use 768px, sometimes 767px.

I think in GP it’s 768px, but in GB it’s 767px.

It really depends on you.

For example, a normal iPad width is 768px, so when the CSS is using 768px, iPad will load the CSS too just like a mobile device.

[Manuel]

I see Event Listener(s) ezoic. Have you tried disabling this?

[Ying]

I see Event Listener(s) ezoic. Have you tried disabling this?

I don’t have your login, how would I do it lol?

It’s not something that GP can disable or enable.

[Robert]

Haha that wasn’t me (OP), but someone else asking about turning off Ezoic.

Fwiw, I’ve been trying Ezoic now for a couple of weeks and am guessing that I might have slightly better results going with WP Rocket and some other CDN service, etc. But I figured I’d give Ezoic a fair shake before abandoning it. Speed seems a bit better now on the homepage with your suggestion, Ying, so thanks!

[Ying]

Oh..my god…Robert, I just assume it was you lol, sorry about that!

Speed seems a bit better now on the homepage with your suggestion, Ying, so thanks!

Glad to hear that 🙂
I’ll have another look at your site on mobile, and will let you know if I have any idea that might help the performance!

[Author]

Posts