WordPress.org

This plugin optimizes the loading of images (and videos) with prioritization to improve <a href="https://web.dev/articles/lcp" rel="nofollow ugc">Largest Contentful Paint</a> (LCP), lazy loading, and more accurate image size selection.
The current optimizations include:
<ol>
<li>Add breakpoint-specific <code>fetchpriority=high</code> preload links (both as <code>LINK[rel=preload]</code> elements and <code>Link</code> response headers) for image URLs of LCP elements:
<ol>
<li>An <code>IMG</code> element, including the <code>srcset</code>/<code>sizes</code> attributes supplied as <code>imagesrcset</code>/<code>imagesizes</code> on the <code>LINK</code>.</li>
<li>The first <code>SOURCE</code> element with a <code>type</code> attribute in a <code>PICTURE</code> element. (Art-directed <code>PICTURE</code> elements using media queries are not supported.)</li>
<li>An element with a CSS <code>background-image</code> inline <code>style</code> attribute.</li>
<li>An element with a CSS <code>background-image</code> applied with a stylesheet (when the image is from an allowed origin).</li>
<li>A <code>VIDEO</code> element’s <code>poster</code> image.</li>
</ol>
</li>
<li>Ensure <code>fetchpriority=high</code> is only added to an <code>IMG</code> when it is the LCP element across all responsive breakpoints.</li>
<li>Add <code>fetchpriority=low</code> to <code>IMG</code> tags which appear in the initial viewport but are not visible, such as when they are subsequent carousel slides.</li>
<li>Lazy loading:
<ol>
<li>Apply lazy loading to <code>IMG</code> tags based on whether they appear in any breakpoint’s initial viewport.</li>
<li>Implement lazy loading of CSS background images added via inline <code>style</code> attributes.</li>
<li>Lazy-load <code>VIDEO</code> tags by setting the appropriate attributes based on whether they appear in the initial viewport. If a <code>VIDEO</code> is the LCP element, it gets <code>preload=auto</code>; if it is in an initial viewport, the <code>preload=metadata</code> default is left; if it is not in an initial viewport, it gets <code>preload=none</code>. Lazy-loaded videos also get initial <code>preload</code>, <code>autoplay</code>, and <code>poster</code> attributes restored when the <code>VIDEO</code> is going to enter the viewport.</li>
</ol>
</li>
<li>Responsive image sizes:
<ol>
<li>Compute the <code>sizes</code> attribute using the widths of an image collected from URL Metrics for each breakpoint (when not lazy-loaded since then handled by <code>sizes=auto</code>).</li>
<li>Ensure <a href="https://make.wordpress.org/core/2024/10/18/auto-sizes-for-lazy-loaded-images-in-wordpress-6-7/" rel="nofollow ugc"><code>sizes=auto</code></a> is set on <code>IMG</code> tags after setting correct lazy-loading (above).</li>
</ol>
</li>
<li>Reduce the size of the <code>poster</code> image of a <code>VIDEO</code> from full size to the size appropriate for the maximum width of the video (on desktop).</li>
</ol>
This plugin requires the <a href="https://wordpress.org/plugins/optimization-detective/" rel="ugc">Optimization Detective</a> plugin as a dependency. Please refer to that plugin for additional background on how this plugin works as well as additional developer options.
👉 Note: This plugin optimizes pages for actual visitors, and it depends on visitors to optimize pages. As such, you won’t see optimizations applied immediately after activating the plugin. Please wait for URL Metrics to be gathered for both mobile and desktop visits. And since administrator users are not normal visitors typically, optimizations are not applied for admins by default.
Your site must have the REST API accessible to unauthenticated frontend visitors since this is how metrics are collected about how a page should be optimized. There are currently no settings and no user interface for this plugin since it is designed to work without any configuration.

Image Prioritizer

Prioritizes the loading of images and videos based on how they appear to actual visitors: adds fetchpriority, preloads, lazy-loads, and sets sizes.

Prakhar Bhatia

Core Web Vitals RUM is a comprehensive WordPress plugin that monitors your website’s Core Web Vitals metrics from real users, not just lab tests. Get actionable insights to improve your site’s performance and SEO rankings.
<h4>Why Real User Monitoring (RUM)?</h4>
While tools like Google PageSpeed Insights provide valuable lab data, they don’t reflect the actual experience of your visitors. Core Web Vitals RUM collects data from real users across different devices, browsers, and network conditions, giving you the most accurate picture of your site’s performance.
<h4>Key Features</h4>
🚀 Real User Monitoring 
* Collects LCP, INP, CLS, FCP, and TTFB from actual visitors 
* Tracks performance across different devices and browsers 
* Provides accurate, real-world performance data
📊 Comprehensive Analytics 
* Beautiful dashboard with real-time performance scores 
* Detailed reports with trends and insights 
* Page-specific performance analysis 
* Device and browser breakdown
🔔 Smart Alerts 
* Email notifications when performance drops 
* Configurable thresholds for each metric 
* Daily, weekly, or immediate alerts 
* Beautiful HTML email templates
📈 Google Analytics 4 Integration 
* Send Core Web Vitals data to GA4 
* Custom events for each metric 
* Enhanced GA4 reporting capabilities 
* Measurement Protocol API integration
⚙️ Flexible Configuration 
* Adjustable sample rates (1-100%) 
* Customizable performance thresholds 
* Data retention settings 
* Privacy-compliant data collection
🔒 Privacy & Security 
* GDPR-compliant data collection 
* IP address anonymization 
* No personal data collection 
* Secure REST API endpoints with proper permission callbacks 
* Input validation and sanitization on all data
<h4>Core Web Vitals Explained</h4>
LCP (Largest Contentful Paint): Measures loading performance. Shows when the largest content element becomes visible.
INP (Interaction to Next Paint): Measures interactivity. Shows how quickly the page responds to user interactions.
CLS (Cumulative Layout Shift): Measures visual stability. Shows how much content shifts during page load.
FCP (First Contentful Paint): Measures loading performance. Shows when the first content becomes visible.
TTFB (Time to First Byte): Measures server response time. Shows how quickly the server responds to requests.
<h4>How It Works</h4>
<ol>
<li>Data Collection: The plugin automatically collects Core Web Vitals data from your visitors</li>
<li>Analysis: Data is processed and analyzed to provide meaningful insights</li>
<li>Reporting: View comprehensive reports in your WordPress admin dashboard</li>
<li>Alerts: Get notified when performance issues are detected</li>
<li>Integration: Send data to Google Analytics 4 for enhanced reporting</li>
</ol>
<h4>Use Cases</h4>
<ul>
<li>SEO Optimization: Improve your Core Web Vitals scores for better search rankings</li>
<li>Performance Monitoring: Track performance trends over time</li>
<li>Issue Detection: Identify performance problems before they impact users</li>
<li>Competitive Analysis: Compare your performance against industry standards</li>
<li>User Experience: Ensure your site provides a great experience for all visitors</li>
</ul>
<h4>Privacy Compliance</h4>
The plugin is designed with privacy in mind: 
* No personal data is collected 
* IP addresses are anonymized 
* GDPR-compliant data collection 
* Users can opt-out of data collection 
* Data is stored securely on your server
<h4>Data Collection & Third-Party Services</h4>
What Data is Collected:
This plugin collects anonymous performance metrics from your website visitors to help you monitor and improve your site’s Core Web Vitals scores. The following data is collected:
<ul>
<li>Performance Metrics: LCP (Largest Contentful Paint), INP (Interaction to Next Paint), CLS (Cumulative Layout Shift), FCP (First Contentful Paint), and TTFB (Time to First Byte) values</li>
<li>Page Information: Page URL and page title where metrics were collected</li>
<li>Technical Information: Device type (mobile/tablet/desktop), connection type, user agent string</li>
<li>Anonymized Location: IP addresses are anonymized by removing the last octet (IPv4) or last 80 bits (IPv6)</li>
<li>Session ID: A randomly generated session identifier (not linked to any personal information)</li>
</ul>
When Data is Collected:
<ul>
<li>Data collection can be enabled or disabled at any time in the plugin settings</li>
<li>You can configure a sample rate (1-100%) to control what percentage of visitors have their metrics collected</li>
<li>Data is collected only when visitors load pages on your website</li>
<li>Collection is disabled by default until you enable monitoring in settings</li>
</ul>
Where Data is Stored:
<ul>
<li>All performance data is stored locally in your WordPress database on your own server</li>
<li>No data is sent to external servers or third-party services by default</li>
<li>You have full control over data retention periods (configurable from 1-365 days)</li>
</ul>
Optional Third-Party Service – Google Analytics 4:
If you choose to enable the optional Google Analytics 4 (GA4) integration:
<ul>
<li>Core Web Vitals data will be sent to Google Analytics using the Measurement Protocol API</li>
<li>You must provide your own GA4 Measurement ID and API Secret</li>
<li>Data sent to GA4 is subject to Google’s privacy policy and terms of service</li>
<li>Google Analytics 4 Privacy Policy: https://policies.google.com/privacy</li>
<li>Google Analytics 4 Terms of Service: https://marketingplatform.google.com/about/analytics/terms/us/</li>
<li>This integration is completely optional and disabled by default</li>
</ul>
User Consent:
<ul>
<li>Site administrators have full control over enabling/disabling data collection</li>
<li>Monitoring can be turned off at any time from the plugin settings</li>
<li>The plugin does not track individual users or collect personal information</li>
<li>All collected data is aggregated and anonymized for performance analysis only</li>
</ul>
Data Security:
<ul>
<li>All REST API endpoints use proper authentication and validation</li>
<li>Input data is sanitized and validated before storage</li>
<li>Database queries use prepared statements to prevent SQL injection</li>
<li>The plugin follows WordPress security best practices</li>
</ul>
<h3>Support</h3>
For support, feature requests, or bug reports, please visit our <a href="https://nandann.com/contact" rel="nofollow ugc">support page</a> or create an issue on our GitHub repository.
<h3>Privacy Policy</h3>
This plugin collects anonymous performance data to help you improve your website’s Core Web Vitals scores. No personal information is collected, and all data is stored securely on your server. For more information, please review our privacy policy.
<h3>About the Developer</h3>
Prakhar Bhatia is a professional WordPress developer and troubleshooter with extensive experience in:
<ul>
<li>WordPress Troubleshooting: Expert diagnosis and resolution of complex WordPress issues, performance optimization, and security hardening</li>
<li>Custom Development: Bespoke WordPress plugins, themes, and custom functionality tailored to specific business needs</li>
<li>Site Migration & Hosting: Seamless website migrations, hosting optimization, and server configuration for peak performance</li>
<li>Security & Maintenance: Comprehensive security audits, malware removal, and ongoing maintenance to keep sites secure</li>
</ul>
Nandann Creative Agency specializes in WordPress development solutions for businesses of all sizes.
Contact: prakhar@nandann.com | Website: https://nandann.com

Core Web Vitals – Real User Monitoring (RUM)

Track Core Web Vitals (LCP, INP, CLS, FCP, TTFB) from real users with comprehensive analytics, GA4 integration, and performance insights.

Image Prioritizer vs Core Web Vitals – Real User Monitoring (RUM)