Background Media in Hero Section Slows Mobile Performance – Best Practices?

Design help Custom code
1

Hey all,

I’ve added a background animation (approx. 5MB) in my hero section. It plays automatically on desktop and is intentionally not rendered on mobile (hidden via user-agent detection in a small JS snippet).

Even though it doesn’t load visually on mobile, I’m still seeing bad LCP and TTI scores in mobile performance tests (PageSpeed Insights).

Here’s what I’ve tried so far:

  • Used preload="none" and loading="lazy" attributes.
  • Wrapped the asset in a conditional block that only runs on desktop devices.
  • Optimized the preview image significantly (under 100KB).

Questions:

  1. Could the media or its preview image still impact mobile performance despite not being rendered?
  2. Are there native Webflow techniques or CMS-safe tricks to load background animation only for larger viewports?
  3. General tips for optimizing above-the-fold background animations for Core Web Vitals?

Would love to hear how others approach this. Happy to share a read-only link if needed. Thanks in advance!

2

Sharing a link to both your published URL and a read-only to your project is really a requirement. Without it responses will be limited.

I personally choose to use JavaScript to handle the loading of larger assets. This usually keeps the browser from loading the source and downloading an element, even when hidden.

3

Hello @Rakesh_chougale , First, I would like you to share the website url for further analysis of site performance. As you have already applied lazy loading and preloading none, but still the issue is not resolved as there might be you have not applied on the elements effectively.

Below are some more advanced practices you can follow to make the change -

Lazy Loading the Animation on Scroll

As you wanted, your animated background image should be loaded first. I recommend that you either try to compress it or apply lazy loading to fix the LCP issues of your site. Here’s a basic example of how you could implement this:

window.addEventListener('scroll', function() {
  const heroSection = document.querySelector('.hero');
  const rect = heroSection.getBoundingClientRect();
  if (rect.top <= window.innerHeight) {
    document.querySelector('.hero-background').classList.add('active');
  }
});

Background Animation and Preload Impact

Even though you’re using preload=“none” and loading=“lazy”, some browsers may still fetch the asset as part of the initial page load if it’s referenced directly or if it’s preloaded under certain conditions (e.g., CSS background-image or hidden elements). The preview image could also be included in the initial asset fetch depending on the resource type.

So I recommend you try the conditional visibility settings in combination with custom scripts to ensure that the asset isn’t fetched at all on mobile, rather than just hidden.

For example -

// Wait for the document to load before running the script
document.addEventListener("DOMContentLoaded", function() {
  const heroBackground = document.querySelector('.hero-background');
  const heroSection = document.querySelector('.hero-section');

  // Function to check viewport width and show/hide elements accordingly
  function checkViewportSize() {
    if (window.innerWidth >= 1024) { // Desktop view
      heroBackground.style.display = 'block'; 
    } else { // Mobile view
      heroBackground.style.display = 'none'; 
    }
  }

  checkViewportSize();

  // Add an event listener to check when the window is resized
  window.addEventListener('resize', checkViewportSize);
});

Alternatively, if you do not want to go deep down into developer things, I recommend you try website speedy - a webflow app that performs the optimization automatically by handling JS, CSS on its own. It comes with a 14-day free trial.

( Disclaimer: We are the developers of this app and are happy to assist you with any problem that may arise.)