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;
|
||||
}
|
||||
}
|
||||
|
||||
/* ==========================================================================
|
||||
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