perf: render items of long list only after scrolled into view

5 files changed, 9 insertions, 5 deletions

diff --git a/assets/css/utils/_utility.scss b/assets/css/utils/_utility.scss
index df29ce0a..ce11796c 100644
--- a/assets/css/utils/_utility.scss
+++ b/assets/css/utils/_utility.scss
@@ -46,3 +46,7 @@
 
 details.no-mark summary::marker { content: "" }
 
+.lazy-render {
+  content-visibility: auto;
+  contain-intrinsic-size: auto 500px;
+}
diff --git a/layouts/archive.html b/layouts/archive.html
index 3af7c9ce..764f0879 100644
--- a/layouts/archive.html
+++ b/layouts/archive.html
@@ -6,7 +6,7 @@
         <ol class="mx-0 my-4 p-0 leading-loose flex flex-col-reverse">
             {{ range (.Site.RegularPages | collections.Reverse) }}
             {{ if eq .Language .Site.Language }}
-            <li class="list-decimal text-secondary">
+            <li class="list-decimal text-secondary lazy-render">
                 <div class="flex justify-between">
                     <a href="{{ .Permalink }}">{{ .LinkTitle }}</a>
                     <a href="/{{ .Section }}" class="font-mono text-secondary">{{ .Section }}</a>
diff --git a/layouts/essays/section.html b/layouts/essays/section.html
index f5a08ace..40baea9e 100644
--- a/layouts/essays/section.html
+++ b/layouts/essays/section.html
@@ -16,7 +16,7 @@
             )}}
 
             {{ range .Pages.GroupByDate "January" }}
-            <details class="posts-month-archive"{{ if gt $remainingMonthsToOpen 0 }} open{{ end }}>
+            <details class="lazy-render"{{ if gt $remainingMonthsToOpen 0 }} open{{ end }}>
                 <summary class="flex items-center border-b border-b-dashed border-[var(--border-color)] py-2 px-1">
                     <h2 class="text-size-lg inline-block w-full m-0
                         flex justify-between items-center">
diff --git a/layouts/highlights.html b/layouts/highlights.html
index 9d7c13bf..f9f9c030 100644
--- a/layouts/highlights.html
+++ b/layouts/highlights.html
@@ -6,12 +6,12 @@
         </div>
         <!-- Highlights -->
         {{ range shuffle site.Data.highlights }}
-        <section class="post-content">
+        <section class="post-content lazy-render">
             <h3><a href="{{ .url }}">《{{ .title }}》</a></h3>
             <ul class="list-none">
                 {{ range .highlights }}
                 <li class="my-4 text-lg">
-                    <a class="font-italic hover:no-underline" href="{{ .link }}">{{ .text | markdownify }}</a>
+                    <a class="hover:no-underline" href="{{ .link }}">{{ .text | markdownify }}</a>
                 </li>
                 {{ end }}
             </ul>
diff --git a/layouts/section.html b/layouts/section.html
index a70c6cd1..7497a217 100644
--- a/layouts/section.html
+++ b/layouts/section.html
@@ -25,7 +25,7 @@
             )}}
 
             {{ range .Pages.GroupByDate "January" }}
-            <div class="posts-month-archive"{{ if gt $remainingMonthsToOpen 0 }} open{{ end }}>
+            <div class="lazy-render"{{ if gt $remainingMonthsToOpen 0 }} open{{ end }}>
                 <h2 class="text-size-lg inline-block w-full m-0
                     flex justify-between items-center">
                     {{ .Key }}