perf(pagespeed): Preload todas las fuentes + diferir CSS no críticos

Fase 4.3 optimización CLS:
- Preload Poppins 400, 500, 600, 700 (antes solo 400, 600)
- Preload bootstrap-icons font
- Diferir: bootstrap-icons, accessibility, responsive, utilities CSS

Objetivo: CLS 0.109 → ≤0.10, Performance 96 → 100

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-27 16:00:57 -06:00
parent 83717771c0
commit 23a3c4d074
2 changed files with 36 additions and 9 deletions

View File

@@ -20,6 +20,7 @@ if (!defined('ABSPATH')) {
* @since 1.0.21
*/
define('ROI_DEFERRED_CSS', [
// Componentes específicos (below the fold)
'roi-badges',
'roi-pagination',
'roi-generic-tables',
@@ -27,6 +28,11 @@ define('ROI_DEFERRED_CSS', [
'roi-animations',
'roi-youtube-facade',
'roi-tables-apu',
// CSS globales no críticos
'roi-utilities',
'roi-accessibility',
'roi-responsive',
'bootstrap-icons',
]);
/**
@@ -98,12 +104,13 @@ function roi_enqueue_bootstrap() {
// Bootstrap Icons CSS - SUBSET OPTIMIZADO (Fase 4.1 PageSpeed)
// Original: 211 KB (2050 iconos) -> Subset: 13 KB (104 iconos) = 94% reduccion
// DIFERIDO: Fase 4.3 - no crítico para renderizado inicial
wp_enqueue_style(
'bootstrap-icons',
get_template_directory_uri() . '/Assets/Vendor/bootstrap-icons-subset.min.css',
array('roi-bootstrap'),
ROI_VERSION,
'all'
'print'
);
// Variables CSS del Template RDash (NIVEL 1 - BLOQUEANTE - Issue #48)
@@ -361,13 +368,13 @@ add_action('wp_enqueue_scripts', 'roi_enqueue_main_javascript', 11);
*/
function roi_enqueue_accessibility() {
// Accessibility CSS
// CORREGIDO: Fase 4.2 PageSpeed - dependencia 'roi-theme-style' no existía
// DIFERIDO: Fase 4.3 - no crítico para renderizado inicial
wp_enqueue_style(
'roi-accessibility',
get_template_directory_uri() . '/Assets/css/css-global-accessibility.css',
array('roi-main-style'), // Corregido: 'roi-theme-style' -> 'roi-main-style'
array('roi-main-style'),
ROI_VERSION,
'all'
'print'
);
// Accessibility JavaScript
@@ -449,21 +456,23 @@ function roi_enqueue_theme_styles() {
);
// Theme Responsive Styles
// DIFERIDO: Fase 4.3 - media queries no críticas para primer paint
wp_enqueue_style(
'roi-responsive',
get_template_directory_uri() . '/Assets/css/css-global-responsive.css',
array('roi-bootstrap'), // Cambiado de 'roi-theme' a 'roi-bootstrap'
array('roi-bootstrap'),
'1.0.0',
'all'
'print'
);
// Theme Utilities
// DIFERIDO: Fase 4.3 - clases utilitarias no críticas
wp_enqueue_style(
'roi-utilities',
get_template_directory_uri() . '/Assets/css/css-global-utilities.css',
array('roi-bootstrap'), // Cambiado de 'roi-theme' a 'roi-bootstrap'
array('roi-bootstrap'),
'1.0.0',
'all'
'print'
);
// Print Styles

View File

@@ -348,18 +348,36 @@ function roi_preload_critical_resources() {
esc_url( $theme_uri . '/Assets/css/css-global-fonts.css' )
);
// Fase 4.3 PageSpeed: Preload de fuentes Poppins críticas
// Fase 4.3 PageSpeed: Preload de TODAS las fuentes Poppins para eliminar CLS
// Regular (400) - texto del body
printf(
'<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
esc_url( $theme_uri . '/Assets/fonts/poppins-v24-latin-regular.woff2' )
);
// Medium (500) - usado en algunos elementos
printf(
'<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
esc_url( $theme_uri . '/Assets/fonts/poppins-v24-latin-500.woff2' )
);
// Semibold (600) - headings y elementos destacados
printf(
'<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
esc_url( $theme_uri . '/Assets/fonts/poppins-v24-latin-600.woff2' )
);
// Bold (700) - títulos principales
printf(
'<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
esc_url( $theme_uri . '/Assets/fonts/poppins-v24-latin-700.woff2' )
);
// Bootstrap Icons font
printf(
'<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
esc_url( $theme_uri . '/Assets/Vendor/fonts/bootstrap-icons-subset.woff2' )
);
}
add_action( 'wp_head', 'roi_preload_critical_resources', 2 );