docs(homepage): lazy load images

web-infra-dev · Aug 27, 2024 · 48dd905 · 48dd905
1 parent a154fcf
commit 48dd905
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 2 deletions.
diff --git a/website/theme/components/Landingpage/BuiltWithRspack/index.tsx b/website/theme/components/Landingpage/BuiltWithRspack/index.tsx
@@ -62,7 +62,7 @@ const CompanyItem = ({ item }: { item: Company }) => {
   const { logo, name, url, text, width } = item;
   return (
     <Link className={styles.logo} href={url}>
-      <img src={logo} alt={name} style={{ width }} />
+      <img src={logo} alt={name} style={{ width }} loading="lazy" />
       {text !== undefined ? (
         <span className={styles.logoText}>{text}</span>
       ) : (

diff --git a/website/theme/components/Landingpage/FullyFeatured/index.tsx b/website/theme/components/Landingpage/FullyFeatured/index.tsx
@@ -125,6 +125,7 @@ const FullyFeatured = memo(() => {
                       src={icon}
                       alt={index.toString()}
                       className={styles.icon}
+                      loading="lazy"
                     />
                     <div className={styles.featureContent}>
                       <h2 className={styles.featureTitle}>{title}</h2>

diff --git a/website/theme/components/Landingpage/ToolStack/index.tsx b/website/theme/components/Landingpage/ToolStack/index.tsx
@@ -65,7 +65,12 @@ const ToolStack: React.FC = memo(() => {
           {tools.map(({ name, desc, logo, url }) => {
             return (
               <Link className={styles.tool} key={name} href={url}>
-                <img src={logo} alt={name} className={styles.logo} />
+                <img
+                  src={logo}
+                  alt={name}
+                  className={styles.logo}
+                  loading="lazy"
+                />
                 <h3 className={styles.toolTitle}>{name}</h3>
                 <p className={styles.toolDescription}>{desc}</p>
               </Link>