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 );