perf: speed up hero background load on home page#230
Open
mmcky wants to merge 2 commits into
Open
Conversation
The home page hero uses a CSS `background-image`, so the browser can't discover the image URL until main.css has downloaded and parsed — the fetch only starts after the CSS round-trip, delaying when the background appears. Two changes: - Preload the hero image in <head> (gated to the home layout) so it starts downloading during initial HTML parse, in parallel with CSS rather than after it. - Optimize mountains1.jpg: resize 2400x1595 -> 1920x1276 and re-encode as progressive JPEG at q82, 532KB -> 236KB (~55% smaller). The hero's dark 55% overlay makes the quality change imperceptible. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
✅ Deploy Preview for grand-swan-ca5201 ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
There was a problem hiding this comment.
Pull request overview
This PR improves perceived performance on the QuantEcon home page by starting the hero background image download during initial HTML parsing (instead of waiting for CSS to download and parse).
Changes:
- Adds a home-page-only
<link rel="preload" as="image">for the hero background asset (/assets/img/mountains1.jpg) in the default layout.
Collaborator
Author
|
@DrDrij do you have time to cast an eye over this PR? Just trying to improve load time for the background image -- the preview is working nicely. |
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.
Problem
Loading quantecon.org shows a noticeable delay before the hero background image appears.
The hero background is set as a CSS
background-image(main.scss#L484). Because the URL is buried in CSS, the browser's preload scanner can't find it during HTML parse — the image fetch only begins aftermain.csshas downloaded and been parsed (behind the render-blocking Bootstrap CDN stylesheets). On top of that,mountains1.jpgwas 532 KB at 2400×1595, larger than any viewport needs.Changes
1. Preload the hero image (gated to the home layout, since that's the only page with the hero). This lets the browser start fetching the image during the initial HTML parse, in parallel with the CSS, instead of after the CSS round-trip.
2. Optimize the image. Resized 2400×1595 → 1920×1276 and re-encoded as a progressive JPEG at quality 82: 532 KB → 236 KB (~55% smaller). The hero renders a
rgba(0,0,0,0.55)dark overlay on top of the photo, so the quality change is imperceptible.Together these mean the background starts downloading earlier and finishes sooner.
Verification
bundle exec jekyll buildsucceeds.<link rel="preload" as="image">tag renders on_site/index.htmland is absent from internal pages.Possible follow-ups (not in this PR)
image-set()for a further size cut.<img>withfetchpriority="high"so the preload scanner sees it in markup.🤖 Generated with Claude Code