Fix/mobile performance core web vitals

docs/gsoc/contribution-guide.md

@@ -22,7 +22,7 @@ Google pays the students, not the organizations they work with. Beginning in 202
 
 You can read more about the format of the program and its goals [here](https://google.github.io/gsocguides/mentor/).
 
-<img src="/img/gsoc-banner.png"/>
+<img src="/img/gsoc-banner.png" loading="lazy" decoding="async"/>
 
 ## Keploy X GSoC
 

docs/hacktoberfest/contribution-guide.md

@@ -10,7 +10,7 @@ label: Hacktoberfest
 
 Hacktoberfest'22 is a month-long celebration of open-source software run by DigitalOcean. Hacktoberfest is open to everyone, from first-time contributors to seasoned open-source developers. Your open-source journey begins with a pull request.
 
-<img src="https://user-images.githubusercontent.com/53110238/193503992-c839beeb-53fd-46d7-9214-a88bfff6475a.png"/>
+<img src="https://user-images.githubusercontent.com/53110238/193503992-c839beeb-53fd-46d7-9214-a88bfff6475a.png" loading="lazy" decoding="async"/>
 
 ## Hacktoberfest Journey with Keploy
 

docs/hacktoberfest/non-code.md

@@ -8,8 +8,8 @@ label: Hacktoberfest
 
 There are many ways to contribute to Keploy projects without writing a single line of code. You can help with:
 
-- <img src="https://www.svgrepo.com/show/10712/pencil.svg" width='40px'/> Used Keploy recently ? Tell the community about it in an awesome blog post.
+- <img src="https://www.svgrepo.com/show/10712/pencil.svg" width='40px' loading="lazy" decoding="async"/> Used Keploy recently ? Tell the community about it in an awesome blog post.
 
-- <img src="https://www.svgrepo.com/show/157174/document.svg" width='40px'/> Improve Documentation as the more detailed the documentation is, better it will be for people who are looking for help.
+- <img src="https://www.svgrepo.com/show/157174/document.svg" width='40px' loading="lazy" decoding="async"/> Improve Documentation as the more detailed the documentation is, better it will be for people who are looking for help.
 
-- <img src="https://www.svgrepo.com/show/294283/youtube.svg" width='40px'/> Create a tutorial because they provide instructions on how to use a tool or service in a step-by-step manner.
+- <img src="https://www.svgrepo.com/show/294283/youtube.svg" width='40px' loading="lazy" decoding="async"/> Create a tutorial because they provide instructions on how to use a tool or service in a step-by-step manner.

docusaurus.config.js

@@ -53,14 +53,62 @@ module.exports = {
       {name: "twitter:card", content: "summary_large_image"},
     ],
     headTags: [
-      // Preconnect tag
+      // ── Preconnect / DNS-prefetch for critical third-party origins ─────
+      // Keploy CDN
       {
         tagName: "link",
         attributes: {
           rel: "preconnect",
           href: "https://keploy.io/",
         },
       },
+      // Google Fonts (used by Docusaurus default theme)
+      {
+        tagName: "link",
+        attributes: {
+          rel: "preconnect",
+          href: "https://fonts.googleapis.com",
+        },
+      },
+      {
+        tagName: "link",
+        attributes: {
+          rel: "preconnect",
+          href: "https://fonts.gstatic.com",
+          crossorigin: "anonymous",
+        },
+      },
+      // Algolia search
+      {
+        tagName: "link",
+        attributes: {
+          rel: "preconnect",
+          href: "https://WZTL8PLCOD-dsn.algolia.net",
+          crossorigin: "anonymous",
+        },
+      },
+      // Analytics (dns-prefetch only — not render-blocking)
+      {
+        tagName: "link",
+        attributes: {
+          rel: "dns-prefetch",
+          href: "https://www.clarity.ms",
+        },
+      },
+      {
+        tagName: "link",
+        attributes: {
+          rel: "dns-prefetch",
+          href: "https://www.googletagmanager.com",
+        },
+      },
+      {
+        tagName: "link",
+        attributes: {
+          rel: "dns-prefetch",
+          href: "https://www.google-analytics.com",
+        },
+      },
       {
         tagName: "script",
         attributes: {

netlify.toml

@@ -8,3 +8,43 @@
 
 ## Note: if you are looking for Redirects
 # they have been moved to /static/_redirects to make it more manageable - swyx
+
+# ── Performance: Cache headers ────────────────────────────────────────────────
+# Hashed JS/CSS bundles emitted by Docusaurus/webpack → safe to cache 1 year
+[[headers]]
+  for = "/assets/*"
+  [headers.values]
+    Cache-Control = "public, max-age=31536000, immutable"
+
+# Static images served from /img
+[[headers]]
+  for = "/img/*"
+  [headers.values]
+    Cache-Control = "public, max-age=86400, stale-while-revalidate=604800"
+
+# Fonts are NOT content-hashed (e.g. Roboto-Bold.woff2) so immutable is unsafe.
+# Use a 1-week cache with stale-while-revalidate instead.
+[[headers]]
+  for = "/fonts/*"
+  [headers.values]
+    Cache-Control = "public, max-age=604800, stale-while-revalidate=86400"
+
+# Static JS helpers (non-hashed scripts in /docs/js and /docs/scripts)
+[[headers]]
+  for = "/js/*"
+  [headers.values]
+    Cache-Control = "public, max-age=86400"
+
+[[headers]]
+  for = "/scripts/*"
+  [headers.values]
+    Cache-Control = "public, max-age=86400"
+
+# ── Security headers (improves PageSpeed Best Practices score) ──────────────
+[[headers]]
+  for = "/*"
+  [headers.values]
+    X-Frame-Options = "SAMEORIGIN"
+    X-Content-Type-Options = "nosniff"
+    Referrer-Policy = "strict-origin-when-cross-origin"
+    Permissions-Policy = "camera=(), microphone=(), geolocation=()"

src/components/responsive-player/ResponsivePlayer.js

@@ -1,22 +1,39 @@
-import React from "react";
-import ReactPlayer from "react-player";
+import React, {Suspense, lazy} from "react";
+
+// Lazy-load react-player so it is NOT included in the initial JS bundle.
+// react-player/lazy defers loading the actual player implementation until
+// the component is rendered, reducing the first-page-load JS payload.
+const ReactPlayer = lazy(() => import("react-player/lazy"));
 
 function ResponsivePlayer({url, loop, playing}) {
   return (
     <div
       className="relative rounded-lg shadow-lg"
       style={{paddingTop: "56.25%"}}
     >
-      {/* /* Player ratio: 100 / (1280 / 720) */}
-      <ReactPlayer
-        className="absolute left-0 top-0"
-        url={url}
-        loop={loop}
-        playing={playing}
-        width="100%"
-        height="100%"
-        controls={true}
-      />
+      {/* Player ratio: 100 / (1280 / 720) */}
+      <Suspense
+        fallback={
+          <div
+            className="absolute left-0 top-0 flex h-full w-full items-center justify-center bg-gray-100 dark:bg-gray-800"
+            role="status"
+            aria-label="Loading video player"
+          >
+            <div className="h-8 w-8 animate-spin rounded-full border-2 border-gray-400 border-t-transparent dark:border-gray-500" />
+            <span className="sr-only">Loading video player</span>
+          </div>
+        }
+      >
+        <ReactPlayer
+          className="absolute left-0 top-0"
+          url={url}
+          loop={loop}
+          playing={playing}
+          width="100%"
+          height="100%"
+          controls={true}
+        />
+      </Suspense>
     </div>
   );
 }

src/css/custom.css

@@ -2721,3 +2721,50 @@ html[data-theme="dark"] div[class^="sidebar_"] > nav > ul > li > .menu__list-ite
     line-height: 1.4;
   }
 }
+
+/* ===== PERFORMANCE: Rendering & paint optimisations ===== */
+
+/*
+ * content-visibility: auto — lets the browser skip layout/paint for
+ * off-screen sections, reducing LCP and INP on mobile.
+ * contain-intrinsic-size gives the browser a size estimate so the
+ * scroll-bar doesn't jump when content is rendered.
+ */
+footer,
+.footer {
+  content-visibility: auto;
+  contain-intrinsic-size: 0 200px;
+}
+
+/* Sidebar is always below the fold on small viewports */
+@media (max-width: 996px) {
+  .theme-doc-sidebar-container {
+    content-visibility: auto;
+    contain-intrinsic-size: 0 600px;
+  }
+}
+
+/*
+ * Lazy-decoded images — any <img> without an explicit loading attribute
+ * should at minimum decode off the main thread.
+ */
+img:not([loading]) {
+  decoding: async;
+}
+
+/*
+ * Reduce paint layers for the announcement bar (it's a position:sticky
+ * element and can cause extra compositing cost on mobile).
+ * Using attribute substring selector to avoid relying on a hashed class name
+ * that changes between Docusaurus builds.
+ */
+[class*="announcementBar"] {
+  will-change: auto;
+  transform: translateZ(0);
+}
+
+/*
+ * Font-display: swap is configured per @font-face declaration in
+ * src/fonts. Docusaurus-injected Google Fonts links already include
+ * &display=swap in the URL, so no additional override is needed here.
+ */

versioned_docs/version-1.0.0/concepts/what-are-keploy-features.md

@@ -14,21 +14,21 @@ keywords:
 
 Keploy captures all the API calls and subsequent network traffic served by the application. You can use any existing API management tools like Postman, curl to generate test-case.
 
-<img src="/docs/img/record-api.gif?raw=true" width="80%" alt="API Tools"/>
+<img src="/docs/img/record-api.gif?raw=true" width="80%" alt="API Tools" loading="lazy" decoding="async"/>
 
 ### 2. Automatically mock Mutations
 
 Keploy automatically [mocks](/concepts/general-glossary.md#1-api-data-mocking) network/external dependencies for **all CRUD operations** with correct responses.
 
 Data dumps, stubs or mocks for dependencies like DBs, internal services, or third party services like twilio, shopify or stripe are **not required**.
 
-<img src="/docs/img/mock-dependencies.png?raw=true" width="50%" alt="Mock Application Dependencies"/>
+<img src="/docs/img/mock-dependencies.png?raw=true" width="50%" alt="Mock Application Dependencies" loading="lazy" decoding="async"/>
 
 Please check list of currently supported dependencies in [Go, Java and Node](https://keploy.io/#integrations).
 
 Keploy can safely replay writes or mutations by capturing from local or other environments and replaying without API chaining.
 
-<img src="/docs/gif/record-replay.gif?raw=true" width="80%" alt="API Tools"/>
+<img src="/docs/gif/record-replay.gif?raw=true" width="80%" alt="API Tools" loading="lazy" decoding="async"/>
 
 [Idempotency](/concepts/general-glossary.md#2-idempotency) guarantees are also **not required** in the application. Multiple Reads after write operations can be replicated automatically too.
 
@@ -38,7 +38,7 @@ Keploy identifies [noisy fields](/concepts/general-glossary.md#3-noisy-field) in
 
 As the application serves the API, Keploy re-run that API request with the captured dependency mocks.
 
-[//]: # '<img src="/docs/img/noise-filtration.png?raw=true" alt="Keploy noise filtration"/>'
+[//]: # '<img src="/docs/img/noise-filtration.png?raw=true" alt="Keploy noise filtration" loading="lazy" decoding="async"/>'
 
 Keploy then compares if the responses of the API requests disagree with each other.
 If any of the fields of the API responses are different they are marked as random/non-deterministic fields.
@@ -49,7 +49,7 @@ Keploy has [native integrations](/concepts/general-glossary.md#4-interoperabilit
 Code coverage will be reported with existing and Keploy recorded test cases and can also be integrated in
 existing CI pipelines easily.
 
-<img src="/docs/gif/replay-tc.gif?raw=true" alt="Keploy Integration with Testing Libraries"/>
+<img src="/docs/gif/replay-tc.gif?raw=true" alt="Keploy Integration with Testing Libraries" loading="lazy" decoding="async"/>
 
 ### 5. Easy Integration Framework for new Libraries
 

versioned_docs/version-1.0.0/gsoc/contribution-guide.md

@@ -22,7 +22,7 @@ Google pays the students, not the organizations they work with. Beginning in 202
 
 You can read more about the format of the program and its goals [here](https://google.github.io/gsocguides/mentor/).
 
-<img src="/docs/img/gsoc-banner.png"/>
+<img src="/docs/img/gsoc-banner.png" loading="lazy" decoding="async"/>
 
 ## Keploy X GSoC
 

versioned_docs/version-1.0.0/hacktoberfest/contribution-guide.md

@@ -10,7 +10,7 @@ label: Hacktoberfest
 
 Hacktoberfest is a month-long celebration of open-source software run by DigitalOcean. Hacktoberfest is open to everyone, from first-time contributors to seasoned open-source developers. Your open-source journey begins with a pull request.
 
-<img src="https://user-images.githubusercontent.com/53110238/193503992-c839beeb-53fd-46d7-9214-a88bfff6475a.png" alt="hactoberfest"/>
+<img src="https://user-images.githubusercontent.com/53110238/193503992-c839beeb-53fd-46d7-9214-a88bfff6475a.png" alt="hactoberfest" loading="lazy" decoding="async"/>
 
 ## Hacktoberfest Journey with Keploy
 

versioned_docs/version-1.0.0/hacktoberfest/non-code.md

@@ -8,8 +8,8 @@ label: Hacktoberfest
 
 There are many ways to contribute to Keploy projects without writing a single line of code. You can help with:
 
-- <img src="https://www.svgrepo.com/show/10712/pencil.svg" width='40px' alt="pencil"/> Used Keploy recently ? Tell the community about it in an awesome blog post.
+- <img src="https://www.svgrepo.com/show/10712/pencil.svg" width='40px' alt="pencil" loading="lazy" decoding="async"/> Used Keploy recently ? Tell the community about it in an awesome blog post.
 
-- <img src="https://www.svgrepo.com/show/157174/document.svg" width='40px' alt="Documents"/> Improve Documentation as the more detailed the documentation is, better it will be for people who are looking for help.
+- <img src="https://www.svgrepo.com/show/157174/document.svg" width='40px' alt="Documents" loading="lazy" decoding="async"/> Improve Documentation as the more detailed the documentation is, better it will be for people who are looking for help.
 
-- <img src="https://www.svgrepo.com/show/294283/youtube.svg" width='40px' alt="tutorial"/> Create a tutorial because they provide instructions on how to use a tool or service in a step-by-step manner.
+- <img src="https://www.svgrepo.com/show/294283/youtube.svg" width='40px' alt="tutorial" loading="lazy" decoding="async"/> Create a tutorial because they provide instructions on how to use a tool or service in a step-by-step manner.

versioned_docs/version-2.0.0/concepts/platform-requirements.md

@@ -27,8 +27,8 @@ Linux:
 
 | Operating System                                                                                                                                                                                                                                                                                              | Without Docker                                                                                                                  | Docker Installation                                                                                                             | Prerequisites                                                                                                                                                                            |
 | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| <img src="https://www.pngplay.com/wp-content/uploads/3/Apple-Logo-Transparent-Images.png" width="15" height="15" alt="MacOS" /> **MacOS**                                                                                                                                                                     | [Guide](/keploy-explained/mac-linux.md)                                                                                         | [Guide](/server/installation/)                                                                  | - Docker Desktop version must be 4.25.2 or above<br/>                                                                                                                                    |
-| <img src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Windows_logo_-_2012.svg" width="15" height="15" alt="Windows" /> **Windows**                                                                                                                                                                    | <img src="https://upload.wikimedia.org/wikipedia/commons/e/e5/Green_tick_pointed.svg" width="20" height="20" alt="Supported" /> | <img src="https://upload.wikimedia.org/wikipedia/commons/e/e5/Green_tick_pointed.svg" width="20" height="20" alt="Supported" /> | - Use [WSL](https://learn.microsoft.com/en-us/windows/wsl/install#install-wsl-command) `wsl --install` <br/> - Windows 10 version 2004 and higher (Build 19041 and higher) or Windows 11 |
-| <img src="https://th.bing.com/th/id/R.7802b52b7916c00014450891496fe04a?rik=r8GZM4o2Ch1tHQ&riu=http%3a%2f%2f1000logos.net%2fwp-content%2fuploads%2f2017%2f03%2fLINUX-LOGO.png&ehk=5m0lBvAd%2bzhvGg%2fu4i3%2f4EEHhF4N0PuzR%2fBmC1lFzfw%3d&risl=&pid=ImgRaw&r=0" width="10" height="10" alt="Linux" /> **Linux** | <img src="https://upload.wikimedia.org/wikipedia/commons/e/e5/Green_tick_pointed.svg" width="20" height="20" alt="Supported" /> | <img src="https://upload.wikimedia.org/wikipedia/commons/e/e5/Green_tick_pointed.svg" width="20" height="20" alt="Supported" /> | Linux kernel 5.15 or higher                                                                                                                                                              |
+| <img src="https://www.pngplay.com/wp-content/uploads/3/Apple-Logo-Transparent-Images.png" width="15" height="15" alt="MacOS" loading="lazy" decoding="async"/> **MacOS**                                                                                                                                                                     | [Guide](/keploy-explained/mac-linux.md)                                                                                         | [Guide](/server/installation/)                                                                  | - Docker Desktop version must be 4.25.2 or above<br/>                                                                                                                                    |
+| <img src="https://upload.wikimedia.org/wikipedia/commons/5/5f/Windows_logo_-_2012.svg" width="15" height="15" alt="Windows" loading="lazy" decoding="async"/> **Windows**                                                                                                                                                                    | <img src="https://upload.wikimedia.org/wikipedia/commons/e/e5/Green_tick_pointed.svg" width="20" height="20" alt="Supported" loading="lazy" decoding="async"/> | <img src="https://upload.wikimedia.org/wikipedia/commons/e/e5/Green_tick_pointed.svg" width="20" height="20" alt="Supported" loading="lazy" decoding="async"/> | - Use [WSL](https://learn.microsoft.com/en-us/windows/wsl/install#install-wsl-command) `wsl --install` <br/> - Windows 10 version 2004 and higher (Build 19041 and higher) or Windows 11 |
+| <img src="https://th.bing.com/th/id/R.7802b52b7916c00014450891496fe04a?rik=r8GZM4o2Ch1tHQ&riu=http%3a%2f%2f1000logos.net%2fwp-content%2fuploads%2f2017%2f03%2fLINUX-LOGO.png&ehk=5m0lBvAd%2bzhvGg%2fu4i3%2f4EEHhF4N0PuzR%2fBmC1lFzfw%3d&risl=&pid=ImgRaw&r=0" width="10" height="10" alt="Linux" loading="lazy" decoding="async"/> **Linux** | <img src="https://upload.wikimedia.org/wikipedia/commons/e/e5/Green_tick_pointed.svg" width="20" height="20" alt="Supported" loading="lazy" decoding="async"/> | <img src="https://upload.wikimedia.org/wikipedia/commons/e/e5/Green_tick_pointed.svg" width="20" height="20" alt="Supported" loading="lazy" decoding="async"/> | Linux kernel 5.15 or higher                                                                                                                                                              |
 
 On MacOS and Windows, additional tools are required for Keploy due to the lack of native eBPF support.