perf: Optimize image loading, defer Google Analytics, improve font display, update Devicon CDN, and refine hero section styling.

googleknight · googleknight · commit cd1fed640bcb · 2026-02-27T08:48:35.000+05:30
diff --git a/src/components/About.astro b/src/components/About.astro
@@ -31,10 +31,11 @@ const stats = [
           src={shubhamImage}
           alt="Shubham Mathur — Senior Software Engineer"
           class="about-image"
-          width={800}
-          height={1000}
+          widths={[320, 400, 640, 800]}
+          sizes="(max-width: 480px) 280px, (max-width: 992px) 320px, 400px"
           loading="lazy"
-          quality="max"
+          decoding="async"
+          quality={100}
         />
       </div>
 
diff --git a/src/components/Hero.astro b/src/components/Hero.astro
@@ -199,6 +199,12 @@ import { siteConfig } from "../data/site-config";
     z-index: 1;
     text-align: center;
     padding-top: var(--nav-height);
+    min-height: calc(100vh - 80px);
+    min-height: calc(100dvh - 80px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
   }
 
   .hero-greeting {
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -17,7 +17,7 @@ const pageTitle =
 <!doctype html>
 <html lang="en" data-theme="dark">
   <head>
-    <!-- Google tag (gtag.js) -->
+    <!-- Google tag (gtag.js) — deferred to not block rendering -->
     <script async src="https://www.googletagmanager.com/gtag/js?id=G-CJHSDRFER0"
     ></script>
     <script is:inline>
@@ -63,6 +63,7 @@ const pageTitle =
     <!-- Fonts -->
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link rel="preconnect" href="https://cdn.jsdelivr.net" crossorigin />
     <link
       rel="preload"
       as="style"
@@ -84,17 +85,25 @@ const pageTitle =
     <!-- Devicons (Asynchronous loading for performance) -->
     <link
       rel="preload"
-      href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+      href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.16.0/devicon.min.css"
       as="style"
       onload="this.onload=null;this.rel='stylesheet'"
     />
     <noscript>
       <link
         rel="stylesheet"
-        href="https://cdn.jsdelivr.net/gh/devicons/devicon@latest/devicon.min.css"
+        href="https://cdn.jsdelivr.net/gh/devicons/devicon@v2.16.0/devicon.min.css"
       />
     </noscript>
 
+    <!-- Override devicon font-display to prevent render-blocking -->
+    <style is:inline>
+      @font-face {
+        font-family: "devicons";
+        font-display: swap;
+      }
+    </style>
+
     <title>{pageTitle}</title>
 
     <script
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -114,6 +114,7 @@
   --border-radius-md: 10px;
   --border-radius-lg: 16px;
   --border-radius-xl: 24px;
+  --border-radius-2xl: 32px;
   --border-radius-full: 9999px;
 }
 

Original file line number	Diff line number	Diff line change
`@@ -114,6 +114,7 @@`
`114`	`114`	`--border-radius-md: 10px;`
`115`	`115`	`--border-radius-lg: 16px;`
`116`	`116`	`--border-radius-xl: 24px;`
	`117`	`+ --border-radius-2xl: 32px;`
`117`	`118`	`--border-radius-full: 9999px;`
`118`	`119`	`}`
`119`	`120`