lazy load images

configs/nextjs/headers.js

@@ -24,6 +24,10 @@ async function headers() {
           key: 'Cross-Origin-Opener-Policy',
           value: 'same-origin',
         },
+        {
+          key: 'Referrer-Policy',
+          value: 'origin-when-cross-origin',
+        },
       ],
     },
   ];

ui/shared/nft/NftImage.tsx

@@ -63,6 +63,7 @@ const NftImage = ({ url, className, fallbackPadding, objectFit }: Props) => {
         fallback={ url && isLoading ? <Skeleton/> : <Fallback className={ className } padding={ fallbackPadding }/> }
         onError={ handleLoadError }
         onLoad={ handleLoad }
+        loading="lazy"
       />
     </AspectRatio>
   );