perf(images): right-size next/image sizes across all pages and shared components#18128
Open
pettinarip wants to merge 4 commits intodevfrom
Open
perf(images): right-size next/image sizes across all pages and shared components#18128pettinarip wants to merge 4 commits intodevfrom
pettinarip wants to merge 4 commits intodevfrom
Conversation
✅ Deploy Preview for ethereumorg ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
pettinarip
changed the title
…shared components
pettinarip
force-pushed
the
perf/homepage-image-delivery
branch
from
0bf159e to
67b9d16
Compare
pettinarip
changed the title
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
1 participant
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.
Summary
Extends the `next/image` `sizes` right-sizing discipline from the homepage to every App Router page on the site — 47 routes audited, 28 with fixes, ~45 total `![]()
` fixes across 30+ files.
The biggest wins are on shared components used site-wide: `CalloutSSR` (the single highest-leverage fix — was shipping intrinsic-sized PNGs for a 263px-capped container, 7–15× oversize on every page it appears), plus `HubHero`, `ContentHero`, `PageHero`, `CalloutBannerSSR`, `DataProductCard`, `ParallaxImage`, and `AssetDownloadImage`.
What changed
Shared components (highest leverage)
src/components/CalloutSSR.tsxsizes="263px"— was fetching 2000–4000px intrinsic for a 263px-capped container (7–15× oversize). Used on /community, /gas, /staking, /wallets, and MDX layouts.src/components/CalloutBannerSSR.tsxsizes="(max-width: 991px) calc(100vw - 128px), 600px"src/components/DataProductCard.tsxsizes="(max-width: 479px) 311px, 372px"matching CSSmax-w-[311px] sm:max-w-[372px]src/components/Hero/HubHero/index.tsx(max-width: 1504px) 100vw, 1504px→100vw(true full-bleed)src/components/Hero/ContentHero/index.tsx50vwarm between lg and 2xlsrc/components/PageHero.tsxsrc/components/Image/ParallaxImage/index.tsxsrc/alt/classNamedespiteNextImagePropstype declaration. Added...propsspread.src/components/AssetDownload/AssetDownloadImage.tsxsizesfor the 3–4 column grid layoutPages with fixes
/SavingsCarousel,TrustLogos(earlier commits on this branch)/10years/appsAppsHighlight.tsxfill image missingsizes/assetsAssetDownloadImagegrid slots + hero diamond image/collectibles/communityEventCardhighlight/community/eventsEventCard/contributing/translation-program/acknowledgementsmax-w-[800px]content)/contributing/translation-program/translatathon(MDX layout)sizes/developersdogeImagemissingsizes/gaswalletImg(desktop-only) —1pxmobile arm to prevent fetch on hidden mobile image/layer-2/learnWhatIsEthereumImage— 1552w intrinsic for ~432px slot/learnLearnCardimages — too small a value, corrected/roadmapcommunityHeroImg,ethBlocksImage,ReleaseCarouselslides/run-a-node624px→ mobile-aware breakpoints/stablecoinsDataProductCardbanner +CalloutBannerSSR/startManDogeImagemissingsizes/trillion-dollar-securitymax-w-smmissingsizes/use-casesUseCaseCardimages/videosVideoGalleryFilter— breakpoints misaligned (fixed sm/lg thresholds to match custom Tailwind config: sm=480, lg=992)/walletsFindWalletImage(non-en locales) missingsizes/what-is-ethersizes(23×–15× oversize)Pages already correct (no edits)
/apps/[application],/apps/categories,/bug-bounty,/community/events/conferences,/community/events/meetups,/community/events/search,/community/support,/developers/tools,/developers/tutorials,/ethereum-history-founder-and-ownership,/ethereum-vs-bitcoin,/get-eth,/layer-2,/layer-2/networks,/quizzes,/resources,/roadmap/_vision,/staking,/staking/deposit-contract,/what-is-ethereum,/what-is-the-ethereum-network, and more.Why
Original Lighthouse mobile audit flagged "Improve image delivery" with ~200 KiB savings on the homepage. The same `sizes` discipline applied across the rest of the site removes the same class of oversize fetches on every other landing page. The biggest single fix is `CalloutSSR`, which appears on ~15 pages and was shipping multi-KB intrinsic images for a 263px-wide container.
Key implementation note: This project uses custom Tailwind breakpoints — sm=480px, md=768px, lg=992px (not 1024), xl=1280px, 2xl=1536px. All media queries in
sizesattributes use these values.Test plan
_next/image?w=...URLs use smallerw=params appropriate to the rendered slot size./stablecoins,/community,/gas,/wallets— these useCalloutSSRorCalloutBannerSSRand should now fetch ~263px images instead of multi-KB intrinsic PNGs./layer-2,/staking, and other HubHero/ContentHero pages.