Optimize page LCP

Chalarangelo · Dec 18, 2023 · e14ff2e · e14ff2e
1 parent e71d9b4
commit e14ff2e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/src/components/PreviewList.astro b/src/components/PreviewList.astro
@@ -11,8 +11,8 @@ const { contentItems, largeImages = false } = Astro.props;
           src={contentItem.cover}
           srcset={contentItem.coverSrcset}
           alt=''
-          height={largeImages ? '300' : '200'}
-          width='400'
+          height={largeImages ? '240' : '180'}
+          width='360'
           loading='lazy'
         />
         <article>

diff --git a/src/styles/components/_hero.scss b/src/styles/components/_hero.scss
@@ -22,6 +22,11 @@
   img {
     border-radius: var(--border-radius-medium);
 
+    // Optimize image for LCP, by defining a height and aspect ratio.
+    height: 240px;
+    aspect-ratio: 1;
+    object-fit: cover;
+
     @media (hover: hover) and (prefers-reduced-motion: no-preference) {
       // Apply this effect only when hover is supported and the user has not
       // requested reduced motion. It's just for show, so it's not important.