perf: Defer Bootstrap with inline critical CSS for LCP optimization

- 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

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)