Media loading · Beginner · 15 minutes with a profiler
How to lazy load images and video — Defer Everything Below the Fold, and Nothing Above It
You want the byte saving that deferred media gives you without finding out afterwards that the one image every visitor waits for is now queued behind a script.
The short answer
Lazy load everything below the fold and nothing above it. Deferral is a straight win on transferred bytes and a straight loss on Largest Contentful Paint the moment it catches the hero, so the first job is identifying your LCP element in Lighthouse or the DevTools Performance panel, marking that one image loading="eager" with fetchpriority="high", and letting native loading="lazy" cover the rest of the document.
From there the work is measurement rather than configuration. This runbook shows where the bytes actually sit, why a single video embed is usually the largest line item on the page, how a click-to-play facade removes it without removing the video, and which two figures to compare before and after so you can tell whether a visitor got a faster page or a score got a better number.
By the HostingFast team · Reviewed 24 August 2026
Beginner
Assumed skill
15 minutes
Time at the keyboard
5
Stages in the runbook
24/7
Engineers on shift
Written for someone who can open DevTools and read a waterfall. Every step has a panel equivalent on cPanel hosting, but the numbers come from the browser, because that is the only place a visitor's experience is actually visible.
Two figures run through the whole guide: LCP in milliseconds, and total transferred bytes on a cold load. Record both before you change anything. Lazy loading is one of the few optimisations that can move those two in opposite directions, which is exactly why it needs measuring rather than enabling.
Weigh the payload before you defer any of it
Open the Network panel, tick Disable cache, choose a throttling profile you will reuse every time, and filter to Img. The transferred figure at the foot of the panel is your baseline; sorting by size names the three files worth arguing about. Lighthouse's Defer offscreen images audit gives the same answer in kilobytes, which is the number to beat.
Do the same pass with the filter set to Media and Doc. On a typical WordPress page the images are rarely the largest thing on the wire once a video embed is present, and knowing that before you start stops you spending an afternoon on thumbnails while a player script sits there costing megabytes.
Identify the LCP element, then exempt it by hand
Run a Performance recording and look for the LCP marker in the timings track; DevTools names the element it chose. Nine times in ten it is the hero image or the first in-content image. That element must not carry loading="lazy", and it benefits from fetchpriority="high" so the browser fetches it ahead of the rest of the queue.
WordPress adds the lazy attribute automatically and deliberately skips the first images in the document, which is usually right and occasionally wrong — page builders and custom hero templates confuse the heuristic. View source on the rendered page and read the actual attributes rather than trusting the theory.
The video embed is the biggest single line item
One YouTube or Vimeo iframe pulls a player bundle, its stylesheets and its own analytics before anybody has pressed play. A page carrying three embeds is measured in megabytes, and every one of those bytes is spent on visitors who will never watch. A click-to-play facade renders a thumbnail and a play button, then swaps in the real iframe on the click.
Note that loading="lazy" on an iframe defers the request itself, not merely the rendering, so on a long page it is worth adding even where a facade is not practical. The facade is still the larger win because it defers the request indefinitely rather than until the visitor scrolls past.
Prove it moved, under the same conditions
Re-measure with the identical throttling profile and compare two numbers: LCP and transferred bytes. Bytes down and LCP flat is the result you want. Bytes down and LCP up means the deferral reached something above the fold, and the fix is an exclusion, not a different plugin. Field data from the Core Web Vitals report confirms it a few weeks later on real devices.
Then scroll fast, top to bottom, on a throttled connection. Visible pop-in means the load-ahead threshold in LiteSpeed Cache is too tight; widen it a few hundred pixels rather than abandoning the layer. Our platform handles the WebP conversion and serves the whole page from the server's own cache, so the only thing left to tune is the ordering.
The stack these measurements were taken on
Every runbook here is exercised on the platform we actually operate — cPanel, LiteSpeed, NVMe storage, one-click installs — so the panel screens, plugin settings and cache headers match what is in front of you rather than a generic host.
Built-in WebP conversion runs at no extra cost, which takes the largest slice off image weight before lazy loading has to do any work at all.
- WebP conversion handled at the platform, not by a plugin
- LiteSpeed lazy-load settings that reach iframes and CSS backgrounds
- Staging clones for testing an exclusion before it ships
- Engineers on shift when a cache setting misbehaves
Why HostingFast
Standard on every plan
A metric, not a checkbox
You finish holding two figures — LCP and transferred bytes — measured under the same throttling profile before and after.
The exclusion list comes first
The hero is identified and exempted before any deferral is switched on, which is the whole difference between a win and a regression.
Weighted by actual payload
Embeds are dealt with before thumbnails, because that is the order the bytes are in on almost every page.
Native mechanism first
The browser attribute does the bulk of the work for free; a plugin only fills the gaps it genuinely cannot reach.
Honest about the trade
Deferral costs the first paint and saves the rest of the page. Both sides are stated, with the number attached.
Scoped realistically
A beginner-level job of about 15 minutes, most of it spent reading a waterfall rather than clicking toggles.
Quick Start
From order to online
- 1
Record the baseline waterfall
Network panel, cache disabled, a fixed throttling profile, filter Img and Media. Note transferred bytes and the three largest files. Every later comparison is against this run.
- 2
Name the LCP element and exempt it
Performance recording, read the LCP marker. Remove loading="lazy" from that element and add fetchpriority="high" so it is fetched ahead of the queue rather than behind it.
- 3
Let the browser attribute do the bulk
loading="lazy" is in every current browser and WordPress applies it to most in-content images already. Confirm in view-source before installing anything on top of it.
- 4
Use LiteSpeed Cache for the gaps
CSS background images, iframes and the placeholder behaviour need the plugin's lazy-load settings. Configuration only — no theme edits, and reversible in one toggle.
- 5
Facade the video, then re-measure
Swap each embed for a thumbnail that loads the real iframe on click, then repeat the baseline run. Bytes should fall sharply while LCP stays where it was.
Built In
Loaded onto every plan
- Built-in WebP image conversion at no extra cost
- LiteSpeed caching compiled into the server, not bolted on by plugin
- NVMe SSD storage on every tier, including the entry plan
- Staging environments for rehearsing a change before it ships
- Per-site PHP version switching from the control panel
- cPanel — the control panel most of the industry already runs
- Daily backups on every plan, with restores you run yourself from the panel
- Free SSL on every plan, reissued automatically before it can expire
- 99.9% uptime as the target, monitored around the clock
- Human support on duty every hour of every day
Frequently Asked
What people ask us most often
How do I find out which element is actually my LCP?
Record in the DevTools Performance panel and open the Timings track: the LCP marker names the element, and hovering it highlights the node in the page. Lighthouse reports the same element under Largest Contentful Paint element. Guessing is unnecessary and usually wrong on builder-made pages, where the LCP is often a background image rather than the obvious hero.
Does loading="lazy" on an iframe defer the request or just the render?
The request. A lazy iframe makes no network calls until it approaches the viewport, which is why it is worth adding to embeds far down a long page even when a click-to-play facade is not practical. A facade goes further, because the request never happens at all unless somebody presses play.
Is a lazy-load plugin still worth installing if WordPress already adds the attribute?
Only for what the attribute cannot reach. Core handles img elements in post content; it does not touch CSS background images, iframes injected by JavaScript, or placeholder behaviour during the fetch. Those are the gaps the LiteSpeed Cache settings fill, and that is the only reason to add a layer.
Do I get staging clones to test an exclusion on before it goes live?
Yes — staging environments come with the plans, so you can push a cache configuration onto a copy of the site, run the same throttled measurement, and only promote the change once the numbers agree. Daily backups on every plan give you the second safety net, with restores you run from the panel yourself.
Keep reading
How to Create a Professional Email Signature
A signature that renders the same in Outlook, Gmail and Apple Mail, without dragging tracked images into every reply — beginner, roughly 30 minutes.
How to Create an SPF Record
Publish the exact list of hosts allowed to send as your domain, and check the result with a lookup rather than hoping — intermediate, roughly 15 minutes.
Best Video Content Site Hosting
The same decision as a buying guide: which specifications move video delivery, which are marketing, and the plan we would sign.
Web Hosting
cPanel hosting on NVMe behind a LiteSpeed cache — SSL, migration and a year-one domain included.
WordPress Hosting
WordPress on LiteSpeed and NVMe, with staging clones and daily backups included.
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.
Serve the media off faster disks.
NVMe behind a LiteSpeed cache, WebP conversion built in, free SSL and free migration — at a renewal price identical to the one you signed up at.
View Web Hosting plans