Performance Reference
Lazy loading: a bytes-saved trade with one important exception
You switched lazy loading on across the site and your largest contentful paint got worse.
The short answer
Lazy loading defers the download of images, iframes and embeds until the visitor scrolls near them, so the opening view is not billed for content nobody has looked at yet.
It became a browser feature rather than a plugin trick with the loading attribute, which is why it is now essentially free to adopt. The one thing it must never be applied to is the largest element in the opening viewport, because deferring that damages exactly the metric the technique exists to improve.
By the HostingFast team · Reviewed 15 August 2026
0
Hand-waving in this entry
100+
Entries wired to each other
Real
Numbers you can reproduce
Free
To read, no gate
The saving is real and easy to see. A page carrying forty images downloads the handful actually on screen, and the rest arrive just ahead of the scroll. On an image-heavy template that is a large reduction in the bytes and connections the first view has to pay for, and it costs one attribute per image.
The exception is the whole craft. Your LCP element — usually a hero image — should load eagerly and, ideally, with a high fetch priority so the browser knows to go and get it first. Most plugins offer a setting to exempt the first images on the page, and it is the first setting you should change after switching the feature on.
What it removes from the first request
Bytes and connections, both of which matter more on a phone than on your desk. Every image below the fold that does not load is a request the browser does not make, bandwidth the visitor does not spend, and contention the images that do matter no longer face.
It does not make any individual image faster. The photograph still weighs what it weighed. If your images are enormous, deferring them delays the cost rather than removing it, and the actual fix is sizing and format — WebP conversion is built in here at no extra cost.
The hero exception, in detail
Open the page in a browser's performance panel and identify which element is being counted as the largest contentful paint. Nine times out of ten it is the hero image or a banner. That element must not carry the lazy attribute, and giving it a high fetch priority tells the browser to start it before the scripts and stylesheets queued alongside it.
The failure mode is quiet and consistent: someone applies lazy loading site-wide, LCP goes up by a second, and nobody connects the two because the change looked like an optimisation.
Reserve the space or trade one metric for another
An image that arrives late without declared dimensions pushes the content beneath it down the page, and that is a layout shift counting against CLS. Every image should carry width and height attributes, or an equivalent aspect ratio in CSS, so the browser can hold the space before the file arrives.
This is the most common way a well-meaning speed change makes a page feel worse. The bytes went down, the LCP held, and the reader lost their place halfway through the first paragraph.
Proving it moved anything
Open the network panel, load the page cold without scrolling, and read the transferred total and the request count. Do it before and after with the same viewport, and you have your before-and-after in two numbers. Then check the LCP element separately, because that is the number that could have gone the wrong way.
Neighbouring entries: Core Web Vitals, Cache, CDN and Theme. Free migration brings an existing site across, normally within a day, so testing this on our platform is not a rebuild.
Optimisations with their failure modes attached
Most speed advice is correct in general and wrong in one specific case. These entries name that case, because the exception is where the damage usually happens.
WebP conversion is built in at no extra cost, and LiteSpeed caching sits in the server on every tier.
- The exception named for each technique
- Before-and-after in two numbers
- Metrics traded against each other
- Written by the engineers on support
Why HostingFast
Standard on every plan
Native, not a plugin trick
The loading attribute made this a browser feature, which is why it costs nothing to adopt.
The hero exception
The LCP element must load eagerly, ideally with a high fetch priority. Everything else is negotiable.
Bytes deferred, not removed
A huge image is still huge. Sizing and format are the actual fix, and WebP conversion is built in here.
Space reserved for CLS
Width and height on every image, or you trade a loading gain for a layout shift.
Proof in two numbers
Transferred total and request count on a cold load, same viewport, before and after.
The quiet failure named
Site-wide lazy loading pushing LCP up a second, with nobody connecting the two.
Quick Start
From order to online
- 1
Identify the LCP element first
The performance panel names it. Until you know which element is being measured, you cannot safely defer anything above the fold.
- 2
Exempt the opening viewport
Most plugins will skip the first few images for you. Set that before you look at any other option in the panel.
- 3
Measure cold, without scrolling
Transferred bytes and request count on a fresh load at a fixed viewport. Then re-check LCP, because that is the one that can regress.
Built In
Loaded onto every plan
- SSH, Git and Composer on the developer-focused plans
- NVMe SSD storage on every tier, not just the expensive ones
- Built-in WebP image optimisation at no extra cost
- Daily backups, with self-service restores you run from the panel
- Free SSL on every plan, renewed automatically before it can expire
- 99.9% uptime as the target, monitored around the clock
- Your existing site moved over by our engineers, free of charge
- Zero setup charges — there is no joining fee, ever
- Year one of your domain free when you order annually
- Money-back cover: 30 days on hosting plans, 7 on reseller
Frequently Asked
What people ask us most often
How do I find out which element is my LCP?
The performance panel in a browser's developer tools marks it directly, and lab tools name it in their diagnostics section. It is usually a hero image, sometimes a large heading or a background. Identify it before touching any deferral setting, because that single element is the one thing on the page that must never be deferred.
Should iframes and video embeds be deferred as well?
Yes, and they are often the bigger win. A single embedded player can pull in more script and more bytes than every image on the page combined. The same attribute applies to iframes, and a facade — a static thumbnail that loads the real player on click — is better still for anything below the fold.
Can deferring images make layout shift worse?
It can, and that is the trade people miss. An image arriving late without declared dimensions pushes everything under it down the page, which counts against CLS. Put width and height on every image, or set an aspect ratio in CSS, and the browser reserves the space before the file lands. Do that first and the deferral costs you nothing.
Does the platform do anything about image weight itself?
WebP conversion is built in at no extra cost, which cuts image bytes without you installing anything, and LiteSpeed caching sits in front of the whole delivery path. That handles format and delivery. Choosing sensible dimensions for the layout is still yours, and it remains the largest single lever on most image-heavy pages.
Keep reading
Cache
Five layers between database and visitor, and the header that says which one answered.
Core Web Vitals
Three field measurements at the 75th percentile, and which of them hosting can move.
How to Lazy Load Images and Video
The deferral set up properly, with the hero image exempted before you switch it on.
WooCommerce Hosting
Store-ready hosting with Redis caching and headroom reserved for checkout traffic.
Ecommerce Hosting
Quick, hardened foundations for online stores on any platform you care to run.
Changing hosts? Run through our checklist first.
A straightforward sequence for a switch your visitors never feel: which files move first, how to shift email across without losing a single message, the right moment to repoint DNS, and the two mistakes behind almost all the downtime we get asked to rescue.
Cut the payload without hurting LCP.
Built-in WebP conversion, LiteSpeed caching in the server, NVMe on every tier and free migration within a day.
View WooCommerce Hosting plans