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:
FrankZamora
2025-11-29 12:12:57 -06:00
parent 62a0f17b21
commit b4071bf598
2 changed files with 67 additions and 7 deletions

View File

@@ -25,8 +25,10 @@ if (!defined('ABSPATH')) {
* @updated 1.0.23 - Bootstrap diferido gracias a critical-bootstrap.css
*/
define('ROI_DEFERRED_CSS', [
// Bootstrap (diferido - critical inline via CriticalBootstrapService)
'roi-bootstrap',
// Critical CSS inline - estos archivos se difieren
'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)
'roi-badges',
'roi-pagination',
@@ -82,15 +84,18 @@ add_filter('style_loader_tag', 'roi_add_deferred_css_onload', 10, 2);
* - Mejorar rendimiento (sin requests externos)
* - Cumplimiento GDPR (sin tracking de Google)
* - 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() {
// Fonts CSS local con @font-face para Poppins self-hosted
// Fonts CSS local - DIFERIDO (critical @font-face inline)
wp_enqueue_style(
'roi-fonts',
get_template_directory_uri() . '/Assets/css/css-global-fonts.css',
array(),
'1.1.0', // Bump version: self-hosted fonts
'all'
'1.1.1', // Bump version: deferred loading
'print' // DIFERIDO - @font-face inline en critical CSS
);
}
@@ -135,13 +140,14 @@ function roi_enqueue_bootstrap() {
'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(
'roi-variables',
get_template_directory_uri() . '/Assets/css/css-global-variables.css',
array('roi-bootstrap'),
ROI_VERSION,
'all'
'print' // DIFERIDO - variables críticas inline
);
// Bootstrap JS Bundle - in footer with defer