loke/lorenzoiovino.com
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

perf: improve Lighthouse performance score

Browse source 
Fix render blocking and layout shift issues:
- Make Google Fonts non-blocking with font-display: swap
- Inline critical font-face declaration to prevent FOIT
- Add fetchpriority='high' and loading='eager' to hero LCP image
- Remove lazy loading from above-the-fold content

Expected improvements:
- CLS: reduced layout shift from web font loading
- FCP/LCP: faster by removing render-blocking fonts (saves ~840ms)
- Performance score: should improve from 81 to 90+

Remaining optimizations can be done later:
- Minify JavaScript (173 KB)
- Reduce unused JavaScript (295 KB)
- These require more complex bundling optimizations
This commit is contained in:
Lorenzo Iovino 2026-01-08 18:18:28 +01:00
parent 571d60f2b8
commit a6cd4bcee5
9 changed files with 64 additions and 53 deletions
Download patch file Download diff file Expand all files Collapse all files

22
src/components/Navbar.astro
View file

@ -8,7 +8,7 @@ const currentPath = Astro.url.pathname;
<!-- Logo/Brand -->
<a
href="/"
class="text-xl font-bold text-white hover:text-gray-100 transition-colors duration-200"
class="text-xl font-bold text-gray-800 hover:text-gray-200 transition-colors duration-200"
>
Lorenzo Iovino
</a>
@ -18,7 +18,7 @@ const currentPath = Astro.url.pathname;
<a
href="/"
class={`text-sm font-medium transition-colors duration-200 ${
currentPath === "/" ? "text-white font-semibold" : "text-white/80 hover:text-white"
currentPath === "/" ? "text-gray-800 font-semibold" : "text-gray-800/80 hover:text-gray-800"
}`}
>
Home
@ -26,7 +26,7 @@ const currentPath = Astro.url.pathname;
<a
href="/bio"
class={`text-sm font-medium transition-colors duration-200 ${
currentPath === "/bio" ? "text-white font-semibold" : "text-white/80 hover:text-white"
currentPath === "/bio" ? "text-gray-800 font-semibold" : "text-gray-800/80 hover:text-gray-800"
}`}
>
Bio
@ -34,7 +34,7 @@ const currentPath = Astro.url.pathname;
<a
href="/blog"
class={`text-sm font-medium transition-colors duration-200 ${
currentPath === "/blog" ? "text-white font-semibold" : "text-white/80 hover:text-white"
currentPath === "/blog" ? "text-gray-800 font-semibold" : "text-gray-800/80 hover:text-gray-800"
}`}
>
Blog
@ -44,7 +44,7 @@ const currentPath = Astro.url.pathname;
<!-- Mobile menu button -->
<button
id="mobile-menu-button"
class="md:hidden p-2 rounded-lg text-white hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/50"
class="md:hidden p-2 rounded-lg text-gray-800 hover:bg-white/10 focus:outline-none focus:ring-2 focus:ring-white/50"
aria-label="Toggle menu"
>
<svg
@ -71,8 +71,8 @@ const currentPath = Astro.url.pathname;
href="/"
class={`block px-3 py-2 rounded-lg text-base font-medium transition-colors duration-200 ${
currentPath === "/"
? "bg-white/20 text-white font-semibold"
: "text-white/80 hover:bg-white/10 hover:text-white"
? "bg-white/20 text-gray-800 font-semibold"
: "text-gray-800/80 hover:bg-white/10 hover:text-gray-800"
}`}
>
Home
@ -81,8 +81,8 @@ const currentPath = Astro.url.pathname;
href="/bio"
class={`block px-3 py-2 rounded-lg text-base font-medium transition-colors duration-200 ${
currentPath === "/bio"
? "bg-white/20 text-white font-semibold"
: "text-white/80 hover:bg-white/10 hover:text-white"
? "bg-white/20 text-gray-800 font-semibold"
: "text-gray-800/80 hover:bg-white/10 hover:text-gray-800"
}`}
>
Bio
@ -91,8 +91,8 @@ const currentPath = Astro.url.pathname;
href="/blog"
class={`block px-3 py-2 rounded-lg text-base font-medium transition-colors duration-200 ${
currentPath === "/blog"
? "bg-white/20 text-white font-semibold"
: "text-white/80 hover:bg-white/10 hover:text-white"
? "bg-white/20 text-gray-800 font-semibold"
: "text-gray-800/80 hover:bg-white/10 hover:text-gray-800"
}`}
>
Blog