Optimize front page load performance - #261
Merged
Merged
Conversation
Move Font Awesome, KaTeX and Google Fonts off the critical path using the media=print + onload swap pattern (with a noscript fallback), add preconnect hints for the cdnjs and Google Fonts origins, and add display=swap to the fonts request. kraken.css stays render-blocking as the critical stylesheet.
Front page was shipping ~3.9 MB of oversized PNG/JPG. Convert to WebP and resize to dimensions appropriate for how each image is displayed: - front-ecosystem 3508x2481 PNG (1.6 MB) -> 1000px WebP (20 KiB) - front-cf-bl hero 1815x1157 PNG (1.2 MB) -> 1200px WebP (57 KiB) - front-expansion/positioning/open-source + ant-bridge PNGs -> WebP (same dims) - appl-card photos: full-size WebP for the full-width bleed on the application detail pages, plus 480px '-card' WebP variants for the 220px card grids on the home and applications-landing pages Sized for the common case (mobile through standard 4K); removes the now-unused PNG/JPG originals. navbar-logo left as-is (already well-optimized).
The decorative 'take flight' background video sits below the fold but was autoplaying with no preload hint, so browsers fetched all 1.4 MB on initial page load for every visitor. - Lazy-load via IntersectionObserver: the video only fetches and plays once it nears the viewport (preload=none, source moved to data-src), with a poster frame shown until then. Removes it from the initial load / LCP path. - Recompress 1806x990 -> 1440px h264 CRF30: 1.4 MB -> 396 KiB (-72%).
Contributor
There was a problem hiding this comment.
Pull request overview
This PR optimizes front page load performance by reducing render-blocking CSS, shrinking image payloads via WebP, and deferring the below-the-fold background video to load only when needed.
Changes:
- Convert several front page and application-card images from PNG/JPG to appropriately sized WebP variants (including separate “card” vs full-bleed versions).
- Defer the background video download/playback using
IntersectionObserverlazy loading and add a WebP poster. - Move third-party CSS (KaTeX, Font Awesome, Google Fonts) off the critical render path using
preconnectand async stylesheet loading.
Reviewed changes
Copilot reviewed 9 out of 45 changed files in this pull request and generated 1 comment.
Show a summary per file
| File | Description |
|---|---|
| src/index.md | Updates front page images to WebP and lazy-loads the background video via inline JS. |
| src/_includes/head.html | Adds preconnect hints and async loading for third-party CSS to reduce render blocking. |
| src/applications/applications-landing.md | Switches application grid card images to smaller *-card.webp variants. |
| src/applications/swarm-robotics.md | Updates full-bleed application image to WebP. |
| src/applications/human-robot-interaction.md | Updates full-bleed application image to WebP. |
| src/applications/stem-education.md | Updates full-bleed application image to WebP. |
| src/applications/autonomous-systems.md | Updates full-bleed application image to WebP. |
| src/applications/perception-navigation.md | Updates full-bleed application image to WebP. |
| src/applications/aerial-manipulation.md | Updates full-bleed application image to WebP. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
The lazy-load pattern uses data-src (no src) so the video only loads when scrolled into view. HTML-Proofer's Images check scans <source> elements too and failed the build with 'image has no src or srcset attribute'. Mark the intentionally-deferred source with data-proofer-ignore.
The async-load variant switched the fonts stylesheet to media='all' on load, which applied web fonts to print media too. Restore the original media='screen' intent, matching the <noscript> fallback.
enyanil
reviewed
Jul 2, 2026
enyanil
left a comment
enyanil
left a comment
Member
There was a problem hiding this comment.
Super nice update! Noticed a large difference in loading times, and all images look good. However, I noticed that the video on the bottom of the front page is frozen for me. Do you also see this or is this a localhost issue?
Cookie popup and poplink popup both prepended their markup via 'document.body.innerHTML = html + document.body.innerHTML'. Reassigning document.body.innerHTML re-parses the whole page, breaking the front-page background video.
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.
A frontend performance pass on the front page. Moves the non-critical CSS (Font Awesome, KaTeX, Google Fonts) off the critical render path with async loading and preconnect hints, so only the main stylesheet blocks first paint. Converts the oversized PNG/JPG images to WebP sized for how they're actually displayed, cutting the front page's image weight from roughly 3.9 MB to ~190 KB. The application card photos ship in two sizes; a small variant for the card grids and a full-size one for where the same image bleeds full-width on the detail pages. Also lazy-loads the below-the-fold background video (of drones flying) so it no longer pulls 1.4 MB on initial load, recompressing it to ~400 KB on top of that.
Brings first contentful paint down ~0.3 seconds and largest contentful paint down ~3 (!) seconds