fix(CLS): move APU table row classes from JS to PHP server-side

PROBLEM:
- apu-tables-auto-class.js was adding CSS classes to table rows after DOMContentLoaded
- This DOM manipulation caused CLS of 0.692 in Lab Data (PageSpeed Insights)
- body.wp-singular was the main culprit with 0.692 CLS contribution

SOLUTION:
- Added roi_add_apu_row_classes() function in Inc/apu-tables.php
- This applies the same logic server-side during the_content filter
- Classes (section-header, subtotal-row, total-row) are now in HTML from first render
- Disabled the JS script in Inc/enqueue-scripts.php

This should significantly reduce Lab Data CLS (target: < 0.1)

🤖 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:12:34 -06:00
parent 842f529816
commit d648e7ff4c
2 changed files with 131 additions and 18 deletions

View File

@@ -18,6 +18,10 @@ if (!defined('ABSPATH')) {
* Detecta tablas con el atributo data-apu y las envuelve
* con la clase .analisis para aplicar estilos específicos.
*
* TAMBIÉN agrega clases a filas especiales (section-header, subtotal-row, total-row)
* del lado del servidor para PREVENIR CLS. Anteriormente esto se hacía con JS
* en apu-tables-auto-class.js, lo cual causaba CLS de 0.692 en Lab Data.
*
* @param string $content El contenido del post
* @return string El contenido procesado
*/
@@ -43,10 +47,116 @@ function roi_process_apu_tables($content) {
return '<div class="analisis">' . $table . '</div>';
}, $content);
// Procesar TODAS las tablas APU (dentro de .analisis o .desglose) para agregar clases a filas
// Esto reemplaza la lógica de apu-tables-auto-class.js para prevenir CLS
$content = roi_add_apu_row_classes($content);
return $content;
}
add_filter('the_content', 'roi_process_apu_tables', 20);
/**
* Agrega clases CSS a filas especiales de tablas APU del lado del servidor
*
* IMPORTANTE: Esta función reemplaza apu-tables-auto-class.js para PREVENIR CLS.
* La manipulación del DOM con JS después de DOMContentLoaded causa Layout Shift.
*
* Detecta y clasifica:
* - section-header: Material, Mano de Obra, Herramienta, Equipo
* - subtotal-row: Filas que empiezan con "Suma de" o "Subtotal"
* - total-row: Costo Directo, Total
*
* @param string $content HTML del contenido
* @return string HTML con clases agregadas a filas
*/
function roi_add_apu_row_classes($content) {
// Solo procesar si hay tablas APU
if (strpos($content, 'class="analisis"') === false && strpos($content, 'class="desglose"') === false) {
return $content;
}
// Patrones para detectar tipos de fila (basado en contenido de segunda celda)
$section_headers = [
'Material',
'Mano de Obra',
'Herramienta',
'Equipo',
'MATERIAL',
'MANO DE OBRA',
'HERRAMIENTA',
'EQUIPO',
];
$total_patterns = [
'Costo Directo',
'COSTO DIRECTO',
'Costo directo',
'Total',
'TOTAL',
];
// Procesar filas <tr> dentro de <tbody>
// Patrón: capturar <tr> con sus atributos y contenido
$content = preg_replace_callback(
'/<tr([^>]*)>(.*?)<\/tr>/is',
function($matches) use ($section_headers, $total_patterns) {
$tr_attrs = $matches[1];
$tr_content = $matches[2];
// Si ya tiene clase especial, no modificar
if (preg_match('/class\s*=\s*["\'][^"\']*(?:section-header|subtotal-row|total-row)/', $tr_attrs)) {
return $matches[0];
}
// Extraer texto de la segunda celda
if (!preg_match('/<td[^>]*>.*?<\/td>\s*<td[^>]*>(.*?)<\/td>/is', $tr_content, $cell_match)) {
return $matches[0]; // No hay segunda celda
}
$cell_text = trim(strip_tags($cell_match[1]));
// Determinar clase a agregar
$class_to_add = '';
// Verificar section-header
if (in_array($cell_text, $section_headers, true)) {
$class_to_add = 'section-header';
}
// Verificar subtotal-row
elseif (stripos($cell_text, 'suma de ') === 0 || stripos($cell_text, 'subtotal ') === 0) {
$class_to_add = 'subtotal-row';
}
// Verificar total-row
elseif (in_array($cell_text, $total_patterns, true)) {
$class_to_add = 'total-row';
}
// Si no hay clase que agregar, retornar sin modificar
if (empty($class_to_add)) {
return $matches[0];
}
// Agregar clase al <tr>
if (preg_match('/class\s*=\s*["\']([^"\']*)["\']/', $tr_attrs)) {
// Ya tiene atributo class, agregar a las clases existentes
$tr_attrs = preg_replace(
'/class\s*=\s*["\']([^"\']*)["\']/',
'class="$1 ' . $class_to_add . '"',
$tr_attrs
);
} else {
// No tiene class, agregar el atributo
$tr_attrs = ' class="' . $class_to_add . '"' . $tr_attrs;
}
return '<tr' . $tr_attrs . '>' . $tr_content . '</tr>';
},
$content
);
return $content;
}
/**
* Shortcode: [apu_table]
* Permite envolver tablas manualmente con la clase .analisis