appview: improve page load #546

merged
opened by oppi.li targeting master from push-nlnnyywnokyn
  • preload main font that is inside css files
  • preconnect to image CDNs
  • remove redundant alt text and copy bsky instead
  • add description tag for SEO

Signed-off-by: oppiliappan me@oppi.li

Changed files
+15 -8
appview
pages
templates
layouts
timeline
user
fragments
+13 -6
appview/pages/templates/layouts/base.html
···
<html lang="en" class="dark:bg-gray-900">
<head>
<meta charset="UTF-8" />
-
<meta
-
name="viewport"
-
content="width=device-width, initial-scale=1.0"
-
/>
+
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
<meta name="description" content="Social coding, but for real this time!"/>
<meta name="htmx-config" content='{"includeIndicatorStyles": false}'>
-
<script src="/static/htmx.min.js"></script>
-
<script src="/static/htmx-ext-ws.min.js"></script>
+
+
<script defer src="/static/htmx.min.js"></script>
+
<script defer src="/static/htmx-ext-ws.min.js"></script>
+
+
<!-- preconnect to image cdn -->
+
<link rel="preconnect" href="https://avatar.tangled.sh" />
+
<link rel="preconnect" href="https://camo.tangled.sh" />
+
+
<!-- preload main font -->
+
<link rel="preload" href="/static/fonts/InterVariable.woff2" as="font" type="font/woff2" crossorigin />
+
<link rel="stylesheet" href="/static/tw.css?{{ cssContentHash }}" type="text/css" />
<title>{{ block "title" . }}{{ end }} · tangled</title>
{{ block "extrameta" . }}{{ end }}
+1 -1
appview/pages/templates/timeline/timeline.html
···
</div>
<div class="py-4 px-6 drop-shadow-sm rounded bg-white dark:bg-gray-800 flex items-center gap-4">
<div class="flex-shrink-0 max-h-full w-24 h-24">
-
<img class="object-cover rounded-full p-2" src="{{ fullAvatar $subjectHandle }}" />
+
<img alt="" class="object-cover rounded-full p-2" src="{{ fullAvatar $subjectHandle }}" />
</div>
<div class="flex-1 min-h-0 justify-around flex flex-col">
+1 -1
appview/pages/templates/user/fragments/picHandle.html
···
{{ define "user/fragments/picHandle" }}
<img
src="{{ tinyAvatar . }}"
-
alt="{{ . }}"
+
alt=""
class="rounded-full h-6 w-6 mr-1 border border-gray-300 dark:border-gray-700"
/>
{{ . | truncateAt30 }}