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

22
Inc/enqueue-scripts.php
View File

@@ -17,12 +17,16 @@ if (!defined('ABSPATH')) {
* Estos CSS se cargan con media="print" y onload="this.media='all'"
* para evitar bloquear el renderizado inicial.
*
* NOTA: Bootstrap NO está diferido porque causa CLS alto (0.954).
* Bootstrap debe cargar bloqueante para evitar layout shifts.
* NOTA: Bootstrap AHORA está diferido porque CriticalBootstrapService
* inyecta las clases críticas (grid, navbar, utilities) inline en <head>.
* Esto permite diferir el bootstrap-subset.min.css sin causar CLS.
*
* @since 1.0.21
* @updated 1.0.23 - Bootstrap diferido gracias a critical-bootstrap.css
*/
define('ROI_DEFERRED_CSS', [
// Bootstrap (diferido - critical inline via CriticalBootstrapService)
'roi-bootstrap',
// Componentes específicos (below the fold)
'roi-badges',
'roi-pagination',
@@ -100,18 +104,24 @@ add_action('wp_enqueue_scripts', 'roi_enqueue_fonts', 1);
* - Reducción: 36% menos CSS para parsear
* - Generado con PurgeCSS: node build-bootstrap-subset.js
*
* NOTA: Bootstrap debe cargar BLOQUEANTE (media='all').
* Diferirlo causa CLS alto (0.954) por layout shifts.
* NOTA: Bootstrap AHORA es DIFERIDO (media='print' + onload).
* CriticalBootstrapService inyecta inline las clases críticas:
* - Grid system (row, col-*)
* - Navbar component
* - Flexbox utilities
* - Spacing utilities
* Esto evita CLS mientras mejora LCP significativamente.
*/
function roi_enqueue_bootstrap() {
// Bootstrap CSS SUBSET - BLOQUEANTE para evitar CLS
// Bootstrap CSS SUBSET - DIFERIDO (critical CSS es inline)
// Original: 227KB -> Subset: 145KB (36% reducción)
// Critical: ~20KB inline en <head> via CriticalBootstrapService
wp_enqueue_style(
'roi-bootstrap',
get_template_directory_uri() . '/Assets/Vendor/Bootstrap/Css/bootstrap-subset.min.css',
array('roi-fonts'),
'5.3.2-subset',
'all' // Bloqueante - diferirlo causa CLS alto
'print' // DIFERIDO - critical CSS inline evita CLS
);
// Bootstrap Icons CSS - SUBSET OPTIMIZADO (Fase 4.1 PageSpeed)

5
Inc/performance.php
View File

@@ -336,10 +336,11 @@ add_filter( 'wp_resource_hints', 'roi_add_resource_hints', 10, 2 );
function roi_preload_critical_resources() {
$theme_uri = get_template_directory_uri();
// Preload del CSS de Bootstrap (crítico para el layout)
// Preload del CSS de Bootstrap SUBSET (crítico para el layout)
// IMPORTANTE: Debe coincidir con el archivo encolado en enqueue-scripts.php
printf(
'<link rel="preload" href="%s" as="style">' . "\n",
esc_url( $theme_uri . '/Assets/Vendor/Bootstrap/Css/bootstrap.min.css' )
esc_url( $theme_uri . '/Assets/Vendor/Bootstrap/Css/bootstrap-subset.min.css' )
);
// Preload del CSS de fuentes (crítico para evitar FOIT/FOUT)