fix: get lighthouse score to 100 (#180)

* Lighthouse Report

* quick fix

* quick adjustment

* PR Corrections

* feat: move all email to defer queue (#186)

---------

Co-authored-by: Rotimi Best <[email protected]>

apps/classroomio-com/src/lib/Navigation/Navigation.svelte

@@ -68,9 +68,16 @@
 <div
   class="flex w-full justify-between items-center py-6 border-b-[1px] md:px-12 px-5 fixed top-0 z-[3000] filter backdrop-blur-xl shadow-sm bg-white"
 >
-  <a href="/">
-    <div class="flex items-center">
-      <img src="/logo-512.png" alt="classroomio logo" class="w-10 h-10" />
+  <a href="/" class="w-[20%]">
+    <div class="flex items-center w-full">
+      <img
+        loading="lazy"
+        width="28"
+        height="28"
+        src="/logo-512.svg"
+        alt="classroomio logo"
+        class="w-[40%] lg:w-[15%]"
+      />
       <h1 class="text-xs md:text-lg font-medium ml-2">ClassroomIO</h1>
     </div>
   </a>
@@ -144,10 +151,20 @@
       Sign Up
     </button> -->
     <a href="/discord" target="_blank">
-      <img alt="discord logo" src="/discord-blue.png" class="w-8 h-6 mr-4 cursor-pointer" />
+      <img
+        loading="lazy"
+        alt="discord logo"
+        src="/discord-blue.png"
+        class="w-8 h-6 mr-4 cursor-pointer"
+      />
     </a>
     <a href="/github" target="_blank">
-      <img alt="github logo" src="/github-mark.png" class="w-6 h-6 mr-4 cursor-pointer" />
+      <img
+        loading="lazy"
+        alt="github logo"
+        src="/github-mark.png"
+        class="w-6 h-6 mr-4 cursor-pointer"
+      />
     </a>
     <a
       class="font-medium text-sm after:content-['→'] after:ml-2"
@@ -157,8 +174,11 @@
     </a>
   </div>
 
-  <button class="block md:block lg:hidden" on:click={handleShowNav}
-    ><TextAlignJustify size={24} /></button
+  <button
+    type="button"
+    aria-label="Hamburger Menu"
+    class="block md:block lg:hidden"
+    on:click={handleShowNav}><TextAlignJustify size={24} /></button
   >
 
   <!-- burger menu -->
@@ -169,7 +189,14 @@
       class="w-[60%] md:w-[40%] h-[100vh] border-2 sm:block lg:hidden px-3 pt-3 pb-2 md:p-7 absolute right-0 top-0 bg-white"
     >
       <div class="flex justify-between py-2 mb-5">
-        <img src="/logo-512.png" alt="classroomio logo" class="w-[8%]" />
+        <img
+          loading="lazy"
+          width="20"
+          height="20"
+          src="/logo-512.svg"
+          alt="classroomio logo"
+          class="w-[15%]"
+        />
         <button on:click={handleShowNav}><CloseLarge size={24} class="mr-5" /></button>
       </div>
       <nav class="">
@@ -235,7 +262,12 @@
           target="_blank"
           class="flex items-center rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg"
         >
-          <img alt="discord logo" src="/discord-blue.png" class="w-8 h-6 mr-2 cursor-pointer" />
+          <img
+            loading="lazy"
+            alt="discord logo"
+            src="/discord-blue.png"
+            class="w-8 h-6 mr-2 cursor-pointer"
+          />
           <span>Discord</span>
         </a>
         <a
@@ -243,7 +275,12 @@
           target="_blank"
           class="flex items-center rounded-md after:ml-2 w-full text-left py-4 px-4 hover:bg-gray-100 text-sm md:text-lg"
         >
-          <img alt="github logo" src="/github-mark.png" class="w-6 h-6 mr-3 cursor-pointer" />
+          <img
+            loading="lazy"
+            alt="github logo"
+            src="/github-mark.png"
+            class="w-6 h-6 mr-3 cursor-pointer"
+          />
           <span>Github</span>
         </a>
         <a