Acelere WordPress con la carga diferida de imágenes y vídeos (sin necesidad de complementos)

Lazy loading is one of the simplest and most effective ways to make your WordPress site load faster, especially on mobile devices — and you don’t even need a plugin to implement it. In this guide, we’ll show you how to enable native lazy loading for images and videos manually using clean, lightweight code.

What Is Lazy Loading?

Lazy loading is a performance technique where media assets like images and videos are only loaded when they are about to enter the user’s viewport (i.e., become visible on screen). This reduces the number of HTTP requests at initial page load, making the site faster and lighter.

Why Lazy Loading Is Critical for WordPress Performance

• Reduces Initial Page Weight: Pages load faster because fewer resources are requested upfront.
• Saves Bandwidth: Unseen media is not downloaded unless needed.
• Improves Core Web Vitals: Lazy loading improves metrics like Largest Contentful Paint (LCP).
• Better SEO & User Experience: Speed is a ranking factor. A faster site keeps users engaged.

How to Implement Native Lazy Loading for Images

Since WordPress 5.5, native lazy loading is automatically added to image tags with the cargando="perezoso" attribute. You can ensure this works properly with minimal adjustments:

<img src="your-image.jpg" alt="description" loading="lazy" width="600" height="400">

Best practice: Always specify width y height to avoid layout shifts (important for CLS score).

How to Force Lazy Loading for All Images (Optional)

If some themes or plugins skip adding cargando="perezoso", you can force it with a simple JavaScript snippet:

<script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll('img:not([loading])').forEach(function(img) { img.setAttribute("loading", "lazy"); }); }); </script>

Add this script to your footer or use a child theme to include it properly.

Lazy Loading Videos without Plugins

Videos are heavy. Embeds from YouTube or Vimeo load multiple external scripts. To lazy load them without plugins, replace the iframe with a clickable image preview and load the video only after interaction.

Example: Lazy Load YouTube Video

<div class="youtube-lazy" data-id="VIDEO_ID"> <img src="https://img.youtube.com/vi/VIDEO_ID/hqdefault.jpg" alt="YouTube preview" loading="lazy"> <div class="play-button"></div> </div> <script> document.addEventListener("DOMContentLoaded", function() { document.querySelectorAll(".youtube-lazy").forEach(function(el) { el.addEventListener("click", function() { let iframe = document.createElement("iframe"); iframe.setAttribute("src", "https://www.youtube.com/embed/" + el.dataset.id + "?autoplay=1"); iframe.setAttribute("frameborder", "0"); iframe.setAttribute("allowfullscreen", "1"); el.innerHTML = ""; el.appendChild(iframe); }); }); }); </script>

Replace VIDEO_ID with the actual YouTube video ID.

Helpful Styling (Optional)

Add some basic CSS to make it look nice:

.youtube-lazy { position: relative; cursor: pointer; max-width: 100%; aspect-ratio: 16/9; background: #000; } .youtube-lazy img { width: 100%; height: auto; } .play-button { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 60px; height: 60px; background: url('play-icon.svg') center center no-repeat; background-size: contain; }

Why Not Use a Plugin?

Plugins are convenient but often come with extra scripts, styles, or bloat. Manual lazy loading gives you:

• More control over what gets loaded
• No impact on performance from third-party features
• Cleaner front-end output

When You Should Consider a Plugin Instead

If you run a large website with frequent media uploads or have contributors unfamiliar with code, consider these optimized lazy-loading plugins:

• Caché LiteSpeed (if your server supports it)
• FlyingPress
• El rendimiento importa (premium)

But remember, even with these plugins, reviewing the actual lazy load behavior in DevTools is a must.

Final Tips

• Use browser DevTools to test if cargando="perezoso" is applied
• Test your site with Información de Google PageSpeed
• Track LCP improvements after lazy loading is enabled

Need expert help improving WordPress speed without bloated plugins? Try a free manual audit at SpeedWP Pro — we optimize from the core.