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 * @since 1.0.21
*/ */
define('ROI_DEFERRED_CSS', [ define('ROI_DEFERRED_CSS', [
// Componentes específicos (below the fold)
'roi-badges', 'roi-badges',
'roi-pagination', 'roi-pagination',
'roi-generic-tables', 'roi-generic-tables',
@@ -27,6 +28,11 @@ define('ROI_DEFERRED_CSS', [
'roi-animations', 'roi-animations',
'roi-youtube-facade', 'roi-youtube-facade',
'roi-tables-apu', '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) // Bootstrap Icons CSS - SUBSET OPTIMIZADO (Fase 4.1 PageSpeed)
// Original: 211 KB (2050 iconos) -> Subset: 13 KB (104 iconos) = 94% reduccion // 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( wp_enqueue_style(
'bootstrap-icons', 'bootstrap-icons',
get_template_directory_uri() . '/Assets/Vendor/bootstrap-icons-subset.min.css', get_template_directory_uri() . '/Assets/Vendor/bootstrap-icons-subset.min.css',
array('roi-bootstrap'), array('roi-bootstrap'),
ROI_VERSION, ROI_VERSION,
'all' 'print'
); );
// Variables CSS del Template RDash (NIVEL 1 - BLOQUEANTE - Issue #48) // 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() { function roi_enqueue_accessibility() {
// Accessibility CSS // 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( wp_enqueue_style(
'roi-accessibility', 'roi-accessibility',
get_template_directory_uri() . '/Assets/css/css-global-accessibility.css', 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, ROI_VERSION,
'all' 'print'
); );
// Accessibility JavaScript // Accessibility JavaScript
@@ -449,21 +456,23 @@ function roi_enqueue_theme_styles() {
); );
// Theme Responsive Styles // Theme Responsive Styles
// DIFERIDO: Fase 4.3 - media queries no críticas para primer paint
wp_enqueue_style( wp_enqueue_style(
'roi-responsive', 'roi-responsive',
get_template_directory_uri() . '/Assets/css/css-global-responsive.css', 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', '1.0.0',
'all' 'print'
); );
// Theme Utilities // Theme Utilities
// DIFERIDO: Fase 4.3 - clases utilitarias no críticas
wp_enqueue_style( wp_enqueue_style(
'roi-utilities', 'roi-utilities',
get_template_directory_uri() . '/Assets/css/css-global-utilities.css', 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', '1.0.0',
'all' 'print'
); );
// Print Styles // Print Styles

View File

@@ -348,18 +348,36 @@ function roi_preload_critical_resources() {
esc_url( $theme_uri . '/Assets/css/css-global-fonts.css' ) 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 // Regular (400) - texto del body
printf( printf(
'<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n", '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
esc_url( $theme_uri . '/Assets/fonts/poppins-v24-latin-regular.woff2' ) 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 // Semibold (600) - headings y elementos destacados
printf( printf(
'<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n", '<link rel="preload" href="%s" as="font" type="font/woff2" crossorigin>' . "\n",
esc_url( $theme_uri . '/Assets/fonts/poppins-v24-latin-600.woff2' ) 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 ); add_action( 'wp_head', 'roi_preload_critical_resources', 2 );