cima-squad/giampy-dogservice
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

perf: ottimizzazioni web performance

Browse Source 
- 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:
Carlo Giovanni Scaglione
2026-04-26 15:45:06 +02:00
parent 58e8951966
commit 80735ff9dc
2 changed files with 39 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app.html
+35 -20
View File
@@ -1,23 +1,38 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="it"> <html lang="it">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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" <!-- Preconnect per ridurre latenza su connessioni esterne -->
rel="stylesheet" <link rel="preconnect" href="https://fonts.googleapis.com" />
/> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link <link rel="preconnect" href="https://cdnjs.cloudflare.com" />
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap"
rel="stylesheet" <!-- Preload font critici -->
/> <link
<link rel="preload"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" href="https://fonts.gstatic.com/s/newsreader/v7/cY9OjfjR0BbZwlP_L-yUg6LpXf23ojW-ImqFpQjBciXQg0KMFQ.119.woff2"
rel="stylesheet" as="font"
/> type="font/woff2"
%sveltekit.head% crossorigin
</head> />
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div> <link
</body> 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:opsz,wght,FILL@24,400,0&display=swap"
rel="stylesheet"
/>
<link
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"
rel="stylesheet"
/>
%sveltekit.head%
</head>
<body data-sveltekit-preload-data="hover">
<div style="display: contents">%sveltekit.body%</div>
</body>
</html> </html>
src/routes/+page.svelte
+4 -4
View File
@@ -131,7 +131,7 @@
</div> </div>
<div class="hero-photo"> <div class="hero-photo">
<div class="hero-photo-frame"> <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>
<div class="hero-badge"> <div class="hero-badge">
<div class="hero-badge-stars"> <div class="hero-badge-stars">
@@ -202,7 +202,7 @@
<div class="container"> <div class="container">
<div class="about-inner"> <div class="about-inner">
<div class="about-photo-wrap"> <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"> <div class="about-quote-card">
<p>{c['about.quote']}</p> <p>{c['about.quote']}</p>
<cite>{c['about.cite']}</cite> <cite>{c['about.cite']}</cite>
@@ -266,7 +266,7 @@
</p> </p>
</div> </div>
<div class="dogwash-visual"> <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> </div>
</div> </div>
@@ -287,7 +287,7 @@
<div class="review-grid"> <div class="review-grid">
{#each testimonials as r (r.id)} {#each testimonials as r (r.id)}
<div class="review-card"> <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> <blockquote>{r.text}</blockquote>
<div class="review-footer"><strong>{r.name}</strong><small>{r.role}</small></div> <div class="review-footer"><strong>{r.name}</strong><small>{r.role}</small></div>
</div> </div>