From 83717771c0e820a2029d813f7ea2a4db6ab3695c Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Thu, 27 Nov 2025 15:45:01 -0600 Subject: [PATCH] feat(pagespeed): Fase 4.3 - Preload fuentes para reducir CLS MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Agregar preload de Poppins regular (400) y semibold (600) - Agregar fallback font con size-adjust para minimizar layout shift - Actualizar font stack con 'Poppins Fallback' Impacto esperado: CLS 0.133 → ~0.05-0.08 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- Assets/css/css-global-fonts.css | 23 +++++++++++++++++++---- Inc/performance.php | 29 ++++++++++++++++++++++------- 2 files changed, 41 insertions(+), 11 deletions(-) diff --git a/Assets/css/css-global-fonts.css b/Assets/css/css-global-fonts.css index a6f9c527..eef9ad0d 100644 --- a/Assets/css/css-global-fonts.css +++ b/Assets/css/css-global-fonts.css @@ -24,11 +24,12 @@ --font-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif; - /* Fuente primaria - Poppins según template y documentación */ - --font-primary: 'Poppins', sans-serif; + /* Fuente primaria - Poppins con fallback ajustado (Fase 4.3 PageSpeed) + 'Poppins Fallback' tiene size-adjust para reducir CLS durante font swap */ + --font-primary: 'Poppins', 'Poppins Fallback', sans-serif; - /* Fuente para encabezados - Poppins según template */ - --font-headings: 'Poppins', sans-serif; + /* Fuente para encabezados - Poppins con fallback ajustado */ + --font-headings: 'Poppins', 'Poppins Fallback', sans-serif; /* Fuente para código (monospace) */ --font-mono: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', @@ -56,8 +57,22 @@ Pesos incluidos: 400, 500, 600, 700 Formato: WOFF2 (mejor compresión) + Fase 4.3 PageSpeed: Fallback con size-adjust para reducir CLS + - size-adjust: 106% ajusta métricas del fallback para coincidir con Poppins + - Reduce layout shift cuando las fuentes se intercambian + ============================================ */ +/* Fallback font con métricas ajustadas para Poppins */ +@font-face { + font-family: 'Poppins Fallback'; + src: local('Arial'), local('Helvetica Neue'), local('Helvetica'), local('sans-serif'); + size-adjust: 106%; + ascent-override: 105%; + descent-override: 35%; + line-gap-override: 10%; +} + @font-face { font-family: 'Poppins'; src: url('../fonts/poppins-v24-latin-regular.woff2') format('woff2'); diff --git a/Inc/performance.php b/Inc/performance.php index 8439cf7e..2504bfae 100644 --- a/Inc/performance.php +++ b/Inc/performance.php @@ -321,29 +321,44 @@ function roi_add_resource_hints( $urls, $relation_type ) { add_filter( 'wp_resource_hints', 'roi_add_resource_hints', 10, 2 ); /** - * Preload de recursos críticos para mejorar LCP + * Preload de recursos críticos para mejorar LCP y reducir CLS * * Preload indica al navegador que descargue recursos críticos lo antes posible. * Útil para fuentes, CSS crítico, y imágenes hero. * + * Fase 4.3 PageSpeed: Preload de fuentes .woff2 para reducir CLS + * - Sin preload: navegador descubre fuentes después de parsear CSS (tarde) + * - Con preload: fuentes se descargan en paralelo con CSS (temprano) + * * @since 1.0.0 + * @updated 1.0.22 Agregado preload de fuentes Poppins para reducir CLS */ function roi_preload_critical_resources() { - // NOTA: Fuentes Poppins se cargan desde Google Fonts (enqueue-scripts.php) - // No se necesita preload de fuentes locales + $theme_uri = get_template_directory_uri(); // Preload del CSS de Bootstrap (crítico para el layout) - $bootstrap_css = get_template_directory_uri() . '/Assets/Vendor/Bootstrap/Css/bootstrap.min.css'; printf( '' . "\n", - esc_url( $bootstrap_css ) + esc_url( $theme_uri . '/Assets/Vendor/Bootstrap/Css/bootstrap.min.css' ) ); // Preload del CSS de fuentes (crítico para evitar FOIT/FOUT) - $fonts_css = get_template_directory_uri() . '/Assets/css/css-global-fonts.css'; printf( '' . "\n", - esc_url( $fonts_css ) + esc_url( $theme_uri . '/Assets/css/css-global-fonts.css' ) + ); + + // Fase 4.3 PageSpeed: Preload de fuentes Poppins críticas + // Regular (400) - texto del body + printf( + '' . "\n", + esc_url( $theme_uri . '/Assets/fonts/poppins-v24-latin-regular.woff2' ) + ); + + // Semibold (600) - headings y elementos destacados + printf( + '' . "\n", + esc_url( $theme_uri . '/Assets/fonts/poppins-v24-latin-600.woff2' ) ); } add_action( 'wp_head', 'roi_preload_critical_resources', 2 );