fix: Add critical CSS for featured-image and post-content to prevent CLS

- .featured-image-container: aspect-ratio 16/9 reserves space before image loads
- .post-content: min-height prevents layout shift
- Targets PageSpeed CLS issues: main-content 0.121, container 0.099

🤖 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 12:19:23 -06:00
parent c6450211a7
commit 9f5cc92ec6

View File

@@ -1066,3 +1066,41 @@ article ins.adsbygoogle {
min-height: 100px; min-height: 100px;
} }
} }
/* ==========================================================================
CLS PREVENTION - Featured Image
PageSpeed Issue: main-content y container CLS 0.121 + 0.099
Solución: Reservar espacio para imagen con aspect-ratio
========================================================================== */
.featured-image-container {
aspect-ratio: 16 / 9;
position: relative;
background-color: #f0f0f0;
border-radius: 12px;
overflow: hidden;
margin-top: 1rem;
margin-bottom: 2rem;
}
.featured-image-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
position: absolute;
top: 0;
left: 0;
}
/* ==========================================================================
CLS PREVENTION - Post Content
PageSpeed Issue: article.post-content CLS 0.028
Solución: min-height para contenido principal
========================================================================== */
.post-content {
min-height: 300px;
}
@media (max-width: 767.98px) {
.post-content {
min-height: 200px;
}
}