Merge pull request #139 from jerboa88/137-improve-site-performance

137 improve site performance

.github/workflows/deploy.yml

@@ -4,7 +4,8 @@ name: Gatsby Build & Deploy
 on:
   workflow_dispatch:
   push:
-    branches: [$default-branch]
+    branches:
+      - main
   schedule:
     - cron: '8 8 * * 6'
 

gatsby-config.ts

@@ -30,11 +30,6 @@ const config: GatsbyConfig = {
 		typesOutputPath: 'src/common/gatsby-types.d.ts',
 	},
 	plugins: [
-		'gatsby-plugin-image',
-		// Required by gatsby-plugin-image
-		'gatsby-plugin-sharp',
-		// Required by gatsby-plugin-image for dynamic images
-		'gatsby-transformer-sharp',
 		{
 			resolve: 'gatsby-plugin-component-to-image',
 			options: getSocialImageGenerationConfigDefaults(),
@@ -48,6 +43,18 @@ const config: GatsbyConfig = {
 				],
 			},
 		},
+		// This plugin needs to be listed after gatsby-plugin-postcss so that it can purge unused CSS
+		{
+			resolve: 'gatsby-plugin-purgecss',
+			options: {
+				// printRejected: true,
+				// printAll: true,
+				tailwind: true,
+				purgeCSSOptions: {
+					safelist: [/where/],
+				},
+			},
+		},
 		{
 			resolve: 'gatsby-plugin-sitemap',
 			options: {

package.json

@@ -35,8 +35,8 @@
 	},
 	"dependencies": {
 		"@botpoison/browser": "^0.1.30",
+		"@fontsource-variable/roboto-flex": "^5.0.15",
 		"@fontsource/poppins": "^5.0.14",
-		"@fontsource/roboto-flex": "^5.0.15",
 		"@fortawesome/fontawesome-svg-core": "^6.5.2",
 		"@fortawesome/free-brands-svg-icons": "^6.5.2",
 		"@fortawesome/free-solid-svg-icons": "^6.5.2",
@@ -51,25 +51,21 @@
 		"framer-motion": "^11.2.10",
 		"gatsby": "^5.13.6",
 		"gatsby-plugin-component-to-image": "^1.0.1",
-		"gatsby-plugin-image": "^3.13.1",
 		"gatsby-plugin-manifest": "^5.13.1",
 		"gatsby-plugin-offline": "^6.13.2",
 		"gatsby-plugin-postcss": "^6.13.1",
+		"gatsby-plugin-purgecss": "^6.2.1",
 		"gatsby-plugin-robots-txt": "^1.8.0",
-		"gatsby-plugin-sharp": "^5.13.1",
 		"gatsby-plugin-sitemap": "^6.13.1",
 		"gatsby-remark-autolink-headers": "^6.13.1",
 		"gatsby-source-filesystem": "^5.13.1",
 		"gatsby-source-graphql": "^5.13.1",
 		"gatsby-transformer-remark": "^6.13.1",
-		"gatsby-transformer-sharp": "^5.13.1",
 		"isomorphic-dompurify": "^2.12.0",
 		"jsdom": "^24.1.0",
 		"react": "^18.3.1",
 		"react-dom": "^18.3.1",
-		"react-hook-form": "^7.52.0",
-		"sharp": "^0.33.4",
-		"svgo": "^3.3.2"
+		"react-hook-form": "^7.52.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "1.8.1",

src/styles/global.css

@@ -5,8 +5,16 @@
 @import '@fontsource/poppins/400.css';
 @import '@fontsource/poppins/500.css';
 @import '@fontsource/poppins/700.css';
-@import '@fontsource/roboto-flex';
-@import '@fortawesome/fontawesome-svg-core/styles';
+
+/* roboto-flex-latin-wght-normal */
+@font-face {
+  font-family: 'Roboto Flex Variable';
+  font-style: normal;
+  font-weight: 100 1000;
+	font-display: swap;
+  src: url(@fontsource-variable/roboto-flex/files/roboto-flex-latin-wght-normal.woff2) format('woff2-variations');
+  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
+}
 
 
 /* These styles to the base layer so that component styles can override them as necessary */

tailwind.config.ts

@@ -12,6 +12,7 @@ export default {
 	theme: {
 		fontFamily: {
 			sans: [
+				'Roboto Flex Variable',
 				'Roboto Flex',
 				'Roboto',
 				'Tahoma',