fix(cls): load css-tablas-apu.css async to prevent render blocking
- 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
@@ -841,29 +841,137 @@ h6 { font-size: 1rem; }
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
CLS PREVENTION - Tables & Main Content
|
||||
CLS PREVENTION - Tables APU (Critical Column Widths)
|
||||
Previene CLS al definir anchos de columna ANTES de que cargue css-tablas-apu.css
|
||||
========================================================================== */
|
||||
|
||||
/* Prevenir CLS en tablas APU */
|
||||
/* Contenedor con overflow para scroll horizontal */
|
||||
.analisis,
|
||||
.desglose {
|
||||
margin: 2rem 0;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Tabla base con table-layout: fixed */
|
||||
.analisis table,
|
||||
.desglose table,
|
||||
table.table {
|
||||
table-layout: fixed;
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
/* Anchos de columna fijos - CRITICO para prevenir CLS */
|
||||
.analisis table td:nth-child(1),
|
||||
.analisis table th:nth-child(1),
|
||||
.desglose table td:nth-child(1),
|
||||
.desglose table th:nth-child(1) {
|
||||
width: 150px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.analisis table td:nth-child(2),
|
||||
.analisis table th:nth-child(2),
|
||||
.desglose table td:nth-child(2),
|
||||
.desglose table th:nth-child(2) {
|
||||
width: auto;
|
||||
min-width: 300px;
|
||||
}
|
||||
|
||||
.analisis table td:nth-child(3),
|
||||
.analisis table th:nth-child(3),
|
||||
.desglose table td:nth-child(3),
|
||||
.desglose table th:nth-child(3) {
|
||||
width: 80px;
|
||||
min-width: 60px;
|
||||
}
|
||||
|
||||
.analisis table td:nth-child(4),
|
||||
.analisis table th:nth-child(4),
|
||||
.desglose table td:nth-child(4),
|
||||
.desglose table th:nth-child(4) {
|
||||
width: 110px;
|
||||
min-width: 90px;
|
||||
}
|
||||
|
||||
.analisis table td:nth-child(5),
|
||||
.analisis table th:nth-child(5),
|
||||
.desglose table td:nth-child(5),
|
||||
.desglose table th:nth-child(5) {
|
||||
width: 120px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
.analisis table td:nth-child(6),
|
||||
.analisis table th:nth-child(6),
|
||||
.desglose table td:nth-child(6),
|
||||
.desglose table th:nth-child(6) {
|
||||
width: 120px;
|
||||
min-width: 100px;
|
||||
}
|
||||
|
||||
/* Filas con altura mínima */
|
||||
.analisis table tr,
|
||||
.desglose table tr,
|
||||
table.table tr {
|
||||
min-height: 40px;
|
||||
}
|
||||
|
||||
/* Celdas base */
|
||||
.analisis table td,
|
||||
.analisis table th,
|
||||
.desglose table td,
|
||||
.desglose table th,
|
||||
table.table td,
|
||||
table.table th {
|
||||
padding: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
vertical-align: middle;
|
||||
border: 1px solid #dee2e6;
|
||||
border: none;
|
||||
}
|
||||
|
||||
/* Filas especiales - estilos base para prevenir CLS */
|
||||
.analisis table tr.section-header,
|
||||
.desglose table tr.section-header {
|
||||
background-color: #e9ecef;
|
||||
}
|
||||
|
||||
.analisis table tr.subtotal-row,
|
||||
.desglose table tr.subtotal-row {
|
||||
background-color: rgba(255, 133, 0, 0.15);
|
||||
}
|
||||
|
||||
.analisis table tr.total-row,
|
||||
.desglose table tr.total-row {
|
||||
background: linear-gradient(135deg, #1e3a5f 0%, #2c5282 100%);
|
||||
}
|
||||
|
||||
.analisis table tr.total-row td,
|
||||
.desglose table tr.total-row td {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* Responsive - móvil */
|
||||
@media (max-width: 767px) {
|
||||
.analisis table td:nth-child(1),
|
||||
.desglose table td:nth-child(1) {
|
||||
width: 80px;
|
||||
min-width: 60px;
|
||||
}
|
||||
.analisis table td:nth-child(2),
|
||||
.desglose table td:nth-child(2) {
|
||||
min-width: 150px;
|
||||
}
|
||||
.analisis table td:nth-child(3),
|
||||
.analisis table td:nth-child(4),
|
||||
.analisis table td:nth-child(5),
|
||||
.analisis table td:nth-child(6),
|
||||
.desglose table td:nth-child(3),
|
||||
.desglose table td:nth-child(4),
|
||||
.desglose table td:nth-child(5),
|
||||
.desglose table td:nth-child(6) {
|
||||
min-width: 70px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Site main ya tiene flex-grow: 1 arriba - no forzar min-height */
|
||||
|
||||
@@ -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
|
||||
|
||||
Reference in New Issue
Block a user