From f0685e44799dfb494592ff97841c0ae035381db8 Mon Sep 17 00:00:00 2001
From: Yassine Doghri <yassine@doghri.fr>
Date: Fri, 21 Jan 2022 18:07:43 +0000
Subject: [PATCH] perf: defer javascript + lazy load images for faster page
loads
---
app/Libraries/Vite/Vite.php | 2 +-
app/Resources/js/audio-player.ts | 2 +-
app/Resources/js/modules/EpisodesMap.ts | 2 +-
themes/cp_admin/_partials/_nav_header.php | 4 ++--
themes/cp_admin/episode/_card.php | 4 ++--
themes/cp_admin/episode/_sidebar.php | 2 ++
themes/cp_admin/episode/list.php | 2 +-
themes/cp_admin/episode/persons.php | 2 +-
themes/cp_admin/episode/publish.php | 4 ++--
themes/cp_admin/episode/publish_edit.php | 4 ++--
themes/cp_admin/episode/video_clips_new.php | 2 +-
themes/cp_admin/person/_card.php | 4 ++--
themes/cp_admin/person/view.php | 3 ++-
themes/cp_admin/podcast/_card.php | 4 ++--
themes/cp_admin/podcast/_sidebar.php | 1 +
themes/cp_admin/podcast/edit.php | 4 ++--
themes/cp_admin/podcast/persons.php | 2 +-
themes/cp_admin/settings/general.php | 2 +-
themes/cp_app/_admin_navbar.php | 4 ++--
themes/cp_app/_persons_modal.php | 2 +-
themes/cp_app/embed.php | 2 +-
themes/cp_app/episode/_layout.php | 6 +++---
themes/cp_app/episode/_partials/card.php | 4 ++--
themes/cp_app/episode/_partials/comment.php | 2 +-
themes/cp_app/episode/_partials/comment_card.php | 2 +-
themes/cp_app/episode/_partials/comment_reply.php | 2 +-
themes/cp_app/episode/_partials/comment_with_replies.php | 2 +-
themes/cp_app/episode/_partials/preview_card.php | 2 +-
themes/cp_app/episode/activity.php | 2 +-
themes/cp_app/episode/comments.php | 2 +-
themes/cp_app/home.php | 4 ++--
themes/cp_app/pages/credits.php | 2 +-
themes/cp_app/podcast/_layout.php | 2 +-
themes/cp_app/podcast/about.php | 2 +-
themes/cp_app/podcast/activity.php | 2 +-
themes/cp_app/podcast/follow.php | 4 ++--
themes/cp_app/post/_partials/card.php | 2 +-
themes/cp_app/post/_partials/post_with_replies.php | 2 +-
themes/cp_app/post/_partials/preview_card.php | 6 +++---
themes/cp_app/post/_partials/reblog.php | 2 +-
themes/cp_app/post/_partials/reply.php | 2 +-
41 files changed, 58 insertions(+), 54 deletions(-)
diff --git a/app/Libraries/Vite/Vite.php b/app/Libraries/Vite/Vite.php
index a7192eed13..1cceec4880 100644
--- a/app/Libraries/Vite/Vite.php
+++ b/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 => '',
diff --git a/app/Resources/js/audio-player.ts b/app/Resources/js/audio-player.ts
index 577853e4d2..74cebcc251 100644
--- a/app/Resources/js/audio-player.ts
+++ b/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"
diff --git a/app/Resources/js/modules/EpisodesMap.ts b/app/Resources/js/modules/EpisodesMap.ts
index a90e558532..390564f9f6 100644
--- a/app/Resources/js/modules/EpisodesMap.ts
+++ b/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 +
diff --git a/themes/cp_admin/_partials/_nav_header.php b/themes/cp_admin/_partials/_nav_header.php
index 0631b61a38..03a8ec0acb 100644
--- a/themes/cp_admin/_partials/_nav_header.php
+++ b/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;
}
diff --git a/themes/cp_admin/episode/_card.php b/themes/cp_admin/episode/_card.php
index 87f552f117..6cde92c17c 100644
--- a/themes/cp_admin/episode/_card.php
+++ b/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">
diff --git a/themes/cp_admin/episode/_sidebar.php b/themes/cp_admin/episode/_sidebar.php
index 50b2d703a7..f6dea48616 100644
--- a/themes/cp_admin/episode/_sidebar.php
+++ b/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>
diff --git a/themes/cp_admin/episode/list.php b/themes/cp_admin/episode/list.php
index 81ab34e8c3..b240931c7b 100644
--- a/themes/cp_admin/episode/list.php
+++ b/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',
diff --git a/themes/cp_admin/episode/persons.php b/themes/cp_admin/episode/persons.php
index 57f57ce3e5..0f5e637369 100644
--- a/themes/cp_admin/episode/persons.php
+++ b/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(
diff --git a/themes/cp_admin/episode/publish.php b/themes/cp_admin/episode/publish.php
index eacfa9dbb0..26d22f6a31 100644
--- a/themes/cp_admin/episode/publish.php
+++ b/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">
diff --git a/themes/cp_admin/episode/publish_edit.php b/themes/cp_admin/episode/publish_edit.php
index 80b2860d53..0e63bc71ad 100644
--- a/themes/cp_admin/episode/publish_edit.php
+++ b/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">
diff --git a/themes/cp_admin/episode/video_clips_new.php b/themes/cp_admin/episode/video_clips_new.php
index b8683f6efb..89a002ff7a 100644
--- a/themes/cp_admin/episode/video_clips_new.php
+++ b/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">
diff --git a/themes/cp_admin/person/_card.php b/themes/cp_admin/person/_card.php
index 8bdba05a0f..747598c5a2 100644
--- a/themes/cp_admin/person/_card.php
+++ b/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>
diff --git a/themes/cp_admin/person/view.php b/themes/cp_admin/person/view.php
index 7e22a94b75..87c2c3a92c 100644
--- a/themes/cp_admin/person/view.php
+++ b/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 ?>
diff --git a/themes/cp_admin/podcast/_card.php b/themes/cp_admin/podcast/_card.php
index 6d7e979ada..9fc16545da 100644
--- a/themes/cp_admin/podcast/_card.php
+++ b/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>
diff --git a/themes/cp_admin/podcast/_sidebar.php b/themes/cp_admin/podcast/_sidebar.php
index e72c1ee022..574fd9e526 100644
--- a/themes/cp_admin/podcast/_sidebar.php
+++ b/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>
diff --git a/themes/cp_admin/podcast/edit.php b/themes/cp_admin/podcast/edit.php
index 6b7aea1361..7d9c1be5a0 100644
--- a/themes/cp_admin/podcast/edit.php
+++ b/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>
diff --git a/themes/cp_admin/podcast/persons.php b/themes/cp_admin/podcast/persons.php
index fda00612eb..542642babb 100644
--- a/themes/cp_admin/podcast/persons.php
+++ b/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(
diff --git a/themes/cp_admin/settings/general.php b/themes/cp_admin/settings/general.php
index 3394731fed..7c6a4a51be 100644
--- a/themes/cp_admin/settings/general.php
+++ b/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>
diff --git a/themes/cp_app/_admin_navbar.php b/themes/cp_app/_admin_navbar.php
index 0cea27a6fa..f2aaa7c06e 100644
--- a/themes/cp_app/_admin_navbar.php
+++ b/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;
}
diff --git a/themes/cp_app/_persons_modal.php b/themes/cp_app/_persons_modal.php
index 8979882447..f2be55dc8c 100644
--- a/themes/cp_app/_persons_modal.php
+++ b/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): ?>
diff --git a/themes/cp_app/embed.php b/themes/cp_app/embed.php
index 7a3e38363d..9adf406f9f 100644
--- a/themes/cp_app/embed.php
+++ b/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',
diff --git a/themes/cp_app/episode/_layout.php b/themes/cp_app/episode/_layout.php
index 0f81cd593c..ba9291fde6 100644
--- a/themes/cp_app/episode/_layout.php
+++ b/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;
}?>
diff --git a/themes/cp_app/episode/_partials/card.php b/themes/cp_app/episode/_partials/card.php
index f024d232a0..ed915ac8f1 100644
--- a/themes/cp_app/episode/_partials/card.php
+++ b/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">
diff --git a/themes/cp_app/episode/_partials/comment.php b/themes/cp_app/episode/_partials/comment.php
index f365f413f6..665396c865 100644
--- a/themes/cp_app/episode/_partials/comment.php
+++ b/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
diff --git a/themes/cp_app/episode/_partials/comment_card.php b/themes/cp_app/episode/_partials/comment_card.php
index 1bfb091c05..7c534fab50 100644
--- a/themes/cp_app/episode/_partials/comment_card.php
+++ b/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
diff --git a/themes/cp_app/episode/_partials/comment_reply.php b/themes/cp_app/episode/_partials/comment_reply.php
index d2b3e854e7..4fabdde008 100644
--- a/themes/cp_app/episode/_partials/comment_reply.php
+++ b/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
diff --git a/themes/cp_app/episode/_partials/comment_with_replies.php b/themes/cp_app/episode/_partials/comment_with_replies.php
index 6e76f8301e..f6382360df 100644
--- a/themes/cp_app/episode/_partials/comment_with_replies.php
+++ b/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"
diff --git a/themes/cp_app/episode/_partials/preview_card.php b/themes/cp_app/episode/_partials/preview_card.php
index bba7ab1b8e..4554051227 100644
--- a/themes/cp_app/episode/_partials/preview_card.php
+++ b/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">
diff --git a/themes/cp_app/episode/activity.php b/themes/cp_app/episode/activity.php
index 17f2b12cf7..93c0d9043a 100644
--- a/themes/cp_app/episode/activity.php
+++ b/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
diff --git a/themes/cp_app/episode/comments.php b/themes/cp_app/episode/comments.php
index 47a409962c..dc6ee95a42 100644
--- a/themes/cp_app/episode/comments.php
+++ b/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"
diff --git a/themes/cp_app/home.php b/themes/cp_app/home.php
index 7eebda46ee..7947a61e4e 100644
--- a/themes/cp_app/home.php
+++ b/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>
diff --git a/themes/cp_app/pages/credits.php b/themes/cp_app/pages/credits.php
index 98a4dbf472..fc961cff76 100644
--- a/themes/cp_app/pages/credits.php
+++ b/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'] ?>
diff --git a/themes/cp_app/podcast/_layout.php b/themes/cp_app/podcast/_layout.php
index e76bd1990a..0f77aa7241 100644
--- a/themes/cp_app/podcast/_layout.php
+++ b/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', [
diff --git a/themes/cp_app/podcast/about.php b/themes/cp_app/podcast/about.php
index 3ea8d70eab..24b6a674a0 100644
--- a/themes/cp_app/podcast/about.php
+++ b/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;
}?>
diff --git a/themes/cp_app/podcast/activity.php b/themes/cp_app/podcast/activity.php
index 54e84407a4..bc5b42d375 100644
--- a/themes/cp_app/podcast/activity.php
+++ b/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"
diff --git a/themes/cp_app/podcast/follow.php b/themes/cp_app/podcast/follow.php
index 71245c7cda..a08f4210c0 100644
--- a/themes/cp_app/podcast/follow.php
+++ b/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>
diff --git a/themes/cp_app/post/_partials/card.php b/themes/cp_app/post/_partials/card.php
index efe7a952b1..eaef1e8ca3 100644
--- a/themes/cp_app/post/_partials/card.php
+++ b/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
diff --git a/themes/cp_app/post/_partials/post_with_replies.php b/themes/cp_app/post/_partials/post_with_replies.php
index 02128f0e11..91075d56b3 100644
--- a/themes/cp_app/post/_partials/post_with_replies.php
+++ b/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"
diff --git a/themes/cp_app/post/_partials/preview_card.php b/themes/cp_app/post/_partials/preview_card.php
index 7014a44aee..54c013cc19 100644
--- a/themes/cp_app/post/_partials/preview_card.php
+++ b/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>
diff --git a/themes/cp_app/post/_partials/reblog.php b/themes/cp_app/post/_partials/reblog.php
index eb20a9e597..1e4227e8cc 100644
--- a/themes/cp_app/post/_partials/reblog.php
+++ b/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
diff --git a/themes/cp_app/post/_partials/reply.php b/themes/cp_app/post/_partials/reply.php
index 480287caa2..fcef3b417d 100644
--- a/themes/cp_app/post/_partials/reply.php
+++ b/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
--
GitLab