-
-
Notifications
You must be signed in to change notification settings - Fork 289
perf(docs): add loading="lazy" decoding="async" to all <img> tags - #828
perf(docs): add loading="lazy" decoding="async" to all <img> tags #828Aryan-B-Parikh wants to merge 2 commits into
Conversation
All <img> HTML tags across versioned docs (v1–v4) and current docs pages now have loading="lazy" decoding="async" so images are: - Deferred until they enter the viewport (reduces initial page weight) - Decoded off the main thread (reduces INP / Total Blocking Time) Key heavy assets now lazy-loaded: - /gif/record-replay.gif (2.5 MB), /gif/replay-tc.gif (2.1 MB) - /gif/unit-test.gif (24.8 MB!) ← was loading unconditionally - /img/record-api.gif (1.1 MB) - multiple 600 KB–1.4 MB PNG screenshots Affects 112 documentation files across all supported doc versions. Closes #2042" Signed-off-by: Aryan Parikh <aryan81006@gmail.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Pull request overview
This PR updates documentation pages (current + versioned v1–v4) to improve page-load performance by adding loading="lazy" and decoding="async" to HTML <img> tags so images are deferred until near-viewport and decoded asynchronously.
Changes:
- Added
loading="lazy"anddecoding="async"to<img>tags across docs and versioned docs. - Updated inline/icon images and large screenshots/GIF embeds consistently across docs versions.
- No runtime (CSS/JS/config) changes.
Reviewed changes
Copilot reviewed 112 out of 112 changed files in this pull request and generated 12 comments.
Show a summary per file
| File | Description |
|---|---|
| versioned_docs/version-4.0.0/server/index.md | Adds lazy/async attributes to OS icon images. |
| versioned_docs/version-4.0.0/running-keploy/utg-vsc-extension.md | Adds lazy/async to screenshots. |
| versioned_docs/version-4.0.0/running-keploy/utg-pr-agent.md | Adds lazy/async to screenshots. |
| versioned_docs/version-4.0.0/running-keploy/docker-tls.md | Adds lazy/async to inline Docker logo image. |
| versioned_docs/version-4.0.0/running-keploy/api-testing-tool-ai-powered.md | Adds lazy/async to product images. |
| versioned_docs/version-4.0.0/running-keploy/api-testing-chrome-extension.md | Adds lazy/async to product images. |
| versioned_docs/version-4.0.0/quickstart/sanic-mongo.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/samples-java.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/samples-go-gin-mongo.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/samples-echo.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/sample-ts.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/python-microservices.md | Adds lazy/async to many microservices screenshots. |
| versioned_docs/version-4.0.0/quickstart/node-jwt-sql.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/node-express-mongoose.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/nextjs-postgres.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/k8s-proxy.md | Adds lazy/async to K8s proxy screenshots. |
| versioned_docs/version-4.0.0/quickstart/java-spring-postgres.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/java-spring-boot-xml.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/java-spring-boot-openhospital.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/go-mux-sql.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/go-mux-mysql.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/go-fasthttp-postgres.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-4.0.0/quickstart/code-coverage.md | Adds lazy/async to code coverage images. |
| versioned_docs/version-4.0.0/keploy-explained/how-keploy-works.md | Adds lazy/async to architecture image. |
| versioned_docs/version-4.0.0/keploy-cloud/testgeneration.md | Adds lazy/async to embedded image. |
| versioned_docs/version-4.0.0/keploy-cloud/new-application.md | Adds lazy/async to UI screenshot. |
| versioned_docs/version-4.0.0/keploy-cloud/keploy-console.md | Adds lazy/async to console/UI screenshots. |
| versioned_docs/version-4.0.0/hacktoberfest/non-code.md | Adds lazy/async to inline icons. |
| versioned_docs/version-4.0.0/hacktoberfest/contribution-guide.md | Adds lazy/async to inline icons. |
| versioned_docs/version-4.0.0/gsoc/contribution-guide.md | Adds lazy/async to banner image. |
| versioned_docs/version-4.0.0/concepts/what-is-keploy.md | Adds lazy/async to concept GIF/images. |
| versioned_docs/version-4.0.0/concepts/what-are-keploy-features.md | Adds lazy/async to concept GIF/images (including commented examples). |
| versioned_docs/version-4.0.0/concepts/reference/glossary/stubs.md | Adds lazy/async to glossary image. |
| versioned_docs/version-4.0.0/concepts/reference/glossary/mocks.md | Adds lazy/async to glossary image. |
| versioned_docs/version-4.0.0/concepts/reference/glossary/microservice-testing.md | Adds lazy/async to glossary image. |
| versioned_docs/version-4.0.0/concepts/reference/glossary/end-to-end-testing.md | Adds lazy/async to glossary image. |
| versioned_docs/version-4.0.0/concepts/reference/glossary/code-coverage.md | Adds lazy/async to glossary image. |
| versioned_docs/version-4.0.0/concepts/platform-requirements.md | Adds lazy/async to table icon images. |
| versioned_docs/version-3.0.0/server/index.md | Adds lazy/async attributes to OS icon images. |
| versioned_docs/version-3.0.0/running-keploy/utg-vsc-extension.md | Adds lazy/async to screenshots. |
| versioned_docs/version-3.0.0/running-keploy/utg-pr-agent.md | Adds lazy/async to screenshots. |
| versioned_docs/version-3.0.0/running-keploy/docker-tls.md | Adds lazy/async to inline Docker logo image. |
| versioned_docs/version-3.0.0/running-keploy/api-testing-tool-ai-powered.md | Adds lazy/async to product images. |
| versioned_docs/version-3.0.0/running-keploy/api-testing-chrome-extension.md | Adds lazy/async to product images. |
| versioned_docs/version-3.0.0/quickstart/sanic-mongo.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/samples-java.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/samples-go-gin-mongo.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/samples-echo.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/sample-ts.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/python-microservices.md | Adds lazy/async to many microservices screenshots. |
| versioned_docs/version-3.0.0/quickstart/node-jwt-sql.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/node-express-mongoose.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/nextjs-postgres.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/k8s-proxy.md | Adds lazy/async to K8s proxy screenshots. |
| versioned_docs/version-3.0.0/quickstart/java-spring-postgres.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/java-spring-boot-xml.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/java-spring-boot-openhospital.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/go-mux-sql.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/go-mux-mysql.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/go-fasthttp-postgres.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-3.0.0/quickstart/code-coverage.md | Adds lazy/async to code coverage images. |
| versioned_docs/version-3.0.0/keploy-explained/how-keploy-works.md | Adds lazy/async to architecture image. |
| versioned_docs/version-3.0.0/keploy-cloud/testgeneration.md | Adds lazy/async to embedded image. |
| versioned_docs/version-3.0.0/keploy-cloud/new-application.md | Adds lazy/async to UI screenshot. |
| versioned_docs/version-3.0.0/keploy-cloud/keploy-console.md | Adds lazy/async to console/UI screenshots. |
| versioned_docs/version-3.0.0/hacktoberfest/non-code.md | Adds lazy/async to inline icons. |
| versioned_docs/version-3.0.0/hacktoberfest/contribution-guide.md | Adds lazy/async to inline icons. |
| versioned_docs/version-3.0.0/gsoc/contribution-guide.md | Adds lazy/async to banner image. |
| versioned_docs/version-3.0.0/concepts/what-is-keploy.md | Adds lazy/async to concept GIF/images. |
| versioned_docs/version-3.0.0/concepts/what-are-keploy-features.md | Adds lazy/async to concept GIF/images (including commented examples). |
| versioned_docs/version-3.0.0/concepts/reference/glossary/stubs.md | Adds lazy/async to glossary image. |
| versioned_docs/version-3.0.0/concepts/reference/glossary/mocks.md | Adds lazy/async to glossary image. |
| versioned_docs/version-3.0.0/concepts/reference/glossary/microservice-testing.md | Adds lazy/async to glossary image. |
| versioned_docs/version-3.0.0/concepts/reference/glossary/end-to-end-testing.md | Adds lazy/async to glossary image. |
| versioned_docs/version-3.0.0/concepts/reference/glossary/code-coverage.md | Adds lazy/async to glossary image. |
| versioned_docs/version-3.0.0/concepts/platform-requirements.md | Adds lazy/async to table icon images. |
| versioned_docs/version-2.0.0/server/index.md | Adds lazy/async attributes to OS icon images. |
| versioned_docs/version-2.0.0/running-keploy/unit-test-generator.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/running-keploy/docker-tls.md | Adds lazy/async to inline Docker logo image. |
| versioned_docs/version-2.0.0/quickstart/sanic-mongo.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/quickstart/samples-java.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/quickstart/samples-go-gin-mongo.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/quickstart/sample-ts.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/quickstart/node-jwt-sql.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/quickstart/node-express-mongoose.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/quickstart/java-spring-postgres.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/quickstart/java-spring-boot-xml.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/quickstart/java-spring-boot-openhospital.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/quickstart/java-spring-boot-mongo.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/quickstart/go-mux-sql.md | Adds lazy/async to quickstart screenshots. |
| versioned_docs/version-2.0.0/keploy-explained/how-keploy-works.md | Adds lazy/async to architecture image. |
| versioned_docs/version-2.0.0/keploy-cloud/testgeneration.md | Adds lazy/async to embedded image. |
| versioned_docs/version-2.0.0/keploy-cloud/new-application.md | Adds lazy/async to UI screenshot. |
| versioned_docs/version-2.0.0/keploy-cloud/keploy-console.md | Adds lazy/async to console/UI screenshots. |
| versioned_docs/version-2.0.0/keploy-cloud/deduplication.md | Adds lazy/async to embedded images. |
| versioned_docs/version-2.0.0/hacktoberfest/non-code.md | Adds lazy/async to inline icons (with existing alt). |
| versioned_docs/version-2.0.0/hacktoberfest/contribution-guide.md | Adds lazy/async to inline icons (with existing alt). |
| versioned_docs/version-2.0.0/gsoc/contribution-guide.md | Adds lazy/async to banner image. |
| versioned_docs/version-2.0.0/concepts/what-is-keploy.md | Adds lazy/async to concept GIF/images. |
| versioned_docs/version-2.0.0/concepts/what-are-keploy-features.md | Adds lazy/async to concept GIF/images (including commented examples). |
| versioned_docs/version-2.0.0/concepts/reference/glossary/stubs.md | Adds lazy/async to glossary image. |
| versioned_docs/version-2.0.0/concepts/reference/glossary/mocks.md | Adds lazy/async to glossary image. |
| versioned_docs/version-2.0.0/concepts/reference/glossary/microservice-testing.md | Adds lazy/async to glossary image. |
| versioned_docs/version-2.0.0/concepts/reference/glossary/end-to-end-testing.md | Adds lazy/async to glossary image. |
| versioned_docs/version-2.0.0/concepts/platform-requirements.md | Adds lazy/async to table icon images. |
| versioned_docs/version-1.0.0/hacktoberfest/non-code.md | Adds lazy/async to inline icons. |
| versioned_docs/version-1.0.0/hacktoberfest/contribution-guide.md | Adds lazy/async to event image. |
| versioned_docs/version-1.0.0/gsoc/contribution-guide.md | Adds lazy/async to banner image. |
| versioned_docs/version-1.0.0/concepts/what-are-keploy-features.md | Adds lazy/async to concept GIF/images (including commented examples). |
| docs/hacktoberfest/non-code.md | Adds lazy/async to inline icons. |
| docs/hacktoberfest/contribution-guide.md | Adds lazy/async to event image. |
| docs/gsoc/contribution-guide.md | Adds lazy/async to banner image. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Copilot
AI
Apr 10, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The src attribute is split across lines, leaving a newline inside the quoted URL. In MDX/HTML this typically results in an invalid URL (and the image won’t load reliably). Keep the entire <img ...> tag (or at least the src="...") on a single line so the URL contains no whitespace/newlines.
Copilot
AI
Apr 10, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The src attribute is split across lines, leaving a newline inside the quoted URL. In MDX/HTML this typically results in an invalid URL (and the image won’t load reliably). Keep the entire <img ...> tag (or at least the src="...") on a single line so the URL contains no whitespace/newlines.
Copilot
AI
Apr 10, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The <img> tag’s src attribute is split across lines, which inserts a newline into the quoted URL and can break image loading. Rewrite this so src="..." is a single uninterrupted string (ideally the whole tag on one line).
Copilot
AI
Apr 10, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The <img> tag’s src attribute is split across lines, which inserts a newline into the quoted URL and can break image loading. Rewrite this so src="..." is a single uninterrupted string (ideally the whole tag on one line).
Copilot
AI
Apr 10, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These inline icon images are missing alt. For accessibility, either provide meaningful alt text or mark them decorative with alt="" (and optionally aria-hidden="true"). This is also inconsistent with older docs versions that include alt for the same icons (e.g. versioned_docs/version-2.0.0/hacktoberfest/non-code.md:11-17).
Copilot
AI
Apr 10, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
The inline icon images in this list are missing alt. Please add alt text (or alt="" for decorative icons) for accessibility and to stay consistent with versioned_docs/version-2.0.0/hacktoberfest/contribution-guide.md:31-34, which includes alt for the same icons.
Copilot
AI
Apr 10, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These inline icon images are missing alt. For accessibility, either provide meaningful alt text or mark them decorative with alt="" (and optionally aria-hidden="true"). This is also inconsistent with older docs versions that include alt for the same icons (e.g. versioned_docs/version-2.0.0/hacktoberfest/non-code.md:11-17).
Copilot
AI
Apr 10, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This inline icon image is missing alt. Add alt text (or alt="" if decorative) to keep the list accessible and consistent with versioned_docs/version-2.0.0/hacktoberfest/non-code.md:11-17.
Copilot
AI
Apr 10, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
These inline icon images are missing alt. For accessibility, either provide meaningful alt text or mark them decorative with alt="" (and optionally aria-hidden="true"). This is also inconsistent with older docs versions that include alt for the same icons (e.g. versioned_docs/version-2.0.0/hacktoberfest/non-code.md:11-17).
Copilot
AI
Apr 10, 2026
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This inline icon image is missing alt. Add alt text (or alt="" if decorative) to keep the list accessible and consistent with versioned_docs/version-2.0.0/hacktoberfest/non-code.md:11-17.
a958857 to
0de496d
Compare
Uh oh!
There was an error while loading. Please reload this page.
All HTML tags across versioned docs (v1–v4) and current docs pages now have loading="lazy" decoding="async" so images are:
Key heavy assets now lazy-loaded:
Affects 112 documentation files across all supported doc versions.
Closes keploy/keploy#2042
Summary
Split out the docs-only change that adds lazy loading attributes to markdown images.
Changes
loading="lazy"anddecoding="async"to markdown<img>tags across versioned docs.Testing
Notes
This PR isolates the markdown image lazy-loading updates from the broader performance work to reduce review scope and merge risk.