diff --git a/.eleventy.js b/.eleventy.js index e635fe1b..11e21fb4 100644 --- a/.eleventy.js +++ b/.eleventy.js @@ -27,6 +27,7 @@ const imageShortcode = async ( src, alt, className = undefined, + loading = 'lazy', widths = [75, 150, 300, 600, 900, 1200], formats = ['webp', 'jpeg'], sizes = '100vw' @@ -71,7 +72,7 @@ const imageShortcode = async ( width: largestUnoptimizedImg.width, height: largestUnoptimizedImg.height, alt, - loading: 'lazy', + loading, decoding: 'async', }) diff --git a/src/_includes/now.liquid b/src/_includes/now.liquid index 27bf5bfd..7f4c5cf3 100644 --- a/src/_includes/now.liquid +++ b/src/_includes/now.liquid @@ -3,7 +3,7 @@ layout: main --- {% render "partials/header.liquid", site: site, page: page, nav: nav %} {{ content }} -{% render "partials/now/media-grid.liquid", data:music.artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8 %} +{% render "partials/now/media-grid.liquid", data:music.artists, icon: "microphone-2", title: "Artists", shape: "square", count: 8, loading: 'eager' %} {% render "partials/now/media-grid.liquid", data:music.albums, icon: "vinyl", title: "Albums", shape: "square", count: 8 %} {% render "partials/now/albumReleases.liquid", albumReleases:albumReleases %} {% render "partials/now/media-grid.liquid", data:books, icon: "books", title: "Books", shape: "vertical", count: 6 %} diff --git a/src/_includes/partials/now/media-grid.liquid b/src/_includes/partials/now/media-grid.liquid index 3190daea..fae7b1cf 100644 --- a/src/_includes/partials/now/media-grid.liquid +++ b/src/_includes/partials/now/media-grid.liquid @@ -20,7 +20,14 @@ {% endif %} - {% image item.image, alt, 'rounded-lg w-full h-full [&>*]:h-full' %} + {%- capture loadingStrategy %} + {% if loading %} + {{ loading }} + {% else %} + 'lazy' + {% endif %} + {% endcapture -%} + {% image item.image, alt, 'rounded-lg w-full h-full [&>*]:h-full', loadingStrategy %} {% endfor %} diff --git a/src/uses.md b/src/uses.md index e068f174..dbe1eca0 100644 --- a/src/uses.md +++ b/src/uses.md @@ -26,7 +26,7 @@ meta: Software and services that I use for work and my own enjoyment. -{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full' %} +{% image 'https://coryd.dev/assets/img/pages/uses.jpg', 'My desk', 'border border-purple-600 dark:border-purple-400 rounded-lg overflow-hidden [&>*]:w-full', 'eager' %}