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:
+7
-18
@@ -9,27 +9,16 @@
|
|||||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||||
<link rel="preconnect" href="https://cdnjs.cloudflare.com" />
|
<link rel="preconnect" href="https://cdnjs.cloudflare.com" />
|
||||||
|
|
||||||
<!-- Preload font critici -->
|
<!-- Fonts con display=swap per evitare FOIT -->
|
||||||
<link
|
<link
|
||||||
rel="preload"
|
href="https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,400;0,700;1,400&family=Manrope:wght@400;500;700&display=swap"
|
||||||
href="https://fonts.gstatic.com/s/newsreader/v7/cY9OjfjR0BbZwlP_L-yUg6LpXf23ojW-ImqFpQjBciXQg0KMFQ.119.woff2"
|
rel="stylesheet"
|
||||||
as="font"
|
/>
|
||||||
type="font/woff2"
|
<link
|
||||||
crossorigin
|
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL@24,400,0&display=block"
|
||||||
|
rel="stylesheet"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<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: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%
|
%sveltekit.head%
|
||||||
</head>
|
</head>
|
||||||
<body data-sveltekit-preload-data="hover">
|
<body data-sveltekit-preload-data="hover">
|
||||||
|
|||||||
+17
-7
@@ -31,10 +31,20 @@
|
|||||||
|
|
||||||
let cleanup = () => window.removeEventListener('scroll', onScroll);
|
let cleanup = () => window.removeEventListener('scroll', onScroll);
|
||||||
|
|
||||||
// Leaflet — load on demand, client-only
|
// Leaflet — load on demand, client-only with preconnect
|
||||||
(async () => {
|
(async () => {
|
||||||
const container = document.getElementById('map-container');
|
const container = document.getElementById('map-container');
|
||||||
if (!container) return;
|
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');
|
const leafletCss = document.createElement('link');
|
||||||
leafletCss.rel = 'stylesheet';
|
leafletCss.rel = 'stylesheet';
|
||||||
leafletCss.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
|
leafletCss.href = 'https://unpkg.com/leaflet@1.9.4/dist/leaflet.css';
|
||||||
@@ -89,7 +99,7 @@
|
|||||||
<nav class="gds-nav" class:scrolled>
|
<nav class="gds-nav" class:scrolled>
|
||||||
<div class="nav-inner">
|
<div class="nav-inner">
|
||||||
<div class="nav-brand">
|
<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>
|
<span>{c['nav.brand']}</span>
|
||||||
</div>
|
</div>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
@@ -131,7 +141,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} fetchpriority="high" />
|
<img alt={img.hero.alt} src={img.hero.src} width="540" height="540" fetchpriority="high" decoding="async" />
|
||||||
</div>
|
</div>
|
||||||
<div class="hero-badge">
|
<div class="hero-badge">
|
||||||
<div class="hero-badge-stars">
|
<div class="hero-badge-stars">
|
||||||
@@ -377,7 +387,7 @@
|
|||||||
<div class="footer-main">
|
<div class="footer-main">
|
||||||
<div class="footer-brand">
|
<div class="footer-brand">
|
||||||
<div class="footer-brand-row">
|
<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>
|
<span class="footer-brand-name">{c['nav.brand']}</span>
|
||||||
</div>
|
</div>
|
||||||
<p>{c['footer.tagline']}</p>
|
<p>{c['footer.tagline']}</p>
|
||||||
@@ -387,10 +397,10 @@
|
|||||||
</div>
|
</div>
|
||||||
<div class="footer-socials">
|
<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">
|
<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>
|
||||||
<a href="https://www.facebook.com/giampy.dogsitter.sassari" class="footer-social-btn" aria-label="Facebook" target="_blank" rel="noopener noreferrer">
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -416,7 +426,7 @@
|
|||||||
<div class="powered-by">
|
<div class="powered-by">
|
||||||
<span>{c['footer.powered']}</span>
|
<span>{c['footer.powered']}</span>
|
||||||
<a href="https://cimaprogetti.it" target="_blank" rel="noopener noreferrer">
|
<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>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Reference in New Issue
Block a user