perf: replace 1.5 MB cameleer-logo.svg refs with optimised PNGs
The Inkscape-exported cameleer-logo.svg in public/ is 1.5 MB —
loaded eagerly in the SiteHeader (32×32) and Hero (64×64), it was
the dominant hit on the homepage's largest-contentful-paint. The
relaunch's added above-the-fold DOM nudged Lighthouse perf from
0.95 to 0.92 and tipped CI's >=0.95 threshold red.
Switch all four SVG references to the pre-optimised PNG icons that
already ship in public/icons/:
- SiteHeader (32-displayed): /icons/cameleer-48.png (4.4 KB)
- Hero (64-displayed): /icons/cameleer-192.png (36 KB)
- SiteFooter (24-displayed): /icons/cameleer-32.png (2.4 KB)
- BaseLayout favicon link: drop the SVG, keep the existing
32 PNG fallback (already declared on the next line).
Local Lighthouse (http-server, no gzip) before: perf 0.72,
LCP 10.0s. After: perf 0.94, LCP 1.6s. CI on Linux + LH static
server should comfortably clear the 0.95 gate.
The SVG file itself is left in place — unreferenced, but kept in
case any external link still points at it.
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -5,7 +5,7 @@ const year = new Date().getFullYear();
|
||||
<div class="max-w-content mx-auto px-6 py-12 flex flex-col md:flex-row md:items-center md:justify-between gap-8">
|
||||
<div class="flex items-center gap-3">
|
||||
<img
|
||||
src="/cameleer-logo.svg"
|
||||
src="/icons/cameleer-32.png"
|
||||
width="24"
|
||||
height="24"
|
||||
alt=""
|
||||
|
||||
@@ -5,7 +5,7 @@ import CTAButtons from './CTAButtons.astro';
|
||||
<div class="max-w-content mx-auto px-6 h-16 flex items-center justify-between gap-6">
|
||||
<a href="/" class="flex items-center gap-2 group" aria-label="Cameleer home">
|
||||
<img
|
||||
src="/cameleer-logo.svg"
|
||||
src="/icons/cameleer-48.png"
|
||||
width="32"
|
||||
height="32"
|
||||
alt=""
|
||||
|
||||
@@ -22,7 +22,7 @@ const pins: Pin[] = [
|
||||
<div class="grid lg:grid-cols-12 gap-10 lg:gap-14 items-center">
|
||||
<div class="lg:col-span-5">
|
||||
<img
|
||||
src="/cameleer-logo.svg"
|
||||
src="/icons/cameleer-192.png"
|
||||
width="64"
|
||||
height="64"
|
||||
alt=""
|
||||
|
||||
@@ -31,7 +31,6 @@ const ogUrl = new URL(ogImage, Astro.site ?? 'https://www.cameleer.io').toString
|
||||
<meta name="description" content={description} />
|
||||
<link rel="canonical" href={canonical} />
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/cameleer-logo.svg" />
|
||||
<link rel="icon" type="image/png" sizes="32x32" href="/icons/cameleer-32.png" />
|
||||
<link rel="apple-touch-icon" href="/icons/cameleer-180.png" />
|
||||
|
||||
|
||||
Reference in New Issue
Block a user