- Published
- Byline
- GoHighLevel Partners Editorial
- Filed under
- GoHighLevel Automation
Three worked examples of deferral, an image, an embed and a widget, with what the markup says, what the browser does, and what you must reserve.
Example of lazy loading: what the page does differently, line by line
Lazy loading means the browser does not fetch a thing until it is about to be needed, and on a page the usual meaning of needed is close to the visible area. That one sentence covers three quite different mechanisms, and the word gets used for all of them, which is why a request for an example so often gets an answer about the wrong one. Below are three worked examples, one each for an image, an embedded video, and a third-party widget, with what the markup says, what the browser does with it, and what you must reserve so the page does not jump when the deferred thing finally arrives. The question of which funnel images to defer and which never to is a separate decision and has its own article; this one is about what deferral looks like once you have decided.
Example one: an image below the fold
The simplest example is a single attribute. An image element that reads <img src=”team.jpg” width=”1200″ height=”800″ loading=”lazy” alt=”…”> tells the browser three things. The width and height reserve a box of the right shape before a byte of the image has arrived. The loading attribute set to lazy tells the browser it may postpone the fetch. And the browser then decides for itself when near enough is: each one keeps its own distance threshold, larger on a slow connection, so the image usually starts downloading a screen or two before the visitor reaches it.
What changes on the network is easy to describe. Without the attribute, a page with twelve images requests all twelve as soon as it is parsed. With the attribute on the nine that sit below the first screen, the page requests three, and the other nine are requested one by one as the visitor scrolls toward them. If the visitor never scrolls, they are never fetched. That is the whole mechanism, and it is why the attribute must never sit on the image at the top: the browser would politely wait to fetch the one thing every visitor sees first, and a page speed score would show the delay as a slow largest paint. A builder that offers a lazy-load toggle is adding this attribute for you; view the published page’s source and confirm which images actually carry it before you trust the toggle.
Example two: an embedded video or map
An embedded player is far heavier than an image. The frame it lives in loads the player’s own scripts, styles, thumbnails and tracking before the visitor has decided whether to press play. There are two ways to defer it, and they defer different things.
The native way
The same attribute works on a frame: <iframe src=”…” loading=”lazy”>. The browser holds the whole frame back until it is near the viewport, then loads everything inside it. That saves the bytes for a visitor who never scrolls that far, and nothing for the visitor who does, since the moment the frame comes into range the full player arrives anyway.
The facade
The second way defers until interaction rather than proximity. The page shows a plain poster image with a play button drawn on top, which costs about as much as any other image, and only when the visitor clicks does a few lines of script replace the poster with the real frame. Nothing belonging to the player is fetched until someone asks to watch. This is the pattern to use for a video that most visitors will not play, and it is a different question from video element autoplay or a section background video, both of which by definition cannot be deferred to a click, because the point of them is that they play without one.
Example three: a widget that loads on interaction
Chat bubbles, booking calendars, review carousels and consent banners are scripts, and lazy loading a script means delaying when it runs. The example here is a page whose head contains no chat script at all. Instead, a small listener waits for the first scroll, mouse movement or touch, and only then inserts the real script tag; some versions add a timer as well, so the widget appears after a few seconds even for a visitor who does nothing. The chat provider’s code, often the heaviest single item on a funnel page, then runs after the page is already usable rather than while it is still being drawn.
Two consequences follow, and both cause support tickets. The first is that anything you test by loading the page and looking will appear broken, because nothing has happened yet: the classic case of a tracking code that is not firing is a pixel that was waiting for a scroll the tester never made. The second is that whatever you delay must still have somewhere to go; a delayed widget that injects itself into a container with no reserved height pushes the content beneath it down the page when it lands. The rules for what belongs in code in the page header still apply, with one addition: the delayed script’s loader is what goes there, and the script itself does not.
The example that involves a form
A form embedded below the fold in a frame is the image example and the widget example at once. The frame can carry the lazy attribute like any other, which holds the form’s own scripts back until the visitor scrolls to it. But a frame reports its height only once it has loaded, so a deferred form arrives into a box the page did not know the size of, and the section jumps. The mechanism is exactly the form embed height issue, made worse by the delay. Give the frame a fixed height that matches the loaded form, or choose a placement that does not sit below the fold at all; inline versus popup embeds covers that placement decision.
Reading the four examples side by side
| What is deferred | Mechanism | Fires when | What you must reserve | Where it goes wrong |
|---|---|---|---|---|
| An image below the fold | The loading attribute | The image nears the viewport | Width and height | Applied to the image at the top |
| A video or map frame | The loading attribute, or a poster facade | Proximity, or a click | A box of the frame’s aspect ratio | A facade with no poster; a player that was meant to autoplay |
| A widget script | Delayed injection | Scroll, movement, touch or a timer | The container’s height | Tests that never scroll; consent that fires late |
| A form in a frame | The loading attribute | The frame nears the viewport | A fixed height | The section jumps when the form lands |
Three things the word does not mean
Deferring is not removing. A visitor who scrolls to the bottom fetches every byte the page would have fetched anyway, only later. The saving is real for the visitor who leaves early and nil for the one who reads to the end, so a heavy image is still a heavy image.
It is not the same as async or defer on a script. Those two attributes change whether a script blocks the page from being drawn while it downloads; they do not stop it downloading. A lazily loaded script is one the page does not ask for at all until something happens.
It is the opposite of prefetching. Prefetch asks the browser to fetch something before it is needed, in idle time, on the guess that it will be. Lazy loading asks it to wait until it is certain. Both are sensible; applying both to the same thing cancels them out.
Putting an example on a client page
- Decide which images sit below the first screen on a phone-sized viewport, and put the attribute on those only.
- Give every deferred image its width and height, and every deferred frame a box of the right shape.
- For a video that most visitors will not play, use a poster facade rather than the attribute; for one that must autoplay, defer nothing.
- Delay widget scripts behind interaction or a short timer, and reserve the space they will land in.
- Test by scrolling, not by loading: watch the requests arrive as you move down the page, and check that nothing shifts when they do. Content that is injected only on scroll may not be read by a crawler at all, which is the same question an accordion element raises for text hidden behind a click.
Frequently Asked Questions
What is a simple example of lazy loading?
An image below the first screen with width and height set and the loading attribute set to lazy. The browser reserves the box immediately, postpones fetching the image, and requests it only when the visitor scrolls near it. If they never scroll that far, it is never downloaded.
Does the loading attribute work on iframes as well as images?
Yes. A frame carrying loading set to lazy is held back until it nears the viewport, and then everything inside it loads at once. For a heavy player that most visitors will not use, a poster image that swaps in the real frame on click defers more, because nothing is fetched until someone asks.
Why does my lazy-loaded image still download straight away?
Usually because it is closer to the viewport than you think. Each browser keeps its own distance threshold, larger on a slow connection, so an image one screen down is often fetched immediately. Test on a phone-sized viewport, and check the published source to confirm the attribute is actually present.
Is lazy loading the same as async or defer on a script?
No. Async and defer change whether a script blocks the page from being drawn while it downloads, but the script is still fetched with the page. A lazily loaded script is not requested at all until a scroll, a click or a timer triggers a small loader that inserts it.
How do I lazy load a chat widget?
Remove the widget’s script from the page head and replace it with a short loader that listens for the first scroll, mouse movement or touch, with a timer as a fallback, and inserts the real script only then. Reserve the space the bubble will occupy, and remember that a test which never scrolls will never see it.
Does lazy loading hide content from search engines?
Not for images using the loading attribute; the image and its alt text are in the markup from the start. Content that is injected by script only when the visitor scrolls is a different matter, because a crawler may never trigger that script, so keep text and links in the page and defer only the heavy assets.
How do I check that lazy loading is actually working?
Load the page, watch the network requests, and scroll. Deferred images and frames should appear as new requests while you move down the page rather than in the initial burst, and nothing on the page should shift position when they arrive. If everything loads at once, the attribute is missing or the viewport is too tall.
We build your GoHighLevel account for you
CRM, pipelines, funnels, SMS and automation — configured for your business, not left for you to figure out.
- Setup (one-time)$850
- Ongoing (per month)$38.80
No obligation quote · reply within 1 business day
This site is independently operated and is not officially affiliated with, endorsed by, or sponsored by HighLevel LLC. We do not receive referral commissions — this is our own flat-fee implementation service.