fixing lighthouse issues

vwh · Aug 11, 2024 · 25743ba · 25743ba
1 parent 593eb61
commit 25743ba
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -54,16 +54,22 @@
     <meta name="twitter:image" content="https://sqlite3.online/preview.png" />
     <meta name="author" content="vwh" />
     <!-- Fonts -->
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
+      rel="preload"
       href="https://fonts.googleapis.com/css2?family=Lexend:[email protected]&display=swap"
-      rel="stylesheet"
+      as="style"
+      onload="this.onload=null;this.rel='stylesheet'"
     />
+    <noscript
+      ><link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=Lexend:[email protected]&display=swap"
+    /></noscript>
     <!-- Critical CSS -->
     <style>
       body {
         font-family: "Lexend", sans-serif;
+        font-display: swap;
       }
       .no-js {
         text-align: center;
@@ -76,7 +82,7 @@
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
+    <script type="module" src="/src/main.tsx" defer></script>
     <noscript>
       <div class="no-js">
         <h1>JavaScript Required</h1>

diff --git a/src/components/landing/features.tsx b/src/components/landing/features.tsx
@@ -20,7 +20,7 @@ function Feature({ icon: Icon, title, description }: FeatureProps) {
         <Icon className="h-6 w-6 text-blue-500" />
       </div>
       <div>
-        <h3 className="text-lg font-medium">{title}</h3>
+        <h2 className="text-lg font-medium">{title}</h2>
         <p className="mt-1 text-sm">{description}</p>
       </div>
     </div>

diff --git a/src/components/landing/footer.tsx b/src/components/landing/footer.tsx
@@ -3,7 +3,7 @@ import { GithubIcon } from "lucide-react";
 
 export default function Footer() {
   return (
-    <footer className="fixed bottom-0 left-0 right-0 border-t-2 bg-background shadow-md">
+    <footer className="fixed bottom-0 left-0 right-0 border-t bg-background shadow-md">
       <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
         <div className="flex items-center justify-between py-4 md:py-6">
           <div className="flex flex-col gap-1">
@@ -17,7 +17,7 @@ export default function Footer() {
               href="https://github.com/vwh/sqlite-viewer"
               target="_blank"
               rel="noopener noreferrer"
-              className="flex items-center space-x-2 text-blue-500 transition-colors dark:text-blue-400"
+              className="flex items-center space-x-2 text-blue-500"
               title="Star on GitHub"
             >
               <GithubIcon className="h-5 w-5" />