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:
@@ -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;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user