optimize banner

1 files changed, 13 insertions, 1 deletions

diff --git a/src/components/ui/HeroBanner.jsx b/src/components/ui/HeroBanner.jsx
index 9a62465d..64838b85 100644
--- a/src/components/ui/HeroBanner.jsx
+++ b/src/components/ui/HeroBanner.jsx
@@ -39,16 +39,28 @@ const HeroBanner = () => {
     pagination: { dynamicBullets: false, clickable: true },
   };
 
+  const customLoader = ({ src }) => {
+    return src; // Loader yang mengembalikan URL gambar asli
+  };
+
   const BannerComponent = useMemo(() => {
-    return heroBanner.data?.map((banner, index) => (
+    if (!heroBanner.data) return null;
+
+    return heroBanner.data.map((banner, index) => (
       <SwiperSlide key={index}>
         <Link href={banner.url} className='w-full h-auto'>
           <Image
+            loader={customLoader}
             src={banner.image}
             alt={banner.name}
             width={1152}
             height={768}
             className='w-full h-auto'
+            priority={index === 0} 
+            loading={index === 0 ? 'eager' : 'lazy'} 
+            placeholder="blur" 
+            blurDataURL="/images/indoteknik-placeholder.png" 
+            sizes="(max-width: 768px) 100vw, 50vw" 
           />
         </Link>
       </SwiperSlide>