Skip to content

agents page: build its CSS, pin and defer the icon script, first paint 2.2s to 0.8s - #513

Merged
gerardrecinto merged 3 commits into
masterfrom
site-speed
Oct 8, 2026
Merged

gerardrecinto merged 3 commits into
masterfrom
site-speed

Conversation

@gerardrecinto

@gerardrecinto gerardrecinto commented Oct 8, 2026 •

Copy link
Copy Markdown
Collaborator

/agents/ compiled Tailwind in the browser from cdn.tailwindcss.com and loaded lucide@latest as a blocking script, so nothing painted until both downloaded and ran, and the page lost its styling and threw if either host was slow or blocked. It now links a built demo-agents/tailwind.css like the homepage does (scripts/build-css.sh builds both and Site Check fails if either is stale), loads lucide pinned to 1.52.0 with defer, and has the same no-op icon stub the homepage got in #511.

Measured on a throttled phone profile (150 ms latency, 1.6 Mbps, 4x CPU slowdown) against the assembled site: first contentful paint on /agents/ went from 2164 ms to 756 ms, and the third-party requests on that page dropped from 7 to 4. A full-page screenshot before and after is byte-identical, and the icon count is the same (21 of 22 data-lucide elements render, same as before). The smoke test no longer allows the two CDN errors it had to tolerate on this page.

Full e2e passes on chromium, webkit, mobile-chrome and mobile-safari.

Not changed: /arena/ still waits on the Google Fonts stylesheet before first paint (about 2 s on the same profile), and the homepage hero YouTube embed loads about 1 MB of player scripts on load. Both are design calls I left alone.

Thanks, Gerard Recinto

@gerardrecinto gerardrecinto self-assigned this Oct 8, 2026
@gerardrecinto
gerardrecinto enabled auto-merge (squash) October 8, 2026 08:50
@github-actions

github-actions Bot commented Oct 8, 2026

Copy link
Copy Markdown

Gemini PR Review

Reviewed commit: 1a5c0a77e3d452278a24ab0d6a09775cfbc8360e
Verdict: FAIL

  • Correctness Bug / Unhandled Edge Case in demo-agents/index.html and tests/site-smoke.spec.ts: The demo-agents/index.html page still loads the Lucide icon library from https://unpkg.com (a third-party CDN). The site-smoke.spec.ts test, however, has been updated to expect no console problems when third-party resources are blocked (blockThirdParty=true). If blockThirdParty effectively blocks unpkg.com, the Lucide script will fail to load, which will likely produce a console error, causing the updated test expectation expect(problems).toEqual([]) to fail. The prior version of the test explicitly allowed for such lucide is not defined errors when third-party resources were blocked, indicating this behavior was previously recognized. To align with the new stricter test expectation, the Lucide library should also be self-hosted or otherwise configured to not rely on third-party CDNs when blockThirdParty is true.

This result blocks merge. Push a fix and comment /gemini review. To contest a finding, see the Gemini dispute process in CONTRIBUTING.md.

@gerardrecinto

Copy link
Copy Markdown
Collaborator Author

/gemini dispute

  1. Finding, quoted: "The demo-agents/index.html page still loads the Lucide icon library from https://unpkg.com (a third-party CDN). ... If blockThirdParty effectively blocks unpkg.com, the Lucide script will fail to load, which will likely produce a console error, causing the updated test expectation expect(problems).toEqual([]) to fail."

  2. Where: demo-agents/index.html, the inline window.lucide = { createIcons: function () {} } stub placed before the unpkg script tag, and tests/site-smoke.spec.ts, the "with third-party hosts blocked" case for /agents/.

  3. Claim status: Inferred ("will likely produce a console error"). The diff does not show the stub, and the claim was not run.

  4. Evidence: the stub defines window.lucide before the CDN script, so when unpkg.com is blocked, every lucide.createIcons() call hits the no-op instead of throwing. The problems list only collects uncaught page errors, same-origin 4xx or failed requests, so a blocked third-party script is not counted either. Site Check ran this exact spec on commit 1a5c0a7 with blockThirdParty=true for /agents/ on chromium and mobile-chrome and passed: https://github.com/SharedCode/joltrin/actions/runs/37752511032. The tailwind is not defined error the old test tolerated is gone because Tailwind is now a built local stylesheet.

  5. Official docs: none needed, this is the repo own code path.

  6. Reachability: the blocked-CDN path is the one the test exercises, and it passes.

  7. Repro: bash scripts/build-site.sh && npx playwright test tests/site-smoke.spec.ts --project=chromium -g "agents.*blocked" passes locally, and passed on webkit, mobile-chrome and mobile-safari too.

  8. Compensating control: the e2e matrix and Site Check both ran green on all five browsers.

  9. Resolution requested: treat as not applicable. I pushed a comment above the stub saying what it is for, so the diff states it.

@gerardrecinto

Copy link
Copy Markdown
Collaborator Author

/gemini review

@github-actions

github-actions Bot commented Oct 8, 2026

Copy link
Copy Markdown

Gemini PR Review

Reviewed commit: 37edeb14dbc9184ae079d521604bf332143aa049
Verdict: FAIL

  • Security Problem: demo-agents/index.html continues to load the Lucide icon library from https://unpkg.com (a third-party CDN). While the added stub window.lucide = { createIcons: function () {} }; gracefully handles scenarios where the CDN is blocked or unavailable, the dependency on an external third-party script source still introduces a supply chain security risk. A compromise of the CDN or the specific package could lead to arbitrary code injection on the client side.

This result blocks merge. Push a fix and comment /gemini review. To contest a finding, see the Gemini dispute process in CONTRIBUTING.md.

@gerardrecinto

Copy link
Copy Markdown
Collaborator Author

/gemini review

@github-actions

github-actions Bot commented Oct 8, 2026

Copy link
Copy Markdown

Gemini PR Review

Reviewed commit: d20a3104481030e114b150bdcbddb9fa768cebec
Verdict: PASS

  • Security: demo/index.html and demo-agents/index.html: The addition of integrity="sha384-SSRIJfpvnhji4rCcULgpNXRJjQ9P/odU9OaWxSumsZiokvJ7zAu4PGQVWyWxTG3u" and crossorigin="anonymous" to the Lucide CDN script enhances security by implementing Subresource Integrity (SRI). This ensures that the browser will only execute the script if its cryptographic hash matches the expected value, preventing malicious injection via a compromised CDN.
  • Correctness/Security: demo-agents/index.html: The demo-agents page now loads Tailwind CSS from a local file (./tailwind.css) instead of a third-party CDN (https://cdn.tailwindcss.com). This improves reliability by removing an external dependency and mitigates potential supply chain attacks associated with dynamic CDN loading of CSS.
  • Correctness: demo-agents/index.html: The addition of the inline script window.lucide = { createIcons: function () {} }; before the Lucide CDN script provides a graceful fallback. If unpkg.com is blocked or fails to load, calls to lucide.createIcons() will execute the no-op function instead of throwing a ReferenceError, ensuring page functionality remains intact without icons.
  • Tests: tests/site-smoke.spec.ts: The test expectation for the /agents/ page with blockThirdParty=true has been strengthened. Previously, specific errors related to CDN-blocked Tailwind and Lucide were tolerated. With Tailwind now being local and Lucide's absence handled gracefully by the stub, the test now correctly expects toEqual([]) (no problems), indicating improved robustness of the page.

@gerardrecinto
gerardrecinto merged commit 558e293 into master Oct 8, 2026
30 checks passed
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