From ff2c0950b7236b6c6120ac1437dd864c17a6b57d Mon Sep 17 00:00:00 2001
From: Ricardo <rick@rmendes.net>
Date: Wed, 4 Feb 2026 15:12:17 +0100
Subject: [PATCH] perf: skip eleventy-img processing for external cover art
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Add eleventy:ignore to all Funkwhale/Last.fm album cover <img> tags.
These are external URLs served from their origin servers — downloading,
converting to webp, and caching them locally was causing 4094 image
processing calls per build with no benefit.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
---
 _includes/components/funkwhale-stats-content.njk |  2 +-
 _includes/components/sidebar.njk                 |  2 +-
 funkwhale.njk                                    |  5 +++--
 listening.njk                                    | 12 ++++++------
 4 files changed, 11 insertions(+), 10 deletions(-)

diff --git a/_includes/components/funkwhale-stats-content.njk b/_includes/components/funkwhale-stats-content.njk
index 52deeb7..1f08490 100644
--- a/_includes/components/funkwhale-stats-content.njk
+++ b/_includes/components/funkwhale-stats-content.njk
@@ -44,7 +44,7 @@
     {% for album in topAlbums | head(5) %}
     <div class="text-center">
       {% if album.coverUrl %}
-      <img src="{{ album.coverUrl }}" alt="" class="w-full aspect-square object-cover rounded-lg mb-2" loading="lazy">
+      <img src="{{ album.coverUrl }}" alt="" class="w-full aspect-square object-cover rounded-lg mb-2" loading="lazy" eleventy:ignore>
       {% else %}
       <div class="w-full aspect-square bg-surface-200 dark:bg-surface-700 rounded-lg mb-2 flex items-center justify-center">
         <svg class="w-8 h-8 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
diff --git a/_includes/components/sidebar.njk b/_includes/components/sidebar.njk
index f0818b2..9ae2312 100644
--- a/_includes/components/sidebar.njk
+++ b/_includes/components/sidebar.njk
@@ -225,7 +225,7 @@
 
     <div class="flex items-center gap-3">
       {% if funkwhaleActivity.nowPlaying.coverUrl %}
-      <img src="{{ funkwhaleActivity.nowPlaying.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy">
+      <img src="{{ funkwhaleActivity.nowPlaying.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
       {% endif %}
       <div class="min-w-0 flex-1">
         <p class="font-medium text-sm text-surface-900 dark:text-surface-100 truncate">
diff --git a/funkwhale.njk b/funkwhale.njk
index b2286e0..4ff707a 100644
--- a/funkwhale.njk
+++ b/funkwhale.njk
@@ -26,6 +26,7 @@ withSidebar: true
           alt=""
           class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg shadow-lg object-cover flex-shrink-0"
           loading="lazy"
+          eleventy:ignore
         >
         {% else %}
         <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
@@ -186,7 +187,7 @@ withSidebar: true
       {% for listening in funkwhaleActivity.listenings | head(15) %}
       <div class="flex items-center gap-4 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-primary-400 dark:hover:border-primary-600 transition-colors">
         {% if listening.coverUrl %}
-        <img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy">
+        <img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
         {% else %}
         <div class="w-12 h-12 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
           <svg class="w-6 h-6 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -236,7 +237,7 @@ withSidebar: true
       {% for favorite in funkwhaleActivity.favorites | head(10) %}
       <div class="flex items-center gap-3 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
         {% if favorite.coverUrl %}
-        <img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy">
+        <img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
         {% else %}
         <div class="w-14 h-14 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
           <svg class="w-6 h-6 text-surface-400" fill="currentColor" viewBox="0 0 24 24">
diff --git a/listening.njk b/listening.njk
index 0bbcb0b..2f9cfc4 100644
--- a/listening.njk
+++ b/listening.njk
@@ -62,7 +62,7 @@ withSidebar: true
       <div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-hidden {% if fwNowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-purple-500/10 to-purple-600/5 border border-purple-500/20{% endif %}">
         <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
           {% if fwNowPlaying.coverUrl %}
-          <img src="{{ fwNowPlaying.coverUrl }}" alt="" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg shadow-lg object-cover flex-shrink-0" loading="lazy">
+          <img src="{{ fwNowPlaying.coverUrl }}" alt="" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg shadow-lg object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
           {% else %}
           <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
             <svg class="w-8 h-8 sm:w-10 sm:h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -114,7 +114,7 @@ withSidebar: true
       <div class="relative p-4 sm:p-6 rounded-xl sm:rounded-2xl overflow-hidden {% if lfmNowPlaying.status == 'now-playing' %}bg-gradient-to-br from-green-500/10 to-green-600/5 border-2 border-green-500/30{% else %}bg-gradient-to-br from-red-500/10 to-red-600/5 border border-red-500/20{% endif %}">
         <div class="flex flex-col sm:flex-row items-start sm:items-center gap-4 sm:gap-5">
           {% if lfmNowPlaying.coverUrl %}
-          <img src="{{ lfmNowPlaying.coverUrl }}" alt="" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg shadow-lg object-cover flex-shrink-0" loading="lazy">
+          <img src="{{ lfmNowPlaying.coverUrl }}" alt="" class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg shadow-lg object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
           {% else %}
           <div class="w-20 h-20 sm:w-24 sm:h-24 rounded-lg bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
             <svg class="w-8 h-8 sm:w-10 sm:h-10 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -272,7 +272,7 @@ withSidebar: true
         {% for listening in funkwhaleActivity.listenings | head(10) %}
         <div class="flex items-center gap-4 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-purple-400 dark:hover:border-purple-600 transition-colors mb-2">
           {% if listening.coverUrl %}
-          <img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy">
+          <img src="{{ listening.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
           {% else %}
           <div class="w-12 h-12 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
             <svg class="w-6 h-6 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -307,7 +307,7 @@ withSidebar: true
         {% for scrobble in lastfmActivity.scrobbles | head(10) %}
         <div class="flex items-center gap-4 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 hover:border-red-400 dark:hover:border-red-600 transition-colors mb-2">
           {% if scrobble.coverUrl %}
-          <img src="{{ scrobble.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy">
+          <img src="{{ scrobble.coverUrl }}" alt="" class="w-12 h-12 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
           {% else %}
           <div class="w-12 h-12 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
             <svg class="w-6 h-6 text-surface-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
@@ -360,7 +360,7 @@ withSidebar: true
       {% for track in lastfmActivity.loved | head(10) %}
       <div class="flex items-center gap-3 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
         {% if track.coverUrl %}
-        <img src="{{ track.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy">
+        <img src="{{ track.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
         {% else %}
         <div class="w-14 h-14 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
           <svg class="w-6 h-6 text-red-400" fill="currentColor" viewBox="0 0 24 24">
@@ -402,7 +402,7 @@ withSidebar: true
       {% for favorite in funkwhaleActivity.favorites | head(10) %}
       <div class="flex items-center gap-3 p-3 bg-white dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700">
         {% if favorite.coverUrl %}
-        <img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy">
+        <img src="{{ favorite.coverUrl }}" alt="" class="w-14 h-14 rounded object-cover flex-shrink-0" loading="lazy" eleventy:ignore>
         {% else %}
         <div class="w-14 h-14 rounded bg-surface-200 dark:bg-surface-700 flex items-center justify-center flex-shrink-0">
           <svg class="w-6 h-6 text-purple-400" fill="currentColor" viewBox="0 0 24 24">