Sobes.tech
Aiuto per il colloquio
Risorse
Preparazione al colloquio
Risorse
Ricerca di lavoro
Risorse
Legale
Torniamo alle domande
Middle

Quali metodi di ottimizzazione della pagina conosci?

sobes.tech AI

Risposta dell'AI

  • Minificazione e compressione delle risorse:

    • HTML, CSS, JavaScript: Rimuovere spazi inutili, commenti, interruzioni di riga, abbreviare i nomi delle variabili.
    • Immagini: Ottimizzazione dei formati (WebP, AVIF), compressione senza perdita di qualità, utilizzo di immagini responsive.

  • Utilizzo di CDN (Content Delivery Network): Distribuire risorse statiche dai server più vicini all’utente riduce la latenza.

  • Caching del browser: Configurare correttamente gli header HTTP (Cache-Control, Expires) per cacheare le risorse statiche sul lato client.

  • Lazy Loading (Caricamento pigro): Caricare immagini, video e altre risorse pesanti solo quando appaiono nell’area visibile dello schermo.

  • Caricamento asincrono e differito di JavaScript e CSS: Utilizzo degli attributi async e defer per gli script che non bloccano l’esecuzione, caricamento asincrono del CSS.

  • Ottimizzazione del CSS critico: Includere un set minimo di CSS per il rendering della prima schermata direttamente nell’HTML <head>, il resto del CSS viene caricato in modo asincrono.

  • Riduzione del numero di richieste HTTP:

    • Unione di file CSS e JavaScript.
    • Utilizzo di sprite per immagini piccole.

  • Ottimizzazione dei font:

    • Utilizzo del formato WOFF2.
    • Uso di font-display.
    • Precaricare i font critici.

  • Utilizzo di Server-Side Rendering (SSR) o Static Site Generation (SSG): Rendering di parte o di tutta la pagina sul server prima di inviarla al client, migliorando i tempi di caricamento e l’indicizzazione.

  • Ottimizzazione delle immagini:

    • Dimensioni appropriate per diversi dispositivi.
    • Uso di <picture> e srcset.
    • Compressione con perdita di qualità controllata.

  • Utilizzo di Resource Hints (preconnect, prefetch, preload): Suggerimenti al browser sui risorse che potrebbero essere necessarie a breve.

    <!-- Connessione al dominio prima della richiesta di risorsa -->
<link rel="preconnect" href="https://example.com">
<!-- Precaricare risorsa -->
<link rel="preload" href="/fonts/font.woff2" as="font" type="font/woff2" crossorigin>
<!-- Prefetch di risorsa -->
<link rel="prefetch" href="/next-page.html">

  • Ottimizzazione del DOM: Minimizzare la profondità dell’albero DOM, evitare operazioni costose di lettura/scrittura del DOM nei cicli.

  • Ottimizzazione del rendering (Layout, Paint, Composite): Evitare ricalcoli forzati di stili e layout, usare proprietà CSS che non causano ridisegno completo (ad esempio, transform, opacity invece di top, left).

  • Utilizzo di Web Workers: Spostare calcoli intensivi in thread separati per evitare di bloccare il thread principale dell’UI.

  • Caricamento progressivo: Mostrare il contenuto man mano che viene caricato.

PrecedenteAvanti