Browse Source

Lazy load the images we serve

Every <img> in the templates was eager, so a listing of image posts
fetched every full size preview on the page before the reader had
scrolled to any of them.  The guest templates already asked for
loading="lazy" on their console captures; ask for it everywhere.

The four which are page furniture rather than content -- the login logo,
the made-with icon in the footer, the TOTP QR and the missing-config
icon -- are above the fold, where lazy loading buys nothing and costs a
little.  They are in here anyway for consistency, and are the ones to
take back out if any of them turn up late.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Aevq96J12mMxJnexthkMHv
George Baugh 1 tháng trước cách đây
mục cha
commit
ca9a5c4cbc

+ 1 - 1
www/templates/html/components/forms/blog.tx

@@ -4,7 +4,7 @@
         : include "post_tags.tx";
 
         : if ( !$post.video_href && !$post.is_image && !$post.is_video && !$post.is_profile && $post.preview ) {
-            <img src="<: $post.preview :>" class="responsive-img" />
+            <img src="<: $post.preview :>" class="responsive-img" loading="lazy" />
         : }
 
         <div class="postData responsive-text" id="postData-<: $post.id :>">

+ 1 - 1
www/templates/html/components/forms/entities.tx

@@ -4,7 +4,7 @@
         : include "post_tags.tx";
 
         : if ( !$post.video_href && !$post.is_image && !$post.is_video && !$post.is_profile && $post.preview ) {
-            <img src="<: $post.preview :>" class="responsive-img" />
+            <img src="<: $post.preview :>" class="responsive-img" loading="lazy" />
         : }
 
         <div class="postData responsive-text" id="postData-<: $post.id :>">

+ 2 - 2
www/templates/html/components/forms/file.tx

@@ -7,7 +7,7 @@
                     Your browser does not support the video tag.
                 </video>
             : } else {
-                <img src="<: $post.preview :>" class="responsive-img" />
+                <img src="<: $post.preview :>" class="responsive-img" loading="lazy" />
             : }
             <p class="midtitle"><: $post.title :></p>
         </a>
@@ -30,7 +30,7 @@
         : }
 
         : if ( $post.is_image ) {
-            <img src="<: $post.preview :>" class="responsive-img" />
+            <img src="<: $post.preview :>" class="responsive-img" loading="lazy" />
         : }
 
         : if( $post.data ) {

+ 1 - 1
www/templates/html/components/forms/invoice.tx

@@ -4,7 +4,7 @@
         : include "post_tags.tx";
 
         : if ( !$post.video_href && !$post.is_image && !$post.is_video && !$post.is_profile && $post.preview ) {
-            <img src="<: $post.preview :>" class="responsive-img" />
+            <img src="<: $post.preview :>" class="responsive-img" loading="lazy" />
         : }
 
         <div class="postData responsive-text" id="postData-<: $post.id :>">

+ 1 - 1
www/templates/html/components/forms/microblog.tx

@@ -5,7 +5,7 @@
         : include "post_tags.tx";
 
         : if ( !$post.video_href && !$post.is_image && !$post.is_video && !$post.is_profile && $post.preview ) {
-            <img src="<: $post.preview :>" class="responsive-img" />
+            <img src="<: $post.preview :>" class="responsive-img" loading="lazy" />
         : }
         : if ( $post.video_href ) {
             <video preload="none" class="responsive" controls poster="<: $post.preview :>" >

+ 1 - 1
www/templates/html/components/forms/presentation.tx

@@ -5,7 +5,7 @@
 
         : if ( !$nochrome ) {
         : if ( !$post.video_href && !$post.is_image && !$post.is_video && !$post.is_profile && $post.preview ) {
-            <img src="<: $post.preview :>" class="responsive-img" />
+            <img src="<: $post.preview :>" class="responsive-img" loading="lazy" />
         : }
         : }
 

+ 1 - 1
www/templates/html/components/totp.tx

@@ -2,7 +2,7 @@
     Use the following URI, or scan the below QR code into your authenticator Application of choice:<br />
     <: $uri :>
     <br />
-    <img src="/totp_qr/<: $qr :>" alt="TOTP QR Code" />
+    <img src="/totp_qr/<: $qr :>" alt="TOTP QR Code" loading="lazy" />
     <br />
     Current Code (<: $timestamp :>): <: $cur_code :>
 </div>

+ 1 - 1
www/templates/html/index.tx

@@ -61,7 +61,7 @@
 </div>
 : if ( $show_madeby ) {
 <a target="_blank" rel="noopener" class="trogged" href="https://tcms.troglodyne.net">
-<img src="/img/icon/favicon.svg" style="height:2rem;" />
+<img src="/img/icon/favicon.svg" style="height:2rem;" loading="lazy" />
 </a>
 : }
 <: component('Footer') :>

+ 1 - 1
www/templates/html/login.tx

@@ -7,7 +7,7 @@
 </style>
 <div id="login">
     <div>
-      <img id="logo" src="/img/icon/favicon.svg" style="float:left" /><span style="font-family:courier;font-size:2rem;">CMS Login</span>
+      <img id="logo" src="/img/icon/favicon.svg" style="float:left" loading="lazy" /><span style="font-family:courier;font-size:2rem;">CMS Login</span>
     </div>
     <div id="spacer" style="clear: both;"><br /></div>
     <form method="POST" action="/auth">

+ 1 - 1
www/templates/html/notconfigured.tx

@@ -4,7 +4,7 @@
 </nav>
 <section>
     <div id="notice">
-        <img alt="Icon indicating a missing file" src="/img/mime/missing.gif" />
+        <img alt="Icon indicating a missing file" src="/img/mime/missing.gif" loading="lazy" />
         <span>
             [INFO] This page is being displayed because the main configuration file is missing
             (or corrupted).