feat(pagespeed): implement YouTube Facade Pattern - Phase 2.4
PageSpeed Optimization to reduce TBT by ~2000ms: - Add YoutubeFacade module following Clean Architecture - Replace YouTube iframes with thumbnail + play button - Load real iframe only on user click (lazy-load) - Reduces initial page blocking time significantly Files added: - Public/YoutubeFacade/Infrastructure/Wordpress/YoutubeFacadeHooksRegistrar.php - Public/YoutubeFacade/Infrastructure/Services/YoutubeFacadeContentFilter.php - Public/YoutubeFacade/Infrastructure/Ui/YoutubeFacadeRenderer.php - Public/YoutubeFacade/Infrastructure/Ui/Assets/Css/youtube-facade.css - Public/YoutubeFacade/Infrastructure/Ui/Assets/Js/youtube-facade.js 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
@@ -0,0 +1,54 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace ROITheme\Public\YoutubeFacade\Infrastructure\Services;
|
||||
|
||||
use ROITheme\Public\YoutubeFacade\Infrastructure\Ui\YoutubeFacadeRenderer;
|
||||
|
||||
/**
|
||||
* Filters post content to replace YouTube iframes with facades
|
||||
*
|
||||
* Detects YouTube iframes (including those wrapped in .video-wrapper)
|
||||
* and replaces them with lightweight facade HTML.
|
||||
*
|
||||
* @package ROITheme\Public\YoutubeFacade
|
||||
* @since 1.0.6
|
||||
*/
|
||||
final class YoutubeFacadeContentFilter
|
||||
{
|
||||
private YoutubeFacadeRenderer $renderer;
|
||||
|
||||
public function __construct(YoutubeFacadeRenderer $renderer)
|
||||
{
|
||||
$this->renderer = $renderer;
|
||||
}
|
||||
|
||||
/**
|
||||
* Filter content to replace YouTube iframes with facades
|
||||
*
|
||||
* @param string $content Post content
|
||||
* @return string Filtered content
|
||||
*/
|
||||
public function filter(string $content): string
|
||||
{
|
||||
// Match YouTube iframes (with or without video-wrapper)
|
||||
// Pattern handles both youtube.com/embed/ and youtube-nocookie.com/embed/
|
||||
$pattern = '/<div class="video-wrapper">\s*<iframe[^>]*src="https?:\/\/(?:www\.)?(?:youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9_-]+)[^"]*"[^>]*><\/iframe>\s*<\/div>/is';
|
||||
|
||||
$content = preg_replace_callback($pattern, function ($matches) {
|
||||
$videoId = $matches[1];
|
||||
return $this->renderer->render($videoId);
|
||||
}, $content);
|
||||
|
||||
// Also match standalone iframes without wrapper
|
||||
$patternStandalone = '/<iframe[^>]*src="https?:\/\/(?:www\.)?(?:youtube\.com|youtube-nocookie\.com)\/embed\/([a-zA-Z0-9_-]+)[^"]*"[^>]*><\/iframe>/is';
|
||||
|
||||
$content = preg_replace_callback($patternStandalone, function ($matches) {
|
||||
$videoId = $matches[1];
|
||||
return $this->renderer->render($videoId);
|
||||
}, $content);
|
||||
|
||||
return $content;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,112 @@
|
||||
/**
|
||||
* YouTube Facade Styles
|
||||
*
|
||||
* PageSpeed Optimization Phase 2.4:
|
||||
* Styles for the YouTube facade pattern (thumbnail + play button)
|
||||
*
|
||||
* @package ROITheme
|
||||
* @since 1.0.6
|
||||
*/
|
||||
|
||||
/* ========================================
|
||||
FACADE CONTAINER
|
||||
Inherits video-wrapper base styles
|
||||
======================================== */
|
||||
|
||||
.youtube-facade {
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
aspect-ratio: 16 / 9;
|
||||
background-color: #000;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
THUMBNAIL
|
||||
======================================== */
|
||||
|
||||
.youtube-facade__thumbnail {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
PLAY BUTTON
|
||||
======================================== */
|
||||
|
||||
.youtube-facade__play {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
border: none;
|
||||
background: transparent;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
z-index: 1;
|
||||
transition: transform 0.2s ease, filter 0.2s ease;
|
||||
}
|
||||
|
||||
.youtube-facade__play:hover {
|
||||
transform: translate(-50%, -50%) scale(1.1);
|
||||
}
|
||||
|
||||
.youtube-facade__play:hover .youtube-facade__play-bg {
|
||||
fill: #f00;
|
||||
fill-opacity: 1;
|
||||
}
|
||||
|
||||
.youtube-facade__play:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.youtube-facade__play:focus-visible {
|
||||
outline: 2px solid #fff;
|
||||
outline-offset: 4px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
IFRAME (after activation)
|
||||
======================================== */
|
||||
|
||||
.youtube-facade iframe {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
/* ========================================
|
||||
LOADING STATE
|
||||
======================================== */
|
||||
|
||||
.youtube-facade--loading .youtube-facade__play {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.youtube-facade--loading::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: -24px 0 0 -24px;
|
||||
border: 4px solid rgba(255, 255, 255, 0.3);
|
||||
border-top-color: #fff;
|
||||
border-radius: 50%;
|
||||
animation: youtube-facade-spin 0.8s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes youtube-facade-spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* YouTube Facade - Lazy Load Handler
|
||||
*
|
||||
* PageSpeed Optimization Phase 2.4:
|
||||
* - Loads YouTube iframe only on user click
|
||||
* - Reduces TBT by ~2000ms
|
||||
*
|
||||
* @package ROITheme
|
||||
* @since 1.0.6
|
||||
*/
|
||||
|
||||
(function() {
|
||||
'use strict';
|
||||
|
||||
/**
|
||||
* Initialize facade click handlers
|
||||
*/
|
||||
function initYoutubeFacades() {
|
||||
var facades = document.querySelectorAll('.youtube-facade[data-video-id]');
|
||||
|
||||
facades.forEach(function(facade) {
|
||||
facade.addEventListener('click', handleFacadeClick);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Handle click on facade - load real iframe
|
||||
* @param {Event} event Click event
|
||||
*/
|
||||
function handleFacadeClick(event) {
|
||||
event.preventDefault();
|
||||
|
||||
var facade = event.currentTarget;
|
||||
var videoId = facade.getAttribute('data-video-id');
|
||||
|
||||
if (!videoId) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Show loading state
|
||||
facade.classList.add('youtube-facade--loading');
|
||||
|
||||
// Create iframe
|
||||
var iframe = document.createElement('iframe');
|
||||
iframe.setAttribute('src', 'https://www.youtube-nocookie.com/embed/' + videoId + '?autoplay=1&rel=0');
|
||||
iframe.setAttribute('title', 'YouTube video');
|
||||
iframe.setAttribute('frameborder', '0');
|
||||
iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
|
||||
iframe.setAttribute('allowfullscreen', '');
|
||||
|
||||
// Wait for iframe to load before showing
|
||||
iframe.addEventListener('load', function() {
|
||||
facade.classList.remove('youtube-facade--loading');
|
||||
});
|
||||
|
||||
// Clear facade content and add iframe
|
||||
facade.innerHTML = '';
|
||||
facade.appendChild(iframe);
|
||||
|
||||
// Remove click handler (one-time activation)
|
||||
facade.removeEventListener('click', handleFacadeClick);
|
||||
facade.style.cursor = 'default';
|
||||
}
|
||||
|
||||
// Initialize when DOM is ready
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', initYoutubeFacades);
|
||||
} else {
|
||||
initYoutubeFacades();
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,55 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace ROITheme\Public\YoutubeFacade\Infrastructure\Ui;
|
||||
|
||||
/**
|
||||
* Renders YouTube facade HTML (thumbnail + play button)
|
||||
*
|
||||
* PageSpeed Optimization:
|
||||
* - Shows YouTube thumbnail image (lazy-loaded)
|
||||
* - Displays play button overlay
|
||||
* - Real iframe loads only on user click (via JS)
|
||||
* - Reduces TBT by ~2000ms
|
||||
*
|
||||
* @package ROITheme\Public\YoutubeFacade
|
||||
* @since 1.0.6
|
||||
*/
|
||||
final class YoutubeFacadeRenderer
|
||||
{
|
||||
/**
|
||||
* Render facade HTML for a YouTube video
|
||||
*
|
||||
* @param string $videoId YouTube video ID
|
||||
* @return string Facade HTML
|
||||
*/
|
||||
public function render(string $videoId): string
|
||||
{
|
||||
$videoId = esc_attr($videoId);
|
||||
|
||||
// Use maxresdefault with fallback to hqdefault
|
||||
// YouTube provides thumbnails at: maxresdefault, sddefault, hqdefault, mqdefault, default
|
||||
$thumbnailUrl = "https://i.ytimg.com/vi/{$videoId}/maxresdefault.jpg";
|
||||
|
||||
$html = <<<HTML
|
||||
<div class="youtube-facade video-wrapper" data-video-id="{$videoId}">
|
||||
<img
|
||||
class="youtube-facade__thumbnail"
|
||||
src="{$thumbnailUrl}"
|
||||
alt="Video thumbnail"
|
||||
loading="lazy"
|
||||
onerror="this.src='https://i.ytimg.com/vi/{$videoId}/hqdefault.jpg'"
|
||||
/>
|
||||
<button class="youtube-facade__play" aria-label="Play video">
|
||||
<svg viewBox="0 0 68 48" width="68" height="48">
|
||||
<path class="youtube-facade__play-bg" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z" fill="#212121" fill-opacity="0.8"/>
|
||||
<path class="youtube-facade__play-icon" d="M 45,24 27,14 27,34" fill="#fff"/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
HTML;
|
||||
|
||||
return $html;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,70 @@
|
||||
<?php
|
||||
|
||||
declare(strict_types=1);
|
||||
|
||||
namespace ROITheme\Public\YoutubeFacade\Infrastructure\Wordpress;
|
||||
|
||||
use ROITheme\Public\YoutubeFacade\Infrastructure\Services\YoutubeFacadeContentFilter;
|
||||
|
||||
/**
|
||||
* Registers WordPress hooks for YouTube Facade Pattern
|
||||
*
|
||||
* PageSpeed Optimization Phase 2.4:
|
||||
* - Reduces TBT by ~2000ms by lazy-loading YouTube iframes
|
||||
* - Shows thumbnail + play button instead of full iframe
|
||||
* - Loads real iframe only on user click
|
||||
*
|
||||
* @package ROITheme\Public\YoutubeFacade
|
||||
* @since 1.0.6
|
||||
*/
|
||||
final class YoutubeFacadeHooksRegistrar
|
||||
{
|
||||
private YoutubeFacadeContentFilter $contentFilter;
|
||||
|
||||
public function __construct(YoutubeFacadeContentFilter $contentFilter)
|
||||
{
|
||||
$this->contentFilter = $contentFilter;
|
||||
}
|
||||
|
||||
/**
|
||||
* Register all hooks
|
||||
*/
|
||||
public function register(): void
|
||||
{
|
||||
// Filter post content to replace YouTube iframes with facades
|
||||
add_filter('the_content', [$this->contentFilter, 'filter'], 20);
|
||||
|
||||
// Enqueue facade assets
|
||||
add_action('wp_enqueue_scripts', [$this, 'enqueueAssets'], 15);
|
||||
}
|
||||
|
||||
/**
|
||||
* Enqueue CSS and JS for YouTube facades
|
||||
*/
|
||||
public function enqueueAssets(): void
|
||||
{
|
||||
// Only on single posts where videos might appear
|
||||
if (!is_single()) {
|
||||
return;
|
||||
}
|
||||
|
||||
wp_enqueue_style(
|
||||
'roi-youtube-facade',
|
||||
get_template_directory_uri() . '/Public/YoutubeFacade/Infrastructure/Ui/Assets/Css/youtube-facade.css',
|
||||
[],
|
||||
ROI_VERSION,
|
||||
'all'
|
||||
);
|
||||
|
||||
wp_enqueue_script(
|
||||
'roi-youtube-facade',
|
||||
get_template_directory_uri() . '/Public/YoutubeFacade/Infrastructure/Ui/Assets/Js/youtube-facade.js',
|
||||
[],
|
||||
ROI_VERSION,
|
||||
[
|
||||
'in_footer' => true,
|
||||
'strategy' => 'defer',
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -156,6 +156,17 @@ try {
|
||||
);
|
||||
$themeSettingsInjector->register();
|
||||
|
||||
// === YOUTUBE FACADE (PageSpeed Optimization Phase 2.4) ===
|
||||
// Lazy-load YouTube iframes to reduce TBT by ~2000ms
|
||||
$youtubeFacadeRenderer = new \ROITheme\Public\YoutubeFacade\Infrastructure\Ui\YoutubeFacadeRenderer();
|
||||
$youtubeFacadeFilter = new \ROITheme\Public\YoutubeFacade\Infrastructure\Services\YoutubeFacadeContentFilter(
|
||||
$youtubeFacadeRenderer
|
||||
);
|
||||
$youtubeFacadeHooksRegistrar = new \ROITheme\Public\YoutubeFacade\Infrastructure\Wordpress\YoutubeFacadeHooksRegistrar(
|
||||
$youtubeFacadeFilter
|
||||
);
|
||||
$youtubeFacadeHooksRegistrar->register();
|
||||
|
||||
// Log en modo debug
|
||||
if (defined('WP_DEBUG') && WP_DEBUG) {
|
||||
error_log('ROI Theme: Admin Panel initialized successfully');
|
||||
|
||||
Reference in New Issue
Block a user