diff --git a/app/caddy/page.tsx b/app/caddy/page.tsx
index 3e3e411..ff20c4b 100644
--- a/app/caddy/page.tsx
+++ b/app/caddy/page.tsx
@@ -1,6 +1,6 @@
 import { redirect } from 'next/navigation'
 import Link from 'next/link'
-import { createHighlighter } from 'shiki'
+import { createHighlighter, type Highlighter } from 'shiki'
 import caddyfileGrammar from '@/lib/grammars/caddyfile.json'
 import { getCurrentUser } from '@/lib/session'
 import { execAgent } from '@/lib/agent-client'
@@ -9,6 +9,18 @@ import CaddyView from './_components/caddy-view'
 
 export const dynamic = 'force-dynamic'
 
+let highlighterPromise: Promise<Highlighter> | null = null
+function getHighlighter() {
+  if (!highlighterPromise) {
+    highlighterPromise = createHighlighter({
+      themes: ['github-dark'],
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      langs: [caddyfileGrammar as any],
+    })
+  }
+  return highlighterPromise
+}
+
 export default async function CaddyPage() {
   const user = await getCurrentUser()
   if (!user) redirect('/login')
@@ -17,11 +29,7 @@ export default async function CaddyPage() {
   let configError: string | null = null
   try {
     const raw = await execAgent('caddy_show_config')
-    const highlighter = await createHighlighter({
-      themes: ['github-dark'],
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      langs: [caddyfileGrammar as any],
-    })
+    const highlighter = await getHighlighter()
     configHtml = highlighter.codeToHtml(raw || '# (empty)', {
       lang: 'caddyfile',
       theme: 'github-dark',