So implementieren Sie Lazy Loading für Bilder und Videos in WordPress

Lazy loading is a performance optimization technique that defers the loading of images and videos until they are about to enter the user’s viewport. This dramatically reduces the initial page load time and improves Core Web Vitals, especially the Largest Contentful Paint (LCP).

Why Lazy Loading Matters

When lazy loading is not used, all media elements load immediately, even if they are far below the fold. This leads to:

• Increased page weight
• Longer initial load time
• Poorer PageSpeed Insights scores

By delaying media loading until it’s needed, lazy loading speeds up your site and saves bandwidth.

Lazy Loading Images in WordPress

Since WordPress version 5.5, all images added through the editor automatically receive the Laden="faul" attribute. No plugins are required.

How to Check:

1. Right-click on any image and choose “Inspect”
2. Look for: <img src="..." loading="lazy">
3. If missing — check your theme or use a plugin to fix it

Tip:

Some themes remove or override this attribute. Use a modern theme or add it manually via filters if needed.

Lazy Loading YouTube and Video Embeds

YouTube iframes and other video embeds can drastically slow down loading. Here’s how to optimize:

• Replace the iframe with a static preview image that loads the video only on click
• Use plugins like WP YouTube Lyte oder Lazy Load for Videos
• Or dynamically inject the iframe with JavaScript when the user interacts

Example placeholder HTML:

<div class="video-wrapper"><img src="preview.jpg" alt="Video preview"></div>

Top Lazy Loading Plugins

• a3 Lazy Load – lightweight and easy to configure
• WP Rocket – premium solution with full media lazy load
• Perfmatters – script manager with built-in lazy load

Common Lazy Load Issues

• Images or videos loading too late (“pop-in” effect)
• Search engines not seeing deferred content (rare, but test critical assets)
• Old browser compatibility — test your fallback behavior

How to Measure Lazy Load Effectiveness

• Verwenden PageSpeed Insights to compare image load times
• Open Chrome DevTools → Network → Filter by “Media” → Scroll and observe loading behavior

Need Help?

Lazy loading is powerful but must be done right. Let SpeedWP Pro audit your WordPress site for media bloat, lazy load issues, and performance killers — all for free.