Evitare problemi di animazione non composta

Hai mai fatto clic su un sito Web solo per scoprire che balbetta e rallenta mentre lo scorri?

Frustrante, non è vero?

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

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 composte e di come risolverle. Ti guideremo attraverso semplici passaggi per rendere più fluide le 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 composta?

L'animazione non composta è 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 composta è essenziale per le prestazioni web?

Evitare animazioni non composte è essenziale per le prestazioni web per diversi motivi. Innanzitutto, le animazioni non composte, 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 e ottenere prestazioni migliori .

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

Le animazioni non composte 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 composte 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 composte?

Il rilevamento delle animazioni non composte 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 composte.

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. Controlla nella sezione "Diagnostica" del rapporto.
• Cerca un avviso che dica qualcosa come "Evita animazioni non composte". Ciò indica che la tua pagina ha animazioni che potrebbero essere ottimizzate per prestazioni migliori.

Metrica GT

• 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 metriche prestazionali generali, quindi potrebbe non evidenziare direttamente animazioni non composte come PageSpeed ​​Insights.
• Cerca i tempi di rendering e le metriche di carico della CPU, come "Tempo di blocco totale" o "Tempo di interattività".
• Anche se GTmetrix potrebbe non menzionare esplicitamente le animazioni non composte, valori elevati in queste aree potrebbero indicare processi di rendering inefficienti, che potrebbero essere dovuti ad animazioni non composte.

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 composte

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

Animazione di proprietà non composite

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

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 composte. 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 composte

Le animazioni non composte 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 composte".

Ecco i passaggi che devi seguire per risolvere questo problema.

• Vai alla dashboard di WordPress
• Seleziona Aspetto > Personalizza
• Potresti trovare un codice CSS nella sezione "CSS aggiuntivi". È molto probabile che questo codice non utilizzi animazioni CSS ottimizzate, il che causa il verificarsi di questo errore.

• Se sei uno sviluppatore, sapresti 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

Questa modifica riguarda l'informazione del browser sulle imminenti modifiche all'animazione, che possono aiutare a ottimizzare le prestazioni di rendering.

 .mia-animazione {

    larghezza: 100px;

    altezza: 100px;

    colore di sfondo: rosso;

    posizione: assoluta;

    volontà-cambiamento: trasformazione, opacità; /* Aggiunta riga */

    animazione: complexMove 5s lineare infinito;

}

/* Il resto dei fotogrammi chiave rimane invariato */

Modifica 2: riduzione della complessità dell'animazione

Qui, la trasformazione della scala al 50% è stata modificata da scale(2) a scale(1.5). Ciò riduce la complessità e l'intensità dell'animazione.

 .mia-animazione {

    /* ... altre proprietà ... */

    volontà-cambiamento: trasformazione, opacità; /* Supponendo che la modifica 1 venga mantenuta */

    animazione: complexMove 5s lineare infinito;

}

@keyframes complexSposta {

    /* ... fotogrammi chiave 0% e 100% ... */

    50% {

        trasformazione: traduciX(300%) ruota(180°) scala(1.5); /* Riga modificata */

        opacità: 0,5;

    }

    /* ... fotogramma chiave 100% ... */

}

Ecco come apparirebbe il tuo codice finale:

 .mia-animazione {

    larghezza: 100px;

    altezza: 100px;

    colore di sfondo: rosso;

    posizione: assoluta;

    volontà-cambiamento: trasformazione, opacità; /* Informa il browser delle modifiche imminenti */

    animazione: complexMove 5s lineare infinito;

}

@keyframes complexSposta {

    0%, 100% {

        trasforma: traduciX(0) ruota(0) scala(1);

        opacità: 1;

    }

    50% {

        trasformazione: traduciX(300%) ruota(180°) scala(1.5); /* Scala semplificata per ridurre la complessità */

        opacità: 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.
• Ecco il punteggio relativo alle prestazioni migliorate:

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
trasformare
E
opacità . 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:

 .animato-sinistra {

    posizione: relativa;

    animazione: moveLeft 2s lineare infinito;

}

@keyframe sposta a sinistra {

    da {sinistra: 0; }

    a {sinistra: 100px; }

}

Dopo l'ottimizzazione:

 .animato-sinistra {

    posizione: relativa;

    animazione: moveLeft 2s lineare infinito;

}

@keyframe sposta a sinistra {

    da {trasformare: tradurreX(0); }

    a {trasformare: TranslateX(100px); }

}

Suggerimento 2: sfruttare 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.

Ecco come utilizzare la proprietà will-change;

• Inserisci la seguente riga nel tuo codice;

 volontà-cambiamento: trasformazione, opacità; /* Aggiunta riga */

Suggerimento 3: scaricare 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 composta, 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:

 @keyframe sposta a sinistra {

    da {sinistra: 0; }

    a {sinistra: 100px; }

}

Codice ottimizzato:

 @keyframe sposta a sinistra {

    da {trasformare: tradurreX(0); }

    a {trasformare: 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 composta.

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.
• È necessario inserire il collegamento CDN all'interno di un tag <script>. Questo tag dovrebbe idealmente essere posizionato vicino alla fine della sezione <body>.

 <!DOCTYPEhtml>

<html>

<testa>

    <title>La tua pagina web</title>

    <!-- Altri elementi della testa -->

</testa>

<corpo>

    <!-- Il tuo contenuto HTML va qui -->

    <!-- Script CDN GSAP alla fine del corpo -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

</corpo>

</html>

In che modo l'hosting Cloudways può integrare le tue animazioni ottimizzate

Cloudways Hosting migliora i siti Web con animazioni ottimizzate offrendo velocità elevate e tempi di attività elevati dai principali fornitori di servizi cloud come DigitalOcean, AWS 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 all'Enterprise CDN di Cloudflare, aumenta ulteriormente le prestazioni dell'animazione, soprattutto durante i picchi di traffico. Insieme a robuste funzionalità di sicurezza, Cloudways 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 composte, concentrandoci sulle migliori pratiche nell'animazione web.

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

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