[Mirko]

Hi there,

I am just investigating how to optimise LCP element from Pagespeed further and found one potential improvement to make.

Currently in the responsive mobile version of the theme, the logo image can be exchanged to a smaller one and it works fine. However the header background image is also loaded in full size on mobile devices and then scaled down, causing longer loading times rather than just picking a smaller version of the file.

Is there some code changes or additional CSS that would fix this?

It seems the background image is set here:

<div class=”entry-header” data-bg-type=”image” style=”background-image:url(HERE is the large image file only);” data-video-mp4=”” data-video-webm=””>

Thx,
Mirko

[Mirko]

P.S. I managed to find a way to not show the header at all just on mobile with this CSS snippet and my LCP values improved quite significantly:
<p class=”p1″ style=”margin: 0px; font-stretch: normal; font-size: 17px; line-height: normal; caret-color: #000000; color: #000000; -webkit-text-size-adjust: auto;”><span class=”s1″>@media screen and (max-width: 767px) {</span></p>
<p class=”p1″ style=”margin: 0px; font-stretch: normal; font-size: 17px; line-height: normal; caret-color: #000000; color: #000000; -webkit-text-size-adjust: auto;”><span class=”s1″> .entry-header { display: none; }</span></p>
<p class=”p1″ style=”margin: 0px; font-stretch: normal; font-size: 17px; line-height: normal; caret-color: #000000; color: #000000; -webkit-text-size-adjust: auto;”><span class=”s1″>}</span></p>
I am just trying to find a way to either exchange the background header image now to the correct mobile size or alternatively do not show the background header image at all but still the social icons, main logo etc just on white background.

If I could get help with that, you would be my heros 🙂

Thx,
Mirko

[vako]

Hi Mirko,

 

I will redirect this topic to the developer’s board and they will contact you.

 

Kind Regards

[Duke]

Hi Mirko,

Unfortunately, it’s not possible because an image is added via CSS. If hiding header image improves your score, then you can add this snippet instead of yours:

@media screen and (max-width: 767px) {.entry-header { background: #fff; }}

 

Kind Regards

[Author]

Posts