Optimize performance of frontend (#645)

* Preload font files * Provide less font files * Create sourcemaps Signed-off-by: Marvin A. Ruder <[email protected]>
marvinruder · Oct 28, 2023 · 81e880c · 81e880c
1 parent 9bbb7d0
commit 81e880c
Show file tree

Hide file tree

Showing 7 changed files with 11 additions and 7 deletions.
diff --git a/...ets/fonts/inter-v12-all-ext-regular.woff2 → ...d/public/assets/fonts/inter-v12-400.woff2 b/...ets/fonts/inter-v12-all-ext-regular.woff2 → ...d/public/assets/fonts/inter-v12-400.woff2
diff --git a/.../assets/fonts/inter-v12-all-ext-700.woff2 → ...d/public/assets/fonts/inter-v12-700.woff2 b/.../assets/fonts/inter-v12-all-ext-700.woff2 → ...d/public/assets/fonts/inter-v12-700.woff2
diff --git a/packages/frontend/public/assets/fonts/inter-v12-all-ext-700.woff b/packages/frontend/public/assets/fonts/inter-v12-all-ext-700.woff
diff --git a/packages/frontend/public/assets/fonts/inter-v12-all-ext-regular.woff b/packages/frontend/public/assets/fonts/inter-v12-all-ext-regular.woff
diff --git a/packages/frontend/src/fonts.css b/packages/frontend/src/fonts.css
@@ -4,8 +4,7 @@
   font-weight: 400;
   src:
     local(""),
-    url("/assets/fonts/inter-v12-all-ext-regular.woff2") format("woff2"),
-    url("/assets/fonts/inter-v12-all-ext-regular.woff") format("woff");
+    url("/assets/fonts/inter-v12-400.woff2") format("woff2");
   font-display: swap;
 }
 
@@ -15,7 +14,6 @@
   font-weight: 700;
   src:
     local(""),
-    url("/assets/fonts/inter-v12-all-ext-700.woff2") format("woff2"),
-    url("/assets/fonts/inter-v12-all-ext-700.woff") format("woff");
+    url("/assets/fonts/inter-v12-700.woff2") format("woff2");
   font-display: swap;
 }
diff --git a/packages/frontend/src/index.html b/packages/frontend/src/index.html
@@ -8,6 +8,9 @@
     />
     <meta name="theme-color" content="#FFFFFF" media="(prefers-color-scheme: light)">
     <meta name="theme-color" content="#202020" media="(prefers-color-scheme: dark)">
+    <meta name="description" content="A web service fetching and providing financial and ESG ratings for stocks.">
+    <link rel="preload" href="/assets/fonts/inter-v12-400.woff2" as="font" type="font/woff2">
+    <link rel="preload" href="/assets/fonts/inter-v12-700.woff2" as="font" type="font/woff2">
     <link rel="apple-touch-icon" sizes="180x180" href="/assets/images/<%- faviconPath %>/favicon-180.png">
     <link rel="icon" type="image/png" sizes="192x192" href="/assets/images/<%- faviconPath %>/favicon-192.png">
     <link rel="icon" type="image/png" sizes="128x128" href="/assets/images/<%- faviconPath %>/favicon-128.png">

diff --git a/packages/frontend/vite.config.ts b/packages/frontend/vite.config.ts
@@ -1,11 +1,13 @@
-import { defineConfig as defineVitestConfig } from "vitest/config";
+/* eslint-disable import/no-nodejs-modules */
+import fs from "fs";
+
+import react from "@vitejs/plugin-react";
 import { mergeConfig, defineConfig as defineViteConfig } from "vite";
 import { createHtmlPlugin } from "vite-plugin-html";
 import topLevelAwait from "vite-plugin-top-level-await";
 import wasm from "vite-plugin-wasm";
-import react from "@vitejs/plugin-react";
 import tsconfigPaths from "vite-tsconfig-paths";
-import fs from "fs";
+import { defineConfig as defineVitestConfig } from "vitest/config";
 
 const chunkList: string[] = ["@mui"];
 
@@ -26,6 +28,7 @@ export default mergeConfig(
           manualChunks,
         },
       },
+      sourcemap: true,
     },
     cacheDir: ".vite",
     plugins: [