perf(website): improved image performance

Turned them into JPGs that are *much* smaller, and added a gradient to
the landing page that ensures text is visible even before image render (theoretically).

website/src/error_pages.rs

@@ -45,16 +45,16 @@ fn not_found_page<G: Html>(
                     span { ". If you came here another website, or a search engine, this page probably existed once, but has since been moved. Here are some pages you might like to try instead:" }
                     ul(class = "pl-6 mt-1 w-full") {
                         li {
-                            a(class = "underline text-indigo-500", href = "/") { "Home" }
+                            a(class = "underline text-indigo-500", href = "") { "Home" }
                         }
                         li {
-                            a(class = "underline text-indigo-500", href = "/docs") { "Docs" }
+                            a(class = "underline text-indigo-500", href = "docs") { "Docs" }
                         }
                         li {
-                            a(class = "underline text-indigo-500", href = "/comparisons") { "Comparisons" }
+                            a(class = "underline text-indigo-500", href = "comparisons") { "Comparisons" }
                         }
                         li {
-                            a(class = "underline text-indigo-500", href = "/plugins") { "Plugins" }
+                            a(class = "underline text-indigo-500", href = "plugins") { "Plugins" }
                         }
                     }
                 }

website/src/templates/index.rs

@@ -680,6 +680,10 @@ pub fn head(cx: Scope) -> View<SsrNode> {
     view! { cx,
         title { (t!("perseus", cx)) }
         link(rel = "stylesheet", href = ".perseus/static/prism.css")
+        // Prefetch the images and fonts so the browser gets on these as quickly as possible
+        link(rel = "prefetch", href = ".perseus/static/mesh_open.jpg")
+        link(rel = "prefetch", href = ".perseus/static/mesh_close.jpg")
+        link(rel = "prefetch", href = ".perseus/static/cy-grotesk-grand-regular.woff2")
     }
 }
 

website/static/styles/style.css

@@ -68,27 +68,6 @@ footer {
     }
 }
 
-@media (prefers-color-scheme: light) {
-    .mesh-open-bg {
-        background-image: url("../mesh_open.png");
-        background-size: cover;
-    }
-    .mesh-close-bg {
-        background-image: url("../mesh_close.png");
-        background-size: cover;
-    }
-}
-@media (prefers-color-scheme: dark) {
-    .mesh-open-bg {
-        background-image: url("../mesh_open_dark.png");
-        background-size: cover;
-    }
-    .mesh-close-bg {
-        background-image: url("../mesh_close_dark.png");
-        background-size: cover;
-    }
-}
-
 /* Styles for the Lighthouse report (mostly copied from Lighthouse itself for the animations etc.) */
 .font-mono-lh {
     font-family: 'Roboto Mono', 'Menlo', 'dejavu sans mono', 'Consolas', 'Lucida Console', monospace
@@ -145,7 +124,8 @@ input.search-bar-bg {
 }
 /* Styling for the background of each index page tile */
 .tile-start::before {
-    background-image: url("../mesh_open.png");
+    background: linear-gradient(157deg, rgba(148,160,235,1) 0%, rgba(206,121,195,1) 84%, rgba(227,127,188,1) 100%); /* This is a fallback so users can see the white text (esp. on slow networks) */
+    background-image: url("../mesh_open.jpg");
 }
 .tile-state-generation::before {
     background-color: #7566e4;
@@ -160,7 +140,7 @@ input.search-bar-bg {
     background-color: #db80bd;
 }
 .tile-end::before {
-    background-image: url("../mesh_close.png");
+    background-image: url("../mesh_close.jpg");
 }
 
 /* Tooltip handling */