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

- 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.
warnyul · Dec 2, 2024 · 5f59683 · 5f59683
1 parent 36f58cb
commit 5f59683
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 13 deletions.
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,
           {