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

116
Assets/css/critical-bootstrap.css
View File

@@ -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 */