perf: defer javascript + lazy load images for faster page loads

app/Libraries/Vite/Vite.php

@@ -120,7 +120,7 @@ class Vite
             CODE_SAMPLE
 ,
             'js' => <<<CODE_SAMPLE
-                    <script type="module" src="{$assetUrl}"></script>
+                    <script type="module" src="{$assetUrl}" defer></script>
                 CODE_SAMPLE
 ,
             default => '',

app/Resources/js/audio-player.ts

@@ -44,7 +44,7 @@ const player = html`<div
   style="display: none;"
 >
   <div class="flex items-center">
-    <img src="" alt="" class="h-[52px] w-[52px]" />
+    <img src="" alt="" class="h-[52px] w-[52px]" loading="lazy" />
     <div class="flex flex-col px-2">
       <p
         class="text-sm w-48 truncate font-semibold"

app/Resources/js/modules/EpisodesMap.ts

@@ -50,7 +50,7 @@ const drawEpisodesMap = async (mapDivId: string, dataUrl: string) => {
           data[i].cover_url +
           '" alt="' +
           data[i].episode_title +
-          '" class="rounded w-16 h-16" /><div class="flex flex-col flex-1"><h2 class="leading-tight text-sm w-56 line-clamp-2 font-bold"><a href="' +
+          '" class="rounded w-16 h-16" loading="lazy" /><div class="flex flex-col flex-1"><h2 class="leading-tight text-sm w-56 line-clamp-2 font-bold"><a href="' +
           data[i].episode_link +
           '" class="hover:underline font-semibold !text-accent-base">' +
           data[i].episode_title +

themes/cp_admin/_partials/_nav_header.php

@@ -25,7 +25,7 @@
         aria-expanded="false"><div class="relative mr-1">
             <?= icon('account-circle', 'text-3xl opacity-60') ?>
             <?= user()
-                ->podcasts === [] ? '' : '<img src="' . interact_as_actor()->avatar_image_url . '" class="absolute bottom-0 w-4 h-4 border rounded-full -right-1 border-navigation-bg" />' ?>
+                ->podcasts === [] ? '' : '<img src="' . interact_as_actor()->avatar_image_url . '" class="absolute bottom-0 w-4 h-4 border rounded-full -right-1 border-navigation-bg" loading="lazy" />' ?>
         </div>
         <?= user()->username ?>
         <?= icon('caret-down', 'ml-auto text-2xl') ?></button>
@@ -36,7 +36,7 @@
 
             $interactButtons .= <<<CODE_SAMPLE
                 <button class="inline-flex items-center w-full px-4 py-1 hover:bg-highlight" id="interact-as-actor-{$userPodcast->id}" name="actor_id" value="{$userPodcast->actor_id}">
-                    <div class="inline-flex items-center flex-1 text-sm"><img src="{$userPodcast->cover->tiny_url}" class="w-6 h-6 mr-2 rounded-full" /><span class="truncate">{$userPodcast->title}</span>{$checkMark}</div>
+                    <div class="inline-flex items-center flex-1 text-sm"><img src="{$userPodcast->cover->tiny_url}" class="w-6 h-6 mr-2 rounded-full" loading="lazy" /><span class="truncate">{$userPodcast->title}</span>{$checkMark}</div>
                 </button>
             CODE_SAMPLE;
         }

themes/cp_admin/episode/_card.php

@@ -1,8 +1,8 @@
 <article class="relative flex flex-col flex-1 flex-shrink-0 w-full transition group overflow-hidden bg-elevated border-3 snap-center hover:shadow-lg focus-within:shadow-lg focus-within:ring-accent border-subtle rounded-xl min-w-[12rem] max-w-[17rem]">
     <a href="<?= route_to('episode-view', $episode->podcast->id, $episode->id) ?>" class="flex flex-col justify-end w-full h-full text-white group">
         <div class="absolute bottom-0 left-0 z-10 w-full h-full backdrop-gradient mix-blend-multiply"></div>
-        <div class="w-full h-full overflow-hidden">
-            <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform group-focus:scale-105 group-hover:scale-105 aspect-square" />
+        <div class="w-full h-full overflow-hidden bg-header">
+            <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform group-focus:scale-105 group-hover:scale-105 aspect-square" loading="lazy" />
         </div>
         <?= publication_pill($episode->published_at, $episode->publication_status, 'absolute top-0 left-0 ml-2 mt-2 text-sm'); ?>
         <div class="absolute z-20 flex flex-col items-start px-4 py-2">

themes/cp_admin/episode/_sidebar.php

@@ -17,6 +17,7 @@ $podcastNavigation = [
     src="<?= $podcast->cover->tiny_url ?>"
     alt="<?= $podcast->title ?>"
     class="object-cover w-6 h-6 rounded aspect-square"
+    loading="lazy"
     />
     <span class="flex-1 w-full px-2 text-xs font-semibold truncate" title="<?= $podcast->title ?>"><?= $podcast->title ?></span>
 </a>
@@ -25,6 +26,7 @@ $podcastNavigation = [
     src="<?= $episode->cover->thumbnail_url ?>"
     alt="<?= $episode->title ?>"
     class="object-cover w-16 h-16 rounded aspect-square"
+    loading="lazy"
     />
     <div class="flex flex-col items-start flex-1 w-48 px-2">
         <span class="w-full font-semibold truncate" title="<?= $episode->title ?>"><?= $episode->title ?></span>

themes/cp_admin/episode/list.php

@@ -34,7 +34,7 @@
                                     $episode->audio->duration,
                                 ) .
                             '</time>' .
-                            '<img loading="lazy" src="' . $episode->cover->thumbnail_url . '" alt="' . $episode->title . '" class="object-cover w-20 rounded-lg shadow-inner aspect-square" />' .
+                            '<img src="' . $episode->cover->thumbnail_url . '" alt="' . $episode->title . '" class="object-cover w-20 rounded-lg shadow-inner aspect-square" loading="lazy" />' .
                         '</div>' .
                         '<a class="overflow-x-hidden text-sm hover:underline" href="' . route_to(
                             'episode-view',

themes/cp_admin/episode/persons.php

@@ -58,7 +58,7 @@
                 return '<div class="flex">' .
                     '<a href="' .
                     route_to('person-view', $person->id) .
-                    "\"><img src=\"{$person->avatar->thumbnail_url}\" alt=\"{$person->full_name}\" class=\"object-cover w-16 rounded-full aspect-square\" /></a>" .
+                    "\"><img src=\"{$person->avatar->thumbnail_url}\" alt=\"{$person->full_name}\" class=\"object-cover w-16 rounded-full aspect-square\" loading=\"lazy\" /></a>" .
                     '<div class="flex flex-col ml-3">' .
                     $person->full_name .
                     implode(

themes/cp_admin/episode/publish.php

@@ -28,7 +28,7 @@
 <small class="max-w-md mb-2 text-skin-muted"><?= lang('Episode.publish_form.post_hint') ?></small>
 <div class="mb-8 overflow-hidden shadow-md bg-elevated rounded-xl">
     <div class="flex px-4 py-3 gap-x-2">
-        <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+        <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
         <div class="flex flex-col min-w-0">
             <p class="flex items-baseline min-w-0">
                 <span class="mr-2 font-semibold truncate"><?= $podcast->actor->display_name ?></span>
@@ -41,7 +41,7 @@
     </div>
     <div class="flex border-y">
         <img src="<?= $episode->cover
-    ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square" />
+    ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square" loading="lazy" />
         <div class="flex flex-col flex-1">
             <a href="<?= $episode->link ?>" class="flex-1 px-4 py-2">
                 <div class="flex items-baseline">

themes/cp_admin/episode/publish_edit.php

@@ -29,7 +29,7 @@
 <small class="max-w-md mb-2 text-skin-muted"><?= lang('Episode.publish_form.post_hint') ?></small>
 <div class="mb-8 overflow-hidden shadow-md bg-elevated rounded-xl">
     <div class="flex px-4 py-3 gap-x-2">
-        <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+        <img src="<?= $podcast->actor->avatar_image_url ?>" alt="<?= $podcast->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
         <div class="flex flex-col min-w-0">
             <p class="flex items-baseline min-w-0">
                 <span class="mr-2 font-semibold truncate"><?= $podcast->actor->display_name ?></span>
@@ -43,7 +43,7 @@
     </div>
     <div class="flex border-y">
         <img src="<?= $episode->cover
-                ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square" />
+                ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square" loading="lazy" />
         <div class="flex flex-col flex-1">
             <a href="<?= $episode->link ?>" class="flex-1 px-4 py-2">
                 <div class="flex items-baseline">

themes/cp_admin/episode/video_clips_new.php

@@ -14,7 +14,7 @@
 
 <div class="flex-1 w-full rounded-xl border-3 border-subtle">
     <video-clip-previewer duration="<?= old('duration', 30) ?>">
-        <img slot="preview_image" src="<?= $episode->cover->thumbnail_url ?>" alt="<?= $episode->cover->description ?>" />
+        <img slot="preview_image" src="<?= $episode->cover->thumbnail_url ?>" alt="<?= $episode->cover->description ?>" loading="lazy" />
     </video-clip-previewer>
     <audio-clipper start-time="<?= old('start_time', 0) ?>" duration="<?= old('duration', 30) ?>" min-duration="10" volume=".5" height="50">
         <audio slot="audio" src="<?= $episode->audio->file_url ?>" preload="auto">

themes/cp_admin/person/_card.php

@@ -1,8 +1,8 @@
 <article class="relative h-full overflow-hidden transition shadow bg-elevated border-3 border-subtle rounded-xl group hover:shadow-xl focus-within:shadow-xl focus-within:ring-accent">
     <a href="<?= route_to('person-view', $person->id) ?>" class="flex flex-col justify-end w-full h-full text-white group">
         <div class="absolute bottom-0 left-0 z-10 w-full h-full backdrop-gradient mix-blend-multiply"></div>
-        <div class="w-full h-full overflow-hidden">
-            <img alt="<?= $person->full_name ?>" src="<?= $person->avatar->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform aspect-square group-focus:scale-105 group-hover:scale-105" />
+        <div class="w-full h-full overflow-hidden bg-header">
+            <img alt="<?= $person->full_name ?>" src="<?= $person->avatar->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform aspect-square group-focus:scale-105 group-hover:scale-105" loading="lazy" />
         </div>
         <div class="absolute z-20">
             <h2 class="px-4 py-2 font-semibold leading-tight"><?= $person->full_name ?></h2>

themes/cp_admin/person/view.php

@@ -18,8 +18,9 @@
 <div class="flex flex-wrap gap-2">
     <img
         src="<?= $person->avatar->medium_url ?>"
-        alt="$person->full_name"
+        alt="<?= $person->full_name ?>"
         class="object-cover w-full max-w-xs rounded aspect-square"
+        loading="lazy"
     />
     <div class="flex flex-col">
         <?= $person->full_name ?>

themes/cp_admin/podcast/_card.php

@@ -1,10 +1,10 @@
 <article class="relative h-full overflow-hidden transition shadow bg-elevated border-3 border-subtle group rounded-xl hover:shadow-xl focus-within:shadow-xl focus-within:ring-accent">
     <a href="<?= route_to('podcast-view', $podcast->id) ?>" class="flex flex-col justify-end w-full h-full text-white group">
         <div class="absolute bottom-0 left-0 z-10 w-full h-full backdrop-gradient mix-blend-multiply"></div>
-        <div class="w-full h-full overflow-hidden">
+        <div class="w-full h-full overflow-hidden bg-header">
             <img
             alt="<?= $podcast->title ?>"
-            src="<?= $podcast->cover->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform aspect-square group-focus:scale-105 group-hover:scale-105" />
+            src="<?= $podcast->cover->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform aspect-square group-focus:scale-105 group-hover:scale-105" loading="lazy" />
         </div>
         <div class="absolute z-20 w-full px-4 pb-4 transition duration-75 ease-out translate-y-6 group-focus:translate-y-0 group-hover:translate-y-0">
             <h2 class="font-bold leading-none truncate font-display"><?= $podcast->title ?></h2>

themes/cp_admin/podcast/_sidebar.php

@@ -40,6 +40,7 @@ $podcastNavigation = [
     src="<?= $podcast->cover->thumbnail_url ?>"
     alt="<?= $podcast->title ?>"
     class="object-cover w-16 h-16 rounded aspect-square"
+    loading="lazy"
     />
     <div class="flex flex-col items-start flex-1 w-48 px-2">
         <span class="w-full font-semibold truncate" title="<?= $podcast->title ?>"><?= $podcast->title ?></span>

themes/cp_admin/podcast/edit.php

@@ -25,10 +25,10 @@
     <?php if ($podcast->banner_id !== null): ?>
         <a href="<?= route_to('podcast-banner-delete', $podcast->id) ?>" class="absolute p-1 text-red-700 bg-red-100 border-2 rounded-full hover:text-red-900 border-contrast focus:ring-accent top-2 right-2" title="<?= lang('Podcast.form.banner_delete') ?>" data-tooltip="bottom"><?= icon('delete-bin') ?></a>
     <?php endif; ?>
-    <img src="<?= $podcast->banner->small_url ?>" alt="" class="w-full aspect-[3/1] bg-header" />
+    <img src="<?= $podcast->banner->small_url ?>" alt="" class="w-full aspect-[3/1] bg-header" loading="lazy" />
     <div class="flex px-4 py-2">
         <img src="<?= $podcast->cover->thumbnail_url ?>" alt="<?= $podcast->title ?>"
-            class="w-16 h-16 mr-4 -mt-8 rounded-full ring-2 ring-background-elevated aspect-square" />
+            class="w-16 h-16 mr-4 -mt-8 rounded-full ring-2 ring-background-elevated aspect-square" loading="lazy" />
         <div class="flex flex-col">
             <p class="font-semibold leading-none"><?= $podcast->title ?></p>
             <p class="text-sm text-skin-muted">@<?= $podcast->handle ?></p>

themes/cp_admin/podcast/persons.php

@@ -55,7 +55,7 @@
                 return '<div class="flex">' .
                     '<a href="' .
                     route_to('person-view', $person->id) .
-                    "\"><img src=\"{$person->avatar->thumbnail_url}\" alt=\"{$person->full_name}\" class=\"object-cover aspect-square w-16 h-16 rounded-full\" /></a>" .
+                    "\"><img src=\"{$person->avatar->thumbnail_url}\" alt=\"{$person->full_name}\" class=\"object-cover aspect-square w-16 h-16 rounded-full\" loading=\"lazy\" /></a>" .
                     '<div class="flex flex-col ml-3">' .
                     $person->full_name .
                     implode(

themes/cp_admin/settings/general.php

@@ -46,7 +46,7 @@
         <?php if (config('App')->siteIcon['ico'] !== service('settings')->get('App.siteIcon')['ico']): ?>
         <div class="relative ml-2">
             <a href="<?= route_to('settings-instance-delete-icon') ?>" class="absolute p-1 text-red-700 bg-red-100 border-2 rounded-full hover:text-red-900 border-contrast -top-3 -right-3 focus:ring-accent" title="<?= lang('Settings.instance.site_icon_delete') ?>" data-tooltip="top"><?= icon('delete-bin') ?></a>
-            <img src="<?= service('settings')->get('App.siteIcon')['64'] ?>" alt="<?= service('settings')->get('App.siteName') ?> Favicon" class="w-10 h-10 aspect-square" />
+            <img src="<?= service('settings')->get('App.siteIcon')['64'] ?>" alt="<?= service('settings')->get('App.siteName') ?> Favicon" class="w-10 h-10 aspect-square" loading="lazy" />
         </div>
         <?php endif; ?>
     </div>

themes/cp_app/_admin_navbar.php

@@ -20,7 +20,7 @@
             aria-expanded="false"><div class="relative mr-1">
                 <?= icon('account-circle', 'text-3xl opacity-60') ?>
                 <?= user()
-                    ->podcasts === [] ? '' : '<img src="' . interact_as_actor()->avatar_image_url . '" class="absolute bottom-0 w-4 h-4 border rounded-full -right-1 border-navigation-bg" />' ?>
+                    ->podcasts === [] ? '' : '<img src="' . interact_as_actor()->avatar_image_url . '" class="absolute bottom-0 w-4 h-4 border rounded-full -right-1 border-navigation-bg" loading="lazy" />' ?>
             </div>
             <?= user()->username ?>
             <?= icon('caret-down', 'ml-auto text-2xl') ?></button>
@@ -31,7 +31,7 @@
 
                 $interactButtons .= <<<CODE_SAMPLE
                     <button class="inline-flex items-center w-full px-4 py-1 hover:bg-highlight" id="interact-as-actor-{$userPodcast->id}" name="actor_id" value="{$userPodcast->actor_id}">
-                        <div class="inline-flex items-center flex-1 text-sm"><img src="{$userPodcast->cover->tiny_url}" class="w-6 h-6 mr-2 rounded-full" /><span class="truncate">{$userPodcast->title}</span>{$checkMark}</div>
+                        <div class="inline-flex items-center flex-1 text-sm"><img src="{$userPodcast->cover->tiny_url}" class="w-6 h-6 mr-2 rounded-full" loading="lazy" /><span class="truncate">{$userPodcast->title}</span>{$checkMark}</div>
                     </button>
                 CODE_SAMPLE;
             }

themes/cp_app/_persons_modal.php

@@ -17,7 +17,7 @@
         <div class="flex flex-col items-start p-4 gap-y-4">
             <?php foreach ($persons as $person): ?>
                 <div class="flex gap-x-2">
-                    <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-10 rounded-full aspect-square" />
+                    <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-10 rounded-full bg-header aspect-square" loading="lazy" />
                     <div class="flex flex-col">
                         <h4 class="text-sm font-semibold">
                             <?php if ($person->information_url): ?>

themes/cp_app/embed.php

@@ -20,7 +20,7 @@
 </head>
 
 <body class="flex" style="background: <?= $themeData['background'] ?>; color: <?= $themeData['text'] ?>;">
-    <img src="<?= $episode->cover->thumbnail_url ?>" alt="<?= $episode->title ?>" class="flex-shrink w-36 h-36 aspect-square" />
+    <img src="<?= $episode->cover->thumbnail_url ?>" alt="<?= $episode->title ?>" class="flex-shrink w-36 h-36 aspect-square" loading="lazy" />
     <div class="flex flex-col items-start flex-1 min-w-0 px-4 pt-4 h-36">
         <a href="https://castopod.org/" class="absolute top-0 right-0 mt-1 mr-2 text-2xl text-pine-500 hover:opacity-75" title="<?= lang('Common.powered_by', [
             'castopod' => 'Castopod',

themes/cp_app/episode/_layout.php

@@ -49,7 +49,7 @@
         ]) ?>">
             <?= icon('arrow-left', 'mr-2 text-lg') ?>
             <div class="inline-flex items-center gap-x-2">
-                <img class="w-8 h-8 rounded-full" src="<?= $episode->podcast->cover->tiny_url ?>" alt="<?= $episode->podcast->title ?>" />
+                <img class="w-8 h-8 rounded-full" src="<?= $episode->podcast->cover->tiny_url ?>" alt="<?= $episode->podcast->title ?>" loading="lazy" />
                 <div class="flex flex-col">
                     <span class="text-sm font-semibold leading-none"><?= $episode->podcast->title ?></span>
                     <span class="text-xs"><?= lang('Podcast.followers', [
@@ -81,7 +81,7 @@
         <div class="absolute top-0 left-0 w-full h-full bg-center bg-no-repeat bg-cover blur-lg mix-blend-overlay filter grayscale" style="background-image: url('<?= $episode->podcast->banner->small_url ?>');"></div>
         <div class="absolute top-0 left-0 w-full h-full bg-gradient-to-t from-background-header to-transparent"></div>
         <div class="z-10 flex flex-col items-start gap-y-2 gap-x-4 sm:flex-row">
-            <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" loading="lazy" class="rounded-md shadow-xl h-36 aspect-square" />
+            <img src="<?= $episode->cover->medium_url ?>" alt="<?= $episode->title ?>" class="rounded-md shadow-xl h-36 aspect-square" loading="lazy" />
             <div class="flex flex-col items-start text-white">
                 <?= episode_numbering($episode->number, $episode->season_number, 'text-sm leading-none font-semibold px-1 py-1 text-white/90 border !no-underline border-subtle', true) ?>
                 <h1 class="inline-flex items-baseline max-w-md mt-2 text-2xl font-bold sm:leading-none sm:text-3xl font-display line-clamp-2"><?= $episode->title ?></h1>
@@ -91,7 +91,7 @@
                         <div class="inline-flex flex-row-reverse">
                             <?php $i = 0; ?>
                             <?php foreach ($episode->persons as $person): ?>
-                                <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 h-8 -ml-4 border-2 rounded-full aspect-square border-background-header last:ml-0" />
+                                <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 h-8 -ml-4 border-2 rounded-full aspect-square border-background-header last:ml-0" loading="lazy" />
                                 <?php $i++; if ($i === 3) {
                         break;
                     }?>

themes/cp_app/episode/_partials/card.php

@@ -3,8 +3,8 @@
         <time class="absolute px-1 text-xs font-semibold text-white rounded bottom-2 right-2 bg-black/75" datetime="PT<?= $episode->audio->duration ?>S">
             <?= format_duration($episode->audio->duration) ?>
         </time>
-        <img loading="lazy" src="<?= $episode->cover
-                ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="object-cover w-20 rounded-lg shadow-inner aspect-square" />
+        <img src="<?= $episode->cover
+                ->thumbnail_url ?>" alt="<?= $episode->title ?>" class="object-cover w-20 rounded-lg shadow-inner aspect-square" loading="lazy" />
     </div>
     <div class="flex items-center flex-1 gap-x-4">
         <div class="flex flex-col flex-1">

themes/cp_app/episode/_partials/comment.php

@@ -1,5 +1,5 @@
 <article class="relative z-10 flex w-full px-4 py-2 rounded-conditional-2xl gap-x-2">
-    <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+    <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
     <div class="flex-1">
         <header class="w-full mb-2 text-sm">
             <a href="<?= $comment->actor

themes/cp_app/episode/_partials/comment_card.php

@@ -1,5 +1,5 @@
 <article class="relative z-10 flex w-full p-4 shadow bg-elevated rounded-conditional-2xl gap-x-2">
-    <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+    <img src="<?= $comment->actor->avatar_image_url ?>" alt="<?= $comment->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
     <div class="flex-1">
         <header class="w-full mb-2 text-sm">
             <a href="<?= $comment->actor->uri ?>" class="flex items-baseline hover:underline" <?= $comment->actor->is_local

themes/cp_app/episode/_partials/comment_reply.php

@@ -1,6 +1,6 @@
 <article class="flex px-6 py-4 bg-base gap-x-2">
     <img src="<?= $reply->actor->avatar_image_url ?>" alt="<?= $reply->actor
-    ->display_name ?>" class="z-10 w-10 h-10 rounded-full ring-gray-50 ring-2 aspect-square" />
+    ->display_name ?>" class="z-10 w-10 h-10 rounded-full ring-gray-50 ring-2 aspect-square" loading="lazy" />
     <div class="flex flex-col flex-1 min-w-0">
         <header class="flex items-center mb-2">
             <a href="<?= $reply->actor

themes/cp_app/episode/_partials/comment_with_replies.php

@@ -15,7 +15,7 @@ if ($comment->in_reply_to_id): ?>
 <form action="<?= route_to('comment-attempt-reply', $podcast->id, $episode->id, $comment->id) ?>" method="POST" class="flex px-6 pt-8 pb-4 gap-x-2 bg-base">
     <img src="<?= interact_as_actor()
     ->avatar_image_url ?>" alt="<?= interact_as_actor()
-    ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+    ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
     <div class="flex flex-col flex-1">
         <Forms.Textarea
             name="message"

themes/cp_app/episode/_partials/preview_card.php

@@ -5,7 +5,7 @@
         </time>
         <img
         src="<?= $episode->cover->thumbnail_url ?>"
-        alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square"/>
+        alt="<?= $episode->title ?>" class="w-24 h-24 aspect-square" loading="lazy" />
     </div>
     <div class="flex flex-col flex-1 px-4 py-2">
         <div class="inline-flex">

themes/cp_app/episode/activity.php

@@ -9,7 +9,7 @@
 
         <img src="<?= interact_as_actor()
             ->avatar_image_url ?>" alt="<?= interact_as_actor()
-            ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+            ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
         <div class="flex flex-col flex-1 min-w-0 gap-y-2">
             <input name="episode_url" value="<?= $episode->link ?>" type="hidden" />
             <Forms.Textarea

themes/cp_app/episode/comments.php

@@ -9,7 +9,7 @@
 
         <img src="<?= interact_as_actor()
             ->avatar_image_url ?>" alt="<?= interact_as_actor()
-            ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+            ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
         <div class="flex flex-col flex-1 min-w-0 gap-y-2">
             <Forms.Textarea
                 name="message"

themes/cp_app/home.php

@@ -60,8 +60,8 @@
                     <a href="<?= $podcast->link ?>" class="relative w-full h-full overflow-hidden transition shadow focus:ring-accent rounded-xl border-subtle hover:shadow-xl focus:shadow-xl group border-3">
                         <article class="text-white">
                             <div class="absolute bottom-0 left-0 z-10 w-full h-full backdrop-gradient mix-blend-multiply"></div>
-                            <div class="w-full h-full overflow-hidden">
-                                <img alt="<?= $podcast->title ?>" src="<?= $podcast->cover->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform aspect-square group-focus:scale-105 group-hover:scale-105" />
+                            <div class="w-full h-full overflow-hidden bg-header">
+                                <img alt="<?= $podcast->title ?>" src="<?= $podcast->cover->medium_url ?>" class="object-cover w-full h-full transition duration-200 ease-in-out transform bg-header aspect-square group-focus:scale-105 group-hover:scale-105" loading="lazy" />
                             </div>
                             <div class="absolute bottom-0 left-0 z-20 px-4 pb-2">
                                 <h2 class="font-bold leading-none truncate font-display"><?= $podcast->title ?></h2>

themes/cp_app/pages/credits.php

@@ -17,7 +17,7 @@
             <div class="flex mt-2 mb-2">
                 <img src="<?= $persons['thumbnail_url'] ?>" alt="<?= $persons[
     'full_name'
-] ?>" class="object-cover w-16 rounded-full aspect-square md:h-24 md:w-24 border-gray" />
+] ?>" class="object-cover w-16 rounded-full aspect-square md:h-24 md:w-24 border-gray" loading="lazy" />
                 <div class="flex flex-col ml-3 mr-4">
                     <span class="text-lg font-semibold text-skin-muted md:text-xl">
                         <?= $persons['full_name'] ?>

themes/cp_app/podcast/_layout.php

@@ -46,7 +46,7 @@
     <header class="relative z-50 flex flex-col-reverse justify-between w-full col-start-2 bg-top bg-no-repeat bg-cover sm:flex-row sm:items-end bg-header aspect-[3/1]" style="background-image: url('<?= $podcast->banner->medium_url ?>');">
         <div class="absolute bottom-0 left-0 w-full h-full backdrop-gradient mix-blend-multiply"></div>
         <div class="z-10 flex items-center pl-4 -mb-6 md:pl-8 md:-mb-8 gap-x-4">
-            <img src="<?= $podcast->cover->thumbnail_url ?>" alt="<?= $podcast->title ?>" loading="lazy" class="h-24 rounded-full sm:h-28 md:h-36 ring-3 ring-background-elevated aspect-square" />
+            <img src="<?= $podcast->cover->thumbnail_url ?>" alt="<?= $podcast->title ?>" class="h-24 rounded-full sm:h-28 md:h-36 ring-3 ring-background-elevated aspect-square" loading="lazy" />
             <div class="relative flex flex-col text-white -top-2 sm:top-0 md:top-2">
                 <h1 class="text-lg font-bold leading-none line-clamp-2 md:leading-none md:text-2xl font-display"><?= $podcast->title ?><span class="ml-1 font-sans text-base font-normal">@<?= $podcast->handle ?></span></h1>
                 <span class="text-xs"><?= lang('Podcast.followers', [

themes/cp_app/podcast/about.php

@@ -25,7 +25,7 @@
                 <div class="inline-flex flex-row-reverse">
                     <?php $i = 0; ?>
                     <?php foreach ($podcast->persons as $person): ?>
-                        <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 -ml-4 border-2 rounded-full aspect-square border-background-base last:ml-0" />
+                        <img src="<?= $person->avatar->thumbnail_url ?>" alt="<?= $person->full_name ?>" class="object-cover w-8 -ml-4 border-2 rounded-full aspect-square bg-header border-background-base last:ml-0" loading="lazy" />
                         <?php $i++; if ($i === 3) {
     break;
 }?>

themes/cp_app/podcast/activity.php

@@ -10,7 +10,7 @@
 
     <img src="<?= interact_as_actor()
         ->avatar_image_url ?>" alt="<?= interact_as_actor()
-        ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+        ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
     <div class="flex flex-col flex-1 min-w-0 gap-y-2">
         <Forms.Textarea
             name="message"

themes/cp_app/podcast/follow.php

@@ -38,10 +38,10 @@
             'Fediverse.follow.subtitle',
         ) ?></h1>
         <div class="flex flex-col w-full max-w-xs -mt-24 overflow-hidden shadow bg-elevated rounded-xl">
-            <img src="<?= $actor->podcast->banner->small_url ?>" alt="" class="w-full aspect-[3/1] bg-header" />
+            <img src="<?= $actor->podcast->banner->small_url ?>" alt="" class="w-full aspect-[3/1] bg-header" loading="lazy" />
             <div class="flex px-4 py-2">
                 <img src="<?= $actor->avatar_image_url ?>" alt="<?= $actor->display_name ?>"
-                    class="w-16 h-16 mr-4 -mt-8 rounded-full ring-2 ring-background-elevated aspect-square" />
+                    class="w-16 h-16 mr-4 -mt-8 rounded-full ring-2 ring-background-elevated aspect-square" loading="lazy" />
                 <div class="flex flex-col">
                     <p class="font-semibold"><?= $actor->display_name ?></p>
                     <p class="text-sm text-skin-muted">@<?= $actor->username ?></p>

themes/cp_app/post/_partials/card.php

@@ -1,7 +1,7 @@
 <article class="relative z-10 w-full shadow bg-elevated sm:rounded-conditional-2xl">
     <header class="flex px-6 py-4 gap-x-2">
         <img src="<?= $post->actor
-    ->avatar_image_url ?>" alt="<?= $post->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+    ->avatar_image_url ?>" alt="<?= $post->actor->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
         <div class="flex flex-col min-w-0">
             <a href="<?= $post->actor
     ->uri ?>" class="flex items-baseline hover:underline" <?= $post

themes/cp_app/post/_partials/post_with_replies.php

@@ -20,7 +20,7 @@ if ($post->in_reply_to_id): ?>
             <form action="<?= route_to('post-attempt-action', interact_as_actor()->username, $post->id) ?>" method="POST" class="flex gap-x-2" >
                 <img src="<?= interact_as_actor()
             ->avatar_image_url ?>" alt="<?= interact_as_actor()
-            ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+            ->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
                 <div class="flex flex-col flex-1">
                     <Forms.Textarea
                         name="message"

themes/cp_app/post/_partials/preview_card.php

@@ -8,7 +8,7 @@ if ($preview_card->type === 'image'): ?>
     'external-link',
     'absolute inset-0 m-auto text-6xl bg-accent-base bg-opacity-50 group-hover:bg-opacity-100 text-accent-contrast rounded-full p-2',
 ) ?>
-        <img src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" class="object-cover w-full aspect-video" />
+        <img src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" class="object-cover w-full aspect-video" loading="lazy" />
     </div>
     <?php endif; ?>
 
@@ -24,7 +24,7 @@ if ($preview_card->type === 'image'): ?>
     'play',
     'absolute inset-0 m-auto text-6xl bg-accent-base bg-opacity-50 group-hover:bg-opacity-100 text-accent-contrast rounded-full p-2',
 ) ?>
-        <img class="object-cover w-full aspect-video" src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" />
+        <img class="object-cover w-full aspect-video" src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" loading="lazy" />
     </div>
     <?php endif; ?>
 
@@ -36,7 +36,7 @@ if ($preview_card->type === 'image'): ?>
 <?php else: ?>
 <a href="<?= $preview_card->url ?>" class="flex items-center bg-highlight">
     <?php if ($preview_card->image): ?>
-    <img src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" class="object-cover w-20 aspect-square" />
+    <img src="<?= $preview_card->image ?>" alt="<?= $preview_card->title ?>" class="object-cover w-20 aspect-square" loading="lazy" />
     <?php endif; ?>
     <p class="flex flex-col flex-1 px-4 py-2">
         <span class="text-xs tracking-wider uppercase text-skin-muted"><?= $preview_card->provider_name ?></span>

themes/cp_app/post/_partials/reblog.php

@@ -8,7 +8,7 @@
         ]) ?></p>
     <header class="flex px-6 py-4 gap-x-2">
         <img src="<?= $post->actor
-            ->avatar_image_url ?>" alt="<?= $post->display_name ?>" class="w-10 h-10 rounded-full aspect-square" />
+            ->avatar_image_url ?>" alt="<?= $post->display_name ?>" class="w-10 h-10 rounded-full aspect-square" loading="lazy" />
         <div class="flex flex-col min-w-0">
             <a href="<?= $post->actor
             ->uri ?>" class="flex items-baseline hover:underline" <?= $post

themes/cp_app/post/_partials/reply.php

@@ -1,6 +1,6 @@
 <article class="flex px-6 py-4 bg-base gap-x-2">
     <img src="<?= $reply->actor->avatar_image_url ?>" alt="<?= $reply->actor
-    ->display_name ?>" class="z-10 w-10 h-10 rounded-full ring-background-base ring-2 aspect-square" />
+    ->display_name ?>" class="z-10 w-10 h-10 rounded-full ring-background-base ring-2 aspect-square" loading="lazy" />
     <div class="flex flex-col flex-1 min-w-0">
         <header class="flex items-center mb-2">
             <a href="<?= $reply->actor