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:
@@ -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',
|
||||
]
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user