perf(bootstrap): Reduce Bootstrap CSS de 227KB a 145KB con PurgeCSS

- Genera bootstrap-subset.min.css con solo clases usadas (36% reduccion)
- Actualiza enqueue-scripts.php para usar el subset
- Agrega scripts de build: npm run build:bootstrap
- Mejora LCP al reducir tiempo de parseo CSS

Impacto estimado:
- Bootstrap: 227KB -> 145KB (-82KB)
- Tiempo parseo CSS: ~800ms -> ~500ms
- LCP: mejora esperada ~300-500ms

🤖 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 11:26:18 -06:00
parent 371af1f7e5
commit b7ae8cac21
6 changed files with 1190 additions and 4 deletions

View File

@@ -95,17 +95,22 @@ add_action('wp_enqueue_scripts', 'roi_enqueue_fonts', 1);
/**
* Enqueue Bootstrap 5 styles and scripts
*
* OPTIMIZACIÓN LCP (PageSpeed Fase 5):
* - Usa bootstrap-subset.min.css (145KB) en lugar de bootstrap.min.css (227KB)
* - 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.
* CriticalBootstrapService queda disponible para futuras optimizaciones.
*/
function roi_enqueue_bootstrap() {
// Bootstrap CSS - BLOQUEANTE para evitar CLS
// Bootstrap CSS SUBSET - BLOQUEANTE para evitar CLS
// Original: 227KB -> Subset: 145KB (36% reducción)
wp_enqueue_style(
'roi-bootstrap',
get_template_directory_uri() . '/Assets/Vendor/Bootstrap/Css/bootstrap.min.css',
get_template_directory_uri() . '/Assets/Vendor/Bootstrap/Css/bootstrap-subset.min.css',
array('roi-fonts'),
'5.3.2',
'5.3.2-subset',
'all' // Bloqueante - diferirlo causa CLS alto
);