Jan Hoek

<p>Vital Video is a WordPress block plugin designed to improve Core Web Vitals performance when displaying YouTube videos.</p>
<p>Instead of traditional embedding, it provides a lightweight, performance-optimized solution that first loads a clickable video thumbnail.</p>
<p>The Vital Video Block doesn’t play videos in the WordPress editor. It’s designed to prioritize performance and user experience on your frontend. To test video behavior, simply preview your post or page.</p>
<h3>Features</h3>
<ul>
<li>Performance-first YouTube video display.  </li>
<li>Automatic video thumbnail and title retrieval.  </li>
<li>WebP image support for faster image loading.  </li>
<li>Customizable aspect ratios (4:3 and 16:9).  </li>
<li>Displays the video title in the image.  </li>
<li>Multiple thumbnail quality options.  </li>
<li>Minimal initial page load impact.  </li>
<li>Option to disable WebP images if unavailable.  </li>
<li>Advanced video playback controls.  </li>
<li>Uses YouTube’s no-cookie thumbnail service.  </li>
<li>Respects modern browser autoplay policies.  </li>
<li>Alt text matches the video title.</li>
<li>Thumbnail dimensions set based on selected image size:
<ul>
<li>HQ (480×320): Default size  </li>
<li>SD (640×480): Standard size  </li>
<li>MAX (1280×720): Highest available resolution</li>
</ul>
</li>
</ul>
<h3>Vital Video Settings</h3>
<ul>
<li><strong>Aspect Ratio</strong>: Choose between 16:9 and 4:3.  </li>
<li><strong>Mute Toggle</strong>: Control video playback behavior.  </li>
<li><strong>Thumbnail Quality</strong>: Select from High, Standard, or Maximum resolution.  </li>
<li><strong>Disable WebP</strong>: Turn off WebP usage if unavailable.</li>
</ul>
<h3>Mute Toggle</h3>
<p>The Mute Toggle feature is designed primarily for mobile devices, adhering to browser autoplay policies.</p>
<p><strong>Mute Toggle Off (Sound On):</strong></p>
<p>Videos require two clicks to start playing:</p>
<ol>
<li>The first click loads the video.  </li>
<li>The second click begins playback. Ideal for maintaining user control and preventing unexpected audio.</li>
</ol>
<p><strong>Mute Toggle On (Sound Off):</strong></p>
<ul>
<li>Videos play with a single click.  </li>
<li>Automatically starts muted.  </li>
<li>Perfect for situations where immediate video playback is desired.  </li>
<li>Complies with browser autoplay restrictions.</li>
</ul>
<h3>Disable WebP Images</h3>
<ul>
<li><strong>WebP is enabled by default.</strong> Most thumbnails will use the WebP format.  </li>
<li>However, if you encounter a dummy placeholder image, try selecting a different thumbnail size to see if another WebP version exists.  </li>
<li>If no WebP images are available, you can enable the “Disable WebP Images” option as a last resort. This – will use fallback formats like JPG instead.</li>
</ul>
<p><em>Only use “Disable WebP Images” when absolutely necessary!</em></p>
<h3>External Services</h3>
<p>This plugin connects to YouTube’s services to embed videos and retrieve video information:</p>
<p><strong>YouTube Video Service:</strong></p>
<ul>
<li>The plugin connects to YouTube’s embed service (youtube-nocookie.com) to display videos</li>
<li>When a video is played, it loads the video player from YouTube’s servers</li>
<li>YouTube’s terms of service: https://www.youtube.com/static?template=terms</li>
<li>YouTube’s privacy policy: https://policies.google.com/privacy</li>
</ul>
<p><strong>YouTube oEmbed API:</strong></p>
<ul>
<li>Used to fetch video titles when adding videos to your content</li>
<li>Sends the YouTube video ID to retrieve the video title</li>
<li>API documentation: https://developers.google.com/youtube/v3/docs/videos</li>
</ul>
<p><strong>YouTube Thumbnail Service:</strong></p>
<ul>
<li>Retrieves video thumbnail images from i.ytimg.com</li>
<li>Only loads thumbnails for videos you’ve embedded</li>
<li>No personal data is sent to this service</li>
</ul>
<p><strong>Note:</strong> This plugin uses YouTube’s privacy-enhanced mode by default, which helps protect your visitors’ privacy by not setting cookies until the video is played.</p>
<h3>Contributing</h3>
<p>Contributions are welcome! You can support Vital Video in various ways:</p>
<ul>
<li>Write about the plugin on your blog or share it on social media.  </li>
<li><a href="https://translate.wordpress.org/projects/wp-plugins/vital-video-block/" rel="nofollow ugc">Translate the plugin into your language</a> using your WordPress.org account.  </li>
<li><a href="https://wordpress.org/support/plugin/vital-video-block/reviews/#new-post" rel="ugc">Review the plugin here on WordPress.org</a>.</li>
</ul>


Vital Video Block

A YouTube block optimized for performance, allowing you to embed YouTube videos without harming your Core Web Vitals.

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.

Vital Video Block vs BlinkSpeed