Evita animazioni non composite

Hai mai cliccato su un sito Web e questo ha cominciato a balbettare e rallentare mentre lo scorri?

Frustrante, non è vero?

Bene, e se ti dicessimo che il segreto dietro questi intoppi risiede in qualcosa chiamato animazioni non composite?

Si tratta di animazioni che non vengono elaborate in modo efficiente dal browser, caricando ulteriormente il processore principale del computer e causando problemi di prestazioni.

Ma non preoccuparti, c’è un modo per risolvere questo problema.

In questo blog discuteremo delle animazioni non composite e di come risolverle. Ti guideremo attraverso semplici passaggi per rendere più fluide quelle animazioni a scatti, rendendo il tuo sito web non solo più veloce ma anche piacevole da navigare per i tuoi visitatori.

Cominciamo.

Che cos’è l’animazione non composita?

L’animazione non composita è un tipo di animazione web elaborata principalmente dalla CPU anziché dalla GPU (Graphics Processing Unit).

Questo approccio di elaborazione porta spesso a un rendering meno efficiente, causando potenzialmente problemi di prestazioni come frame rate più lenti e ritardo dell’interfaccia utente, soprattutto su pagine Web complesse o dispositivi meno potenti.

Ridurre il Cumulative Layout Shift (CLS) promette di aumentare il tuo punteggio Lighthouse Performance.

Perché evitare l’animazione non composita è essenziale per le prestazioni web?

Evitare animazioni non composite è essenziale per le prestazioni web per diversi motivi. Innanzitutto, le animazioni non composite, elaborate dalla CPU, possono essere meno efficienti e più lente delle animazioni elaborate dalla GPU.

Questa inefficienza porta spesso a una diminuzione della frequenza dei fotogrammi, facendo apparire le animazioni instabili o lente, il che può avere un impatto negativo sull’esperienza dell’utente. Le pagine Web con animazioni più fluide risultano più reattive e generalmente è più piacevole interagire con loro.

In secondo luogo, le animazioni che richiedono un utilizzo intensivo della CPU possono mettere a dura prova le risorse del sistema, soprattutto su dispositivi meno potenti come smartphone o computer più vecchi. Questo sforzo può rallentare non solo le animazioni stesse ma anche altri processi in esecuzione sulla pagina web.

Di conseguenza, le prestazioni generali del sito Web possono essere compromesse. Non solo, le prestazioni compromesse di un sito web possono anche avere un impatto negativo sul successo del marketing digitale. Controlla questo blog “L’impatto della velocità del sito web sul successo del marketing digitale” per sapere come.

Nota: ecco alcuni semplici suggerimenti per velocizzare il tuo sito WordPress lento e ottenere prestazioni migliori.

In che modo le animazioni non composite influiscono sulle prestazioni della pagina e sul rendering del browser?

Le animazioni non composite possono avere un impatto significativo sia sulle prestazioni della pagina che sul rendering del browser. Dal punto di vista delle prestazioni, tendono a rallentare un sito web. Ciò accade perché il processore principale del computer (CPU) è oberato di lavoro e cerca di gestire animazioni complesse oltre ad altre attività.

Di conseguenza, il sito Web diventa meno reattivo alle interazioni dell’utente come il clic o lo scorrimento. Ciò è particolarmente evidente sui dispositivi con minore potenza di elaborazione, come i telefoni cellulari.

Per quanto riguarda il rendering del browser, le animazioni non composite spesso portano a movimenti discontinui e irregolari sullo schermo. Poiché la CPU è meno efficiente nel disegnare e gestire queste animazioni rispetto alla GPU, le animazioni possono apparire discontinue e non fluide.

Ciò influisce sull’impatto visivo e può rendere il sito Web più lento poiché il browser fatica a tenere il passo con il rendering di queste animazioni impegnative. Inoltre, il carico sulla CPU può portare a tempi di caricamento più lunghi per la pagina web, poiché occorre più tempo per elaborare e visualizzare gli elementi animati.

Come rilevare le animazioni non composite?

Il rilevamento delle animazioni non composite può essere effettuato utilizzando strumenti di analisi delle prestazioni come Google PageSpeed Insights e GTmetrix. Ecco i 10 migliori strumenti di test di velocità di WordPress che puoi utilizzare per rilevare animazioni non composite.

Questi strumenti analizzano vari aspetti delle prestazioni del tuo sito web, incluso il modo in cui vengono visualizzate le animazioni.

Ecco come puoi usarli:

Google PageSpeed Insights

• Visita il sito Web PageSpeed Insights, inserisci l’URL della tua pagina Web e fai clic su “Analizza”. Lo strumento valuta la tua pagina sia per le prestazioni mobili che desktop.

  

• Dopo l’analisi, PageSpeed Insights fornisce un punteggio e un rapporto dettagliato. Guarda nella sezione “Diagnostica” del rapporto.
• Cerca un avviso che dica qualcosa come “Evita animazioni non composite”. Ciò indica che la tua pagina ha animazioni che potrebbero essere ottimizzate per prestazioni migliori.

GT Metrix

• Vai al sito web GTmetrix, inserisci l’URL del tuo sito e avvia il test. GTmetrix offre un’analisi completa delle prestazioni di caricamento del tuo sito.
• Una volta completata l’analisi, riceverai un rapporto dettagliato. GTmetrix si concentra maggiormente sulle prestazioni generali, quindi potrebbe non indicare direttamente animazioni non composite come PageSpeed Insights.
• Cerca i tempi di rendering e le metriche di carico della CPU, come ‘Total Blocking Time’ or ‘Time to Interactive’.
• Anche se GTmetrix potrebbe non menzionare esplicitamente le animazioni non composite, valori elevati in queste aree potrebbero indicare processi di rendering inefficienti, che potrebbero essere dovuti ad animazioni non composite.

Inoltre, puoi anche eseguire stress test per determinare le prestazioni del tuo sito web.

In che modo i browser gestiscono le animazioni?

Quando si tratta di gestire le animazioni, i browser utilizzano due parti principali di un computer: la CPU (Central Processing Unit) e la GPU (Graphics Processing Unit). Le animazioni semplici, come la modifica dei colori o del testo, sono generalmente gestite dalla CPU.

Tuttavia, per le animazioni più complesse, in particolare quelle che implicano movimento o trasformazione, i browser provano a utilizzare la GPU. La GPU è migliore per queste attività perché è progettata per gestire la grafica e può creare animazioni fluide e fluide.

Tuttavia, se un’animazione non è impostata correttamente, il browser potrebbe comunque utilizzare la CPU, rendendo l’animazione meno fluida e rallentando l’intero sito web. Pertanto, gli sviluppatori web lavorano per garantire che le loro animazioni siano compatibili con la GPU per le migliori prestazioni.

Cause delle animazioni non composite

Per procedere verso la risoluzione del problema delle animazioni non composite, è essenziale innanzitutto capire cosa le causa. Ecco alcuni motivi comuni:

Animazione di proprietà non composite

L’animazione di proprietà non composite spesso porta ad animazioni non composite. Ciò accade quando nelle animazioni vengono utilizzate proprietà come “larghezza”, “altezza” o “margine”, che richiedono al browser di eseguire molti ricalcoli e ridisegni.

Queste proprietà non vengono gestite in modo efficiente dalla GPU, quindi caricano maggiormente la CPU, rendendo le animazioni meno fluide.

Utilizzo di JavaScript per animare

Anche l’uso di JavaScript per l’animazione può causare problemi. Le animazioni basate su JavaScript, soprattutto se non ottimizzate, possono richiedere molto alla CPU. Sebbene JavaScript offra un maggiore controllo sulle animazioni, può portare a problemi di prestazioni se le animazioni sono complesse o non codificate in modo efficiente.

Aree dipinte complesse

Le aree dipinte complesse nelle animazioni possono essere un altro colpevole. La presenza di aree estese che devono essere ridipinte frequentemente durante un’animazione mette a dura prova il sistema. Ciò è particolarmente vero per la grafica complessa o le immagini ad alta risoluzione che cambiano rapidamente.

Grafica o media inefficienti

Un’altra causa comune è l’utilizzo inefficiente della grafica o dei media nelle animazioni. Immagini, video o grafica ad alta risoluzione non ottimizzati per l’utilizzo sul Web possono rallentare le animazioni. Il browser fatica maggiormente a riprodurre questi elementi pesanti, soprattutto se fanno parte di una sequenza animata.

Uso eccessivo di ombre e filtri

Infine, l’uso eccessivo di ombre e filtri nei CSS può portare ad animazioni non composite. Questi effetti, sebbene visivamente accattivanti, richiedono molte risorse. Applicarli agli elementi in movimento può avere un impatto significativo sulle prestazioni, poiché richiedono al browser di eseguire molte elaborazioni aggiuntive.

Nota: scopri le altre cause dei siti Web lenti.

Come evitare animazioni non composite

Le animazioni non composite possono avere un impatto significativo sulle prestazioni del tuo sito web, portando a un’esperienza utente lenta. La chiave per risolvere questo problema sta nell’ottimizzare il modo in cui vengono gestite le animazioni.

 

Ecco l’approccio passo passo per risolvere questo problema. Prima di passare alla correzione, ti mostrerò come appare il punteggio del sito web con questo errore:

• Passando alla diagnostica, abbiamo riscontrato l’errore “evita animazioni non composite”. Ecco i passaggi che devi seguire per risolvere questo problema.
• Vai alla Bacheca di WordPress
• Seleziona Aspetto > Personalizza
• Potresti trovare un codice CSS nella sezione “CSS aggiuntivi“. È molto probabile che questo codice non utilizzi animazioni CSS ottimizzati, il che causa il verificarsi di questo errore.

  

• Se sei uno sviluppatore, saprai già che questo codice non è ottimizzato. Ed ecco i cambiamenti che farebbero miracoli per il tuo sito web.

Modifica 1: aggiunta della proprietà Will-Change

.my-animation {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  will-change: transform, opacity; /* Added line */
  animation: complexMove 5s linear infinite;
  }
/* Rest of the keyframes remain unchanged */

Modifica 2: riduzione della complessità dell’animazione

.my-animation {
  /* ... other properties ... */
  will-change: transform, opacity; /* Assuming Change 1 is kept */
  animation: complexMove 5s linear infinite;
  }
  @keyframes complexMove {
  /* ... 0% and 100% keyframes ... */
  50% {
    transform: translateX(300%) rotate(180deg) scale(1.5); /* Modified line */
    opacity: 0.5;
  }
  /* ... 100% keyframe ... */
  }

Ecco come apparirebbe il tuo codice finale:

.my-animation {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  will-change: transform, opacity; /* Informing the browser of upcoming changes */
  animation: complexMove 5s linear infinite;
  }
  @keyframes complexMove {
    0%, 100% {
      transform: translateX(0) rotate(0) scale(1);
      opacity: 1;
    }
    50% {
      transform: translateX(300%) rotate(180deg) scale(1.5); /* Simplified scale for reduced complexity */
      opacity: 0.5;
    }
  }

• Rimuovi semplicemente il codice precedente e copia e incolla questo nuovo codice nel tuo CSS aggiuntivo. Ciò non modificherà l’animazione, ma rimuoverà sicuramente questo errore.

  

• Puoi vedere che l’errore non esiste più.
• E la cosa buona è che, con il codice ottimizzato, puoi aumentare il punteggio delle prestazioni. Abbiamo visto all’inizio di questa sezione che il punteggio della prestazione era 77.
• Pertanto, alcuni suggerimenti generali che devi tenere a mente per risolvere questo errore sono:

Suggerimento 1: ottimizza le animazioni CSS

Invece di animare proprietà come altezza, larghezza o sinistra, che possono richiedere un uso intensivo delle risorse, utilizza transform e opacity. Queste proprietà sono accelerate dalla GPU e possono essere gestite in modo più efficiente dai browser.

Ecco il codice di esempio prima e dopo l’ottimizzazione:

Prima dell’ottimizzazione:

.animate-left {
  position: relative;
  animation: moveLeft 2s linear infinite;
}
@keyframes moveLeft {
  from { left: 0; }
  to { left: 100px; }
}

Dopo l’ottimizzazione:

.animate-left {
  position: relative;
  animation: moveLeft 2s linear infinite;
}
@keyframes moveLeft {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

Suggerimento 2: sfrutta la potenza della proprietà “Will-Change” dei CSS

Utilizza la proprietà will-change per informare il browser degli elementi che cambieranno nel prossimo futuro. Ciò consente al browser di prepararsi e ottimizzare il cambiamento.

• Inserisci la seguente riga nel tuo codice:

  will-change: transform, opacity; /* Added line */

Suggerimento 3: scarica le animazioni sulla GPU

Scaricare le animazioni sulla GPU (Graphics Processing Unit) è una tecnica per ottimizzare le animazioni web, rendendole più fluide e meno gravose per la CPU (Central Processing Unit).

Questo approccio è particolarmente efficace nel risolvere problemi di animazione non composita, poiché sfrutta la capacità della GPU di gestire le attività grafiche in modo più efficiente.

Puoi scaricare le animazioni sulla GPU utilizzando le proprietà di trasformazione e opacità per le animazioni perché sono più efficienti rispetto alle proprietà di animazione come larghezza, altezza, superiore o sinistra.

Puoi utilizzare le proprietà di trasformazione e opacità anziché sinistra e destra. Ecco un esempio:

Codice non ottimizzato:

@keyframes moveLeft {
  from { left: 0; }
  to { left: 100px; }
}

Codice ottimizzato:

@keyframes moveLeft {
  from { transform: translateX(0); }
  to { transform: translateX(100px); }
}

Suggerimento 4: utilizzo di librerie e strumenti efficienti

Incorporare librerie efficienti come GreenSock Animation Platform (GSAP) o Velocity.js può essere molto efficace nel risolvere errori di animazione non composita.

Queste librerie sono ottimizzate per le prestazioni, offrendo animazioni più fluide ed efficienti rispetto ai CSS o JavaScript standard.

Per incorporare la libreria GSAP, attenersi alla seguente procedura:

• Individua il collegamento CDN per GSAP.
• Apri il file HTML in cui desideri utilizzare GSAP.
• Inserisci il collegamento CDN all’interno di un tag <script>. Questo tag dovrebbe idealmente essere posizionato vicino alla fine della sezione <body>.

  <!DOCTYPE html>
  <html>
  <head>
    <title>Tua Pagina</title>
    <!-- Altri elementi head -->
  </head>
  <body>
    <!-- Tuo HTML va qui -->
    <!-- GSAP CDN Script alla fine del body -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>
  </body>
  </html>

In che modo l’hosting WP-Hosting può integrare le tue animazioni ottimizzate

WP-Hosting migliora i siti Web con animazioni ottimizzate offrendo velocità elevate e tempi di attività elevati dai principali fornitori di servizi cloud come Clodflare e Google Cloud. Le sue soluzioni avanzate di memorizzazione nella cache, tra cui Memcached, Varnish e Redis, garantiscono un caricamento rapido delle animazioni. Lo stack ottimizzato della piattaforma, insieme alla CDN di Cloudflare, aumenta ulteriormente le prestazioni dell’animazione, soprattutto durante i picchi di traffico. Insieme a robuste funzionalità di sicurezza, WP-Hosting fornisce un ambiente di hosting ideale ed economico per siti Web ricchi di animazioni.

Riepilogo

E questo è tutto. Abbiamo esplorato le strategie chiave per evitare animazioni non composite, concentrandoci sulle migliori pratiche nell’animazione web.

Abbiamo anche discusso le cause del verificarsi di animazioni non composite e il modo in cui influiscono sulle prestazioni web e sul rendering del browser.

Se hai domande su questo argomento, non esitare a contattarci.

Domande frequenti

Cos’è un’animazione composita?
L’animazione composita è un processo di animazione fluido ed efficiente in cui l’unità di elaborazione grafica (GPU) del browser gestisce il rendering, riducendo il carico sull’unità di elaborazione centrale (CPU) e migliorando le prestazioni del sito web.

Come si evita il colore dell’animazione non composita?
Per evitare animazioni non composite per i cambiamenti di colore, utilizza con giudizio le proprietà CSS come colore e colore di sfondo e valuta la possibilità di combinarle con la trasformazione o l’opacità per l’accelerazione GPU.

Come posso risolvere il problema per evitare animazioni composite in WordPress?
In WordPress, correggi le animazioni non composite ottimizzando CSS e JavaScript, utilizzando librerie di animazioni efficienti e possibilmente sfruttando plugin progettati per l’ottimizzazione delle prestazioni. Concentrati sull’utilizzo delle proprietà CSS accelerate dalla GPU come trasformazione e opacità.