Perf/lighthouse mobile 546

docusaurus.config.js

@@ -129,6 +129,8 @@ const config = {
       logo: {
         alt: "Volcano Logo",
         src: "img/landing/volcano_logo.png",
+        width: 203,
+        height: 34,
       },
       items: [
         {
@@ -178,7 +180,7 @@ const config = {
         <div class="footer-content">
           <p>Volcano is a <a href="https://www.cncf.io/" target="_blank" rel="noopener noreferrer">Cloud Native Computing Foundation</a> incubating project.</p>
           <div class="footer__logo-container">
-            <img class="footer__logo" alt="Cloud Native Computing Foundation Logo" src="/img/landing/logo_cloudnative.png" />
+            <img class="footer__logo" alt="Cloud Native Computing Foundation Logo" src="/img/landing/logo_cloudnative.png" width="320" height="51" loading="lazy" />
           </div>
           <p>The Linux Foundation has registered trademarks and uses trademarks. For a list of trademarks of The Linux Foundation, please see our <a href="https://www.linuxfoundation.org/trademark-usage" target="_blank" rel="noopener noreferrer">Trademark Usage</a> page.</p>
           <p>${new Date().getFullYear()} @ Volcano Project Authors. All rights reserved.</p>

src/components/Blog/index.js

@@ -24,9 +24,9 @@ export default function Blog() {
 
   return (
     <Container className="blogContainer">
-      <h1>
+      <h2>
         <Translate>Recent Posts</Translate>
-      </h1>
+      </h2>
       {recentPosts.length > 0 ? (
         <div className="blogPostsContainer">
           {recentPosts.map((post, idx) => {
@@ -54,6 +54,7 @@ export default function Blog() {
                       src="/img/icon_user.svg"
                       alt="user"
                       className="blogUserIcon"
+                      loading="lazy"
                     />
                     <span>{author}</span>
                   </div>

src/components/Blog/styles.css

@@ -3,7 +3,7 @@
   padding: 4rem 2rem;
 }
 
-.blogContainer h1 {
+.blogContainer h2 {
   text-align: center;
   margin-bottom: 3rem;
   color: var(--ifm-font-color-base);
@@ -249,7 +249,7 @@
 }
 
 @media (max-width: 768px) {
-  .blogContainer h1 {
+  .blogContainer h2 {
     font-size: 1.8rem;
     margin-bottom: 2rem;
   }

src/components/Frameworks/index.js

@@ -7,72 +7,96 @@ const frameworks = [
   {
     name: "Spark",
     logo: "img/landing/spark-logo-hd.png",
+    logoWidth: 282,
+    logoHeight: 282,
     description: "Apache Spark™ is a unified analytics engine for large-scale data processing",
     url: "https://spark.apache.org/"
   },
   {
     name: "Flink",
     logo: "img/landing/volcano_flink.png",
+    logoWidth: 200,
+    logoHeight: 200,
     description: "Apache Flink is a framework and distributed processing engine for stateful computations over unbounded and bounded data streams",
     url: "https://flink.apache.org/"
   },
   {
     name: "TensorFlow",
     logo: "img/landing/volcano_tensorflow.png",
+    logoWidth: 200,
+    logoHeight: 200,
     description: "An end-to-end open source machine learning platform",
     url: "https://www.tensorflow.org/"
   },
   {
     name: "PyTorch",
     logo: "img/landing/volcano_pytorch.png",
+    logoWidth: 200,
+    logoHeight: 200,
     description: "An open source machine learning framework that accelerates the path from research prototypes to production deployment",
     url: "https://pytorch.org/"
   },
   {
     name: "Argo",
     logo: "img/landing/volcano_argo-horizontal-color.png",
+    logoWidth: 200,
+    logoHeight: 200,
     description: "Argo Workflows is an open source container-native workflow engine for orchestrating parallel jobs on Kubernetes. Argo Workflows is implemented as a Kubernetes CRD.",
     url: "https://argoproj.github.io/"
   },
   {
     name: "MindSpore",
     logo: "img/landing/volcano_mindspore.png",
+    logoWidth: 200,
+    logoHeight: 200,
     description: "The all-scenario deep learning framework developed by Huawei.",
     url: "https://www.mindspore.cn/en"
   },
   {
     name: "Ray",
     logo: "img/landing/ray_logo.png",
+    logoWidth: 520,
+    logoHeight: 162,
     description: "Ray is a high-performance distributed computing framework that supports machine learning, deep learning, and distributed applications.",
     url: "https://github.com/ray-project/ray"
   },
   {
     name: "Kubeflow",
     logo: "img/landing/kubeflow.png",
+    logoWidth: 593,
+    logoHeight: 593,
     description: "The Kubeflow project is dedicated to making deployments of machine learning (ML) workflows on Kubernetes simple, portable, and scalable.",
     url: "https://www.kubeflow.org/"
   },
   {
     name: "Open MPI",
     logo: "img/landing/volcano_openMPI.jpg",
+    logoWidth: 248,
+    logoHeight: 248,
     description: "The Open MPI Project is an open source Message Passing Interface implementation that is developed and maintained by a consortium of academic, research, and industry partners.",
     url: "https://www.open-mpi.org/software/ompi/v4.0/"
   },
   {
     name: "Horovod",
     logo: "img/landing/volcano_horovod.png",
+    logoWidth: 214,
+    logoHeight: 214,
     description: "Horovod is a distributed deep learning training framework for TensorFlow, Keras, PyTorch, and Apache MXNet.",
     url: "https://github.com/horovod/horovod"
   },
   {
     name: "MXNet",
     logo: "img/landing/volcano_mxnet.png",
+    logoWidth: 200,
+    logoHeight: 200,
     description: "A truly open source deep learning framework suited for flexible research prototyping and production.",
     url: "https://mxnet.apache.org/versions/1.6/"
   },
   {
     name: "PaddlePaddle",
     logo: "img/landing/volcano_paddle.png",
+    logoWidth: 200,
+    logoHeight: 200,
     description: "PaddlePaddle is an open source deep learning platform derived from industrial practice initiated by Baidu.",
     url: "https://www.paddlepaddle.org.cn/"
   }
@@ -82,7 +106,7 @@ export default function Frameworks() {
   return (
     <div className="frameworks-container">
       <Container className="frameworksSection">
-        <h1><Translate>Rich Framework Support</Translate></h1>
+        <h2><Translate>Rich Framework Support</Translate></h2>
         <p className="frameworks-subtitle">
           <Translate>Seamlessly integrate with mainstream computing frameworks for AI, big data, and scientific computing</Translate>
         </p>
@@ -97,7 +121,13 @@ export default function Frameworks() {
             >
               <div className="framework-card">
                 <div className="framework-logo">
-                  <img src={framework.logo} alt={`${framework.name} Logo`} />
+                  <img
+                    src={framework.logo}
+                    alt={`${framework.name} Logo`}
+                    width={framework.logoWidth}
+                    height={framework.logoHeight}
+                    loading="lazy"
+                  />
                 </div>
                 <h3 className="framework-name">{framework.name}</h3>
                 <p className="framework-description"><Translate>{framework.description}</Translate></p>

src/components/Frameworks/styles.css

@@ -1,6 +1,6 @@
 .frameworks-container {
   width: 100%;
-  background-image: url('/img/landing/bg_1.png');
+  background-image: url('/img/landing/bg_1.webp');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;
@@ -31,7 +31,7 @@
   z-index: 2;
 }
 
-.frameworksSection h1 {
+.frameworksSection h2 {
   text-align: center;
   color: #fff;
   font-size: 1.6rem;
@@ -141,7 +141,7 @@
     gap: 1.2rem;
   }
 
-  .frameworksSection h1 {
+  .frameworksSection h2 {
     font-size: 1.4rem;
   }
 
@@ -163,7 +163,7 @@
     padding : 1rem;
   }
 
-  .frameworksSection h1 {
+  .frameworksSection h2 {
     font-size: 1.3rem;
   }
 

src/components/Hero/index.js

@@ -1,5 +1,6 @@
 import React, { useEffect } from "react";
 import clsx from "clsx";
+import Head from "@docusaurus/Head";
 import Link from "@docusaurus/Link";
 import useDocusaurusContext from "@docusaurus/useDocusaurusContext";
 import Translate from "@docusaurus/Translate";
@@ -22,6 +23,20 @@ export default function Hero() {
 
   return (
     <div className="hero-container">
+      <Head>
+        <link
+          rel="preload"
+          as="image"
+          href="/img/landing/banner_02.webp"
+          fetchpriority="high"
+        />
+      </Head>
+      <img
+        className="hero-background-image"
+        src="/img/landing/banner_02.webp"
+        alt=""
+        fetchpriority="high"
+      />
       <div className="hero-content">
         <h1 className="hero-title">Volcano</h1>
         <p className="hero-subtitle"><Translate>Cloud native batch scheduling system for compute-intensive workloads</Translate></p>

src/components/Hero/styles.css

@@ -6,10 +6,16 @@
   position: relative;
   overflow: hidden;
   height: 500px;
-  background-image: url('/img/landing/banner_02.png');
-  background-size: cover;
-  background-position: center;
-  background-repeat: no-repeat;
+}
+
+.hero-background-image {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  object-position: center;
+  z-index: 0;
 }
 
 .hero-content {