Preload profile/tweet images, banners, and icons

src/routes/list.nim

@@ -15,7 +15,7 @@ template respList*(list, timeline, vnode: typed) =
     html = renderList(vnode, timeline.query, list)
     rss = "/$1/lists/$2/rss" % [@"name", @"list"]
 
-  resp renderMain(html, request, cfg, prefs, rss=rss)
+  resp renderMain(html, request, cfg, prefs, rss=rss, banner=list.banner)
 
 proc createListRouter*(cfg: Config) =
   router list:

src/routes/timeline.nim

@@ -95,7 +95,8 @@ proc showTimeline*(request: Request; query: Query; cfg: Config; prefs: Prefs;
 
   let pHtml = renderProfile(p, t, r, prefs, getPath())
   result = renderMain(pHtml, request, cfg, prefs, pageTitle(p), pageDesc(p),
-                      rss=rss, images = @[p.getUserpic("_400x400")])
+                      rss=rss, images = @[p.getUserpic("_400x400")],
+                      banner=p.banner)
 
 template respTimeline*(timeline: typed) =
   let t = timeline

src/views/general.nim

@@ -32,7 +32,8 @@ proc renderNavbar*(title, rss: string; req: Request): VNode =
         iconReferer "cog", "/settings", path, title="Preferences"
 
 proc renderHead*(prefs: Prefs; cfg: Config; titleText=""; desc=""; video="";
-                 images: seq[string] = @[]; ogTitle=""; theme=""; rss=""): VNode =
+                 images: seq[string] = @[]; banner=""; ogTitle=""; theme="";
+                 rss=""): VNode =
   let ogType =
     if video.len > 0: "video"
     elif rss.len > 0: "object"
@@ -83,7 +84,15 @@ proc renderHead*(prefs: Prefs; cfg: Config; titleText=""; desc=""; video="";
     meta(property="og:site_name", content="Nitter")
     meta(property="og:locale", content="en_US")
 
+    if banner.len > 0:
+      let bannerUrl = getPicUrl(banner)
+      link(rel="preload", type="image/png", href=getPicUrl(banner), `as`="image")
+
     for url in images:
+      let suffix = if "400x400" in url: "" else: "?name=small"
+      let preloadUrl = getPicUrl(url & suffix)
+      link(rel="preload", type="image/png", href=preloadUrl, `as`="image")
+
       let image = "https://" & cfg.hostname & getPicUrl(url)
       meta(property="og:image", content=image)
       meta(property="twitter:image:src", content=image)
@@ -98,15 +107,20 @@ proc renderHead*(prefs: Prefs; cfg: Config; titleText=""; desc=""; video="";
       meta(property="og:video:secure_url", content=video)
       meta(property="og:video:type", content="text/html")
 
+    # this is last so images are also preloaded
+    # if this is done earlier, Chrome only preloads one image for some reason
+    link(rel="preload", type="font/woff2", `as`="font",
+         href="/fonts/fontello.woff2?21002321", crossorigin="anonymous")
+
 proc renderMain*(body: VNode; req: Request; cfg: Config; prefs=defaultPrefs;
                  titleText=""; desc=""; ogTitle=""; rss=""; video="";
-                 images: seq[string] = @[]): string =
+                 images: seq[string] = @[]; banner=""): string =
   var theme = toLowerAscii(prefs.theme).replace(" ", "_")
   if "theme" in req.params:
     theme = toLowerAscii(req.params["theme"]).replace(" ", "_")
 
   let node = buildHtml(html(lang="en")):
-    renderHead(prefs, cfg, titleText, desc, video, images, ogTitle, theme, rss)
+    renderHead(prefs, cfg, titleText, desc, video, images, banner, ogTitle, theme, rss)
 
     body:
       renderNavbar(cfg.title, rss, req)