perf: ottimizzazioni web performance

- Aggiunte preconnect hints per fonts e CDN
- Aggiunto preload font Newsreader critico
- Ottimizzato Material Symbols (opsz,wght,FILL 24,400,0)
- Implementato lazy loading e async decoding per immagini non critiche
- Aggiunto fetchpriority=high per immagine hero
- Aggiunte dimensioni esplicite avatar recensioni per CLS

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-26 15:45:06 +02:00
parent 58e8951966
commit 80735ff9dc
2 changed files with 39 additions and 24 deletions
+16 -1
View File
@@ -3,12 +3,27 @@
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Preconnect per ridurre latenza su connessioni esterne -->
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://cdnjs.cloudflare.com" />
<!-- Preload font critici -->
<link
rel="preload"
href="https://fonts.gstatic.com/s/newsreader/v7/cY9OjfjR0BbZwlP_L-yUg6LpXf23ojW-ImqFpQjBciXQg0KMFQ.119.woff2"
as="font"
type="font/woff2"
crossorigin
/>
<link
href="https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=Manrope:wght@200..800&display=swap"
rel="stylesheet"
/>
<link
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@24,400,0&display=swap"
rel="stylesheet"
/>
<link
+4 -4
View File
@@ -131,7 +131,7 @@
</div>
<div class="hero-photo">
<div class="hero-photo-frame">
<img alt={img.hero.alt} src={img.hero.src} />
<img alt={img.hero.alt} src={img.hero.src} fetchpriority="high" />
</div>
<div class="hero-badge">
<div class="hero-badge-stars">
@@ -202,7 +202,7 @@
<div class="container">
<div class="about-inner">
<div class="about-photo-wrap">
<img alt={img.chi_sono.alt} src={img.chi_sono.src} />
<img alt={img.chi_sono.alt} src={img.chi_sono.src} loading="lazy" decoding="async" />
<div class="about-quote-card">
<p>{c['about.quote']}</p>
<cite>{c['about.cite']}</cite>
@@ -266,7 +266,7 @@
</p>
</div>
<div class="dogwash-visual">
<img alt={img.dogwash.alt} src={img.dogwash.src} />
<img alt={img.dogwash.alt} src={img.dogwash.src} loading="lazy" decoding="async" />
</div>
</div>
</div>
@@ -287,7 +287,7 @@
<div class="review-grid">
{#each testimonials as r (r.id)}
<div class="review-card">
<div class="review-avatar"><img alt={r.avatarAlt} src={r.avatarSrc} /></div>
<div class="review-avatar"><img alt={r.avatarAlt} src={r.avatarSrc} width="80" height="80" loading="lazy" decoding="async" /></div>
<blockquote>{r.text}</blockquote>
<div class="review-footer"><strong>{r.name}</strong><small>{r.role}</small></div>
</div>