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:
@@ -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
|
||||||
|
|||||||
@@ -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 );
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user