perf: ⚡ Slight performance changes

app.vue

@@ -5,12 +5,7 @@
 </template>
 
 <script setup lang="ts">
-useServerSeoMeta({
-    titleTemplate: (titleChunk) => {
-        return titleChunk ? `${titleChunk} · Lysand` : "Lysand";
-    },
-});
-
+import { convert } from "html-to-text";
 // Use SSR-safe IDs for Headless UI
 provideHeadlessUseId(() => useId());
 
@@ -18,8 +13,33 @@ const code = useRequestURL().searchParams.get("code");
 const appData = useAppData();
 const tokenData = useTokenData();
 const client = useMegalodon(tokenData);
+const instance = useInstance(client);
+const description = useExtendedDescription(client);
 const me = useMe();
 
+useSeoMeta({
+    titleTemplate: (titleChunk) => {
+        return titleChunk ? `${titleChunk} · Lysand` : "Lysand";
+    },
+    title: computed(() => instance.value?.title ?? ""),
+    ogImage: computed(() => instance.value?.banner),
+    twitterTitle: computed(() => instance.value?.title ?? ""),
+    twitterDescription: computed(() =>
+        convert(description.value?.content ?? ""),
+    ),
+    twitterImage: computed(() => instance.value?.banner),
+    description: computed(() => convert(description.value?.content ?? "")),
+    ogDescription: computed(() => convert(description.value?.content ?? "")),
+    ogSiteName: "Lysand",
+    colorScheme: "dark",
+});
+
+useHead({
+    htmlAttrs: {
+        lang: "en",
+    },
+});
+
 if (code) {
     if (appData.value) {
         client.value

layouts/app.vue

@@ -41,24 +41,12 @@
 </template>
 
 <script setup lang="ts">
-import { convert } from "html-to-text";
 import CollapsibleAside from "~/components/sidebars/collapsible-aside.vue";
 import { OverlayScrollbarsComponent } from "#imports";
 
 const tokenData = useTokenData();
-const client = useMegalodon(tokenData);
-const instance = useInstance(client);
-const description = useExtendedDescription(client);
 const { width } = useWindowSize();
 
-useServerSeoMeta({
-    title: instance.value?.title,
-    ogImage: instance.value?.banner,
-    description: convert(description.value?.content ?? ""),
-    ogSiteName: "Lysand",
-    colorScheme: "dark",
-});
-
 const { n } = useMagicKeys();
 
 watchEffect(async () => {

nuxt.config.ts

@@ -112,5 +112,9 @@ export default defineNuxtConfig({
     },
     devtools: {
         enabled: true,
+
+        timeline: {
+            enabled: true,
+        },
     },
 });