Adam Silverstein

<p>Display web vitals element in a block.</p>


Web Vitals Block

Blinkspeed

<p>Boost your WordPress site speed with advanced AI optimization techniques. Improve Core Web Vitals, achieve higher scores on Google PageSpeed Insights and GTmetrix, and deliver a faster, smoother browsing experience for your visitors.</p>
<h3>Features</h3>
<ul>
<li>CSS Optimization – Minification, combination, and critical CSS loading</li>
<li>JavaScript Optimization – Minification, combination, and deferred loading</li>
<li>HTML Caching – Page-level caching for improved performance</li>
<li>Image Optimization – WebP conversion and lazy loading</li>
<li>CDN Support – Content Delivery Network integration</li>
<li>Lazy Loading – Images, iframes, and videos</li>
<li>Asset Preloading – Preload critical assets like images and fonts for faster rendering</li>
<li>Admin Bar Integration – Quick cache purge from admin bar</li>
<li>Multisite Support – Network-wide and individual site management</li>
<li>Web Vitals Monitoring – Core Web Vitals tracking and logging</li>
<li>Change Logging – Track all settings changes</li>
</ul>
<h3>Free vs Premium Features</h3>
<p>BlinkSpeed offers a powerful free version with essential performance optimizations. A premium license unlocks advanced AI-powered optimization features for the entire website.</p>
<h4>Free Version (Included with Plugin)</h4>
<p>The following features are available for free and work on all pages:</p>
<ul>
<li>HTML page caching</li>
<li>CSS minification</li>
<li>JavaScript minification</li>
<li>JavaScript lazy loading</li>
<li>Image lazy loading</li>
<li>Browser caching</li>
<li>GZIP compression</li>
<li>Cache management tools</li>
<li>Multisite compatibility</li>
<li>Critical CSS generation (Home Page Only)</li>
<li>Advanced image optimization and WebP conversion (Home Page Only)</li>
</ul>
<p>These optimizations help significantly improve page load speed and overall performance without requiring a license key.</p>
<h4>Premium Version (Requires License Key)</h4>
<p>The premium version unlocks advanced AI-powered optimization features for all pages:</p>
<ul>
<li>HTML page caching</li>
<li>CSS minification</li>
<li>JavaScript minification</li>
<li>JavaScript lazy loading</li>
<li>Image lazy loading</li>
<li>Browser caching</li>
<li>GZIP compression</li>
<li>Cache management tools</li>
<li>Multisite compatibility</li>
<li>Critical CSS generation (All Pages)</li>
<li>Advanced image optimization and WebP conversion (All Pages)</li>
</ul>
<p>Without a license key, <strong>critical CSS and advanced image optimization are available only for the homepage</strong>.</p>
<h4>Why Premium Features Require a License</h4>
<p>Some advanced optimizations rely on BlinkSpeed cloud services to process CSS, images, and performance data. These services require additional server resources, so a license key is required to enable them for the entire website.</p>
<p>You can activate your license key from:</p>
<p>BlinkSpeed <span aria-hidden="true" class="wp-exclude-emoji">→</span> General Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> License Key</p>
<h3>Requirements</h3>
<ul>
<li>WordPress 5.0 or higher</li>
<li>PHP 7.4 or higher</li>
<li>PHP XML extension</li>
<li>PHP GD extension</li>
</ul>
<h3>Plugin Architecture</h3>
<p>The plugin follows WordPress coding standards and modular architecture.</p>
<h4>Main Files</h4>
<ul>
<li><code>blinkspeed.php</code> – Main plugin file with header and initialization</li>
<li><code>includes/Plugin.php</code> – Main plugin class orchestrating functionality</li>
<li><code>includes/Core.php</code> – Core functionality and settings management</li>
<li><code>includes/Frontend.php</code> – Frontend optimization handling</li>
<li><code>includes/Database.php</code> – Database operations and table management</li>
</ul>
<h4>Admin Structure</h4>
<ul>
<li><code>admin/Admin.php</code> – Main admin class handling menu and settings</li>
<li><code>admin/Admin_Bar.php</code> – Admin bar cache purge functionality</li>
<li><code>admin/admin-page.php</code> – Admin page template</li>
</ul>
<h3>Configuration</h3>
<h4>General Settings</h4>
<ul>
<li>Enable Optimization – Turn on/off optimization features</li>
<li>License Key – Enter your BlinkSpeed license key</li>
</ul>
<h4>CSS Optimization</h4>
<ul>
<li>CSS Optimization – Enable CSS minification and combination</li>
<li>Load Critical CSS – Inline critical CSS for above-the-fold content</li>
</ul>
<h4>JavaScript Optimization</h4>
<ul>
<li>JavaScript Optimization – Enable JS minification and combination</li>
<li>Load Combined JS – Choose when to load combined JavaScript files</li>
</ul>
<h4>HTML Caching</h4>
<ul>
<li>HTML Caching – Enable page-level caching</li>
<li>Cache Expiry Time – Set cache expiration time in seconds</li>
</ul>
<h4>Image Optimization</h4>
<ul>
<li>Convert JPG to WebP – Automatically convert JPG images to WebP</li>
<li>Convert PNG to WebP – Automatically convert PNG images to WebP</li>
<li>Lazy Loading – Enable lazy loading for images</li>
</ul>
<h3>Usage</h3>
<h4>Basic Setup</h4>
<ol>
<li>Activate the plugin.</li>
<li>Go to BlinkSpeed settings.</li>
<li>Configure optimization preferences.</li>
<li>Save settings.</li>
</ol>
<h4>Cache Management</h4>
<ul>
<li>Purge cache directly from the WordPress admin bar.</li>
<li>CSS/JS cache can be purged globally or per page.</li>
<li>HTML cache can be purged globally or per page.</li>
<li>Critical CSS cache can be purged per page.</li>
</ul>
<h4>Monitoring</h4>
<ul>
<li>View Web Vitals logs for performance insights.</li>
<li>Review change logs for settings updates.</li>
<li>Monitor cache sizes and performance.</li>
</ul>
<h3>Hooks</h3>
<h4>Actions</h4>
<ul>
<li><code>blinkspeed_init</code> – Plugin initialization</li>
<li><code>blinkspeed_settings_saved</code> – Settings saved</li>
<li><code>blinkspeed_cache_cleared</code> – Cache cleared</li>
</ul>
<h4>Filters</h4>
<ul>
<li><code>blinkspeed_settings</code> – Modify plugin settings</li>
<li><code>blinkspeed_cache_path</code> – Customize cache paths</li>
<li><code>blinkspeed_exclude_urls</code> – Exclude URLs from optimization</li>
</ul>
<h3>Database Tables</h3>
<p>The plugin creates the following tables:</p>
<ul>
<li><code>wp_blinkspeed_core_web_vitals</code> – Stores Web Vitals performance data</li>
<li><code>wp_blinkspeed_change_logs</code> – Stores settings change logs</li>
<li><code>wp_blinkspeed_site_urls</code> – Stores site URL management data</li>
</ul>
<h3>Cache Structure</h3>
<p>wp-content/cache/<br />
├── critical-css/<br />
└── bs-cache/</p>
<h3>Performance Impact</h3>
<ul>
<li>CSS/JS Optimization – Reduces file sizes by 20-40%</li>
<li>HTML Caching – Improves page load times by 50-80%</li>
<li>Image Optimization – Reduces image sizes by 25-50%</li>
<li>Lazy Loading – Improves initial page load performance</li>
</ul>
<h3>Common Issues</h3>
<ol>
<li>Permission errors – Ensure cache directory permissions are correct.</li>
<li>Cache not working – Verify optimization settings are enabled.</li>
<li>Images not converting – Confirm the GD extension is installed.</li>
<li>Admin bar missing – Check user capability settings.</li>
</ol>
<h3>Security</h3>
<ul>
<li>Input sanitization for all settings</li>
<li>Nonce verification for forms</li>
<li>Capability checks for admin actions</li>
<li>Secure file operations</li>
</ul>
<h3>Multisite Support</h3>
<ul>
<li>Network-wide settings management</li>
<li>Individual site overrides</li>
<li>Centralized cache control</li>
<li>Site-specific optimization rules</li>
</ul>
<h3>External Services</h3>
<p>This plugin connects to the BlinkSpeed API service:</p>
<p>https://rest.blinkspeed.ai</p>
<p>These services provide CSS optimization, image optimization, and license verification.</p>
<h4>Data Sent</h4>
<ul>
<li>CSS file URLs and content for optimization</li>
<li>Image URLs for WebP conversion</li>
<li>License key for verification</li>
</ul>
<h4>Service Information</h4>
<p>Service Provider: https://blinkspeed.ai<br />
Support Policy: https://blinkspeed.ai/support-policy/<br />
Terms of Service: https://blinkspeed.ai/term-of-service/</p>
<p>All communication happens over secure HTTPS connections.</p>
<h3>Minified Assets</h3>
<p>Some JavaScript files are distributed in minified form for performance.</p>
<p>Third-party libraries:</p>
<ul>
<li>assets/js/web-vitals.iife.js – https://github.com/GoogleChrome/web-vitals</li>
<li>assets/js/diff.min.js – https://github.com/kpdecker/jsdiff</li>
</ul>
<p>Plugin-specific scripts:</p>
<ul>
<li>assets/js/img-lazyload.js – https://blinkspeed.ai/resources/js/img-lazyload.js</li>
<li>assets/js/script-load.min.js – https://blinkspeed.ai/resources/js/script-load.js</li>
</ul>


BlinkSpeed

Boost your WordPress site speed with advanced AI optimization techniques.

Web Vitals Block vs BlinkSpeed