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

perf: Defer Bootstrap with inline critical CSS for LCP optimization

Browse Source 
- Add grid system (row, col-*) to critical-bootstrap.css to prevent CLS
- Add text utilities, sizing, spacing, and alert component to critical CSS
- Enable CriticalBootstrapService to inline critical Bootstrap in <head>
- Defer bootstrap-subset.min.css (21KB) via media=print + onload
- Fix preload pointing to wrong Bootstrap file (was 227KB, now 147KB)

Expected improvement: ~970ms reduction in render-blocking CSS

🤖 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 12:05:50 -06:00
parent 5d4523e49a
commit 62a0f17b21
4 changed files with 221 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
functions-addon.php
View File

@@ -283,17 +283,24 @@ function roi_render_component(string $componentName): string {
* Registra hooks para inyectar CSS crítico en <head>
*
* FLUJO:
* 1. wp_head (priority 1) → CriticalCSSService::render()
* 1. wp_head (priority 0) → CriticalBootstrapService::render()
* - Inyecta critical-bootstrap.css inline (grid, navbar, utilities)
* - Permite diferir bootstrap-subset.min.css
*
* 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>
*
* NOTA: CriticalBootstrapService está DESHABILITADO porque diferir
* Bootstrap causa CLS alto (0.954). Bootstrap carga bloqueante.
*
* Cuando los Renderers ejecutan, detectan is_critical y omiten CSS inline.
* IMPORTANTE: CriticalBootstrapService HABILITADO para mejorar LCP.
* critical-bootstrap.css incluye grid system para evitar CLS.
*/
add_action('after_setup_theme', function() {
// 1. Critical Bootstrap CSS (priority 0) - inline bootstrap crítico
$criticalBootstrapService = \ROITheme\Shared\Infrastructure\Services\CriticalBootstrapService::getInstance();
add_action('wp_head', [$criticalBootstrapService, 'render'], 0);
// 2. Critical Component CSS (priority 1) - CSS de componentes críticos
$criticalCSSService = roi_get_critical_css_service();
$hooksRegistrar = new \ROITheme\Shared\Infrastructure\Wordpress\CriticalCSSHooksRegistrar($criticalCSSService);
$hooksRegistrar->register();