lazy load index images

pactus-project · Sep 30, 2024 · 151d235 · 151d235
1 parent fbf4716
commit 151d235
Showing 1 changed file with 9 additions and 5 deletions.
diff --git a/layouts/index.html b/layouts/index.html
@@ -1,6 +1,6 @@
 {{ define "title" }}{{ .Title }}{{ end }}
 {{ define "main" }}
-<img src="/images/landing-top-bg1.png" alt="" class="min-w-full absolute -top-10" />
+<img src="/images/landing-top-bg1.png" alt="" class="min-w-full absolute -top-10" loading="eager"/>
 <section class="z-10 relative flex flex-col min-h-full flex-grow" style="position: relative;">
   <div class="flex-grow">
     <div class="text-center px-5 md:px-0 z-20 pt-[10rem] md:pt-[15rem] bg-transparent">
@@ -48,7 +48,7 @@
       </div>
     </div>
     {{ partial "partners.html" }}
-    <img class="absolute -z-10 mt-10" src="/images/blocks.svg" alt="" />
+    <img class="absolute -z-10 mt-10" src="/images/blocks.svg" alt="" loading="lazy"/>
     <div class="mt-[6rem] md:mt-[10rem] z-10 relative">
       <div class="container mx-auto grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5">
         <div class="card h-full w-full rounded-xl" data-aos="fade-up" data-aos-duration="1000">
@@ -412,7 +412,7 @@ <h3 class="fn__gradient_title text-2xl"><span class="prefix"></span><span data-f
         </div>
       </div>
     </div>
-    <img class="absolute -z-10 right-9" src="/images/chains.svg" alt="" />
+    <img class="absolute -z-10 right-9" src="/images/chains.svg" alt="" loading="lazy"/>
     <div class="mt-[6rem] md:mt-[10rem]">
       <div class="container mx-auto">
         <h1
@@ -426,9 +426,11 @@ <h3 class="fn__gradient_title text-2xl"><span class="prefix"></span><span data-f
                 {{ range first 10 (where .Site.RegularPages "Type" "blog") }}
                 <div class="swiper-slide">
                   <div class="container mx-auto">
+                    {{ $image := resources.Get .Params.image }}
+                    {{ $resized := $image.Resize "600x webp q30" }}
                     <div
                       class="w-full p-10 bg-[#14161D] rounded-2xl shadow-xl shadow-[#0B0B0F] flex flex-col md:flex-row items-start md:items-center gap-3">
-                      <img data-src="{{ .Params.image }}"
+                      <img data-src="{{ $resized.Permalink }}" loading="lazy"
                         class="lazy w-full md:w-1/4 h-auto md:h-48 object-cover rounded-2xl mb-4 md:mb-0">
                       <div class="flex-1">
                         <h1 class="text-2xl font-bold text-neutral-50">
@@ -458,12 +460,14 @@ <h6 class="font-medium text-sm mt-2">
             <div class="">
               {{ range first 3 (where .Site.RegularPages "Type" "blog") }}
               {{$link := .Permalink}}
+              {{ $image := resources.Get .Params.image }}
+              {{ $resized := $image.Resize "600x webp q30" }}
               <div class="swiper-slide">
                 <div class="container mx-auto">
                   <div
                     class="w-full p-10 bg-[#14161D] rounded-2xl shadow-xl shadow-[#0B0B0F] flex flex-col items-start gap-3">
                     <a href="{{$link}}" class="w-full">
-                      <img src="{{ .Params.image }}" alt="{{ .Title }}"
+                      <img src="{{ $resized.Permalink }}" loading="lazy" alt="{{ .Title }}"
                         class="w-full h-auto md:h-48 object-cover rounded-2xl mb-4 md:mb-0">
                     </a>
                     <div class="flex-1">