mike/shopwisdom-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Perf: self-host fonts (drop render-blocking Google Fonts) + defer Cal + viewport-aware lighter mobile hero

Browse Source 
Self-hosted woff2 (8 latin faces, subset, font-display swap), preload H1/body; removed Google Fonts link. Cal embed loads on first interaction. New 0.31MB mobile hero served at <=760px (was one 0.8MB file to all viewports). A11y: eyebrow up to 0.72rem.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
Michael Victory
2026-06-25 19:18:37 -07:00
parent 27d4abf061
commit 5872f22470
11 changed files with 32 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+22 -7
View File
@@ -5,9 +5,10 @@
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Shop Wisdom | Keep What Your Best People Know — for Canadian Manufacturers</title>
<meta name="description" content="Your best people are retiring. I help Canadian manufacturers capture the know-how that lives in a few heads, build it into systems the whole shop can run on, and stay on to keep it that way. You own everything — and it stays in Canada.">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Lora:ital,wght@0,400;0,500;1,400&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap">
<link rel="preload" href="assets/fonts/playfair-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/playfair-400i.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/dmsans-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="assets/fonts/lora-400.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="style.css">
<meta name="robots" content="index,follow">
<meta name="theme-color" content="#f7f4ef">
@@ -139,9 +140,7 @@
<main id="top">
<section class="hero band light" data-bg="light">
<video class="hero-video" autoplay muted loop playsinline poster="assets/hero/hero-poster.jpg" aria-hidden="true">
<source src="assets/hero/hero.mp4" type="video/mp4" />
</video>
<video class="hero-video" autoplay muted loop playsinline preload="none" poster="assets/hero/hero-poster.jpg" aria-hidden="true" data-src-desktop="assets/hero/hero.mp4" data-src-mobile="assets/hero/hero-mobile.mp4"></video>
<div class="wrap hero-wrap"><div class="hero-col">
<p class="eyebrow">Knowledge continuity · for Canadian manufacturers</p>
<h1>Your best people are retiring. Their know&#8209;how doesn't <em>have to.</em></h1>
@@ -515,10 +514,26 @@
})();
</script>
<!-- Hero ambient loop: viewport-aware source (light mobile encode), poster-first; skipped on Save-Data / reduced-motion -->
<script>
(function () {
var hv = document.querySelector('.hero-video');
if (!hv) return;
var conn = navigator.connection || {};
if (conn.saveData === true) return;
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
var isMobile = window.matchMedia('(max-width: 760px)').matches;
var src = hv.getAttribute(isMobile ? 'data-src-mobile' : 'data-src-desktop');
if (!src) return;
var s = document.createElement('source'); s.src = src; s.type = 'video/mp4'; hv.appendChild(s);
hv.load();
})();
</script>
<!-- Cal.com booking embed (opens the booking popup on-brand; href is the no-JS fallback) -->
<script>
(function (C, A, L) { let p = function (a, ar) { a.q.push(ar); }; let d = C.document; C.Cal = C.Cal || function () { let cal = C.Cal; let ar = arguments; if (!cal.loaded) { cal.ns = {}; cal.q = cal.q || []; d.head.appendChild(d.createElement("script")).src = A; cal.loaded = true; } if (ar[0] === L) { const api = function () { p(api, arguments); }; const namespace = ar[1]; api.q = api.q || []; if (typeof namespace === "string") { cal.ns[namespace] = cal.ns[namespace] || api; p(cal.ns[namespace], ar); p(cal, ["initNamespace", namespace]); } else p(cal, ar); return; } p(cal, ar); }; })(window, "https://cal.shopwisdom.ca/embed/embed.js", "init");
Cal("init", { origin: "https://cal.shopwisdom.ca" });
(function(){var d=false;function go(){if(d)return;d=true;Cal("init",{origin:"https://cal.shopwisdom.ca"});}var ev=["pointerdown","mousemove","touchstart","scroll","keydown"];function on(){go();ev.forEach(function(e){window.removeEventListener(e,on);});}ev.forEach(function(e){window.addEventListener(e,on,{passive:true});});})();
</script>
<!-- Motion: reveal-on-scroll + stagger + open-o divider + persistent CTA. Gated on html.has-motion. -->