perf: shrink web app bundle from 7.9 MB to 3.0 MB

selfhost/Caddyfile

@@ -7,6 +7,8 @@
 # Caddy automatically obtains and renews Let's Encrypt certificates.
 
 {$DOMAIN} {
+    # The web app is a single large HTML file, compressing it roughly halves the download.
+    encode zstd gzip
     reverse_proxy backend:1926
 }
 

web-app/src/pages/Dashboard.tsx

@@ -17,7 +17,7 @@ import { AuthenticationDialog } from "@/components/AuthenticationDialog";
 import { SubscriptionSuccessModal } from "@/components/SubscriptionSuccessModal";
 import { usePostHog } from "posthog-js/react";
 import { WindowsDownloadModal } from "@/components/WindowsDownloadModal";
-import PairingBuddy from "@/assets/PairingBuddy.png";
+import PairingBuddy from "@/assets/PairingBuddy.webp";
 import { Tooltip, TooltipContent, TooltipTrigger } from "@/components/ui/tooltip.tsx";
 import { HiOutlineQuestionMarkCircle } from "react-icons/hi2";
 

web-app/src/pages/Login.tsx

@@ -6,7 +6,7 @@ import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/com
 import { Input } from "@/components/ui/input";
 import { Label } from "@/components/ui/label";
 import Logo from "@/assets/Hopp.png";
-import LoginScreen from "@/assets/LoginScreen.png";
+import LoginScreen from "@/assets/LoginScreen.webp";
 
 import { BACKEND_URLS } from "@/constants";
 import { useEffect, useRef, useState } from "react";