refactor: Improve performance

Self host font
header.html: Set width and height for img
home.html: Set width and height for img

home.html: Lighthouse 100/100 Mobile & Desktop

_config.yml

@@ -4,8 +4,11 @@ title: 'Jekyll Serif'
 
 logo:
   mobile: "images/logo/logo-mobile.svg"
+  mobile_height: "32px"
+  mobile_width: "32px"
   desktop: "images/logo/logo.svg"
-  desktop_height: "36px"
+  desktop_height: "32px"
+  desktop_width: "120px"
 
 collections:
   services:
@@ -43,4 +46,4 @@ exclude:
   - vendor/ruby/
   - LICENSE.md
   - LICENSE
-  - README.md
+  - README.md

_data/features.json

@@ -2,16 +2,28 @@
   {
     "title": "Free Consultation",
     "description": "New clients receive an obligation free consultation.",
-    "image": "images/features/noun_branding_1885335.svg"
+    "image": {
+      "url": "images/features/noun_branding_1885335.svg",
+      "width": 80,
+      "height": 80
+    }
   },
   {
     "title": "Certified Accountants",
     "description": "All members of our team are certified accountants.",
-    "image": "images/features/noun_The Process_1885341.svg"
+    "image": {
+      "url": "images/features/noun_The Process_1885341.svg",
+      "width": 80,
+      "height": 80
+    }
   },
   {
     "title": "Tax Compliance",
     "description": "We stay up to date on the latest changes to the tax code.",
-    "image": "images/features/noun_3d modeling_1885342.svg"
+    "image": {
+      "url": "images/features/noun_3d modeling_1885342.svg",
+      "width": 80,
+      "height": 80
+    }
   }
 ]

_includes/header.html

@@ -1,12 +1,12 @@
 <div class='header'>
   <div class="container">
     <div class="logo">
-      <a href="{{ site.baseurl }}"><img height="{{ site.logo.desktop_height }}" alt="{{ site.title }}" src="{{ site.logo.desktop | relative_url }}" /></a>
+      <a href="{{ site.baseurl }}"><img width="{{ site.logo.desktop_width }}" height="{{ site.logo.desktop_height }}" alt="{{ site.title }}" src="{{ site.logo.desktop | relative_url }}" /></a>
     </div>
     <div class="logo-mobile">
-      <a href="{{ site.baseurl }}"><img alt="{{ site.title }}" src="{{ site.logo.mobile | relative_url }}" /></a>
+      <a href="{{ site.baseurl }}"><img width="{{ site.logo.mobile_width }}" height="{{ site.logo.mobile_height }}" alt="{{ site.title }}" src="{{ site.logo.mobile | relative_url }}" /></a>
     </div>
     {% include main-menu.html %}
     {% include hamburger.html %}
   </div>
-</div>
+</div>

_layouts/default.html

@@ -6,7 +6,7 @@
   <title>{% if page.title %}{{page.title}}{% else %}{{ site.title | escape }}{% endif %}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1" />
   <link rel="icon" type="image/png" href="{{ '/images/favicon-32x32.svg' | relative_url }}">
-  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&display=swap" rel="stylesheet">
+  <link rel="preload" href="{{ '/assets/fonts/playfair-display.woff2' | relative_url }}" as="font" type="font/woff2" crossorigin>
   <link href="{{ '/assets/css/style.css' | relative_url }}" rel="stylesheet">
 
   {% if page.description %}<meta name="description" content="{{ page.description }}" />{% endif %}

_layouts/home.html

@@ -54,7 +54,7 @@ <h2 class="service-title">
       <div class="col-12 col-md-6 col-lg-4 mb-2">
         <div class="feature">
           {% if feature.image %}
-          <div class="feature-image"><img alt="{{ feature.title }} logo" src="{{ feature.image | relative_url }}" /></div>
+          <div class="feature-image"><img alt="{{ feature.title }} logo" src="{{ feature.image.url | relative_url }}" width="{{ feature.image.width }}" height="{{ feature.image.height }}" /></div>
           {% endif %}
           <h2 class="feature-title">{{ feature.title }}</h2>
           <div class="feature-content">{{ feature.description }}</div>

_sass/components/fonts.scss

@@ -0,0 +1,7 @@
+@font-face {
+	font-family: 'Playfair Display';
+	font-style: normal;
+	font-weight: 400;
+	font-display: swap;
+	src: local(''), url('../fonts/playfair-display.woff2') format('woff2');
+}

assets/css/style.scss

@@ -55,6 +55,7 @@ $sub-footer-text-color: $white;
 @import 'components/strip';
 @import 'components/feature';
 @import 'components/social';
+@import 'components/fonts';
 
 // Pages
 @import 'pages/page-home';