optimize code on episode.ejs

views/episode.ejs

@@ -10,8 +10,8 @@
             <span class="visually-hidden">Loading...</span>
           </div>
         </div>
-        <!-- Streaming Iframe -->
-        <iframe id="streaming-iframe" class="d-none" src="<%= episode.streamingUrl %>" title="Streaming Player" allowfullscreen></iframe>
+        <!-- Streaming Iframe with Lazy Loading -->
+        <iframe id="streaming-iframe" class="d-none lazyload" data-src="<%= episode.streamingUrl %>" title="Streaming Player" allowfullscreen></iframe>
       </div>
       <div class="mb-4">
         <select id="streaming-source" class="form-select">
@@ -68,14 +68,33 @@
   </div>
 </div>
 <%- include('partials/footer') %>
-<!-- Bootstrap JS -->
-<script src="/js/bootstrap.bundle.min.js"></script>
+
+<!-- Preload key assets for better performance -->
+<link rel="preload" href="/css/bootstrap.min.css" as="style">
+<link rel="preload" href="/js/bootstrap.bundle.min.js" as="script">
+
+<!-- Bootstrap JS with defer -->
+<script src="/js/bootstrap.bundle.min.js" defer></script>
+
+<!-- Lazy Loading Script -->
 <script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const iframe = document.getElementById('streaming-iframe');
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          iframe.src = iframe.getAttribute('data-src');
+          observer.disconnect();
+        }
+      });
+    });
+    observer.observe(iframe);
+  });
+
   async function decodeShortlink(shortlink) {
     try {
       const response = await fetch(`/decode-shortlink?url=${encodeURIComponent(shortlink)}`);
-      const decodedUrl = await response.text();
-      return decodedUrl;
+      return await response.text();
     } catch (error) {
       console.error('Error decoding shortlink:', error);
       return shortlink; // Return the original shortlink if decoding fails