Ali Usama

Hi @yankees101,

This issue almost always comes down to Largest Contentful Paint (LCP) being delayed on mobile because of how Kadence Blocks and LiteSpeed Cache interact with above-the-fold images.

Here are the 3 checks to fix it:

Fix LiteSpeed Cache Lazy-Loading the Hero Image

By default, LiteSpeed Cache applies lazy loading or placeholder swapping that delays mobile rendering:

Go to LiteSpeed Cache → Page Optimization → Media Settings and under Lazy Load Image Excludes, enter the filename of your above-the-fold image (e.g., hero-banner.webp), then ensure Responsive Placeholder or Lazy Load is not overriding the first 1–2 viewport images.

Go to LiteSpeed Cache → Cache → Cache and set Cache Mobile to ON. (If this is OFF, mobile devices serve desktop-cached viewport rules, which delays mobile image loading).

Check the Kadence Block Settings

If you are using the Kadence Advanced Image Block, select the block in the editor. In the right-hand settings, enable Disable Lazy Load (or Prevent Lazy Load), set Fetch Priority to High (fetchpriority=”high”) and avoid the Hide on Mobile trap.

If you make two separate blocks for desktop and mobile with Kadence visibility settings, you’ll run into trouble. Even though CSS display none hides one of them, mobile phones still download both pictures. That ruins your mobile LCP score. Stick to one responsive block instead.

Are you using a Row/Section Background Image?

If your hero image is set as a background image on a Kadence Row Layout, mobile browsers cannot discover it early via the preloader, and LiteSpeed won’t optimize it properly. To fix, replace the CSS background with an actual Kadence Advanced Image block ( tag), or add a manual preload tag to your header for the image URL. Once done, Purge All in LiteSpeed Cache and test your URL in PageSpeed Insights for mobile.