Lazy Loading, explained properly.
What is lazy loading?
Lazy loading is a technique that delays loading certain elements, usually images, videos or iframes, until the user scrolls near them. There is little point loading everything upfront if a visitor never reaches halfway down the page. By not loading every asset at once, lazy loading improves page speed, reduces data use and gives your site a smoother, faster feel, especially on mobile.
Why lazy loading matters for SEO
Slow sites sink in search results. Google has confirmed that page speed is a ranking factor, and lazy loading is a powerful way to speed up your site, particularly image-heavy or ecommerce pages. Combined with other Core Web Vitals improvements, it can significantly cut your Largest Contentful Paint (LCP) time, one of Google's key user-experience metrics, documented on web.dev. It is worth including as part of website migrations, WordPress SEO and technical SEO projects, because it is one of the simplest ways to get a serious speed boost.
How lazy loading works
When lazy loading is enabled, images, videos or iframes are not fetched until they enter or get close to the user's viewport (the visible part of the page). Your site loads fewer files at once, and the browser renders visible content faster. Critical hero imagery should stay above the fold and load eagerly. There are two main ways to implement it: 1. **Native lazy loading.** Supported by most modern browsers. Just add `loading="lazy"` to your `<img>` or `<iframe>` tags. It is easy, fast and Google-approved. 2. **JavaScript-based lazy loading.** For older browsers or more advanced control, such as animations, thresholds or preloaders, JavaScript libraries like lazysizes can handle the logic. Most modern page builders, including Bricks Builder, have lazy loading built in, but it is worth checking how it is configured.
When should you use lazy loading?
It works brilliantly on: - **Product galleries,** especially on Shopify SEO and WooCommerce SEO sites. - **Blog articles** with multiple images or embedded media. - **Long-form landing pages** or one-pagers with lots of visuals. - **Background images and videos** not visible above the fold. In short, if it is not needed immediately, lazy load it.
Lazy loading best practices
### Do - Add `loading="lazy"` to images below the fold. - Combine lazy loading with proper image optimisation. - Use fallbacks for older browsers if using JavaScript methods. - Test using Lighthouse or PageSpeed Insights. ### Do not - Lazy load everything; images above the fold should load normally. - Break accessibility; lazy images still need alt text. - Mishandle `<noscript>` fallbacks, since Googlebot still needs to see your images.
How lazy loading affects SEO crawlers
Googlebot processes JavaScript well these days, and native lazy loading is fully supported. Even so, use `<noscript>` fallbacks for JavaScript-lazy images, make sure lazy-loaded images appear in your XML sitemap or are discoverable through internal links, and test with the Mobile-Friendly Test or the URL Inspection tool in Google Search Console.
A real example
One ecommerce client had over 200 product thumbnails on a single category page. Before lazy loading, the page took over 6 seconds to load. After native lazy loading and WebP compression, the LCP dropped to 1.8 seconds and bounce rate fell by 22%. That is what happens when you serve people what they need, when they need it, and nothing more.
Lazy Loading: common questions.
How do I enable lazy loading?
On most modern sites, browser-native lazy loading is enabled by default. WordPress automatically adds loading="lazy" to images outside the viewport since version 5.5. For images you control directly, add the attribute manually, for example <img src="..." loading="lazy" alt="...">.
Should hero images be lazy loaded?
No. Hero images and anything above the fold should load eagerly, using loading="eager" or omitting the loading attribute. Lazy loading the LCP image causes Largest Contentful Paint to lag, which damages Core Web Vitals. The biggest LCP issue we see in audits is well-meaning lazy loading on hero images.
Does lazy loading affect SEO?
Indirectly, and positively. Faster page loads improve Core Web Vitals (LCP, INP), which Google uses as ranking signals, and pages with lazy loading load faster, especially on mobile. The exception is lazy loading the hero image, which backfires.
Are there alternatives to lazy loading?
Three. Reducing total image weight with smaller files and fewer images. Conditional loading, where certain images load only when relevant. And loading critical resources via preload directives so the browser fetches them immediately. Lazy loading is one tool among several, and combining them produces the best performance.
“I've had the pleasure of working with Chris on several SEO projects for my websites in the health field. He was definitely been able to demystify things so that I felt able to make decisions with him and feel confident they were the right ones. For a non-techie, that is worth gold! I look forward to working with Chris again and warmly recommend him to anyone who - like me - is unsure about all things SEO.”
“I was recommended by my branding partner to use Chris and his team last year. I can’t recommend them highly enough. They are very responsive , easy to communicate with and great at translating techy stuff when needed. They are now an essential part of my business model”
“We've been working closely with Chris, Hannah and the team for over 12 months now. As a small company with ambitious growth plans, it was incredibly important that we made the right choice on who to trust with our SEO. 18 months later, we're totally thrilled with our experience so far and our growing online presence within our market. We'd happily recommend BTT and their services to other SMEs. Drop them an enquiry!”
You work directly with the senior people who do the work, a small Bristol team you will actually get to know, not a call centre or an account manager relaying messages.
Meet the team →
