Lazy loading everywhere

FossilOrigin-Name: f3e381d50ca906f7b9a28b6bdbfe8e5e36b2478206166a69c981bdaf7f1bd991

dist/treebird20.css

@@ -22,7 +22,7 @@ body
     background-attachment: fixed !important;
     background-size: cover !important;
     background-color: unset;
-    font-family: Arial, Helvetica, sans-serif;
+    font-family: sans-serif, Arial, Helvetica;
     min-height: 100%;
     color: #040404;
     

src/base_page.c

@@ -40,7 +40,7 @@ void render_base_page(struct base_page* page, struct session* ssn, mastodont_t*
     char* cookie = getenv("HTTP_COOKIE");
     enum l10n_locale locale = l10n_normalize(ssn->config.lang);
     const char* login_string = "<a href=\"login\" id=\"login-header\">Login / Register</a>";
-    const char* sidebar_embed = "<iframe class=\"sidebar-frame\" src=\"/notifications_compact\"></iframe>";
+    const char* sidebar_embed = "<iframe class=\"sidebar-frame\" loading=\"lazy\" src=\"/notifications_compact\"></iframe>";
     char* background_url_css = NULL;
     // Sidebar
     char* sidebar_str,

src/emoji.c

@@ -48,7 +48,7 @@ char* emojify(char* content, struct mstdnt_emoji* emos, size_t emos_len)
         coloned[sc_len+1] = ':';
         coloned[sc_len+2] = '\0';
 
-        easprintf(&emoji_url_str, "<img class=\"emoji\" src=\"%s\">", emos[i].url);
+        easprintf(&emoji_url_str, "<img class=\"emoji\" src=\"%s\" loading=\"lazy\">", emos[i].url);
         
         res = strrepl(res, coloned, emoji_url_str, STRREPL_ALL);
         if (oldres != content && res != oldres) free(oldres);

static/account_sidebar.tmpl

@@ -1,6 +1,6 @@
 <div class="account-sidebar">
   <div class="acct-info">
-    <img src="{{%s:avatar}}" class="acct-pfp">
+    <img src="{{%s:avatar}}" class="acct-pfp" loading="lazy">
     <span class="username">{{%s:username}}</span>
   </div>
   <table class="acct-stats">

static/attachment_image.tmpl

@@ -1,4 +1,4 @@
 <div class="attachment-container attachment-img">
-  <img width="256" src="{{%s:src}}">
+  <img width="256" src="{{%s:src}}" loading="lazy">
   {{%s:sensitive}}
 </div>

static/notification.tmpl

@@ -1,5 +1,5 @@
 <div class="notification-info">
-  <img src="{{%s:avatar}}">
+  <img src="{{%s:avatar}}" loading="lazy">
   <div class="notification-user">
     <span class="notification-text-group-with-icon">
       <span class="username">{{%s:username}}</span>

static/notification_action.tmpl

@@ -1,7 +1,7 @@
 <table class="notification notification-regular ui-table">
   <tr>
     <td class="pfp-td">
-      <img src="{{%s:avatar}}">
+      <img src="{{%s:avatar}}" loading="lazy">
     </td>
     <td class="notification-table-bit">
       <table class="ui-table">

static/status.tmpl

@@ -4,7 +4,7 @@
   <table id="{{%s:status_id}}" class="status-table ui-table">
     <tr>
       <td class="pfp-td {{%s:is_cat}} {{%s:is_bun}}">
-        <img src="{{%s:avatar}}">
+        <img src="{{%s:avatar}}" loading="lazy">
       </td>
       <td class="status-info">
         <div class="poster-stats">