perf: Defer fonts.css and variables.css, inline critical CSS
- Add @font-face declarations to critical-bootstrap.css inline - Add critical CSS variables (colors, fonts) inline - Defer fonts.css (utilities only, @font-face inline) - Defer variables.css (critical vars inline) Now only style.css is render-blocking (~19KB) All other CSS deferred with media=print + onload 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
@@ -14,6 +14,60 @@
|
|||||||
* @see Shared/Infrastructure/Services/CriticalBootstrapService.php
|
* @see Shared/Infrastructure/Services/CriticalBootstrapService.php
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
/* ==========================================================================
|
||||||
|
CRITICAL FONTS (Poppins - LCP optimization)
|
||||||
|
========================================================================== */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Poppins Fallback';
|
||||||
|
src: local('Arial'), local('Helvetica Neue'), local('sans-serif');
|
||||||
|
size-adjust: 106%;
|
||||||
|
ascent-override: 105%;
|
||||||
|
descent-override: 35%;
|
||||||
|
line-gap-override: 10%;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Poppins';
|
||||||
|
src: url('/wp-content/themes/roi-theme/Assets/fonts/poppins-v24-latin-regular.woff2') format('woff2');
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Poppins';
|
||||||
|
src: url('/wp-content/themes/roi-theme/Assets/fonts/poppins-v24-latin-600.woff2') format('woff2');
|
||||||
|
font-weight: 600;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Poppins';
|
||||||
|
src: url('/wp-content/themes/roi-theme/Assets/fonts/poppins-v24-latin-700.woff2') format('woff2');
|
||||||
|
font-weight: 700;
|
||||||
|
font-style: normal;
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
:root {
|
||||||
|
/* Fonts */
|
||||||
|
--font-primary: 'Poppins', 'Poppins Fallback', sans-serif;
|
||||||
|
--bs-body-font-family: 'Poppins', 'Poppins Fallback', sans-serif;
|
||||||
|
|
||||||
|
/* Theme Colors (críticos para above-the-fold) */
|
||||||
|
--color-navy-dark: #0E2337;
|
||||||
|
--color-navy-medium: #1e3a5f;
|
||||||
|
--color-orange-primary: #FF8600;
|
||||||
|
--color-orange-hover: #e67a00;
|
||||||
|
--bs-primary: #0d6efd;
|
||||||
|
--bs-white: #fff;
|
||||||
|
--bs-body-color: #212529;
|
||||||
|
--bs-body-bg: #fff;
|
||||||
|
--bs-link-color: #0d6efd;
|
||||||
|
--bs-link-hover-color: #0a58ca;
|
||||||
|
|
||||||
|
/* Spacing */
|
||||||
|
--bs-gutter-x: 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
/* ==========================================================================
|
/* ==========================================================================
|
||||||
BOX SIZING & RESETS (Bootstrap Reboot crítico)
|
BOX SIZING & RESETS (Bootstrap Reboot crítico)
|
||||||
========================================================================== */
|
========================================================================== */
|
||||||
|
|||||||
@@ -25,8 +25,10 @@ if (!defined('ABSPATH')) {
|
|||||||
* @updated 1.0.23 - Bootstrap diferido gracias a critical-bootstrap.css
|
* @updated 1.0.23 - Bootstrap diferido gracias a critical-bootstrap.css
|
||||||
*/
|
*/
|
||||||
define('ROI_DEFERRED_CSS', [
|
define('ROI_DEFERRED_CSS', [
|
||||||
// Bootstrap (diferido - critical inline via CriticalBootstrapService)
|
// Critical CSS inline - estos archivos se difieren
|
||||||
'roi-bootstrap',
|
'roi-fonts', // @font-face inline en critical-bootstrap.css
|
||||||
|
'roi-bootstrap', // Critical inline via CriticalBootstrapService
|
||||||
|
'roi-variables', // Variables ahora inline en critical CSS
|
||||||
// Componentes específicos (below the fold)
|
// Componentes específicos (below the fold)
|
||||||
'roi-badges',
|
'roi-badges',
|
||||||
'roi-pagination',
|
'roi-pagination',
|
||||||
@@ -82,15 +84,18 @@ add_filter('style_loader_tag', 'roi_add_deferred_css_onload', 10, 2);
|
|||||||
* - Mejorar rendimiento (sin requests externos)
|
* - Mejorar rendimiento (sin requests externos)
|
||||||
* - Cumplimiento GDPR (sin tracking de Google)
|
* - Cumplimiento GDPR (sin tracking de Google)
|
||||||
* - Evitar bloqueo de renderizado
|
* - Evitar bloqueo de renderizado
|
||||||
|
*
|
||||||
|
* NOTA: @font-face críticos están inline en critical-bootstrap.css
|
||||||
|
* Este archivo ahora es DIFERIDO (solo utilidades de texto)
|
||||||
*/
|
*/
|
||||||
function roi_enqueue_fonts() {
|
function roi_enqueue_fonts() {
|
||||||
// Fonts CSS local con @font-face para Poppins self-hosted
|
// Fonts CSS local - DIFERIDO (critical @font-face inline)
|
||||||
wp_enqueue_style(
|
wp_enqueue_style(
|
||||||
'roi-fonts',
|
'roi-fonts',
|
||||||
get_template_directory_uri() . '/Assets/css/css-global-fonts.css',
|
get_template_directory_uri() . '/Assets/css/css-global-fonts.css',
|
||||||
array(),
|
array(),
|
||||||
'1.1.0', // Bump version: self-hosted fonts
|
'1.1.1', // Bump version: deferred loading
|
||||||
'all'
|
'print' // DIFERIDO - @font-face inline en critical CSS
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -135,13 +140,14 @@ function roi_enqueue_bootstrap() {
|
|||||||
'print'
|
'print'
|
||||||
);
|
);
|
||||||
|
|
||||||
// Variables CSS del Template RDash (NIVEL 1 - BLOQUEANTE - Issue #48)
|
// Variables CSS del Template RDash - DIFERIDO
|
||||||
|
// Variables críticas inline en critical-bootstrap.css
|
||||||
wp_enqueue_style(
|
wp_enqueue_style(
|
||||||
'roi-variables',
|
'roi-variables',
|
||||||
get_template_directory_uri() . '/Assets/css/css-global-variables.css',
|
get_template_directory_uri() . '/Assets/css/css-global-variables.css',
|
||||||
array('roi-bootstrap'),
|
array('roi-bootstrap'),
|
||||||
ROI_VERSION,
|
ROI_VERSION,
|
||||||
'all'
|
'print' // DIFERIDO - variables críticas inline
|
||||||
);
|
);
|
||||||
|
|
||||||
// Bootstrap JS Bundle - in footer with defer
|
// Bootstrap JS Bundle - in footer with defer
|
||||||
|
|||||||
Reference in New Issue
Block a user