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

@@ -578,26 +578,29 @@ add_action('wp_enqueue_scripts', 'roi_enqueue_apu_tables_styles', 5); // Priorit
/**
* Enqueue APU Tables auto-class JavaScript
*
* Este script detecta automáticamente filas especiales en tablas .desglose y .analisis
* y les agrega las clases CSS correspondientes (section-header, subtotal-row, total-row)
* DESHABILITADO: Este script causaba CLS de 0.692 en Lab Data.
* La manipulación del DOM con JS después de DOMContentLoaded causa Layout Shift.
*
* Issue #132
* La lógica ha sido movida a PHP server-side en Inc/apu-tables.php
* @see roi_add_apu_row_classes()
*
* Issue #132 - Original implementation
*/
function roi_enqueue_apu_tables_autoclass_script() {
// APU Tables Auto-Class JS
wp_enqueue_script(
'roi-apu-tables-autoclass',
get_template_directory_uri() . '/Assets/js/apu-tables-auto-class.js',
array(),
ROI_VERSION,
array(
'in_footer' => true,
'strategy' => 'defer',
)
);
}
add_action('wp_enqueue_scripts', 'roi_enqueue_apu_tables_autoclass_script', 15);
// function roi_enqueue_apu_tables_autoclass_script() {
// // APU Tables Auto-Class JS
// wp_enqueue_script(
// 'roi-apu-tables-autoclass',
// get_template_directory_uri() . '/Assets/js/apu-tables-auto-class.js',
// array(),
// ROI_VERSION,
// array(
// 'in_footer' => true,
// 'strategy' => 'defer',
// )
// );
// }
// add_action('wp_enqueue_scripts', 'roi_enqueue_apu_tables_autoclass_script', 15);
// DISABLED: Moved to server-side PHP to prevent CLS
/**
* Enqueue CTA Box Sidebar styles (Issue #36)