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 1 commit intokeploy:mainfrom
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.
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.
| <img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/k8s-proxy/connect_cluster.png | ||
| " alt="Sample Keploy K8s proxy" width="100%" style={{ borderRadius: '5px' }}/> | ||
| " alt="Sample Keploy K8s proxy" width="100%" style={{ borderRadius: '5px' }} loading="lazy" decoding="async"/> |
There was a problem hiding this comment.
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.
| <img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/k8s-proxy/connect_cluster.png | ||
| " alt="Sample Keploy K8s proxy" width="100%" style={{ borderRadius: '5px' }}/> | ||
| " alt="Sample Keploy K8s proxy" width="100%" style={{ borderRadius: '5px' }} loading="lazy" decoding="async"/> |
There was a problem hiding this comment.
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.
| <img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/keploy_mux_mysql_replay_docs.png | ||
| " alt="Sample Keploy test header" width="100%" style={{ borderRadius: '5px' }} /> | ||
| " alt="Sample Keploy test header" width="100%" style={{ borderRadius: '5px' }} loading="lazy" decoding="async"/> |
There was a problem hiding this comment.
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).
| <img src="https://keploy-devrel.s3.us-west-2.amazonaws.com/keploy_mux_mysql_replay_docs.png | ||
| " alt="Sample Keploy test header" width="100%" style={{ borderRadius: '5px' }} /> | ||
| " alt="Sample Keploy test header" width="100%" style={{ borderRadius: '5px' }} loading="lazy" decoding="async"/> |
There was a problem hiding this comment.
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).
| - <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. |
There was a problem hiding this comment.
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).
| - <img src="https://www.svgrepo.com/show/157174/document.svg" width='20px' loading="lazy" decoding="async"/> Documentation | ||
| - <img src="https://www.svgrepo.com/show/294283/youtube.svg" width='20px' loading="lazy" decoding="async"/> Create a Tutorial | ||
| - <img src="https://www.svgrepo.com/show/10712/pencil.svg" width='20px' loading="lazy" decoding="async"/> Blog writing | ||
| - <img src="https://www.svgrepo.com/show/450193/language.svg" width='20px' loading="lazy" decoding="async"/> Translation |
There was a problem hiding this comment.
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.
| - <img src="https://www.svgrepo.com/show/10712/pencil.svg" width='20px' loading="lazy" decoding="async"/> Used Keploy:- Tell the community about it in an awesome blog post. | ||
|
|
||
| - <img src="https://www.svgrepo.com/show/157174/document.svg" width='20px'/> 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='20px' 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='20px'/> Create a tutorial:- 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='20px' loading="lazy" decoding="async"/> Create a tutorial:- They provide instructions on how to use a tool or service in a step-by-step manner. |
There was a problem hiding this comment.
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).
| - <img src="https://www.svgrepo.com/show/294283/youtube.svg" width='20px' loading="lazy" decoding="async"/> Create a tutorial:- They provide instructions on how to use a tool or service in a step-by-step manner. | ||
|
|
||
| - <img src="https://www.svgrepo.com/show/450193/language.svg" width='20px'/> Translation:- Add a new translation to for our README.md | ||
| - <img src="https://www.svgrepo.com/show/450193/language.svg" width='20px' loading="lazy" decoding="async"/> Translation:- Add a new translation to for our README.md |
There was a problem hiding this comment.
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.
| - <img src="https://www.svgrepo.com/show/10712/pencil.svg" width='20px' loading="lazy" decoding="async"/> Used Keploy:- Tell the community about it in an awesome blog post. | ||
|
|
||
| - <img src="https://www.svgrepo.com/show/157174/document.svg" width='20px'/> 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='20px' 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='20px'/> Create a tutorial:- 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='20px' loading="lazy" decoding="async"/> Create a tutorial:- They provide instructions on how to use a tool or service in a step-by-step manner. |
There was a problem hiding this comment.
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).
| - <img src="https://www.svgrepo.com/show/294283/youtube.svg" width='20px' loading="lazy" decoding="async"/> Create a tutorial:- They provide instructions on how to use a tool or service in a step-by-step manner. | ||
|
|
||
| - <img src="https://www.svgrepo.com/show/450193/language.svg" width='20px'/> Translation:- Add a new translation to for our README.md | ||
| - <img src="https://www.svgrepo.com/show/450193/language.svg" width='20px' loading="lazy" decoding="async"/> Translation:- Add a new translation to for our README.md |
There was a problem hiding this comment.
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
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.