From 0c6d6010d9aa6413632039f9f290ffe111422224 Mon Sep 17 00:00:00 2001
From: Daniel Norman <1992255+2color@users.noreply.github.com>
Date: Thu, 13 Jun 2024 20:34:25 +0200
Subject: [PATCH] chore: improve LCP performance (#293)

---
 public/index.html                 |  2 +-
 src/components/About.tsx          |  2 +-
 src/components/Header.tsx         |  4 ++--
 src/index.tsx                     | 10 ++++------
 src/pages/default-page-styles.css |  3 +++
 src/pages/helper-ui.tsx           |  2 +-
 webpack.config.js                 | 24 ++++++++++++++++++++----
 7 files changed, 32 insertions(+), 15 deletions(-)
diff --git a/public/index.html b/public/index.html
index bc75ddd3..9c812017 100644
--- a/public/index.html
+++ b/public/index.html
@@ -25,6 +25,6 @@
     <meta name="robots" content="noindex" />
   </head>
   <body>
-    <div id="root" class="montserrat f5"></div>
+    <div id="root" class="sans-serif f5"></div>
   </body>
 </html>
diff --git a/src/components/About.tsx b/src/components/About.tsx
index 7a064af8..70422be9 100644
--- a/src/components/About.tsx
+++ b/src/components/About.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 
 export default function About (): JSX.Element {
   return (
-        <aside className='mw7 lb-snow center w-100 lh-copy'>
+        <aside className='mw7 lb-snow center w-100 lh-copy pa2'>
           <h1 className='pa0 f3 ma0 mb4 teal tc'>About the IPFS Gateway and Service Worker</h1>
           <p>This page runs an IPFS gateway within a <a href="https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API" target="_blank">Service Worker</a>. It uses <a href="https://github.com/ipfs/helia" target="_blank">Helia</a> (IPFS implementation in JS) and the <a href="https://github.com/ipfs/helia-verified-fetch" target="_blank">@helia/verified-fetch</a> library (<a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank">Fetch API</a> for IPFS) to facilitate direct verified retrieval of <a href="https://docs.ipfs.tech/concepts/content-addressing/" target="_blank">content-addressed</a> data.</p>
           <p><strong>Why?</strong> It improves decentralization, offers enhanced security (CID verification happens on end user's machine) and reliability (ability to do retrieval from multiple sources without reliance on a single HTTP server).</p>
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 6d7bec62..5029b6be 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -6,14 +6,14 @@ import ipfsLogo from '../ipfs-logo.svg'
 export default function Header (): JSX.Element {
   const { gotoPage } = React.useContext(RouteContext)
   return (
-    <header className='e2e-header flex items-center pa3 bg-navy bb bw3 b--aqua tc justify-between'>
+    <header className='e2e-header flex items-center pa2 bg-navy bb bw3 b--aqua tc justify-between'>
       <div>
         <a href='https://ipfs.tech' title='IPFS Project' target="_blank" rel="noopener noreferrer" aria-label="Open IPFS Project's website">
             <img alt='IPFS logo' src={ipfsLogo} style={{ height: 50 }} className='v-top' />
         </a>
       </div>
       <div className='pb1 ma0 inline-flex items-center'>
-        <h1 className='e2e-header-title f3 fw2 montserrat aqua ttu'>Service Worker Gateway <small className="gray">(beta)</small></h1>
+        <h1 className='e2e-header-title f3 fw2 aqua ttu sans-serif'>Service Worker Gateway <small className="gray">(beta)</small></h1>
         <button className='e2e-header-config-button pl3'
             onClick={() => {
               gotoPage('/ipfs-sw-config')
diff --git a/src/index.tsx b/src/index.tsx
index 5e50bdb3..cba1beb3 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 import ReactDOMClient from 'react-dom/client'
 import App from './app.jsx'
 import { RouterProvider, type Route } from './context/router-context.jsx'
+import * as renderChecks from './lib/routing-render-checks.js'
 
 // SW did not trigger for this request
 const container = document.getElementById('root')
@@ -15,13 +16,10 @@ const LazyInterstitial = React.lazy(async () => import('./pages/redirects-inters
 
 const routes: Route[] = [
   { default: true, component: LazyHelperUi },
-  { shouldRender: async () => (await import('./lib/routing-render-checks.js')).shouldRenderRedirectsInterstitial(), component: LazyInterstitial },
-  { path: '#/ipfs-sw-config', shouldRender: async () => (await import('./lib/routing-render-checks.js')).shouldRenderConfigPage(), component: LazyConfig },
+  { shouldRender: async () => renderChecks.shouldRenderRedirectsInterstitial(), component: LazyInterstitial },
+  { path: '#/ipfs-sw-config', shouldRender: async () => renderChecks.shouldRenderConfigPage(), component: LazyConfig },
   {
-    shouldRender: async () => {
-      const renderChecks = await import('./lib/routing-render-checks.js')
-      return renderChecks.shouldRenderRedirectPage()
-    },
+    shouldRender: async () => renderChecks.shouldRenderRedirectPage(),
     component: LazyRedirectPage
   }
 ]
diff --git a/src/pages/default-page-styles.css b/src/pages/default-page-styles.css
index d3a3ccc4..d041c436 100644
--- a/src/pages/default-page-styles.css
+++ b/src/pages/default-page-styles.css
@@ -1,2 +1,5 @@
 @import 'tachyons';
 @import 'ipfs-css';
+
+/* ensure we don't fetch any external fonts */
+.sans-serif { font-family: system-ui, sans-serif; }
diff --git a/src/pages/helper-ui.tsx b/src/pages/helper-ui.tsx
index 00ddc95c..cb002ef4 100644
--- a/src/pages/helper-ui.tsx
+++ b/src/pages/helper-ui.tsx
@@ -22,7 +22,7 @@ function HelperUi (): React.JSX.Element {
   return (
     <>
       <Header />
-      <main className='pa4-l bg-snow mw7 mv5 center pa4'>
+      <main className='pa2 pa4-l bg-snow mw7 mv5-l center'>
         <h1 className='pa0 f3 ma0 mb4 teal tc'>Fetch & Verify IPFS Content in Browser</h1>
         <Form
           handleSubmit={handleSubmit}
diff --git a/webpack.config.js b/webpack.config.js
index 024791c1..b0584f4a 100644
--- a/webpack.config.js
+++ b/webpack.config.js
@@ -60,7 +60,7 @@ const paths = {
  */
 const prod = {
   mode: 'production',
-  devtool: 'inline-source-map',
+  devtool: 'source-map',
   performance: {
     hints: false,
     maxEntrypointSize: 512000,
@@ -266,13 +266,29 @@ const common = {
       // Images: Copy image files to build folder
       { test: /\.(?:ico|gif|png|jpg|jpeg)$/i, type: 'asset/resource' },
 
-      // Fonts and SVGs: Inline files
-      { test: /\.(woff2|svg|)$/, type: 'asset/inline' },
+      // Inline SVGs
+      { test: /\.(svg|)$/, type: 'asset/inline' },
       {
         test: /\.(sa|sc|c)ss$/i,
         use: [
           MiniCssExtractPlugin.loader,
-          'css-loader'
+          {
+            loader: 'css-loader',
+            options: {
+              url: {
+                // Exclude fonts from build
+                filter: (url, resourcePath) => {
+                  const fontRegex = /\.(otf|woff|woff2)/
+
+                  if (url.search(fontRegex)) {
+                    return false
+                  }
+
+                  return true
+                }
+              }
+            }
+          }
         ]
       }
     ]
