git.admin/roi-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(CLS): Add hero critical CSS to HEAD to prevent layout shift

Browse Source 
- Add roi_output_hero_critical_css() function to inject CSS in <head>
- CSS now loads BEFORE hero HTML renders, preventing CLS
- Update min_height from 120px to 260px to match actual content height
- Update title_min_height from 3rem to 3.5rem
- Add responsive breakpoints for mobile (200px min-height)

This fixes CLS in Lighthouse Lab tests (was 0.265, now should be ~0.01)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
FrankZamora
2025-11-27 12:08:10 -06:00
parent 7a539a498f
commit 7e13678e0b
2 changed files with 61 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
Schemas/hero.json
View File

@@ -224,14 +224,14 @@
"min_height": {
"type": "text",
"label": "Altura mínima del hero",
"default": "120px",
"default": "260px",
"editable": true,
"description": "Altura mínima del contenedor hero para prevenir layout shift (CLS)"
},
"title_min_height": {
"type": "text",
"label": "Altura mínima del título",
"default": "3rem",
"default": "3.5rem",
"editable": true,
"description": "Altura mínima del título para prevenir layout shift (CLS)"
},