My page is slow in loading (shows a white bottom while scrolling down) on the team page with many pictures. Other pages in the project seem to be working without an issue, even though they use the same background image setup. I figured the issue might be in the picture size, but I’ve already optimized them using TinyPNG (so they’re downsized and compressed).
Webflow site: About DnA
Preview link: Webflow - DnA Ventures
Would appreciate any advice or best practices to prevent this white flash.
Background images are fetched eagerly.
When you set a background-image in CSS (including Webflow’s Style panel), the browser discovers that URL while parsing styles and requests it immediately for any element that matches the rule—even if it’s far below the fold. There’s no native loading=“lazy” for CSS backgrounds, so the browser can’t defer them.
They don’t get responsive variants.
Webflow’s Responsive Images feature (multiple sizes, srcset) only applies to the Image element, not backgrounds. A single large background asset is shipped to every screen size, which means more bytes than necessary on mobile.
They consume memory & paint time.
A grid of team cards with background-size: cover forces the browser to decode many large images and keep them in memory. Even if they’re offscreen, they’re decoded once loaded; then you pay again when they finally paint on scroll.
Preload scanner makes it worse.
Modern browsers scan HTML/CSS early and queue asset requests with relatively high priority, so those offscreen backgrounds compete with critical, above-the-fold resources.
Hi @AnnaS
Hey there! 
I had a look at your site performance on PageSpeed Insights https://pagespeed.web.dev/ (mobile score ~57, desktop ~73). The desktop performance looks decent, but on mobile, the First Contentful Paint and Largest Contentful Paint are taking 8–10 seconds, which explains the white flash you’re noticing on the team page. Here are some targeted fixes that should help:
Problem: All team photos load at the same time, even if they’re not visible yet. On mobile, this delays rendering and causes white gaps while scrolling.
Solution: In Webflow, select each image and turn on Lazy Load in the settings panel. This way, images below the fold load only when a user scrolls to them.
This reduces the initial load time and improves your First Contentful Paint score.
Problem: By default, when images load, browsers display white space, which looks like flashing or a blank bottom.
Solution: Add a solid background color or blurred placeholder to the section/container that holds the team images. Pick a color similar to your image theme (e.g., light gray or brand color).
This makes the transition smoother and hides the flash effect.
Problem: JPG and PNG files, even compressed, remain heavier than modern formats. That’s why your Largest Contentful Paint (LCP) is ~10s on mobile.
Solution: Convert your images to WebP or AVIF (you can use tools like Squoosh or Image Optimizer Pro). These formats are 30–60% smaller while keeping quality sharp.
Lighter files mean faster rendering and smoother scrolling, especially on slower mobile connections.
Problem: If dozens of team pictures load in one block, the browser struggles to process them at once, which hurts scroll performance.
Solution: Break the gallery into smaller sections or use CMS pagination/slider to load fewer images initially. You can also lazy-load extra sets of team members when someone clicks “Load More.”
This reduces memory strain on the browser and improves smooth scrolling without flashes.
If you don’t want to manually tweak each of these settings, an easier option is to try Website Speedy (a Webflow app we built) — it automatically handles performance tuning and image delivery for you.
(Disclaimer: We developed this tool and are happy to answer any questions you may have about it!)