perf: ottimizzazioni web performance

- Font: display=swap, range pesi ridotti, rimosso preload fragile
  - Rimossa libreria Font Awesome (sostituita con SVG inline)
  - Aggiunte dimensioni esplicitate width/height su immagini per CLS
  - Aggiunto preconnect per Leaflet map tiles
This commit is contained in:
2026-04-26 17:07:23 +02:00
parent dbe5ac0d5d
commit b1fac24e19
2 changed files with 24 additions and 25 deletions
+17 -7
View File
@@ -31,10 +31,20 @@
let cleanup = () => window.removeEventListener('scroll', onScroll);
// Leaflet — load on demand, client-only
// Leaflet — load on demand, client-only with preconnect
(async () => {
const container = document.getElementById('map-container');
if (!container) return;
// Preconnect per velocizzare caricamento tiles
const preconnect = document.createElement('link');
preconnect.rel = 'preconnect';
preconnect.href = 'https://unpkg.com';
document.head.appendChild(preconnect);
const preconnectTiles = document.createElement('link');
preconnectTiles.rel = 'preconnect';
preconnectTiles.href = 'https://a.basemaps.cartocdn.com';
document.head.appendChild(preconnectTiles);
const leafletCss = document.createElement('link');
leafletCss.rel = 'stylesheet';
leafletCss.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
@@ -89,7 +99,7 @@
<nav class="gds-nav" class:scrolled>
<div class="nav-inner">
<div class="nav-brand">
<img alt={img.logo.alt} src={img.logo.src} />
<img alt={img.logo.alt} src={img.logo.src} width="38" height="38" />
<span>{c['nav.brand']}</span>
</div>
<div class="nav-links">
@@ -131,7 +141,7 @@
</div>
<div class="hero-photo">
<div class="hero-photo-frame">
<img alt={img.hero.alt} src={img.hero.src} fetchpriority="high" />
<img alt={img.hero.alt} src={img.hero.src} width="540" height="540" fetchpriority="high" decoding="async" />
</div>
<div class="hero-badge">
<div class="hero-badge-stars">
@@ -377,7 +387,7 @@
<div class="footer-main">
<div class="footer-brand">
<div class="footer-brand-row">
<img alt={img.logo.alt} src={img.logo.src} />
<img alt={img.logo.alt} src={img.logo.src} width="38" height="38" />
<span class="footer-brand-name">{c['nav.brand']}</span>
</div>
<p>{c['footer.tagline']}</p>
@@ -387,10 +397,10 @@
</div>
<div class="footer-socials">
<a href="https://www.instagram.com/giampy.dogsitter.sassari/" class="footer-social-btn" aria-label="Instagram" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-instagram"></i>
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M12 2.163c3.204 0 3.584.012 4.85.07 3.252.148 4.771 1.691 4.919 4.919.058 1.265.069 1.645.069 4.849 0 3.205-.012 3.584-.069 4.849-.149 3.225-1.664 4.771-4.919 4.919-1.266.058-1.644.07-4.85.07-3.204 0-3.584-.012-4.849-.07-3.26-.149-4.771-1.699-4.919-4.92-.058-1.265-.07-1.644-.07-4.849 0-3.204.013-3.583.07-4.849.149-3.227 1.664-4.771 4.919-4.919 1.266-.057 1.645-.069 4.849-.069zm0-2.163c-3.259 0-3.667.014-4.947.072-4.358.2-6.78 2.618-6.98 6.98-.059 1.281-.073 1.689-.073 4.948 0 3.259.014 3.668.072 4.948.2 4.358 2.618 6.78 6.98 6.98 1.281.058 1.689.072 4.948.072 3.259 0 3.668-.014 4.948-.072 4.354-.2 6.782-2.618 6.979-6.98.059-1.28.073-1.689.073-4.948 0-3.259-.014-3.667-.072-4.947-.196-4.354-2.617-6.78-6.979-6.98-1.281-.059-1.69-.073-4.949-.073zm0 5.838a6.162 6.162 0 100 12.324 6.162 6.162 0 000-12.324zm0 10.162a3.999 3.999 0 110-7.998 3.999 3.999 0 010 7.998zm6.406-11.845a1.44 1.44 0 11-2.881 0 1.44 1.44 0 012.881 0z"/></svg>
</a>
<a href="https://www.facebook.com/giampy.dogsitter.sassari" class="footer-social-btn" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
<i class="fa-brands fa-facebook"></i>
<svg viewBox="0 0 24 24" width="18" height="18" fill="currentColor" aria-hidden="true"><path d="M24 12.073c0-6.627-5.373-12-12-12s-12 5.373-12 12c0 5.99 4.388 10.954 10.125 11.854v-8.385H7.078v-3.47h3.047V9.43c0-3.007 1.792-4.669 4.533-4.669 1.312 0 2.686.235 2.686.235v2.953H15.83c-1.491 0-1.956.925-1.956 1.874v2.25h3.328l-.532 3.47h-2.796v8.385C19.612 23.027 24 18.062 24 12.073z"/></svg>
</a>
</div>
</div>
@@ -416,7 +426,7 @@
<div class="powered-by">
<span>{c['footer.powered']}</span>
<a href="https://cimaprogetti.it" target="_blank" rel="noopener noreferrer">
<img src={img.cima_logo.src} alt={img.cima_logo.alt} />
<img src={img.cima_logo.src} alt={img.cima_logo.alt} width="140" height="100" loading="lazy" decoding="async" />
</a>
</div>
</div>