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

27
functions-addon.php
View File

@@ -280,18 +280,31 @@ function roi_render_component(string $componentName): string {
// =============================================================================
/**
* Registra el hook para inyectar CSS crítico en <head>
* Registra hooks para inyectar CSS crítico en <head>
*
* FLUJO:
* 1. wp_head (priority 1) → CriticalCSSService::render()
* 2. CriticalCSSService consulta BD por componentes con is_critical=true
* 3. Genera CSS usando los métodos públicos generateCSS() de los Renderers
* 4. Output: <style id="roi-critical-css">...</style>
* 5. Cuando los Renderers ejecutan, 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 con is_critical=true
* - Genera CSS usando los métodos públicos generateCSS() de los Renderers
* - Output: <style id="roi-critical-css">...</style>
*
* 3. Bootstrap completo se carga diferido (media="print" + onload)
* - Ver Inc/enqueue-scripts.php
*
* 4. Cuando los Renderers ejecutan, detectan is_critical y omiten CSS inline
*/
add_action('after_setup_theme', function() {
$criticalCSSService = roi_get_critical_css_service();
$hooksRegistrar = new \ROITheme\Shared\Infrastructure\Wordpress\CriticalCSSHooksRegistrar($criticalCSSService);
$criticalBootstrapService = \ROITheme\Shared\Infrastructure\Services\CriticalBootstrapService::getInstance();
$hooksRegistrar = new \ROITheme\Shared\Infrastructure\Wordpress\CriticalCSSHooksRegistrar(
$criticalCSSService,
$criticalBootstrapService
);
$hooksRegistrar->register();
});