Description
You satisfied Google’s performance guidance by lazy-loading offscreen images, but visitors may still see empty image areas while those files load. LazyBlur Placeholder Addon for WP Rocket fills those spaces with a tiny preview of the final image.
The plugin uses the Low Quality Image Placeholder (LQIP) technique. It generates a small image when media is uploaded, stores it as a base64 data URI, and displays it through WP-Rocket’s LazyLoad markup until the full image is ready. The preview then sharpens into the final image with a one-second transition.
This improves perceived loading and gives visitors visual context immediately. It complements image lazy loading and Core Web Vitals work; it does not guarantee search rankings or performance scores.
Features
- Generates LQIP data automatically for new Media Library images.
- Backfills placeholders for images uploaded before activation.
- Works with WP-Rocket JavaScript and native image lazy loading.
- Supports JPEG, PNG, GIF, and WebP attachments.
- Resolves responsive sizes, scaled originals, and CDN-hosted uploads.
- Optionally adds a placeholder to the first above-the-fold image.
- Preserves responsive
srcsetdata and provides no-JavaScript fallbacks. - Applies an accessible reduced-motion-safe fade from preview to full image.
- Caches local LQIP previews for WP-Rocket YouTube placeholders.
- Provides coverage statistics, integration checks, and a live preview.
- Includes filters for custom attachment resolution and final image markup.
SEO and user experience
Lazy loading helps reduce initial page weight, but an empty placeholder can make a page feel unfinished. LQIP keeps the layout visually populated while deferred images load, helping users understand the page sooner.
The plugin preserves image dimensions and responsive sources. The optional first-image setting is disabled by default because replacing an above-the-fold image can affect Largest Contentful Paint. Test that option against your own Core Web Vitals data before enabling it in production.
Requirements
- WordPress 5.6 or later.
- PHP 7.4 or later.
- WP-Rocket with LazyLoad for images enabled to display image placeholders.
- WP-Rocket LazyLoad for iframes and videos, plus YouTube preview replacement, for YouTube LQIP support.
External services
The optional YouTube preview feature requests thumbnail images from i.ytimg.com using the video ID already present in the page content. The thumbnail is downloaded when a post is saved or through a scheduled background task, then stored locally in the WordPress Media Library.
This service is provided by YouTube/Google and is subject to the YouTube Terms of Service and Google Privacy Policy. No request is made when YouTube preview support is disabled or no YouTube video is present.
Screenshots
Installation
- Upload the
lazyblur-for-wp-rocketfolder to/wp-content/plugins/, or install the plugin ZIP through Plugins > Add New > Upload Plugin. - Activate LazyBlur Placeholder Addon for WP Rocket.
- In WP-Rocket, enable LazyLoad for images under Settings > WP-Rocket > Media.
- Open Settings > LazyBlur.
- Configure placeholder width and compression quality.
- Run the backfill tool if the Media Library contains images uploaded before activation.
- Clear the WP-Rocket cache and test the front end while logged out.
FAQ
-
Does this replace WP-Rocket?
-
No. This plugin extends WP-Rocket’s LazyLoad output. WP-Rocket remains responsible for deciding which images are lazy-loaded and when the full files are loaded.
-
What problem does LQIP solve?
-
Standard lazy loading can leave an empty or generic placeholder before an image enters the viewport. LQIP displays a recognizable, lightweight preview during that interval.
-
Are placeholders generated for existing images?
-
Use the backfill tool under Settings > LazyBlur. It processes the Media Library in small batches to reduce timeout risk.
-
Does it work with CDN or resized image URLs?
-
Yes. The plugin resolves WordPress intermediate sizes,
-scaledoriginals, and upload paths served from a different CDN hostname. -
Can it add a placeholder to the first image?
-
Yes. Enable Include the first image in the settings. This option can affect Largest Contentful Paint, so measure the result before using it on a production site.
-
Does it support native lazy loading?
-
Yes. The real
srcandsrcsetare restored near the viewport using a small IntersectionObserver script. A no-JavaScript fallback retains access to the original image. -
What happens when JavaScript is disabled?
-
Images converted by the native or first-image modes include their original markup in a
noscriptfallback. -
Can developers customize the output?
-
Use
wrlqip_final_image_htmlto filter completed image markup. Usewrlqip_pre_attachment_id_from_urlto provide an attachment ID for custom CDN or offload URLs.
Reviews
There are no reviews for this plugin.
Contributors & Developers
“LazyBlur Placeholder Addon for WP Rocket” is open source software. The following people have contributed to this plugin.
Contributors
Translate “LazyBlur Placeholder Addon for WP Rocket” into your language.
Interested in development?
Browse the code, check out the SVN repository, or subscribe to the development log by RSS.
Changelog
1.0.0
- Initial release.
- Added image LQIP generation, backfill, native lazy-load support, optional first-image handling, fade transitions, and YouTube previews.