Optimize Site Loading #1439

briandoyle81 · 2025-08-27T20:50:01Z

Improves GTMetrix Grade from D to C (possibly even more once the vercel overhead isn't present)
Simulates Flow Runner until mouseover to save on loading
Font is now local instead of remote
Font is now wolff2 instead of otf
Removed several duplicate loads of Inter
Removed unused svgs

vercel · 2025-08-27T20:50:07Z

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Ready	Preview	Comment	Sep 2, 2025 4:48pm

Copilot

Pull Request Overview

This PR implements comprehensive site loading optimizations, improving GTMetrix Grade from D to C by introducing several performance enhancements: font optimization with local WOFF2 formats, lazy loading for Flow Runner components, caching headers, and reduced bundle sizes.

Switched from remote to local WOFF2 fonts with TTF fallbacks for better compression and performance
Implemented lazy loading for Flow Runner iframe until mouseover to reduce initial load time
Added comprehensive caching headers for static assets in Vercel configuration

Reviewed Changes

Copilot reviewed 16 out of 29 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
vercel.json	Added comprehensive caching headers for static assets
src/plugins/font-preload.js	New plugin for preloading critical fonts in WOFF2 format
src/hooks/use-icons.ts	Refactored to use static paths instead of dynamic imports
src/components/Icon.tsx	Simplified to always render as images with static paths
src/ui/design-system/src/lib/Pages/HomePage/QuickStartShowcase.tsx	Added lazy loading for Flow Runner with fallback UI
static/css/*	Added optimized CSS files for KaTeX and codicon fonts
src/ui/design-system/styles/fonts.css	Removed duplicate Inter font declarations, added font-display: swap
docusaurus.config.js	Updated to use local fonts and CSS instead of remote resources

_{Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.}

src/ui/design-system/src/lib/Pages/HomePage/QuickStartShowcase.tsx

static/css/codicon-custom.css

src/css/critical.css

chasefleming · 2025-08-28T21:34:04Z

package.json

@@ -26,6 +26,7 @@
    "@docusaurus/preset-classic": "^3.5.2",
    "@docusaurus/types": "^3.5.2",
    "@floating-ui/react-dom": "1.3.0",
+    "@fluentui/react": "^8.123.5",


Why the new icon set? Should we remove the old and swap it out with this one so there are not two?

That has the specific microsoft icons for the fake flowrunner. Happy to do it another way if that's better!

src/hooks/use-icons.ts

chasefleming · 2025-08-28T21:43:42Z

src/ui/design-system/src/lib/Pages/HomePage/QuickStartShowcase.tsx

+import { Icon, initializeIcons } from '@fluentui/react';
+
+// Initialize Fluent UI icons
+initializeIcons();


Should this be done on an app layout page at some shared level?

Dunno! But I don't think those icons will be used outside of this component anytime in the near future.

src/ui/design-system/src/lib/Pages/HomePage/QuickStartShowcase.tsx

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

chasefleming · 2025-09-02T15:42:48Z

src/hooks/use-icons.ts

-import RandomIcon from '@site/static/images/icons/random.svg';
-import FaucetIcon from '@site/static/images/icons/Faucet.svg';
+// Static icon paths - more reliable than dynamic imports
+const getIconPath = (name: IconName): string | null => {


Why not just have an object map? Is there a point to the function loading it into the map? Feels redundant.

const iconMap: Record<IconName, string> = { [IconName.GETTING_STARTED]: '/images/icons/getting-started.svg', [IconName.WHY_FLOW]: '/images/icons/why-flow.svg', [IconName.HELLO_WORLD]: '/images/icons/hello-world.svg', [IconName.FLOW_CADENCE]: '/images/icons/flow-cadence.svg', [IconName.EVM_ON_FLOW]: '/images/icons/evm-on-flow.svg', [IconName.RANDOM]: '/images/icons/random.svg', [IconName.BATCHED_EVM_TRANSACTIONS]: '/images/icons/batched-evm-transactions.svg', // ... rest of them };

chasefleming · 2025-09-02T15:43:51Z

src/hooks/use-icons.ts

-    'uniblock': '/img/ecosystem/uniblock.svg',
-  }), []);
+  return useMemo(() => {
+    const loadIcon = (name: IconName) => {


Then if you have the map do you even need this?

chasefleming · 2025-09-02T16:24:07Z

src/hooks/use-icons.ts

-    'uniblock': '/img/ecosystem/uniblock.svg',
-  }), []);
+  return {
+    getIcon: (name: IconName): string | null => {


Are you using this?

chasefleming · 2025-09-02T16:26:51Z

src/components/Icon.tsx

-      </div>
-    );
+  // Get icon path
+  const iconPath = icons.loadIcon(name);


Does this exist?

briandoyle81 added 4 commits August 27, 2025 12:15

Apply cursor fixes to page loading fonts

844687d

Disable hotjar and mixpanel

8b24f38

Add Cursor suggestions cahceing optimization

e208581

Add mock code window and load real with interaction

0db4c39

vercel bot deployed to Preview August 27, 2025 20:53 View deployment

Add dark mode

f4d5645

vercel bot deployed to Preview August 27, 2025 21:03 View deployment

Improve icon usage

767e6bb

vercel bot deployed to Preview August 28, 2025 13:25 View deployment

Minor improvements to svg icon loading

8ca4fbd

vercel bot had a problem deploying to Preview August 28, 2025 13:48 Failure

Update github links

0f3acee

vercel bot deployed to Preview August 28, 2025 14:17 View deployment

Revert dynamic svgs - not compatible or worth it

e0b30e8

vercel bot deployed to Preview August 28, 2025 14:34 View deployment

briandoyle81 added 2 commits August 28, 2025 10:45

Remove extra inter copies

3cbd870

Convert fonts to woff2

7090f9d

vercel bot deployed to Preview August 28, 2025 15:41 View deployment

Optimize fonts

07fc76a

vercel bot deployed to Preview August 28, 2025 16:56 View deployment

chasefleming requested a review from Copilot August 28, 2025 19:20

Copilot AI reviewed Aug 28, 2025

View reviewed changes

chasefleming reviewed Aug 28, 2025

View reviewed changes

chasefleming requested changes Aug 28, 2025

View reviewed changes

briandoyle81 and others added 2 commits August 29, 2025 08:25

Update static/css/codicon-custom.css

f294c12

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Update src/css/critical.css

ad0be5d

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

vercel bot deployed to Preview August 29, 2025 12:37 View deployment

briandoyle81 added 2 commits August 29, 2025 16:42

Revert icon changes

9874741

Convert icon names to enum

324d4b0

vercel bot deployed to Preview August 30, 2025 13:18 View deployment

Use constants for action card event names

cb22348

briandoyle81 requested a review from chasefleming August 30, 2025 13:23

vercel bot deployed to Preview August 30, 2025 13:28 View deployment

chasefleming reviewed Sep 2, 2025

View reviewed changes

Address feedback on use-icons

af3eb16

vercel bot had a problem deploying to Preview September 2, 2025 16:10 Failure

chasefleming reviewed Sep 2, 2025

View reviewed changes

src/components/Icon.tsx Outdated

</div>

);

// Get icon path

const iconPath = icons.loadIcon(name);

Copy link

Member

chasefleming Sep 2, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Does this exist?

Switch icons to using a function instead of hook

4ec8fab

chasefleming approved these changes Sep 2, 2025

View reviewed changes

vercel bot deployed to Preview September 2, 2025 16:48 View deployment

briandoyle81 merged commit 85e0921 into main Sep 2, 2025
3 checks passed

briandoyle81 deleted the brian-doyle/optimize-site-loading branch September 2, 2025 17:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Optimize Site Loading #1439

Optimize Site Loading #1439

Uh oh!

briandoyle81 commented Aug 27, 2025 •

edited

Loading

Uh oh!

vercel bot commented Aug 27, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

chasefleming Aug 28, 2025

Uh oh!

briandoyle81 Aug 29, 2025

Uh oh!

Uh oh!

Uh oh!

chasefleming Aug 28, 2025

Uh oh!

briandoyle81 Aug 28, 2025

Uh oh!

Uh oh!

chasefleming Sep 2, 2025

Uh oh!

chasefleming Sep 2, 2025

Uh oh!

chasefleming Sep 2, 2025

Uh oh!

chasefleming Sep 2, 2025

Uh oh!

Uh oh!

Uh oh!

Optimize Site Loading #1439

Optimize Site Loading #1439

Uh oh!

Conversation

briandoyle81 commented Aug 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

vercel bot commented Aug 27, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

briandoyle81 commented Aug 27, 2025 •

edited

Loading

vercel bot commented Aug 27, 2025 •

edited

Loading