Commit f0685e44 authored by Yassine Doghri's avatar Yassine Doghri
Browse files

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

parent ac6ddfc4

app/Libraries/Vite/Vite.php

+1 −1
Original line number Diff line number Diff line
@@ -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

+1 −1
Original line number Diff line number Diff line
@@ -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

+1 −1
Original line number Diff line number Diff line
@@ -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

+2 −2
Original line number Diff line number Diff line
@@ -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

+2 −2
Original line number Diff line number Diff line 
<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">