Lorenzo Iovino
7caf02fb36
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
127 lines
3.8 KiB
Text
127 lines
3.8 KiB
Text
---
|
|
import { Image } from "astro:assets";
|
|
import astroIcon from "../assets/astro.svg";
|
|
import tailwindIcon from "../assets/tailwind.svg";
|
|
import githubIcon from "../assets/github.svg";
|
|
---
|
|
|
|
<div class="w-full bg-secondary py-2 px-4">
|
|
<div class="max-w-6xl mx-auto flex justify-between flex-col-reverse sm:flex-row gap-4 sm:items-end items-center">
|
|
<div class="text-center sm:text-left text-gray-800 flex flex-col items-center sm:items-start">
|
|
<div class="flex flex-wrap items-center gap-3 text-sm">
|
|
<span class="font-medium text-gray-800">Lorenzo Iovino</span>
|
|
<span class="text-gray-800">•</span>
|
|
<a
|
|
href="/rss.xml"
|
|
class="transition-colors duration-200 inline-flex items-center gap-1"
|
|
title="RSS Feed"
|
|
>
|
|
RSS
|
|
</a>
|
|
<span class="text-gray-800">•</span>
|
|
<a
|
|
href="/sitemap-index.xml"
|
|
class="transition-colors duration-200"
|
|
title="Sitemap">Sitemap</a
|
|
>
|
|
<span class="text-gray-800">•</span>
|
|
<a
|
|
href="https://www.iubenda.com/privacy-policy/98687046"
|
|
class="transition-colors duration-200 iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe"
|
|
title="Privacy Policy">Privacy Policy</a
|
|
>
|
|
<script is:inline type="text/javascript">
|
|
(function (w, d) {
|
|
var loader = function () {
|
|
var s = d.createElement("script"),
|
|
tag = d.getElementsByTagName("script")[0];
|
|
s.src = "https://cdn.iubenda.com/iubenda.js";
|
|
tag.parentNode.insertBefore(s, tag);
|
|
};
|
|
if (w.addEventListener) {
|
|
w.addEventListener("load", loader, false);
|
|
} else if (w.attachEvent) {
|
|
w.attachEvent("onload", loader);
|
|
} else {
|
|
w.onload = loader;
|
|
}
|
|
})(window, document);
|
|
</script>
|
|
<span class="text-gray-800">•</span>
|
|
|
|
<a
|
|
href="https://www.iubenda.com/privacy-policy/98687046/cookie-policy"
|
|
class="transition-colors duration-200 iubenda-white iubenda-noiframe iubenda-embed iubenda-noiframe"
|
|
title="Cookie Policy">Cookie Policy</a
|
|
>
|
|
<script is:inline type="text/javascript">
|
|
(function (w, d) {
|
|
var loader = function () {
|
|
var s = d.createElement("script"),
|
|
tag = d.getElementsByTagName("script")[0];
|
|
s.src = "https://cdn.iubenda.com/iubenda.js";
|
|
tag.parentNode.insertBefore(s, tag);
|
|
};
|
|
if (w.addEventListener) {
|
|
w.addEventListener("load", loader, false);
|
|
} else if (w.attachEvent) {
|
|
w.attachEvent("onload", loader);
|
|
} else {
|
|
w.onload = loader;
|
|
}
|
|
})(window, document);
|
|
</script>
|
|
</div>
|
|
</div>
|
|
<div class="text-center sm:text-right text-gray-800 text-sm">
|
|
<div class="flex flex-col gap-1">
|
|
<div class="flex items-center justify-center sm:justify-end gap-1 flex-wrap">
|
|
<span>Made with</span>
|
|
<a
|
|
href="https://astro.build/"
|
|
class="inline-flex items-center transition-all duration-200"
|
|
aria-label="Astro"
|
|
>
|
|
<Image
|
|
class="h-5 w-5"
|
|
src={astroIcon}
|
|
width={20}
|
|
height={20}
|
|
loading="lazy"
|
|
alt=""
|
|
/>
|
|
</a>
|
|
<span>and</span>
|
|
<a
|
|
href="https://tailwindcss.com/"
|
|
class="inline-flex items-center center transition-all duration-200"
|
|
aria-label="TailwindCSS"
|
|
>
|
|
<Image
|
|
class="h-5 w-5"
|
|
src={tailwindIcon}
|
|
width={20}
|
|
height={20}
|
|
loading="lazy"
|
|
alt=""
|
|
/>
|
|
</a>
|
|
</div>
|
|
<a
|
|
href="https://github.com/thisloke/lorenzoiovino.com"
|
|
class="transition-colors duration-200 inline-flex items-center justify-center sm:justify-end gap-2 font-medium"
|
|
>
|
|
<span>Check the source code</span>
|
|
<Image
|
|
src={githubIcon}
|
|
class="h-5 w-5"
|
|
width={20}
|
|
height={20}
|
|
loading="lazy"
|
|
alt=""
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|