From c4dcdad14ba869165d8996ed836253262bb6d236 Mon Sep 17 00:00:00 2001 From: FrankZamora Date: Mon, 1 Dec 2025 11:28:53 -0600 Subject: [PATCH] fix(cls): load css-tablas-apu.css async to prevent render blocking MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 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 - 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 --- Assets/css/critical-bootstrap.css | 116 ++++++++++++++++++++++++++++-- Inc/enqueue-scripts.php | 45 ++++++++++-- 2 files changed, 151 insertions(+), 10 deletions(-) diff --git a/Assets/css/critical-bootstrap.css b/Assets/css/critical-bootstrap.css index c6e5027a..419fb73c 100644 --- a/Assets/css/critical-bootstrap.css +++ b/Assets/css/critical-bootstrap.css @@ -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 */ diff --git a/Inc/enqueue-scripts.php b/Inc/enqueue-scripts.php index e413c78c..4c20811d 100644 --- a/Inc/enqueue-scripts.php +++ b/Inc/enqueue-scripts.php @@ -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 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 .= ''; + } + return $tag; +} +add_filter('style_loader_tag', 'roi_async_apu_tables_css_tag', 10, 2); /** * Enqueue APU Tables auto-class JavaScript