render cover images eager apart from some on the index

janmonschke · May 12, 2023 · c4ffcea · c4ffcea
1 parent b9b66b7
commit c4ffcea
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 2 deletions.
diff --git a/content/index.webc b/content/index.webc
@@ -4,12 +4,18 @@ layout: layouts/base.webc
 ---
 
 <ul class="index__blogPostList">
-  <li class="index__blogPostItem" webc:for="post of collections.blogPosts">
+  <li
+    class="index__blogPostItem"
+    webc:for="(post, index) of collections.blogPosts"
+  >
     <article>
       <header class="index__blogPostItemHeader">
         <a :href="post.url">
           <h2 class="index__blogPostTitle" @text="post.data.title"></h2>
-          <img @raw="post.data.coverImageHtml" alt="" webc:nokeep />
+          <img
+            @raw="index === 0 ? post.data.coverImageHtml : post.data.nonEagerCoverImageHtml"
+            webc:nokeep
+          />
         </a>
       </header>
       <section>

diff --git a/eleventy.config.js b/eleventy.config.js
@@ -118,11 +118,17 @@ module.exports = function (eleventyConfig) {
           src: coverImagePath,
           attributes: {
             alt: blogPost.data.title,
+            loading: "eager",
+            decoding: "auto",
           },
           includeCaption: false,
           linkToImage: false,
         });
 
+        blogPost.data.nonEagerCoverImageHtml = blogPost.data.coverImageHtml
+          .replace('loading="eager"', 'loading="lazy"')
+          .replace('decoding="auto"', 'decoding="async"');
+
         let shareMetadata = await Image(coverImagePath, {
           widths: [600],
           formats: ["jpeg"],