This topic contains 3 replies, has 3 voices, and was last updated by  Duke 1 month, 1 week ago.

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #61830

    Mirko
    Participant
    Premium Member

    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

    #61831

    Mirko
    Participant
    Premium Member

    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

    • This reply was modified 1 month, 1 week ago by  Duke.
    #61834

    vako
    Keymaster
    WP Royal Team

    Hi Mirko,

     

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

     

    Kind Regards

    #61855

    Duke
    Keymaster
    WP Royal Team

    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

    • This reply was modified 1 month, 1 week ago by  Duke.
Viewing 4 posts - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.