I work on improving the LCP score of my site on mobile (based on PageSpeed Insights) and I have established that the Hero background image makes the largest contribution to the delay.
Site Setup:
• WordPress with elementor
• Hero section used .wiper-slide-bg with a CSS background
• Current Hero image file: /wp-content/uploads/2021/12/banner-min.png
• PageSpeed Insights Report: htts
Problem: When I try to edit the elementor page, I can’t find this hero image anywhere in the widgets or columns. I have checked all sections, went into advanced → background and still don’t see it mentioned. It seems that the image is applied outside the normal elementor user interface – probably via the background settings or theme code from Swiper. What I have done so far:
- Installed converter for media -BulkopTimalization enabled, Webp output checked, Imagick Conversion Method Active, PNG conversion enabled.
- Discovered that the webp file exists in: /wp-content/uploads-webpc/uploads/2021/12/banner-min.png.webp
- Plan to: O ignoring .Swiper-Slide-BG CSS to use the webp version Add in header.php o Exclude the hero image from LiteSpeed Cache Lazy Load
- When pre -loading other responsive Bannergrottes:
Banner-1024×427.png
Banner-Min-150×150.png
Banner-Min-300×125.png
Banner-Min-700×600.png
Banner-Min-768×320.png
My questions:
• Is it best practice to point CSS background images directly to the plug-in / uploads-WeBPC / Path, or do I have to move the .WeBP file to / uploads / for long-term stability?
• Since I cannot find the Hero image in elementor, what is the best way to update it, so that the webp version is served without breaking the layout?
• Do I have to load all image sizes in advance for the responsive design or only the one that is most likely to be shown above the fold?
• A better approach to ensure that elementor/swiper background images are immediately loaded into Webp for optimum LCP?
Thank you in advance for your input!
#Advice #needed #optimizing #background #image #heroes #LCP #ElementorSwiper #WordPress