introduzione

Alcune proprietà CSS sono più costose di altre in termini di prestazioni. Se usati in modo improprio, possono rallentare la tua pagina web e renderla meno reattiva per i tuoi utenti. In questo articolo, esploreremo alcune delle proprietà CSS più costose e come ottimizzarle.

Scatola-Ombra

La proprietà box-shadow è un modo popolare per aggiungere un effetto ombra a un elemento, ma può essere molto costoso in termini di prestazioni. Se utilizzato su un gran numero di elementi o con un ampio raggio di sfocatura, può rallentare notevolmente la tua pagina web.

Ecco alcuni modi per ridurre i costi di box-shadow:

• Usa un raggio di sfocatura più piccolo: un raggio di sfocatura più piccolo ridurrà la quantità di elaborazione necessaria per il rendering dell'ombra. Invece di utilizzare un raggio di sfocatura ampio, prova a utilizzare un valore inferiore che ti dia comunque l'effetto desiderato.
• Usa un colore a tinta unita invece di una sfumatura: un'ombra sfumata può essere molto costosa in termini di prestazioni. Invece di usare una sfumatura, prova a usare un colore a tinta unita per l'ombra della tua scatola.
• Usa la parola chiave inset per le ombre interne: se stai usando box-shadow per creare un'ombra interna, usa la parola chiave inset. Ciò migliorerà le prestazioni della tua pagina web perché non richiede il rendering di un livello aggiuntivo.
• Usa la proprietà will-change per migliorare le prestazioni durante l'animazione delle ombre dei riquadri — Se stai animando box-shadow, usa la proprietà will-change per dire al browser che la proprietà box-shadow cambierà. Ciò aiuterà il browser a ottimizzare il rendering dell'animazione.

Immagine di sfondo

La proprietà background-image viene utilizzata per aggiungere un'immagine a un elemento, ma può essere molto costosa in termini di prestazioni. Immagini di grandi dimensioni o un gran numero di immagini possono rallentare notevolmente la tua pagina web.

Per ottimizzare la proprietà background-image, puoi utilizzare le seguenti tecniche:

• Usa dimensioni di file immagine più piccole
• Utilizza tecniche di compressione delle immagini come l'ottimizzazione JPEG o PNG
• Usa gli sprite delle immagini per ridurre il numero di richieste HTTP
• Utilizza tecniche di caricamento lento per caricare le immagini solo quando sono necessarie

La proprietà border-radius viene utilizzata per creare angoli arrotondati su un elemento, ma può essere molto costosa in termini di prestazioni. Se utilizzato su un gran numero di elementi o con un raggio ampio, può rallentare notevolmente la tua pagina web.

Per ottimizzare la proprietà border-radius, puoi utilizzare le seguenti tecniche:

• Usa valori di raggio del bordo più piccoli
• Usa la proprietà border-image invece di border-radius per progetti di bordi complessi
• Utilizza la grafica SVG per progetti di bordi complessi

La proprietà transform viene utilizzata per applicare trasformazioni a un elemento, ad esempio rotazione, ridimensionamento o inclinazione. Se usato in modo improprio, può essere molto costoso in termini di prestazioni.

Per ottimizzare la proprietà di trasformazione, puoi utilizzare le seguenti tecniche:

• Usa trasformazioni 2D invece di trasformazioni 3D quando possibile
• Usa la proprietà will-change per migliorare le prestazioni durante l'animazione delle trasformazioni
• Usa l'accelerazione hardware usando la proprietà transform-style: preserve-3d

La proprietà filter viene utilizzata per applicare effetti visivi a un elemento, ad esempio sfocatura, regolazione del colore o luminosità. Se usato in modo improprio, può essere molto costoso in termini di prestazioni.

Per ottimizzare la proprietà del filtro, puoi utilizzare le seguenti tecniche:

• Usa effetti filtro più semplici
• Utilizzare la proprietà will-change per migliorare le prestazioni durante l'animazione dei filtri
• Usa l'accelerazione hardware usando la proprietà transform-style: preserve-3d

div {
  filter: blur(5px);
}

div {
  filter: blur(1px);
  transform: translateZ(0);
}

Invece di usare un raggio di sfocatura più grande, stiamo usando un valore più piccolo di 1px. Ciò riduce la quantità di elaborazione richiesta per il rendering dell'effetto di sfocatura.

Stiamo anche aggiungendo una proprietà transform con il valore translateZ(0). Questo crea un nuovo livello per l'elemento, che può aiutare con l'accelerazione della GPU e migliorare le prestazioni.

Utilizzando questo codice CSS ottimizzato, possiamo ottenere lo stesso effetto visivo riducendo l'impatto sulle prestazioni della nostra pagina web.

Conclusione

Ottimizzando le proprietà CSS come box-shadow, filter e border-radius, possiamo migliorare le prestazioni della nostra pagina web. Le tecniche includono l'utilizzo di valori più piccoli, forme più semplici e la creazione di nuovi livelli con la proprietà di trasformazione. Queste ottimizzazioni aiutano a creare pagine web che hanno un bell'aspetto e un buon rendimento.

Codifica di livello superiore

Grazie per far parte della nostra comunità! Prima che tu vada:

• Batti le mani per la storia e segui l'autore
• Visualizza altri contenuti nella pubblicazione Level Up Coding
• Corso di colloquio di codifica gratuito ⇒ Visualizza il corso
• Seguici: Twitter | Linkedin | Notiziario