Skip to content

perf(homepage): optimize responsive images and reserve media dimensions [Codex] - #1366

Open
jderochervlk wants to merge 4 commits into
perf/content-highlighting-boundaryfrom
perf/homepage-responsive-images
Open

jderochervlk wants to merge 4 commits into
perf/content-highlighting-boundaryfrom
perf/homepage-responsive-images

Conversation

@jderochervlk

@jderochervlk jderochervlk commented Sep 19, 2026

Copy link
Copy Markdown
Collaborator

This layer of #1354 replaces fixed-size homepage photos and screenshots with build-generated AVIF/WebP candidates. The Vite plugin and core package are development dependencies; a small native picture/img component consumes their metadata without adding the responsive-image React runtime or any effects. Original public asset URLs remain available.

All 63 homepage images and three videos now declare dimensions. Gallery source sizes account for its fixed-height crop, SVG logo ratios preserve the existing layout, and native videos keep controls and posters while using preload="none".

At DPR 1, the three displayed responsive images fall from 134,130 bytes to 53,353 on desktop and 42,687 on mobile. The production asset report records the tradeoff: JavaScript gzip grows from 143,792 to 145,858 bytes, CSS gzip from 13,086 to 13,099 bytes, and DOM elements from 409 to 415 for the three picture/source pairs. Missing image and video dimension counts are now zero.

Builds on #1365.

@jderochervlk
jderochervlk added this pull request to stack #1359 September 19, 2026 18:45
@jderochervlk jderochervlk changed the title perf(homepage): generate responsive images and reserve media space perf(homepage): optimize responsive images and reserve media dimensions [Codex] Sep 19, 2026
@cloudflare-workers-and-pages

cloudflare-workers-and-pages Bot commented Sep 19, 2026

Copy link
Copy Markdown

Deploying with  Cloudflare Workers  Cloudflare Workers

The latest updates on your project. Learn more about integrating Git with Workers.

Status Name Latest Commit Preview URL Updated (UTC)
✅ Deployment successful!
View logs
guide 09c3b30 Commit Preview URL

Branch Preview URL
Sep 20 2026, 02:46 PM

@github-actions

github-actions Bot commented Sep 19, 2026

Copy link
Copy Markdown
Contributor

Lighthouse baseline

Compared with target branch perf/content-highlighting-boundary at commit 805db73. Scores are the median of 3 runs against the deployed Cloudflare preview.

Category Target Current Change
Performance 87 86 -1
Accessibility 74 80 +6
Best practices 100 100 0
SEO 50 58 +8

Download the full Lighthouse reports and baseline

Commit 0a3deea · Cloudflare preview

@jderochervlk
jderochervlk marked this pull request as ready for review September 19, 2026 18:55
@chatgpt-codex-connector

chatgpt-codex-connector Bot commented Sep 19, 2026

Copy link
Copy Markdown

Codex Review Summary

This comment shows the latest Codex review activity on this pull request.

Review Status Commit Review trigger
📝 Code Review Completed 2026-09-20T16:20:58.142346Z 09c3b30 Draft marked ready
ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review" or "@codex security review".

Codex reacts with 👀 while any review is running, comments if it has suggestions, and reacts with 👍 once all reviews finish with no findings.

@jderochervlk
jderochervlk force-pushed the perf/homepage-responsive-images branch from a27fa4d to d58539f Compare September 19, 2026 21:52
@jderochervlk
jderochervlk force-pushed the perf/homepage-responsive-images branch from d58539f to 05f1c99 Compare September 19, 2026 22:52
@jderochervlk
jderochervlk marked this pull request as draft September 19, 2026 23:02
@jderochervlk
jderochervlk force-pushed the perf/homepage-responsive-images branch from 05f1c99 to 0dbdfdc Compare September 19, 2026 23:50
@jderochervlk
jderochervlk force-pushed the perf/homepage-responsive-images branch from 0dbdfdc to 640b89c Compare September 20, 2026 01:02
@jderochervlk

Copy link
Copy Markdown
Collaborator Author

@codex

@chatgpt-codex-connector

Copy link
Copy Markdown

Codex Review: Didn't find any major issues. 🎉

Reviewed commit: 6118df5438

ℹ️ About Codex in GitHub

Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you

  • Open a pull request for review
  • Mark a draft as ready
  • Comment "@codex review".

If Codex has suggestions, it will comment; otherwise it will react with 👍.

Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".

Generate AVIF and WebP candidates at build time, preserve intrinsic dimensions across homepage media, and defer below-fold images and video data. Cover candidate delivery, responsive selection, gallery behavior, and reserved layout without adding effects.
Verify dimensions, AVIF/WebP candidates, responsive selection, and layout reservation before image responses at both viewports. Addresses PR #1355 comment 4054821928.
Keep the responsive media component out of app/routes because it is not registered with React Router.
Preserve responsive image, media dimension, asset format, and reserved-layout coverage through typed browser bindings.
@github-actions

Copy link
Copy Markdown
Contributor

Docs preview

@jderochervlk
jderochervlk marked this pull request as ready for review September 20, 2026 16:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant