git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: defer Bootstrap CSS with critical subset inline

Browse Source 
- 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>
This commit is contained in:
FrankZamora
2025-11-29 10:26:24 -06:00
parent ce0179a134
commit d5a2fd2702
5 changed files with 691 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

47
Shared/Infrastructure/Wordpress/CriticalCSSHooksRegistrar.php
View File

@@ -4,22 +4,31 @@ declare(strict_types=1);
namespace ROITheme\Shared\Infrastructure\Wordpress;
use ROITheme\Shared\Infrastructure\Services\CriticalCSSService;
use ROITheme\Shared\Infrastructure\Services\CriticalBootstrapService;
/**
* Registra hook wp_head para inyectar CSS crítico
* Registra hooks wp_head para inyectar CSS crítico
*
* RESPONSABILIDAD:
* - Registrar hook wp_head (priority 1)
* - Delegar renderizado a CriticalCSSService
* - 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 1) → renderCriticalCSS()
* 2. CriticalCSSService consulta BD por componentes is_critical=true
* 3. Genera CSS usando Renderers y lo inyecta en <head>
* 4. Los Renderers detectan is_critical y omiten CSS inline
* 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 hook, delega lógica a CriticalCSSService
* - SRP: Solo registra hooks, delega lógica a servicios
*
* UBICACIÓN: Infrastructure/Wordpress
*
@@ -28,7 +37,8 @@ use ROITheme\Shared\Infrastructure\Services\CriticalCSSService;
final class CriticalCSSHooksRegistrar
{
public function __construct(
private readonly CriticalCSSService $criticalCSSService
private readonly CriticalCSSService $criticalCSSService,
private readonly CriticalBootstrapService $criticalBootstrapService
) {}
/**
@@ -36,12 +46,27 @@ final class CriticalCSSHooksRegistrar
*/
public function register(): void
{
// Priority 1 = muy temprano en <head>, antes de otros estilos
// 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
* 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