Improve hero and card image delivery
Calum Muir
BIN
public/Samantha-and-Connolly-480.webp
Normal file
|
After Width: | Height: | Size: 37 KiB |
BIN
public/Samantha-and-Connolly-640.webp
Normal file
|
After Width: | Height: | Size: 60 KiB |
BIN
public/Samantha-and-Connolly-960.webp
Normal file
|
After Width: | Height: | Size: 114 KiB |
BIN
public/about-320.webp
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
public/about-480.webp
Normal file
|
After Width: | Height: | Size: 34 KiB |
BIN
public/contact-320.webp
Normal file
|
After Width: | Height: | Size: 17 KiB |
BIN
public/contact-480.webp
Normal file
|
After Width: | Height: | Size: 38 KiB |
BIN
public/support-320.webp
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
public/support-480.webp
Normal file
|
After Width: | Height: | Size: 32 KiB |
|
|
@ -9,20 +9,23 @@ import {
|
|||
TWITTER_SITE,
|
||||
} from "../config/site";
|
||||
|
||||
const { title = "", description, keywords, canonicalPath, ogImage } =
|
||||
Astro.props;
|
||||
const {
|
||||
title = "",
|
||||
description,
|
||||
keywords,
|
||||
canonicalPath,
|
||||
ogImage,
|
||||
} = Astro.props;
|
||||
|
||||
const pageTitle =
|
||||
title && title !== SITE_NAME ? `${title} | ${SITE_NAME}` : SITE_NAME;
|
||||
const canonicalUrl = new URL(
|
||||
canonicalPath ?? Astro.url.pathname,
|
||||
SITE_URL
|
||||
SITE_URL,
|
||||
).toString();
|
||||
|
||||
const ogImagePath = ogImage ?? DEFAULT_OG_IMAGE;
|
||||
const ogImageUrl = ogImagePath
|
||||
? new URL(ogImagePath, SITE_URL).toString()
|
||||
: "";
|
||||
const ogImageUrl = ogImagePath ? new URL(ogImagePath, SITE_URL).toString() : "";
|
||||
const hasOgImage = Boolean(ogImagePath);
|
||||
const twitterSite = TWITTER_SITE?.trim();
|
||||
---
|
||||
|
|
@ -64,14 +67,12 @@ const twitterSite = TWITTER_SITE?.trim();
|
|||
<link rel="manifest" href="/site.webmanifest" />
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link rel="preconnect" href="https://cdn.userway.org" />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@600;700;800&family=Merriweather:wght@700&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<slot name="head" />
|
||||
<script
|
||||
src="https://cdn.userway.org/widget.js"
|
||||
data-account="ZdcVJAc6ri"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div
|
||||
|
|
@ -100,5 +101,9 @@ const twitterSite = TWITTER_SITE?.trim();
|
|||
</a>
|
||||
</div>
|
||||
<slot />
|
||||
<script
|
||||
src="https://cdn.userway.org/widget.js"
|
||||
data-account="ZdcVJAc6ri"
|
||||
defer></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -17,19 +17,22 @@ const cardData = [
|
|||
{
|
||||
title: "About Us",
|
||||
imageUrl: "/about-640.webp",
|
||||
imageSrcSet: "/about-640.webp 640w, /about-960.webp 960w",
|
||||
imageSrcSet:
|
||||
"/about-320.webp 320w, /about-480.webp 480w, /about-640.webp 640w, /about-960.webp 960w",
|
||||
href: "/about",
|
||||
},
|
||||
{
|
||||
title: "Support Us",
|
||||
imageUrl: "/support-640.webp",
|
||||
imageSrcSet: "/support-640.webp 640w, /support-960.webp 960w",
|
||||
imageSrcSet:
|
||||
"/support-320.webp 320w, /support-480.webp 480w, /support-640.webp 640w, /support-960.webp 960w",
|
||||
href: "/support-us",
|
||||
},
|
||||
{
|
||||
title: "Contact",
|
||||
imageUrl: "/contact-640.webp",
|
||||
imageSrcSet: "/contact-640.webp 640w, /contact-960.webp 960w",
|
||||
imageSrcSet:
|
||||
"/contact-320.webp 320w, /contact-480.webp 480w, /contact-640.webp 640w, /contact-960.webp 960w",
|
||||
href: "/contact",
|
||||
},
|
||||
];
|
||||
|
|
@ -41,7 +44,7 @@ const cardData = [
|
|||
rel="preload"
|
||||
as="image"
|
||||
href="/Samantha-and-Connolly-1280.webp"
|
||||
imagesrcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
|
||||
imagesrcset="/Samantha-and-Connolly-480.webp 480w, /Samantha-and-Connolly-640.webp 640w, /Samantha-and-Connolly-960.webp 960w, /Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
|
||||
imagesizes="100vw"
|
||||
/>
|
||||
</Fragment>
|
||||
|
|
@ -57,7 +60,7 @@ const cardData = [
|
|||
class="absolute inset-0 h-full w-full object-cover"
|
||||
alt=""
|
||||
src="/Samantha-and-Connolly-1280.webp"
|
||||
srcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
|
||||
srcset="/Samantha-and-Connolly-480.webp 480w, /Samantha-and-Connolly-640.webp 640w, /Samantha-and-Connolly-960.webp 960w, /Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
|
||||
sizes="100vw"
|
||||
loading="eager"
|
||||
fetchpriority="high"
|
||||
|
|
@ -166,7 +169,7 @@ const cardData = [
|
|||
srcset={
|
||||
card.imageSrcSet
|
||||
}
|
||||
sizes="(min-width: 640px) 33vw, 100vw"
|
||||
sizes="(min-width: 640px) 33vw, 320px"
|
||||
loading="lazy"
|
||||
decoding="async"
|
||||
/>
|
||||
|
|
|
|||