Optimize page LCP

Author: Chalarangelo

Diff for: 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 for: 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.