Improve loading performance

content/projects/react-weather-app/index.md

@@ -18,4 +18,4 @@ This is a project that I made as a step in the interview process for my final ye
 
 ## Screenshots
 
-![Project screenshot](react-weather-app-screenshot.png)
+![Project screenshot](react-weather-app-screenshot.webp)

hugo.toml

@@ -39,3 +39,20 @@ enableRobotsTXT = true
         name = 'Contact'
         url = '/contact'
         weight = 5
+[[deployment.matchers]]
+    # Cache static assets for 1 year.
+    pattern = "^.+\\.(js|css|svg|ttf)$"
+    cacheControl = "max-age=31536000, no-transform, public"
+    gzip = true
+[[deployment.matchers]]
+    pattern = "^.+\\.(gif|png|jpg|webp)$"
+    cacheControl = "max-age=31536000, no-transform, public"
+    gzip = false
+[[deployment.matchers]]
+    # Set custom content type for /sitemap.xml
+    pattern = "^sitemap\\.xml$"
+    contentType = "application/xml"
+    gzip = true
+[[deployment.matchers]]
+    pattern = "^.+\\.(html|xml|json)$"
+    gzip = true

layouts/_default/about.html

@@ -7,10 +7,10 @@
 {{ define "main" }}
     {{ partial "breadcrumb.html" . }}
 
-    {{ $faceImage := resources.Get "images/big-face.png" }}
+    {{ $faceImage := resources.Get "images/big-face.webp" }}
     
     <section>
-        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face">
+        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face" loading="lazy">
         {{ .Content }}
     </section>
     

layouts/index.html

@@ -4,7 +4,7 @@
     <link rel="stylesheet" href="{{ $styles.Permalink }}" />
 {{ end }}
 {{ define "main" }}
-    {{ $faceImage := resources.Get "images/big-face.png" }}
+    {{ $faceImage := resources.Get "images/big-face.webp" }}
     
     <section id="intro">
         <div>
@@ -15,7 +15,7 @@
                 <a href="{{ urls.JoinPath .Site.BaseURL "contact" }}">Contact</a>
             </div>
         </div>
-        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face">
+        <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face" loading="lazy">
     </section>
 
     <section id="about">

layouts/partials/about-card.html

@@ -1,5 +1,5 @@
 {{ $cv := resources.Get "cv.pdf" }}
-{{ $faceImage := resources.Get "images/borded-face.png" }}
+{{ $faceImage := resources.Get "images/borded-face.webp" }}
 
 <div id="about-card">
   <img src="{{ $faceImage.Permalink }}" alt="Hazem Krimi's face" />

layouts/partials/footer.html

@@ -1,4 +1,4 @@
-{{ $faceImage := resources.Get "images/small-face.png" }}
+{{ $faceImage := resources.Get "images/small-face.webp" }}
 {{ $cv :=resources.Get "cv.pdf" }}
 
 <footer>

layouts/partials/header.html

@@ -1,4 +1,4 @@
-{{ $faceImage := resources.Get "images/small-face.png" }}
+{{ $faceImage := resources.Get "images/small-face.webp" }}
 {{ $cv := resources.Get "cv.pdf" }}
 
 <header>