Lazy loading means a browser only downloads images, videos and embeds when a visitor is about to scroll to them, instead of loading everything when the page opens. WordPress already lazy loads most images and iframes automatically, using the browser’s built-in loading=”lazy” attribute. To get the full benefit, check that it is working, make sure your main above-the-fold image is not lazy loaded, and handle videos and embeds separately.
What lazy loading does
A long page may contain dozens of images and several embedded videos. Without lazy loading, the browser fetches all of them at once, even ones far down the page that a visitor may never see. Lazy loading delays those downloads until they are needed. The benefits are:
- Faster first view: the browser can focus on what is visible first.
- Less data used: visitors on mobile data do not download media they never scroll to.
- Less server load: fewer files are requested for each visit.
Used carelessly, it can also slow a page down. If the main image at the top of the page is lazy loaded, the browser waits before fetching it. That delays the Largest Contentful Paint (LCP), one of Google’s Core Web Vitals.
How WordPress handles lazy loading by default
Since WordPress 5.5, core adds loading=”lazy” to images in post content, and since 5.7 it does the same for iframes such as embedded videos. Later versions stopped lazy loading the first content images, which are likely to be above the fold. WordPress 6.3 also added fetchpriority=”high” to the image most likely to be the LCP element. If you run a current version of WordPress with a well-built theme, much of the basic work is already done.
Check that it is working: open a page, right-click an image lower down and choose Inspect. You should see loading=”lazy” on the img tag. The top image should not have it.
Method 1: Rely on native lazy loading
For most sites, the built-in behaviour is enough. To get the most from it:
- Keep WordPress and your theme up to date.
- Insert images with the block editor or media library so WordPress can add the right attributes and responsive sizes.
- Make sure images have width and height set. This lets the browser reserve space and prevents the page jumping as images load, which is measured as Cumulative Layout Shift (CLS).
- Check your theme’s hero, header or slider images. If they are added by the theme rather than in post content, confirm they are not marked loading=”lazy”.
Method 2: Use a caching or performance plugin
Many performance plugins add extra lazy loading controls, such as lazy loading CSS background images, excluding specific images, or adding placeholders. On LiteSpeed servers, the LiteSpeed Cache plugin includes lazy load options for images and iframes alongside its caching features.
When you use a plugin:
- Turn on only one lazy loading feature at a time. Two plugins doing the same job can break images.
- Exclude your logo and the main above-the-fold image.
- Test pages on mobile after every change.
Method 3: Lazy load videos and embeds
Embedded videos (YouTube, Vimeo)
Embeds load a lot of third-party code, even if nobody presses play. WordPress adds loading=”lazy” to iframes, which helps when the video is lower on the page. For bigger savings, use a “facade”. This shows a thumbnail image with a play button, and only loads the real player when a visitor clicks. Several plugins offer this, and some performance plugins include it.
Self-hosted videos
The HTML video element does not use the loading attribute. Instead:
- Set preload=”none” (or “metadata”) so the browser does not download the video file until it is needed.
- Add a poster image so visitors see a preview frame.
- Avoid autoplaying large background videos on mobile.
- Consider hosting long videos on a video platform and embedding them with a facade.
Method 4: Add it manually in custom code
If you build templates yourself, add loading=”lazy” to img and iframe tags that appear below the fold. Always include width and height. For the main image at the top of the page, leave out loading=”lazy” and consider adding fetchpriority=”high”. When you output images with WordPress functions such as wp_get_attachment_image, WordPress adds suitable attributes for you.
Test the results
- Run the page through Google PageSpeed Insights before and after your changes, and compare LCP and CLS.
- Check field data in Google Search Console’s Core Web Vitals report once enough visitors have loaded the page.
- Scroll the page on a real phone to make sure images appear in time and nothing jumps.
Lazy loading is one part of a fast site
Lazy loading helps most when combined with properly sized, compressed images (WebP or AVIF where possible), page caching, a CDN and fast hosting. Server software and storage matter too. Tremhost hosting uses LiteSpeed and NVMe storage, and Managed WordPress plans include Cloudflare Pro on every site.
Frequently asked questions
Do I need a plugin for lazy loading in WordPress?
Not for basic image and iframe lazy loading. WordPress does it automatically. A plugin helps if you want extra control, background image support or video facades.
Can lazy loading hurt SEO?
Native lazy loading is supported by Google and does not stop images from being indexed. Problems come from lazy loading the main above-the-fold image, which slows LCP, or from older JavaScript methods that hide images from crawlers.
Why are my images still loading all at once?
Some browsers fetch images a little before they come into view, so on short pages everything may load early. Also check that your theme or a plugin is not removing the loading attribute.
Should I lazy load my logo?
No. The logo is almost always visible straight away, so it should load immediately.
Next step
For a WordPress setup where caching, Cloudflare Pro and tested updates are looked after for you, see Tremhost Managed WordPress. If you are starting a new site, read how to install WordPress.
