What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
iTechGuides is reader-supported. When you buy through links on our site, we may earn an affiliate commission. As an Amazon Associate I earn from qualifying purchases. Learn more
Use loading="lazy" for images and other media that sit well below the initial viewport—not for a likely Largest Contentful Paint (LCP) image, a hero image, or other content needed immediately. Deferring a critical image can delay its request and hurt LCP; failing to reserve space for deferred media can cause Cumulative Layout Shift (CLS). Keep the likely LCP resource discoverable in the initial HTML or preload it, use fetchpriority="high" selectively, and give media explicit dimensions or an equivalent aspect ratio. Chrome’s performance guidance makes these distinctions central to using native lazy loading well.
What does loading="lazy" do?
The attribute tells the browser that an image or iframe can wait until it is near the viewport before being fetched. That can keep offscreen resources from competing immediately with the files needed to display the first view. It is a timing hint for a particular resource, not a blanket instruction to defer every image or a way to make the resource smaller.
For images, browsers decide when to fetch a lazy resource using their own proximity heuristics; the request does not necessarily wait until the image is visibly on screen. For iframes, deferral can also postpone the embedded document and the many resources it loads. The choice should therefore depend on whether the user needs the resource for the initial experience, not simply on its file type.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Repair Windows errors before they cause bigger problemsFix Now →Three separate controls are easy to confuse:
- Discovery: How soon can the browser find the resource? A URL in the initial HTML can be found early; a URL referenced only from CSS or inserted later by JavaScript may not be.
- Loading: Should fetching be deferred?
loading="lazy"asks the browser to defer an eligible resource. - Priority: How important is the request relative to others?
fetchpriorityadjusts relative priority, but it does not erase a delay caused by lazy loading.
These controls solve different problems. A high-priority hint cannot make a lazy-loaded LCP image start early if lazy loading has deferred it. Chrome’s image-priority guidance recommends using priority hints selectively rather than marking many resources as critical.
Popular on Amazon
- 【90 Degree Full Function USB C Adapter】Supports the latest USB4 standard for up to 40Gbps of bandwidth, 8K video support, and up to 240W Fast charging; Support USB PD 3.1 Extended Power Range (EPR) including 140W, 180W and 240W. Your productivity is easily doubled. *Warm Tip: For the best fit, please make sure the USB-C port is fully exposed; thick or bulky cases may affect compatibility.
- 【Reliable Quality】Made from high-quality, scratch-resistant aluminum alloy, delicate metal frame. get excellent wear resistance and heat dissipation. Non-Slip Design for easier insertion and removal.
- 【Small and portable】Ultra thin size, ultra compact design, a petite physique that matches the minimalist design of your modern laptops. Coming with a slim figure that won't block the port next to the one it's plugged into.
- 【Compatibility】Widely work with most usb c, thunderbolt 4/3 devices. Compatibilit for ROG Ally, Steam Deck, Switch, MacBook Pro, Quest 3 VR headset, Surface Book 2, iPhone 18/17/16/15, Samsung Galaxy S23/S22/S21, Note 20/10, Google Pixel, ChromeBook, etc.
- 【Excellence Customer Support】If you experience any issues or cable failure, simply reach out to our dedicated customer service team. We provide a prompt response within 18 hours, providing you with the necessary technical support to resolve any concerns.
Should I lazy-load my hero image or LCP image?
No. Do not set loading="lazy" on a hero image or any image likely to be the page’s LCP element. Chrome advises never applying lazy loading to above-the-fold images, and web.dev’s LCP guidance explains that lazy-loading the LCP image adds unnecessary resource load delay.
LCP measures when the largest eligible content element in the viewport is rendered. On an image-led page, that element may be the hero image, but the candidate depends on the page, viewport, and device. Do not assume the first image in the source is always the LCP element, or that an image which is below the fold on desktop will also be below the fold on a phone.
Make the critical image easy to discover
Put the likely LCP image in the main HTML using ordinary image markup so the browser can discover its URL early. If the image is referenced only in CSS or becomes known only after JavaScript runs, the browser may discover it later; an image preload can expose that resource sooner. Then consider fetchpriority="high" on the LCP image or its preload when appropriate.
<img src="/images/hero.webp" width="1600" height="900" fetchpriority="high" alt="A description of the hero image">This is an illustrative pattern, not a universal copy-and-paste implementation: use the correct image URL, dimensions, and alternative text for the page, and do not add loading="lazy" to the critical image. Keep high priority for a small number of genuinely important resources—Chrome’s guidance suggests roughly one or two critical images, not a whole gallery.
When is preload useful?
Preload is relevant when the LCP image is not readily discoverable from the initial HTML, such as when its URL is supplied by CSS. It can also be used to make an important image available earlier. Preloading indiscriminately is not a substitute for prioritization: unnecessary early requests can compete with more important work. Confirm that the browser is requesting the intended image early rather than adding preload directives to every image.
Also popular on Amazon
- 5-in-1 Connectivity: Equipped with a 4K HDMI port, a 5 Gbps USB-C data port, two 5 Gbps USB-A ports, and a USB C 100W PD-IN port. Note: The USB C 100W PD-IN port supports only charging and does not support data transfer devices such as headphones or speakers.
- Powerful Pass-Through Charging: Supports up to 85W pass-through charging so you can power up your laptop while you use the hub. Note: Pass-through charging requires a charger (not included). Note: To achieve full power for iPad, we recommend using a 45W wall charger.
- Transfer Files in Seconds: Move files to and from your laptop at speeds of up to 5 Gbps via the USB-C and USB-A data ports. Note: The USB C 5Gbps Data port does not support video output.
- HD Display: Connect to the HDMI port to stream or mirror content to an external monitor in resolutions of up to 4K@30Hz. Note: The USB-C ports do not support video output.
- What You Get: Anker 332 USB-C Hub (5-in-1), welcome guide, our worry-free 18-month warranty, and friendly customer service.
When should I lazy-load below-the-fold images?
Use native lazy loading for ordinary content images that are well below the initial viewport and are not needed for the first view. The browser can fetch them as they approach the viewport, reducing early competition for bandwidth and rendering resources. Leave images visible or likely to be visible immediately eager; the practical boundary is the initial experience, not a rule that all images should use the same attribute.
Keep the image URL in normal src or responsive srcset markup. Use suitable sizes and responsive sources where needed so the browser can choose an appropriate file for the rendered image, and provide efficient formats and dimensions. Lazy loading changes when a request may start; it does not replace choosing an appropriately sized image.
Crashes, No Sound, or Screen Glitches?
Random freezes, missing sound and display glitches usually trace back to one bad driver. Find and replace yours safely.Free scan · under a minutePC Slower Than It Used to Be?
A free scan shows the junk files, broken settings and background clutter dragging Windows down - then fixes them in one click.Free scan · Windows 10 & 11<img src="/images/article-640.webp" srcset="/images/article-640.webp 640w, /images/article-1280.webp 1280w" sizes="(max-width: 700px) 100vw, 700px" width="1280" height="853" loading="eager" alt="A description of the image">Use responsive values that match the assets and layout you actually serve. The example shows where the attributes go; it does not prescribe particular breakpoints, file sizes, or dimensions for every site. If a lower-page image is also important to a particular landing experience, assess that page and viewport rather than relying on its position in the document alone.
Do not confuse an image’s position with its importance
A decorative image near the top can still be less important than a headline or text that makes up the first view. Conversely, a prominent visual may be critical even if its image is not the first one in the HTML. Identify what users see first and what element is the likely LCP candidate before choosing which requests to defer.
Can lazy loading cause CLS?
It can contribute to an avoidable layout shift if the browser has no reserved space for the image or media before it loads. Give images explicit width and height attributes, or reserve the same shape with CSS such as an appropriate aspect-ratio. The browser can then allocate the space before the file arrives instead of moving nearby content when it learns the resource’s dimensions.
Also popular on Amazon
- Sleek 7-in-1 USB-C Hub: Features an HDMI port, two USB-A 3.0 ports, and a USB-C data port, each providing 5Gbps transfer speeds. It also includes a USB-C PD input port for charging up to 100W and dual SD and TF card slots, all in a compact design.
- Flawless 4K@60Hz Video with HDMI: Delivers exceptional clarity and smoothness with its 4K@60Hz HDMI port, making it ideal for high-definition presentations and entertainment. (Note: Only the HDMI port supports video projection; the USB-C port is for data transfer only.)
- Double Up on Efficiency: The two USB-A 3.0 ports and a USB-C port support a fast 5Gbps data rate, significantly boosting your transfer speeds and improving productivity.
- Fast and Reliable 85W Charging: Offers high-capacity, speedy charging for laptops up to 85W, so you spend less time tethered to an outlet and more time being productive.
- What You Get: Anker USB-C Hub (7-in-1), welcome guide, 18-month warranty, and our friendly customer service.
For example, an image whose intrinsic dimensions are 1200 by 800 has a 3:2 ratio. If its displayed width is responsive, preserving that ratio still lets the layout reserve the right height as the page changes width. Set the actual intrinsic dimensions in the HTML when available; do not guess dimensions merely to make the layout appear stable.
Recommended Free Tools
<img src="/images/article.webp" width="1200" height="800" loading="eager" alt="A description of the image">For media whose shape is controlled in CSS, an equivalent aspect-ratio reservation can provide the stable box. The principle applies whether the resource is lazy-loaded or eager: late arrival should not unexpectedly change the geometry of content already on screen. Chrome’s performance guidance explains that dimensions allow the browser to calculate the ratio and reserve space.
Should I lazy-load iframes?
Usually, lazy-load an embedded document only when it is well outside the initial viewport and does not need to be ready immediately. An iframe can start its own document load and subresource requests, so deferring an offscreen frame can reduce startup work. An iframe needed for the first view or immediate interaction should not be deferred just because it is an iframe.
<iframe src="https://example.com/embed" width="560" height="315" loading="eager" title="Embedded content"></iframe>Supply dimensions or otherwise reserve the frame’s expected space so the page does not have to rearrange when it appears. Also account for two iframe-specific caveats: native iframe lazy loading depends on JavaScript, and a lazy frame has distinct load-event behavior. Code that assumes the window’s load event means every lazy iframe has finished loading can make incorrect timing assumptions. web.dev’s guidance on lazy-loading images and iframe elements covers these differences.
If application logic depends on an embedded document being ready, coordinate that logic with the iframe’s own loading and readiness behavior rather than treating the top-level window load event as proof that every deferred frame has loaded. Deferring a frame is an optimization only when the delay is acceptable to the user and to the page’s code.
Also popular on Amazon
- Portable and powerful USB-C HUB: BENFEI USB Type-C HUB, with super-soft and knot-free silicone woven design cable, meets most mobile office needs. Compact, lightweight, stylish, and powerful portable USB C Hub equipped with 1 x HDMI port, 1 x 100W charging, and 3 x USB ports. 18-month warranty, 24-hour response, to ensure you feel at ease when using our product.
- Design centered on comfort and reliability: Thanks to BENFEI's end-to-end in-house cable production capability, in-house PCBA and assembly capability, using the industry's most advanced silicone woven design and process, 20cm cable in length, no knots, super-soft, the HUB is easy to use in all scenarios: laptop, tablet, stand etc. Super-soft, 25000+ life cycles, to meet your daily carrying and office needs.
- 100W Charging: Support up to 90W USB C pass-through charging via Type-C port to keep your laptop powered. 10W is reserved for other interface operations. No data and video function on the Type-C port.
- 4K HDMI Display: The HDMI port supports media display at resolutions up to 4K 30Hz, keeping every incredible moment detailed and ultra vivid. Please note that the C port of the Host device needs to support video output.
- Transfer Files in Seconds: Transfer files and from your laptop at speeds up to 10 Gbps with USB A 3.2 port. Extra 2 USB A 2.0 ports are perfectly for your keyboards and mouse.
Is loading="lazy" enough for video and audio?
Not by itself. For below-the-fold video, coordinate lazy loading with the poster, preload behavior, dimensions, and whether the media should play or be available immediately. Keep above-the-fold or likely LCP video eager when it is part of the first experience.
Reserve the video’s size
Specify integer width and height values in CSS pixels on <video>. Chrome warns that an unloaded video defaults to a 300 by 150 CSS-pixel box; without appropriate sizing, the element may fail to intersect the viewport as expected or shift the page when it loads. Use the actual intended dimensions or an equivalent reserved ratio so the layout is stable.
<video width="640" height="360" loading="eager" controls poster="/images/video-poster.webp" preload="none">
<source src="/media/clip.mp4" type="video/mp4">
</video>This example illustrates how the attributes may be combined, not a universal preload policy. Choose a poster and preload strategy that fits whether users should see a preview or be able to begin playback promptly. Chrome’s video and audio guidance discusses these trade-offs and the need for video dimensions.
Give lazy audio visible controls
If audio is lazy-loaded, include visible controls. Without a visible control box, an audio element may have no rendered area that intersects the viewport, so its deferred request may not begin as expected. For autoplaying motion media, respect the user’s prefers-reduced-motion setting before initiating playback.
Do I need JavaScript for lazy loading?
For ordinary images in browsers that support native lazy loading, generally no: use the HTML attribute instead of adding a library simply to reproduce the browser’s built-in capability. Native loading keeps the decision with the browser’s own scheduling heuristics.
Also popular on Amazon
- 【Read before You Buy】 Note: This adapter is USB 2.0 version and cannot transmit HDM, VGA, or other video signals. Nevertheless, they are fully capable of charging devices,duplicating files, and can be seamlessly integrated with USB-C earphones, wireless network adapters, and SD card adapters.
- 【Easy to Use and Safe】Thanks to modern manufacturing techniques, we've made these adapters sufficiently compact so that they can remain inserted in your device without noticeable protrusion or inconvenience. This means you don't have to constantly plug and unplug them, reducing the likelihood of wear and misalignment, and making them more convenient to carry around.
- 【Reliable Quality】Engineered for enhanced durability, durable aluminum alloy shell material,get excellent wear resistance and heat dissipation,the male USB C and female USB connectors & the male USB and female USB C connectors are designed to be plugged and unplugged up to 20000 times. Provides data transfer, device charging, memory space expansion, and additional computer peripherals.
- 【Think more for you】Do you need to connect a USB-C-enabled device to an odd device that only has USB-A ports? Then these USB-A male to USB-C female adapters are made for you.Simply insert the adapter into the USB-A port on the device, and you can instantly connect your USB-C device to the device that originally didn't have the correct connection port.
- 【Trusted xiwxi Quality and Service】As a responsible brand seller, you will receive xiwxi's 12-month Quality assurance and lifetime friendly customer service, you're not just buying a product,you're investing in peace of mind with all-round quality and exceptional customer service.
JavaScript or an IntersectionObserver fallback can still make sense when the resource is not covered by native loading, such as a CSS background image, certain video-poster workflows, or a compatibility target that requires more control. That is a targeted fallback decision, not a reason to replace native image lazy loading everywhere. MDN’s lazy-loading guide describes the broader range of resources and techniques.
Be cautious with JavaScript patterns that hide the true resource URL from the browser until script execution. If the resource is critical to the initial view, delaying discovery can work against LCP even if the eventual request has a high priority. For noncritical resources, choose a method that matches the resource type and the browsers the page needs to support.
How should I check whether lazy loading helped?
Do not infer improvement from the presence of the attribute. Inspect whether the critical request starts early, whether offscreen requests are deferred appropriately, and whether the layout remains stable. Compare results on representative mobile and desktop conditions using browser developer tools and both lab and field measurements.
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEFix the driver behind crashes, sound loss and screen glitchesFind Drivers →- Identify the likely LCP element for the target viewport and device class. Determine whether it is an image, video, or another element.
- Check discovery. Confirm the LCP resource is present in the initial HTML or exposed through a correctly configured image preload if it is otherwise hidden in CSS or script.
- Check the loading attribute. Verify the likely LCP image is not marked
loading="lazy", while appropriate offscreen resources can be deferred. - Inspect request priority and timing in the browser’s developer tools network waterfall. Confirm that a high-priority hint is applied only to genuinely critical work and that the intended asset is requested early.
- Check layout reservation for each deferred image, iframe, and video. Confirm explicit dimensions or an equivalent aspect-ratio reservation before the resource arrives.
- Compare performance and transfer behavior under representative conditions, including LCP and CLS in lab results and field data when available. Review the waterfall as well as metrics so a change in timing or resource competition is visible.
web.dev’s LCP optimization guidance recommends inspecting priority changes with DevTools and validating them with lab and field tools. There is no single durable performance number that determines when lazy loading is right: the correct choice depends on the page’s initial viewport, its actual LCP element, and which resources users need first.
Frequently Asked Questions
Does lazy loading make an image file smaller?
No. It changes when the browser may request the resource, not the image’s encoded size. Use appropriately sized responsive sources and efficient formats when the goal is to reduce the bytes needed to display an image.
Is there a fixed distance from the viewport where an image starts loading?
No universal distance is established here. Browsers use their own heuristics to fetch lazy images when they enter or approach the viewport, so avoid depending on an exact pixel threshold.
Can an image still be lazy-loaded if JavaScript is disabled?
Native image lazy loading is a browser feature, unlike native iframe deferral, which depends on JavaScript. If a page needs a particular compatibility behavior, verify it against the browsers and conditions that page supports.
