Merge pull request #7147 from Fireentity/fix/6930-blog-lcp-request-discovery

Fix LCP request discovery by optimizing initial blog image loading

Author: leecalcote

src/components/Card/index.js

@@ -6,7 +6,7 @@ import Image from "../image";
 import { CardWrapper } from "./Card.style";
 import { useStyledDarkMode } from "../../theme/app/useStyledDarkMode";
 
-const Card = ({ frontmatter, fields }) => {
+const Card = ({ frontmatter, fields, loading = "lazy", fetchpriority = "auto" }) => {
 
   const { isDark } = useStyledDarkMode();
 
@@ -18,6 +18,8 @@ const Card = ({ frontmatter, fields }) => {
             {...((isDark && frontmatter.darkthumbnail && frontmatter.darkthumbnail.publicURL !== frontmatter.thumbnail.publicURL)
               ? frontmatter.darkthumbnail : frontmatter.thumbnail)}
             imgStyle={{ objectFit: "contain" }}
+            loading={loading}
+            fetchpriority={fetchpriority}
             alt={frontmatter.title}
           />
         </div>

src/sections/Blog/Blog-grid/index.js

@@ -61,9 +61,9 @@ const BlogGrid = ({
                     </Col>
                   )}
 
-                  {searchedPosts.length > 0 && searchedPosts.map(({ id, frontmatter, fields }) => (
+                  {searchedPosts.length > 0 && searchedPosts.map(({ id, frontmatter, fields }, index) => (
                     <Col key={id} $xs={12} $sm={6}>
-                      <Card frontmatter={frontmatter} fields={fields} />
+                      <Card frontmatter={frontmatter} fields={fields} loading={index === 0 ? "eager" : "lazy"} fetchpriority={index === 0 ? "high" : "auto"} />
                     </Col>
                   ))}
                   <Col>

src/sections/Blog/Blog-list/index.js

@@ -74,9 +74,9 @@ const BlogList = ({
                 }}
                 className="blog-lists">
                   {searchedPosts.length > 0 &&
-                    searchedPosts?.map(({ id, frontmatter, fields }) => (
+                    searchedPosts?.map(({ id, frontmatter, fields }, index) => (
                       <Col $xs={12} key={id}>
-                        <Card frontmatter={frontmatter} fields={fields} />
+                        <Card frontmatter={frontmatter} fields={fields} loading={index === 0 ? "eager" : "lazy"} fetchpriority={index === 0 ? "high" : "auto"} />
                       </Col>
                     ))}
                   <Col>