Tweaks to improve load times on homepage

Gyanreyer · May 4, 2023 · ffafb22 · ffafb22
1 parent 5772485
commit ffafb22
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 20 deletions.
diff --git a/src/_components/home/homepage-section.webc b/src/_components/home/homepage-section.webc
@@ -14,8 +14,7 @@
   }
 
   :host:first-of-type {
-    padding-top: 8rem;
-    padding-top: clamp(4rem, 10%, 10vh);
+    padding-top: clamp(2rem, 8%, 8vh);
   }
 
   :host.primary {
@@ -125,6 +124,7 @@
     grid-column: 2 / 3;
     grid-row: 1 / 3;
     justify-self: center;
+    width: 100%;
     --translate-y: calc(15% * calc(var(--scroll-pct) - 0.25))
     transform: translateY(var(--translate-y));
   }

diff --git a/src/_components/shared/navbar.webc b/src/_components/shared/navbar.webc
@@ -4,16 +4,18 @@
       src="src/assets/img/nav/jess-logo.png"
       alt="Jess"
       width="240, 320, 640"
-      sizes="30vw, (max-width: 768px) 60vw"
+      sizes="(max-width: 768px) 60vw, 30vw"
+      loading="eager"
     ></eleventy-image>
   </a>
   <slot></slot>
-  <a href="/#about">
+  <a href="/#about" aria-label="Jump to about section">
     <eleventy-image
       src="src/assets/img/nav/about-icon.png"
       alt="About"
       width="240, 320, 640"
       sizes="30vw"
+      loading="eager"
     ></eleventy-image>
   </a>
 </nav>

diff --git a/src/_components/shared/scroll-to-top.webc b/src/_components/shared/scroll-to-top.webc
@@ -2,7 +2,7 @@
   id="scroll-to-top"
   class="shadow"
   onclick="window.scrollTo({ top: 0, behavior: 'smooth' })"
-  aria-hidden
+  aria-hidden="true"
   webc:root="override"
 >
   <svg
@@ -51,7 +51,7 @@
   }
 
   #scroll-to-top:hover svg {
-    transform: translateY(-10%);
+    transform: translateY(-8%);
   }
 </style>
 <script>

diff --git a/src/css/reset.css b/src/css/reset.css
@@ -4,6 +4,7 @@
   src: url("/fonts/AvenirNext-Medium.woff2");
   font-weight: 400;
   font-style: normal;
+  font-display: swap;
 }
 
 /* Semi-bold font weight */
@@ -12,6 +13,7 @@
   src: url("/fonts/AvenirNext-DemiBold.woff2");
   font-weight: 500;
   font-style: normal;
+  font-display: swap;
 }
 
 /* Bold font weight */
@@ -20,6 +22,7 @@
   src: url("/fonts/AvenirNext-Bold.woff2");
   font-weight: 700;
   font-style: normal;
+  font-display: swap;
 }
 
 :root {

diff --git a/src/index.webc b/src/index.webc
@@ -18,10 +18,11 @@ description: "art director/they/them"
     <div class="images">
       <eleventy-image
         src="src/assets/img/home/generalmills-doughboy.png"
+        loading="eager"
         role="presentation"
         alt=""
         width="240, 320, 640"
-        sizes="30vw, (max-width: 768px) 80vw"
+        sizes="(max-width: 768px) 80vw, 30vw"
       ></eleventy-image>
     </div>
     <a class="button primary" href="/work/general-mills">view work</a>
@@ -37,7 +38,7 @@ description: "art director/they/them"
         role="presentation"
         alt=""
         width="240, 320, 640"
-        sizes="30vw, (max-width: 768px) 80vw"
+        sizes="(max-width: 768px) 80vw, 30vw"
       ></eleventy-image>
     </div>
     <a class="button secondary" href="/work/famd">view work</a>
@@ -53,15 +54,15 @@ description: "art director/they/them"
         role="presentation"
         alt=""
         width="240, 320, 640"
-        sizes="30vw, (max-width: 768px) 80vw"
+        sizes="(max-width: 768px) 80vw, 30vw"
         class="box"
       ></eleventy-image>
       <eleventy-image
         src="src/assets/img/home/mowers-ferristube.png"
         role="presentation"
         alt=""
-        width="240, 320, 640"
-        sizes="30vw, (max-width: 768px) 80vw"
+        width="72, 120, 240"
+        sizes="(max-width: 768px) 16vw, 10vw"
         class="tube"
       ></eleventy-image>
     </div>
@@ -81,24 +82,24 @@ description: "art director/they/them"
         src="src/assets/img/home/pampers-appscreen1.png"
         role="presentation"
         alt=""
-        width="240, 320, 640"
-        sizes="30vw, (max-width: 768px) 80vw"
+        width="120, 240, 320"
+        sizes="(max-width: 768px) 30vw, 12vw"
         class="left"
       ></eleventy-image>
       <eleventy-image
         src="src/assets/img/home/pampers-appscreen2.png"
         role="presentation"
         alt=""
-        width="240, 320, 640"
-        sizes="30vw, (max-width: 768px) 80vw"
+        width="120, 240, 320"
+        sizes="(max-width: 768px) 30vw, 12vw"
         class="center"
       ></eleventy-image>
       <eleventy-image
         src="src/assets/img/home/pampers-appscreen3.png"
         role="presentation"
         alt=""
-        width="240, 320, 640"
-        sizes="30vw, (max-width: 768px) 80vw"
+        width="120, 240, 320"
+        sizes="(max-width: 768px) 30vw, 12vw"
         class="right"
       ></eleventy-image>
     </div>
@@ -134,10 +135,9 @@ description: "art director/they/them"
     <div class="images">
       <eleventy-image
         src="src/assets/img/home/jess-headshot.jpg"
-        role="presentation"
-        alt=""
+        alt="A headshot photo of Jess"
         width="240, 320, 640"
-        sizes="30vw, (max-width: 768px) 80vw"
+        sizes="(max-width: 768px) 80vw, 30vw"
       ></eleventy-image>
     </div>
     <a class="button secondary" download href="/Jess_Keoshian_Resume.pdf"