d5a2fd2702
- Created Assets/css/critical-bootstrap.css (~10KB subset) Contains only Bootstrap classes used in above-the-fold components: container, navbar, flexbox, dropdown, spacing utilities - Created CriticalBootstrapService (singleton) Injects minified critical Bootstrap in <head> at priority 0 Output: <style id="roi-critical-bootstrap">...</style> - Modified enqueue-scripts.php Bootstrap now loads with media="print" + onload="this.media='all'" Full 31KB Bootstrap loads async, doesn't block rendering - Updated CriticalCSSHooksRegistrar Now registers both CriticalBootstrapService (priority 0) and CriticalCSSService (priority 1) Flow: 1. wp_head (priority 0) → Critical Bootstrap (~10KB inline) 2. wp_head (priority 1) → Critical Component CSS (~4KB inline) 3. Bootstrap full (31KB) loads deferred, non-blocking Expected PageSpeed improvement: ~400-600ms LCP reduction 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
81 lines
2.5 KiB
PHP
81 lines
2.5 KiB
PHP
<?php
|
|
declare(strict_types=1);
|
|
|
|
namespace ROITheme\Shared\Infrastructure\Wordpress;
|
|
|
|
use ROITheme\Shared\Infrastructure\Services\CriticalCSSService;
|
|
use ROITheme\Shared\Infrastructure\Services\CriticalBootstrapService;
|
|
|
|
/**
|
|
* Registra hooks wp_head para inyectar CSS crítico
|
|
*
|
|
* RESPONSABILIDAD:
|
|
* - Registrar hook wp_head (priority 0) para Critical Bootstrap
|
|
* - Registrar hook wp_head (priority 1) para Critical Component CSS
|
|
* - Delegar renderizado a servicios especializados
|
|
*
|
|
* FLUJO:
|
|
* 1. wp_head (priority 0) → CriticalBootstrapService::render()
|
|
* - Lee Assets/css/critical-bootstrap.css (subset ~8KB)
|
|
* - Output: <style id="roi-critical-bootstrap">...</style>
|
|
*
|
|
* 2. wp_head (priority 1) → CriticalCSSService::render()
|
|
* - Consulta BD por componentes is_critical=true
|
|
* - Genera CSS usando Renderers
|
|
* - Output: <style id="roi-critical-css">...</style>
|
|
*
|
|
* 3. Bootstrap completo se carga diferido (media="print" + onload)
|
|
* - No bloquea renderizado inicial
|
|
*
|
|
* PATRÓN:
|
|
* - SRP: Solo registra hooks, delega lógica a servicios
|
|
*
|
|
* UBICACIÓN: Infrastructure/Wordpress
|
|
*
|
|
* @package ROITheme\Shared\Infrastructure\Wordpress
|
|
*/
|
|
final class CriticalCSSHooksRegistrar
|
|
{
|
|
public function __construct(
|
|
private readonly CriticalCSSService $criticalCSSService,
|
|
private readonly CriticalBootstrapService $criticalBootstrapService
|
|
) {}
|
|
|
|
/**
|
|
* Registrar hooks de WordPress
|
|
*/
|
|
public function register(): void
|
|
{
|
|
// Priority 0 = Critical Bootstrap (primero, antes de componentes)
|
|
add_action('wp_head', [$this, 'renderCriticalBootstrap'], 0);
|
|
|
|
// Priority 1 = Critical Component CSS (después de Bootstrap)
|
|
add_action('wp_head', [$this, 'renderCriticalCSS'], 1);
|
|
}
|
|
|
|
/**
|
|
* Callback para wp_head - Critical Bootstrap
|
|
*
|
|
* Inyecta subset de Bootstrap (~8KB) inline:
|
|
* - Container, flexbox, navbar, dropdown
|
|
* - Output: <style id="roi-critical-bootstrap">...</style>
|
|
*/
|
|
public function renderCriticalBootstrap(): void
|
|
{
|
|
$this->criticalBootstrapService->render();
|
|
}
|
|
|
|
/**
|
|
* Callback para wp_head - Critical Component CSS
|
|
*
|
|
* Ejecuta CriticalCSSService que:
|
|
* - Consulta BD por componentes con is_critical=true
|
|
* - Genera CSS usando los Renderers
|
|
* - Output: <style id="roi-critical-css">...</style>
|
|
*/
|
|
public function renderCriticalCSS(): void
|
|
{
|
|
$this->criticalCSSService->render();
|
|
}
|
|
}
|