improve code index ejs

Fauzanmhr · Sep 1, 2024 · b44843c · b44843c
1 parent 2e17ed1
commit b44843c
Showing 1 changed file with 26 additions and 16 deletions.
diff --git a/views/index.ejs b/views/index.ejs
@@ -4,27 +4,30 @@
   <div class="row">
     <% animes.forEach(anime => { %>
       <div class="col-lg-2 col-md-3 col-sm-4 col-6 mb-3">
-  <div class="card h-100 d-flex flex-column">
-    <img src="<%= anime.poster %>" class="card-img-top img-fluid" alt="<%= anime.judul %>" style="max-height: 300px; object-fit: cover;">
-    <div class="card-body p-2 d-flex flex-column">
-      <h6 class="card-title text-truncate mb-1" style="font-size: 0.9rem;"><%= anime.judul %></h6>
-      <p class="card-text small mb-1" style="font-size: 0.8rem;">
-        <strong>Release:</strong> <%= anime.hariRilis %><br>
+        <div class="card h-100 d-flex flex-column">
+          <!-- Optimized Image with Lazy Loading -->
+          <img src="<%= anime.poster %>" class="card-img-top img-fluid lazyload" alt="<%= anime.judul %>" loading="lazy" style="max-height: 300px; object-fit: cover;">
+          <div class="card-body p-2 d-flex flex-column">
+            <h6 class="card-title text-truncate mb-1" style="font-size: 0.9rem;"><%= anime.judul %></h6>
+            <p class="card-text small mb-1" style="font-size: 0.8rem;">
+              <strong>Release:</strong> <%= anime.hariRilis %><br>
               <strong>Latest:</strong> <%= anime.tanggalRilisTerbaru %><br>
               <strong>Ep:</strong> <%= anime.episodeTerbaru %>
-      </p>
-      <!-- Button with mt-auto to push it to the bottom -->
-      <a href="/anime/<%= anime.slug %>" class="btn btn-dark btn-sm w-100 mt-auto" style="font-size: 0.8rem;">View</a>
-    </div>
-  </div>
-</div>
+            </p>
+            <!-- Button with mt-auto to push it to the bottom -->
+            <a href="/anime/<%= anime.slug %>" class="btn btn-dark btn-sm w-100 mt-auto" style="font-size: 0.8rem;">View</a>
+          </div>
+        </div>
+      </div>
     <% }) %>
   </div>
   <!-- Pagination -->
   <nav aria-label="Anime list pagination" class="d-flex justify-content-center">
     <ul class="pagination">
       <li class="page-item <%= !pagination.prevPage ? 'disabled' : '' %>">
-        <a class="page-link" href="?page=<%= pagination.prevPage %>">Previous</a>
+        <a class="page-link" href="?page=<%= pagination.prevPage %>" aria-label="Previous">
+          <span aria-hidden="true">&laquo;</span>
+        </a>
       </li>
       <%
         const maxPages = 5;
@@ -41,13 +44,20 @@
         </li>
       <% } %>
       <li class="page-item <%= !pagination.nextPage ? 'disabled' : '' %>">
-        <a class="page-link" href="?page=<%= pagination.nextPage %>">Next</a>
+        <a class="page-link" href="?page=<%= pagination.nextPage %>" aria-label="Next">
+          <span aria-hidden="true">&raquo;</span>
+        </a>
       </li>
     </ul>
   </nav>
 </div>
+
 <%- include('partials/footer') %>
-<!-- Bootstrap JS -->
-<script src="/js/bootstrap.bundle.min.js"></script>
+
+<!-- Preload Bootstrap JS for better performance -->
+<link rel="preload" href="/js/bootstrap.bundle.min.js" as="script">
+
+<!-- Bootstrap JS with defer -->
+<script src="/js/bootstrap.bundle.min.js" defer></script>
 </body>
 </html>