Repository navigation
perf(platform-icons): Let platform icons load lazily - #20537
Open
coolguyzone wants to merge 1 commit into
Open
coolguyzone wants to merge 1 commit into
coolguyzone wants to merge 1 commit into
Conversation
PlatformIcon forced loading="eager" on every next/image it rendered. React 19 emits a <link rel="preload" as="image"> in <head> for each non-lazy image in the server-rendered shell, so the homepage shipped about 30 icon preloads that compete with CSS and fonts for bandwidth on the critical path. Dropping the override restores next/image's lazy default: icons in the viewport still load right away, and the rest load as they scroll into view. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
Contributor
|
Getting ready to monitor this change · Rollout details
|
1 of 6 tasks
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
DESCRIBE YOUR PR
PlatformIconforcesloading="eager"on every icon it renders. React 19 adds a<link rel="preload" as="image">to<head>for each non-lazy image in the server-rendered page, so the homepage currently ships about 30 icon preloads. They compete with the CSS and fonts for bandwidth while the page is first rendering.This removes the override, so icons fall back to the
next/imagedefault of lazy loading. Icons on screen still load right away, and the rest load as they scroll into view.loading="eager"props insrc/components/platformIcon.tsxloading="eager"came in with the UI redesign in #9428, with no stated reason. Follow-up to #20278, which moved the Kapa.ai widget to on-demand loading.To check the preview: view the homepage source, and the
<head>should no longer contain the platform iconrel="preload"links. Icons should still appear without visible pop-in as you scroll.IS YOUR CHANGE URGENT?
Help us prioritize incoming PRs by letting us know when the change needs to go live.
Select exactly one option. For deadlines, replace
YYYY-MM-DDwith the due date. You can update this information later by editing the PR description.SLA
Thanks in advance for your help!
PRE-MERGE CHECKLIST
Make sure you've checked the following before merging your changes:
🤖 Generated with Claude Code