Optimize image loading and enable CDN prerendering

mdsvex.config.js

@@ -12,6 +12,7 @@ import rehypeExternalLinks from 'rehype-external-links';
 import { createHighlighter } from '@svelte-dev/pretty-code';
 import { remarkReadingTime } from './src/lib/remarkReadingTime.js';
 import { rehypeStripCodeTabindex } from './src/lib/rehypeStripCodeTabindex.js';
+import { rehypeLazyImages } from './src/lib/rehypeLazyImages.js';
 
 const config = {
 	extensions: ['.md'],
@@ -47,7 +48,8 @@ const config = {
 		rehypeFigure,
 		[rehypeExternalLinks, { target: ['_blank'], rel: ['noopener noreferrer'] }],
 		[rehypeAutolinkHeadings, { behavior: 'append', content: { type: 'text', value: '#' } }],
-		rehypeStripCodeTabindex
+		rehypeStripCodeTabindex,
+		rehypeLazyImages
 	]
 };
 

src/lib/rehypeLazyImages.js

@@ -0,0 +1,14 @@
+import { visit } from 'unist-util-visit';
+
+/** Add loading="lazy" and decoding="async" to all markdown images. */
+export function rehypeLazyImages() {
+	return (tree) => {
+		visit(tree, 'element', (node) => {
+			if (node.tagName === 'img') {
+				node.properties = node.properties ?? {};
+				node.properties.loading = node.properties.loading ?? 'lazy';
+				node.properties.decoding = node.properties.decoding ?? 'async';
+			}
+		});
+	};
+}

src/routes/+layout.svelte

@@ -76,6 +76,7 @@
 <svelte:head>
 	<link rel="canonical" href="https://www.injoon5.com{$page.url.pathname}" />
 	<meta property="og:site_name" content="Injoon Oh" />
+	<link rel="preconnect" href={PUBLIC_CONVEX_URL} />
 </svelte:head>
 
 <div class="sticky top-0 z-30 transition-colors duration-200">

src/routes/blog/[slug]/+page.ts

@@ -1,6 +1,7 @@
-// Server-rendered (not prerendered) so the cookie/?lang= preferred language
-// is applied on the server — the first byte is the right language, no flash.
-export const prerender = false;
+// Prerendered so pages are served from CDN edge.
+// Language preference is restored client-side via localStorage/cookie in onMount;
+// the mounted guard suppresses animations during that initial switch.
+export const prerender = true;
 
 import { error } from '@sveltejs/kit';
 

src/routes/projects/[slug]/+page.ts

@@ -1,6 +1,6 @@
-// Server-rendered (not prerendered) so the cookie/?lang= preferred language
-// is applied on the server — the first byte is the right language, no flash.
-export const prerender = false;
+// Prerendered so pages are served from CDN edge.
+// Language preference is restored client-side via localStorage/cookie in onMount.
+export const prerender = true;
 
 import { error } from '@sveltejs/kit';
 

vercel.json

@@ -16,6 +16,15 @@
 					"value": "*"
 				}
 			]
+		},
+		{
+			"source": "/images/(.*)",
+			"headers": [
+				{
+					"key": "Cache-Control",
+					"value": "public, max-age=604800, s-maxage=2592000, stale-while-revalidate=86400"
+				}
+			]
 		}
 	],
 	"rewrites": [