git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(cls): load css-tablas-apu.css async to prevent render blocking

Browse Source 
- Add complete APU table column widths to critical-bootstrap.css
- Load css-tablas-apu.css with media="print" + onload for async loading
- Critical styles (column widths, row backgrounds) now inline in <head>
- Full CSS loads non-blocking after initial render

Fixes PageSpeed "Render-blocking CSS" warning (120ms savings)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-12-01 11:28:53 -06:00
parent d648e7ff4c
commit c4dcdad14b
2 changed files with 151 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
Inc/enqueue-scripts.php
View File

@@ -558,22 +558,55 @@ add_action('wp_enqueue_scripts', 'roi_enqueue_theme_styles', 13);
// function roi_enqueue_social_share_styles() - REMOVED
/**
* Enqueue APU Tables styles
* Enqueue APU Tables styles - ASYNC LOADING
*
* OPTIMIZACIÓN: Los estilos críticos de tablas APU (anchos de columna, filas especiales)
* están en critical-bootstrap.css que se inyecta inline en <head> via CriticalBootstrapService.
*
* Este CSS completo carga de forma ASYNC para no bloquear el renderizado:
* - media="print" evita bloqueo inicial
* - onload="this.media='all'" aplica estilos cuando termina de cargar
*
* @see Assets/Css/critical-bootstrap.css - CSS crítico inline
* @see Shared/Infrastructure/Services/CriticalBootstrapService.php
*/
function roi_enqueue_apu_tables_styles() {
// APU Tables CSS
// CRITICO: Las tablas APU son contenido principal, CSS debe cargar inmediatamente
// para prevenir CLS (layout shift cuando estilos se aplican tarde)
wp_enqueue_style(
'roi-tables-apu',
get_template_directory_uri() . '/Assets/css/css-tablas-apu.css',
array('roi-bootstrap'),
ROI_VERSION,
'all' // Critico: cargar inmediatamente para prevenir CLS
'print' // media="print" para carga async - se cambia a 'all' via JS
);
}
add_action('wp_enqueue_scripts', 'roi_enqueue_apu_tables_styles', 5); // Priority 5 = temprano
add_action('wp_enqueue_scripts', 'roi_enqueue_apu_tables_styles', 5);
/**
* Modificar tag de css-tablas-apu.css para carga async
*
* Agrega onload="this.media='all'" para aplicar estilos después de cargar
* sin bloquear el renderizado inicial.
*
* @param string $tag Tag HTML del link
* @param string $handle Nombre del estilo
* @return string Tag modificado
*/
function roi_async_apu_tables_css_tag($tag, $handle) {
if ($handle === 'roi-tables-apu') {
// Agregar onload para cambiar media a 'all' cuando cargue
$tag = str_replace(
"media='print'",
"media='print' onload=\"this.media='all'\"",
$tag
);
// Agregar noscript fallback
$noscript_url = get_template_directory_uri() . '/Assets/css/css-tablas-apu.css?ver=' . ROI_VERSION;
$tag .= '<noscript><link rel="stylesheet" href="' . esc_url($noscript_url) . '"></noscript>';
}
return $tag;
}
add_filter('style_loader_tag', 'roi_async_apu_tables_css_tag', 10, 2);
/**
* Enqueue APU Tables auto-class JavaScript