From db2de8633983bf63187a3f1614f9a9b42cbf35ea Mon Sep 17 00:00:00 2001
From: Sodbileg Gansukh <sodbileg.gansukh@gmail.com>
Date: Tue, 19 Sep 2023 21:19:25 +0800
Subject: [PATCH] Optimization

---
 default.hbs                            |  2 --
 package.json                           | 12 ++++++------
 partials/components/featured.hbs       |  2 +-
 partials/components/header-content.hbs | 10 +++++++---
 partials/components/post-list.hbs      | 16 ++++++++--------
 partials/feature-image.hbs             |  5 ++---
 partials/post-card.hbs                 | 14 ++++++++------
 7 files changed, 32 insertions(+), 29 deletions(-)

diff --git a/default.hbs b/default.hbs
index 12d5aec..e760532 100644
--- a/default.hbs
+++ b/default.hbs
@@ -21,8 +21,6 @@
         }
     </style>
 
-    <script src="http://localhost:35729/livereload.js?snipver=1"></script>
-
     <script>
         /* The script for calculating the color contrast has been taken from
         https://gomakethings.com/dynamically-changing-the-text-color-based-on-background-color-contrast-with-vanilla-js/ */
diff --git a/package.json b/package.json
index 12a73fa..3123b35 100644
--- a/package.json
+++ b/package.json
@@ -63,22 +63,22 @@
     "config": {
         "posts_per_page": 16,
         "image_sizes": {
-            "xxs": {
-                "width": 30
-            },
             "xs": {
-                "width": 100
+                "width": 160
             },
             "s": {
-                "width": 300
+                "width": 320
             },
             "m": {
                 "width": 600
             },
             "l": {
-                "width": 1000
+                "width": 960
             },
             "xl": {
+                "width": 1200
+            },
+            "xxl": {
                 "width": 2000
             }
         },
diff --git a/partials/components/featured.hbs b/partials/components/featured.hbs
index 1969b8b..5eea041 100644
--- a/partials/components/featured.hbs
+++ b/partials/components/featured.hbs
@@ -5,7 +5,7 @@
                 <h2 class="gh-featured-title">Featured</h2>
                 <div class="gh-featured-feed">
                     {{#foreach featured}}
-                        {{> "post-card"}}
+                        {{> "post-card" imageSizes="80px"}}
                     {{/foreach}}
                 </div>
             </div>
diff --git a/partials/components/header-content.hbs b/partials/components/header-content.hbs
index 68af4e6..e29cbe2 100644
--- a/partials/components/header-content.hbs
+++ b/partials/components/header-content.hbs
@@ -17,7 +17,7 @@
         {{#match headerStyle "Highlight"}}
             <div class="gh-header-left">
                 {{#foreach posts limit="1"}}
-                    {{> "post-card"}}
+                    {{> "post-card" imageSizes="(max-width: 767px) calc(100vw - max(8vmin, 40px)), 640px"}}
                 {{/foreach}}
             </div>
             <div class="gh-header-middle">
@@ -31,7 +31,7 @@
                 {{else}}
                     <div class="gh-featured-feed">
                         {{#foreach posts from="5" limit="6"}}
-                            {{> "post-card"}}
+                            {{> "post-card" imageSizes="80px"}}
                         {{/foreach}}
                     </div>
                 {{/if}}
@@ -47,7 +47,11 @@
                 {{#match @number 5}}
                     <div class="gh-header-right">
                 {{/match}}
-                {{> "post-card"}}
+                {{#if @first}}
+                    {{> "post-card" imageSizes="640px"}}
+                {{else}}
+                    {{> "post-card"}}
+                {{/if}}
                 {{#match @number 4}}
                     </div>
                 {{/match}}
diff --git a/partials/components/post-list.hbs b/partials/components/post-list.hbs
index d77ca1e..21e656d 100644
--- a/partials/components/post-list.hbs
+++ b/partials/components/post-list.hbs
@@ -25,7 +25,7 @@
                             {{#match posts.length ">=" 4}}
                                 {{#get "posts" include="authors" limit="16"}}
                                     {{#foreach posts from="5" limit="12"}}
-                                        {{> "post-card"}}
+                                        {{> "post-card" lazyLoad=true}}
                                     {{/foreach}}
                                 {{/get}}
                             {{/match}}
@@ -33,7 +33,7 @@
                             {{#match posts.length ">=" 10}}
                                 {{#get "posts" include="authors" limit="22"}}
                                     {{#foreach posts from="11" limit="12"}}
-                                        {{> "post-card"}}
+                                        {{> "post-card" lazyLoad=true}}
                                     {{/foreach}}
                                 {{/get}}
                             {{/match}}
@@ -42,14 +42,14 @@
                         {{#match posts.length ">=" 7}}
                             {{#get "posts" include="authors" limit="19"}}
                                 {{#foreach posts from="8" limit="12"}}
-                                    {{> "post-card"}}
+                                    {{> "post-card" lazyLoad=true}}
                                 {{/foreach}}
                             {{/get}}
                         {{/match}}
                     {{else}}
                         {{#get "posts" include="authors" limit="12"}}
                             {{#foreach posts}}
-                                {{> "post-card"}}
+                                {{> "post-card" lazyLoad=true}}
                             {{/foreach}}
                         {{/get}}
                     {{/match}}
@@ -65,14 +65,14 @@
                         {{/get}}
                     {{/match}}
                     {{#foreach posts}}
-                        {{> "post-card"}}
+                        {{> "post-card" lazyLoad=true}}
                     {{/foreach}}
                 {{/match}}
 
                 {{!-- Tag and author pages --}}
                 {{#match feed "archive"}}
                     {{#foreach posts}}
-                        {{> "post-card"}}
+                        {{> "post-card" lazyLoad=true}}
                     {{/foreach}}
                 {{/match}}
 
@@ -80,7 +80,7 @@
                 {{#match feed "recent"}}
                     {{#get "posts" include="authors" filter="id:-{{post.id}}" limit="4" as |next|}}
                         {{#foreach next}}
-                            {{> "post-card"}}
+                            {{> "post-card" lazyLoad=true}}
                         {{/foreach}}
                     {{/get}}
                 {{/match}}
@@ -92,7 +92,7 @@
             <aside class="gh-sidebar">
                 <section class="gh-about">
                     {{#if @site.icon}}
-                        <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}">
+                        <img class="gh-about-icon" src="{{@site.icon}}" alt="{{@site.title}}" loading="lazy">
                     {{/if}}
                     <h3 class="gh-about-title is-title">{{@site.title}}</h3>
                     {{#if @site.description}}
diff --git a/partials/feature-image.hbs b/partials/feature-image.hbs
index 2dc4f73..b9d2723 100644
--- a/partials/feature-image.hbs
+++ b/partials/feature-image.hbs
@@ -1,12 +1,11 @@
 {{#if feature_image}}
     <figure class="gh-article-image">
         <img
-            srcset="{{img_url feature_image size="s"}} 300w,
-                    {{img_url feature_image size="m"}} 720w,
+            srcset="{{img_url feature_image size="s"}} 320w,
+                    {{img_url feature_image size="m"}} 600w,
                     {{img_url feature_image size="l"}} 960w,
                     {{img_url feature_image size="xl"}} 1200w,
                     {{img_url feature_image size="xxl"}} 2000w"
-            sizes="(max-width: 1200px) 100vw, 1200px"
             src="{{img_url feature_image size="xl"}}"
             alt="{{title}}"
         >
diff --git a/partials/post-card.hbs b/partials/post-card.hbs
index ca20282..f6c13b5 100644
--- a/partials/post-card.hbs
+++ b/partials/post-card.hbs
@@ -3,14 +3,16 @@
         {{#if feature_image}}
             <figure class="gh-card-image">
                 <img
-                    srcset="{{img_url feature_image size="s"}} 300w,
-                            {{img_url feature_image size="m"}} 720w,
-                            {{img_url feature_image size="l"}} 960w,
-                            {{img_url feature_image size="xl"}} 1200w,
-                            {{img_url feature_image size="xxl"}} 2000w"
-                    sizes="(max-width: 1200px) 100vw, 1200px"
+                    srcset="{{img_url feature_image size="xs" format="webp"}} 160w,
+                            {{img_url feature_image size="s" format="webp"}} 320w,
+                            {{img_url feature_image size="m" format="webp"}} 600w,
+                            {{img_url feature_image size="l" format="webp"}} 960w,
+                            {{img_url feature_image size="xl" format="webp"}} 1200w,
+                            {{img_url feature_image size="xxl" format="webp"}} 2000w"
+                    sizes="{{#if imageSizes}}{{imageSizes}}{{else}}320px{{/if}}"
                     src="{{img_url feature_image size="m"}}"
                     alt="{{#if feature_image_alt}}{{feature_image_alt}}{{else}}{{title}}{{/if}}"
+                    {{#if lazyLoad}}loading="lazy"{{/if}}
                 >
             </figure>
         {{/if}}