Hero Image Without Background Image In Spectra Free Version

  • Resolved nootkan

    (@nootkan)


    7 months, 2 weeks ago

    I have created a hero image on my home page but the lcp in core web vitals is very high even after optimizing the image and converting it to webp.

    My research tells me that hero images shouldn’t ever be a background image, but be a normal image.

    Background images are bad for Core Web Vitals. Remember that! There is no good reason to ever use background images.

    Background images are loaded at a lower priority
    Background images might cause Core Web Vitals issues with most lazy loading libraries.

    So I am wondering how to do this in the free version of Spectra without using a background image and so far I have been unable to figure it out. Tried using an image block but it won’t cover the whole page like the background image does for some reason.

    It seems I can’t even change “loading lazy” to “loading eager” or at least I can’t seem to figure it out.

    Any help is much appreciated.

    • This topic was modified 7 months, 2 weeks ago by nootkan.
    • This topic was modified 7 months, 2 weeks ago by nootkan.
    • This topic was modified 7 months, 2 weeks ago by nootkan.

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Support mohsinbsf

    (@mohsinbsf)

    Hi @nootkan,

    Thanks for getting in touch with us.

    I have recorded a video and demonstrated all the steps for the hero image using Spectra: https://d.pr/v/8Pp8no

    Disable lazy loading option is also available in the Spectra image block: https://d.pr/i/mJmTfj

    Please check and let me know if you still need any assistance.

    Have a nice day!

    Plugin Support mohsinbsf

    (@mohsinbsf)

    Hi?@nootkan,

    It’s been long since we heard from you. I am going ahead to mark this as resolved.

    Please feel free to open a new thread in case of any other queries.

    Have a nice day!

    Thread Starter nootkan

    (@nootkan)

    Sorry guys, been so busy I didn’t have a chance to try your suggestion until now. I didn’t notice a difference in my page speed but did notice that my transparent header feature disappeared in mobile view when doing it your way. I put it back to the background image as I wanted the logo and header to be overlayed on image in desktop and mobile view. I will keep researching to see if I can have the best of both worlds when using the transparent header without a background but just an image in the container. If not, I guess I’ll have to figure out how everyone else is doing it as I see some hero images working just the way I would like them to on other websites and getting high page scores.

    Appreciate the support and hard work you guys put into your products.

    Plugin Support mohsinbsf

    (@mohsinbsf)

    Hi @nootkan.

    Transparent header issue is not appearing on my end, I request you open a support ticket from here:https://wpspectra.com/support/ so that our support dev can investigate the issue on your end and assist you.

    Have a nice day!

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Hero Image Without Background Image In Spectra Free Version’ is closed to new replies.