fix: Optimize fonts and asset handling in SCSS and templates (#68)

warnyul · web-flow · commit 5f596831b598 · 2024-12-02T21:45:31.000+01:00
- Commented out unused Poppins font definitions in `_poppins.scss` for efficiency.
- Updated preload links in `404.ejs` and `index.ejs` to include consistent `crossorigin` attributes.
- Applied eager loading to the profile image in `index.ejs` for faster above-the-fold rendering.
- Enhanced Webpack module rules to use case-insensitive regex for image, EJS, and SCSS files.
diff --git a/src/scss/_poppins.scss b/src/scss/_poppins.scss
@@ -16,13 +16,13 @@
   }
   
   /* latin-ext */
-  @include font-face('Poppins', normal, 400, '../assets/fonts/Poppins-Regular-latin-ext.woff2', 'U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF');
+  // @include font-face('Poppins', normal, 400, '../assets/fonts/Poppins-Regular-latin-ext.woff2', 'U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF');
   
   /* latin */
   @include font-face('Poppins', normal, 400, '../assets/fonts/Poppins-Regular-latin.woff2', '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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD');
   
   /* latin-ext */
-  @include font-face('Poppins', normal, 700, '../assets/fonts/Poppins-Bold-latin-ext.woff2', 'U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF');
+  // @include font-face('Poppins', normal, 700, '../assets/fonts/Poppins-Bold-latin-ext.woff2', 'U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF');
   
   /* latin */
   @include font-face('Poppins', normal, 700, '../assets/fonts/Poppins-Bold-latin.woff2', '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+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD');
diff --git a/src/views/404.ejs b/src/views/404.ejs
@@ -5,8 +5,8 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <title>404 - Page not found - Oops!</title>
-    <link rel="preload" href="../assets/fonts/Poppins-Regular-latin.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-    <link rel="preload" href="../assets/images/confused-robot.png?as=webp" as="image" type="image/webp" />
+    <link rel="preload" href="../assets/fonts/Poppins-Regular-latin.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="../assets/images/confused-robot.png?as=webp" as="image" type="image/webp" crossorigin />
 </head>
 
 <body>
diff --git a/src/views/index.ejs b/src/views/index.ejs
@@ -15,12 +15,11 @@
     <meta property="og:image:alt" content="Profile picture of Balázs Varga, CTO @ Apter" />
     <meta property="og:image:width" content="1366" />
     <meta property="og:image:height" content="1269" />
+    <link rel="preload" href="../assets/fonts/Poppins-Bold-latin.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="../assets/fonts/Poppins-Regular-latin.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin />
+    <link rel="preload" href="../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin />
     <link rel="canonical" href="<%- baseUrl %>" />
-    <link rel="preload" href="../assets/images/profile100w100h.png?as=webp" as="image" type="image/webp" />
-    <link rel="preload" href="../assets/fonts/Poppins-Bold-latin-ext.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-    <link rel="preload" href="../assets/fonts/Poppins-Regular-latin-ext.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-    <link rel="preload" href="../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-brands-400.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
-    <link rel="preload" href="../../node_modules/@fortawesome/fontawesome-free/webfonts/fa-solid-900.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
     <script type="application/ld+json">
         {
             "@context": "https://schema.org",
@@ -43,7 +42,7 @@
             <header>
                 <picture>
                     <source type="image/webp" srcset="../assets/images/profile100w100h.png?as=webp" />
-                    <img class="clazz-profile-image" src="../assets/images/profile100w100h.png" alt="Profile picture of Balázs Varga, CTO @ Apter" width="100" height="100" />
+                    <img class="clazz-profile-image" src="../assets/images/profile100w100h.png" alt="Profile picture of Balázs Varga, CTO @ Apter" loading="eager" width="100" height="100" />
                 </picture>
                 <h1 class="clazz-text-center">Balázs Varga</h1>
             </header>
diff --git a/webpack.config.js b/webpack.config.js
@@ -45,15 +45,15 @@ module.exports = {
   module: {
     rules: [
       {
-        test: /\.(png|jpg|jpeg|gif|svg|webp)$/,
+        test: /\.(png|jpg|jpeg|gif|svg|webp)$/i,
         type: 'asset/resource',
       },
       {
-        test: /\.ejs/,
+        test: /\.ejs/i,
         use: ['html-loader', 'template-ejs-loader'],
       },
       {
-        test: /\.s?[ac]ss$/,
+        test: /\.s?[ac]ss$/i,
         use: [
           MiniCssExtractPlugin.loader,
           {

Original file line number	Diff line number	Diff line change
`@@ -45,15 +45,15 @@ module.exports = {`
`45`	`45`	`module: {`
`46`	`46`	`rules: [`
`47`	`47`	`{`
`48`		`- test: /\.(png\|jpg\|jpeg\|gif\|svg\|webp)$/,`
	`48`	`+ test: /\.(png\|jpg\|jpeg\|gif\|svg\|webp)$/i,`
`49`	`49`	`type: 'asset/resource',`
`50`	`50`	`},`
`51`	`51`	`{`
`52`		`- test: /\.ejs/,`
	`52`	`+ test: /\.ejs/i,`
`53`	`53`	`use: ['html-loader', 'template-ejs-loader'],`
`54`	`54`	`},`
`55`	`55`	`{`
`56`		`- test: /\.s?[ac]ss$/,`
	`56`	`+ test: /\.s?[ac]ss$/i,`
`57`	`57`	`use: [`
`58`	`58`	`MiniCssExtractPlugin.loader,`
`59`	`59`	`{`