optimize + add lighthouse test in CI

.github/workflows/gh-pages.yaml

@@ -59,4 +59,33 @@ jobs:
     steps:
       - name: Deploy to GitHub Pages
         id: deployment
-        uses: actions/deploy-pages@v4
+        uses: actions/deploy-pages@v4
+
+  test:
+    env:
+      LHCI_GITHUB_APP_TOKEN:  $ {{ secrets.LHCI_GITHUB_APP_TOKEN }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0 # Not needed if lastUpdated is not enabled
+      # - uses: pnpm/action-setup@v3 # Uncomment this block if you're using pnpm
+      #   with:
+      #     version: 9 # Not needed if you've set "packageManager" in package.json
+      # - uses: oven-sh/setup-bun@v1 # Uncomment this if you're using Bun
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 20
+          cache: npm # or pnpm / yarn
+      - name: Setup Pages
+        uses: actions/configure-pages@v4
+      - name: Install dependencies
+        run: npm ci # or pnpm install / yarn install / bun install
+      - name: Build with VitePress
+        run: npm run home:build
+      - name: run Lighthouse CI
+        run: |
+          npm install -g @lhci/[email protected]
+          lhci autorun

home/.vitepress/config.mts

@@ -31,6 +31,9 @@ export default defineConfig({
     ['meta', { name: 'twitter:image', content: 'https://collapselauncher.com/img/banner.webp' }],
     ['meta', { name: 'robots', content: 'index, follow' }],
     ['meta', { name: 'author', content: 'Collapse Launcher Team' }],
+    ['link', { rel: 'preload', href: '/img/logo.webp', as: 'image'}],
+    ['link', { rel: 'preload', href: 'https://fonts.gstatic.com/s/outfit/v11/QGYvz_MVcBeNP4NJtEtq.woff2', as: 'font', type: 'font/woff2', crossorigin: 'anonymous'}],
+    ['link', { rel: 'preload', href: 'https://fonts.gstatic.com/s/outfit/v11/QGYvz_MVcBeNP4NJuktqQ4E.woff2', as: 'font', type: 'font/woff2', crossorigin: 'anonymous'}],
   ],
   appearance: 'dark',
   themeConfig: {

home/scripts/index.logo.vue

@@ -3,13 +3,13 @@
         <div style="display: flex; flex-wrap: wrap; justify-content: center; align-items: center;">
             <div style="text-align: center; margin: 5px;">
                 <div style="display: flex; flex-direction: column; align-items: center;">
-                    <img width="350px" height="auto" src="/img/vtuber.webp" /><br />
+                    <img width="350px" height="auto" src="/img/vtuber.webp" loading="lazy" alt="Collapse vTuber logo" title="VTuber Logo"/><br />
                     <i>I know, it's not a good one. But at least we made it lol</i><br />
                     <i>~ neon-nyan</i>
                 </div>
             </div>
             <div style="text-align: center; margin: 10px;">
-                <img width="710px" height="auto" src="/img/banner.webp" style="margin: 10px;" />
+                <img width="710px" height="auto" src="/img/banner.webp" style="margin: 10px;" loading="lazy" alt="Banner; Art by Rafa" title="Banner; Art by Rafa" />
                 <i class="art-annotation">
                     <i>GI Nahida Background Credit: <a href="https://www.pixiv.net/en/users/3970196"><b>Rafa on Pixiv</b></a></i>
                 </i>

lighthouserc.js

@@ -0,0 +1,11 @@
+module.exports = {
+    ci: {
+      collect: {
+        staticDistDir: './home/.vitepress/dist/',
+        startServerCommand: 'npm run home:preview'
+      },
+      upload: {
+        target: 'temporary-public-storage',
+      },
+    },
+  };