perf: use async decoding and eager loading in images (#2437)

Signed-off-by: GitHub <[email protected]>
jellyfin · Aug 29, 2024 · 83a1e84 · 83a1e84
1 parent 7acf5fe
commit 83a1e84
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/frontend/index.html b/frontend/index.html
@@ -14,6 +14,6 @@
     <script type="module" src="src/main.ts"></script>
   </head>
   <body class="j-splash">
-    <img src="./icon.svg" alt="Jellyfin Logo">
+    <img src="./icon.svg" alt="Jellyfin Logo" loading="eager" decoding="async">
   </body>
 </html>
diff --git a/frontend/src/components/lib/JImg.vue b/frontend/src/components/lib/JImg.vue
@@ -13,8 +13,9 @@
       <img
         v-if="shown"
         class="j-img"
-        v-bind="mergeProps($props, $attrs)"
-        :alt="$props.alt">
+        loading="eager"
+        decoding="async"
+        v-bind="mergeProps($props, $attrs)">
       <template v-else>
         <slot
           v-if="$slots.placeholder"

diff --git a/frontend/src/components/lib/JSplashscreen.vue b/frontend/src/components/lib/JSplashscreen.vue
@@ -4,7 +4,9 @@
     :class="clientSettings.currentTheme.value">
     <img
       src="./icon.svg"
-      alt="Jellyfin Logo">
+      alt="Jellyfin Logo"
+      loading="eager"
+      decoding="async">
     <JTransition
       name="slide-y-reverse"
       appear>