Unikanie problemów z animacjami niezłożonymi

Czy zdarzyło Ci się kiedyś, że kliknąłeś stronę internetową i zauważyłeś, że przy jej przewijaniu zacina się i opóźnia?

Frustrujące, prawda?

A co, jeśli powiemy Ci, że sekret tych problemów leży w czymś, co nazywa się animacjami niezłożonymi?

Są to animacje, które nie są efektywnie przetwarzane przez przeglądarkę, co powoduje dodatkowe obciążenie głównego procesora komputera i prowadzi do problemów z wydajnością.

Ale nie martw się, jest sposób, aby temu zaradzić.

Na tym blogu omówimy niezłożone animacje i sposoby ich naprawienia. Poprowadzimy Cię przez proste kroki, aby wygładzić te nierówne animacje, dzięki czemu Twoja witryna będzie nie tylko szybsza, ale także przyjemniejsza w nawigacji dla odwiedzających.

Zaczynajmy.

Co to jest animacja niezłożona?

Animacja niezłożona to rodzaj animacji internetowej przetwarzanej głównie przez procesor, a nie GPU (jednostkę przetwarzania grafiki).

Takie podejście do przetwarzania często prowadzi do mniej wydajnego renderowania, co może powodować problemy z wydajnością, takie jak mniejsza liczba klatek na sekundę i opóźnienie interfejsu użytkownika, szczególnie w przypadku złożonych stron internetowych lub urządzeń o mniejszej mocy.

Ograniczenie skumulowanego przesunięcia układu (CLS) zapewnia poprawę wyniku w zakresie wydajności Lighthouse.

Dlaczego unikanie animacji niezłożonych jest niezbędne dla wydajności sieci?

Unikanie niezłożonych animacji jest niezbędne dla wydajności sieci z kilku powodów. Po pierwsze, animacje niezłożone, które są przetwarzane przez procesor, mogą być mniej wydajne i wolniejsze niż animacje przetwarzane przez GPU.

Ta nieefektywność często prowadzi do zmniejszenia liczby klatek na sekundę, powodując, że animacje wydają się nierówne lub opóźnione, co może negatywnie wpłynąć na wygodę użytkownika. Strony internetowe z płynniejszymi animacjami są bardziej responsywne i ogólnie przyjemniej się z nimi współpracuje.

Po drugie, animacje obciążające procesor mogą obciążać zasoby systemu, szczególnie na słabszych urządzeniach, takich jak smartfony lub starsze komputery. Obciążenie to może spowolnić nie tylko same animacje, ale także inne procesy działające na stronie.

W rezultacie ogólna wydajność witryny może być zagrożona. Nie tylko to, obniżona wydajność witryny może również negatywnie wpłynąć na sukces marketingu cyfrowego. Sprawdź ten blog „ Wpływ szybkości witryny na sukces marketingu cyfrowego ”, aby dowiedzieć się, jak to zrobić.

Uwaga: oto kilka prostych wskazówek, jak przyspieszyć witrynę WordPress i uzyskać lepszą wydajność .

Jak animacje niezłożone wpływają na wydajność strony i renderowanie przeglądarki?

Animacje niezłożone mogą mieć duży wpływ zarówno na wydajność strony, jak i renderowanie przeglądarki. Jeśli chodzi o wydajność, mają tendencję do spowalniania witryny internetowej. Dzieje się tak, ponieważ główny procesor komputera (CPU) jest przepracowany i próbuje obsłużyć złożone animacje oprócz innych zadań.

W rezultacie witryna staje się mniej responsywna na interakcje użytkownika, takie jak klikanie lub przewijanie. Jest to szczególnie zauważalne na urządzeniach o mniejszej mocy obliczeniowej, takich jak telefony komórkowe.

Jeśli chodzi o renderowanie w przeglądarce, niezłożone animacje często powodują nierówne i nierówne ruchy na ekranie. Ponieważ procesor jest mniej wydajny w rysowaniu i zarządzaniu tymi animacjami niż procesor graficzny, animacje mogą wydawać się zacinane i niepłynne.

Wpływa to na atrakcyjność wizualną i może powodować spowolnienie działania witryny, ponieważ przeglądarka ma trudności z nadążeniem za renderowaniem wymagających animacji. Dodatkowo obciążenie procesora może prowadzić do wydłużenia czasu ładowania strony internetowej, ponieważ przetwarzanie i wyświetlanie animowanych elementów zajmuje więcej czasu.

Jak wykryć niezłożone animacje?

Wykrywanie niezłożonych animacji można przeprowadzić za pomocą narzędzi do analizy wydajności, takich jak Google PageSpeed ​​Insights i GTmetrix. Oto 10 najlepszych narzędzi do testowania prędkości WordPress , których możesz użyć do wykrywania niezłożonych animacji.

Narzędzia te analizują różne aspekty wydajności Twojej witryny, w tym sposób renderowania animacji.

Oto jak możesz z nich skorzystać:

Statystyki Google PageSpeed

• Odwiedź witrynę PageSpeed ​​Insights , wprowadź adres URL swojej strony i kliknij „Analizuj”. Narzędzie ocenia Twoją stronę zarówno pod kątem wydajności mobilnej, jak i stacjonarnej.

• Po analizie PageSpeed ​​Insights udostępnia wynik i szczegółowy raport. Sprawdź sekcję „Diagnostyka” w raporcie.
• Poszukaj ostrzeżenia o treści „Unikaj animacji niezłożonych”. Oznacza to, że Twoja strona zawiera animacje, które można zoptymalizować w celu uzyskania lepszej wydajności.

Metryk GT

• Wejdź na stronę GTmetrix , wpisz adres URL swojej witryny i rozpocznij test. GTmetrix oferuje wszechstronną analizę wydajności ładowania Twojej witryny.

• Po zakończeniu analizy otrzymasz szczegółowy raport. GTmetrix koncentruje się bardziej na ogólnych wskaźnikach wydajności, więc może nie wskazywać bezpośrednio niezłożonych animacji, takich jak PageSpeed ​​Insights.
• Sprawdź czas renderowania i wskaźniki obciążenia procesora, takie jak „Całkowity czas blokowania” lub „Czas do interaktywności”.
• Chociaż GTmetrix może nie wspominać wyraźnie o niezłożonych animacjach, wysokie wartości w tych obszarach mogą wskazywać na nieefektywne procesy renderowania, co może wynikać z niezłożonych animacji.

Co więcej, możesz także przeprowadzić test warunków skrajnych , aby określić wydajność swojej witryny.

Jak przeglądarki radzą sobie z animacjami?

Jeśli chodzi o obsługę animacji, przeglądarki wykorzystują dwie główne części komputera: procesor (jednostkę centralną) i procesor graficzny (jednostkę przetwarzania grafiki). Proste animacje, takie jak zmiana kolorów lub tekstu, są zwykle zarządzane przez procesor.

Jednak w przypadku bardziej złożonych animacji, szczególnie tych obejmujących ruch lub transformację, przeglądarki próbują używać procesora graficznego. Procesor graficzny jest lepszy do tych zadań, ponieważ jest przeznaczony do obsługi grafiki i może tworzyć płynne animacje.

Jeśli jednak animacja nie zostanie poprawnie skonfigurowana, przeglądarka może w dalszym ciągu używać do tego procesora, co sprawi, że animacja będzie mniej płynna i spowalnia całą witrynę. Dlatego twórcy stron internetowych pracują nad tym, aby ich animacje były przyjazne dla procesora graficznego i zapewniały najlepszą wydajność.

Przyczyny animacji niezłożonych

Aby przejść do rozwiązania problemu niezłożonych animacji, konieczne jest najpierw zrozumienie, co jest ich przyczyną. Oto kilka typowych powodów:

Animowanie właściwości niezłożonych

Animowanie właściwości niezłożonych często prowadzi do animacji niezłożonych. Dzieje się tak, gdy w animacjach używane są właściwości takie jak „szerokość”, „wysokość” lub „margines”, które wymagają od przeglądarki wielu przeliczeń i przerysowań.

Te właściwości nie są efektywnie obsługiwane przez procesor graficzny, więc powodują większe obciążenie procesora, przez co animacje są mniej płynne.

Używanie JavaScript do animacji

Używanie JavaScript do animacji może również powodować problemy. Animacje oparte na JavaScript, szczególnie jeśli nie są zoptymalizowane, mogą wymagać dużo od procesora. Chociaż JavaScript zapewnia większą kontrolę nad animacjami, może prowadzić do problemów z wydajnością, jeśli animacje są złożone lub nie są efektywnie zakodowane.

Złożone obszary malowane

Kolejnym winowajcą mogą być skomplikowane, pomalowane obszary w animacjach. Jeśli masz duże obszary, które wymagają częstego odświeżania podczas animacji, powoduje to znaczne obciążenie systemu. Jest to szczególnie prawdziwe w przypadku skomplikowanych grafik lub obrazów o wysokiej rozdzielczości, które szybko się zmieniają.

Niewydajna grafika lub multimedia

Inną częstą przyczyną jest niewydajne wykorzystanie grafiki lub multimediów w animacjach. Obrazy, filmy lub grafika o wysokiej rozdzielczości, które nie są zoptymalizowane do użytku w Internecie, mogą spowalniać animacje. Przeglądarka ma większe trudności z renderowaniem tych ciężkich elementów, zwłaszcza jeśli stanowią one część animowanej sekwencji.

Nadmierne użycie cieni i filtrów

Wreszcie nadmierne użycie cieni i filtrów w CSS może prowadzić do niezłożonych animacji. Efekty te, choć atrakcyjne wizualnie, wymagają dużych zasobów. Zastosowanie ich do ruchomych elementów może znacząco wpłynąć na wydajność, ponieważ wymagają one od przeglądarki wykonania wielu dodatkowych operacji.

Uwaga: poznaj inne przyczyny powolnego działania witryn internetowych .

Jak unikać niezłożonych animacji

Nieskomponowane animacje mogą znacząco wpłynąć na wydajność Twojej witryny, powodując spowolnienie użytkowania. Kluczem do rozwiązania tego problemu jest optymalizacja sposobu obsługi animacji.

Oto szczegółowe podejście do rozwiązania tego problemu. Zanim przejdziemy do naprawy, pokażę Ci, jak wygląda wynik witryny z tym błędem:

• Przechodząc do diagnostyki, znaleźliśmy błąd „Unikaj niezłożonych animacji”.

Oto kroki, które należy wykonać, aby rozwiązać ten problem.

• Przejdź do panelu WordPress
• Wybierz Wygląd > Dostosuj
• Kod CSS możesz znaleźć w sekcji „Dodatkowy CSS”. Istnieje duże prawdopodobieństwo, że ten kod nie używa zoptymalizowanych animacji CSS, co jest przyczyną wystąpienia tego błędu.

• Jeśli jesteś programistą, wiesz już, że ten kod nie jest zoptymalizowany. A oto zmiany, które zdziałają cuda w Twojej witrynie.

Zmiana 1: Dodanie właściwości Will-Change

Zmiana ta polega na informowaniu przeglądarki o nadchodzących zmianach animacji, co może pomóc zoptymalizować wydajność renderowania.

 .moja-animacja {

    szerokość: 100px;

    wysokość: 100px;

    kolor tła: czerwony;

    pozycja: absolutna;

    wola-zmiana: transformacja, nieprzejrzystość; /* Dodana linia */

    animacja: złożonaMove 5s liniowa nieskończona;

}

/* Pozostałe klatki kluczowe pozostają niezmienione */

Zmiana 2: Zmniejszenie złożoności animacji

W tym przypadku transformacja skali przy 50% została zmodyfikowana ze skali (2) do skali (1,5). Zmniejsza to złożoność i intensywność animacji.

 .moja-animacja {

    /* ... inne właściwości ... */

    wola-zmiana: transformacja, nieprzejrzystość; /* Zakładając, że zmiana 1 zostanie zachowana */

    animacja: złożonaMove 5s liniowa nieskończona;

}

@klatki kluczoweprzesuń {

    /* ... 0% i 100% klatek kluczowych ... */

    50% {

        transformacja: tłumaczenieX(300%) obrót (180 stopni) skala(1,5); /* Zmodyfikowana linia */

        nieprzezroczystość: 0,5;

    }

    /* ... 100% klatka kluczowa ... */

}

Oto jak wyglądałby Twój ostateczny kod:

 .moja-animacja {

    szerokość: 100px;

    wysokość: 100px;

    kolor tła: czerwony;

    pozycja: absolutna;

    wola-zmiana: transformacja, nieprzejrzystość; /* Informowanie przeglądarki o nadchodzących zmianach */

    animacja: złożonaMove 5s liniowa nieskończona;

}

@klatki kluczoweprzesuń {

    0%, 100% {

        transformacja: tłumaczenieX(0) obrót(0) skala(1);

        nieprzezroczystość: 1;

    }

    50% {

        transformacja: tłumaczenieX(300%) obrót (180 stopni) skala(1,5); /* Uproszczona skala dla zmniejszenia złożoności */

        nieprzezroczystość: 0,5;

    }

}

• Po prostu usuń poprzedni kod, skopiuj i wklej nowy kod do dodatkowego CSS. Nie zmieni to animacji, ale z pewnością usunie ten błąd.

• Możesz zobaczyć, że błąd już nie istnieje.
• Dobrą rzeczą jest to, że dzięki zoptymalizowanemu kodowi możesz zwiększyć wynik wydajności. Na początku tej sekcji widzieliśmy, że wynik za wydajność wyniósł 77.
• Oto poprawiony wynik wydajności:

Dlatego kilka ogólnych wskazówek, o których należy pamiętać, aby rozwiązać ten błąd, to:

Wskazówka 1: Optymalizuj animacje CSS

Zamiast animować właściwości takie jak wysokość, szerokość lub lewy, które mogą wymagać dużych zasobów, użyj
przekształcać
I
nieprzezroczystość . Właściwości te są przyspieszane przez procesor graficzny i mogą być efektywniej obsługiwane przez przeglądarki.

Oto przykładowy kod przed i po optymalizacji:

Przed optymalizacją:

 .animate-left {

    pozycja: względna;

    animacja: moveLeft 2s liniowo nieskończona;

}

@klatki kluczowe przesuń w lewo {

    od {po lewej: 0; }

    do {po lewej: 100px; }

}

Po optymalizacji:

 .animate-left {

    pozycja: względna;

    animacja: moveLeft 2s liniowo nieskończona;

}

@klatki kluczowe przesuń w lewo {

    z { przekształcenie: przetłumaczX(0); }

    do { przekształcenie: tłumaczenieX(100px); }

}

Wskazówka 2: Wykorzystanie właściwości CSS „Will-Change”.

Użyj właściwości will-change , aby poinformować przeglądarkę o elementach, które ulegną zmianie w najbliższej przyszłości. Dzięki temu przeglądarka może przygotować się i zoptymalizować pod kątem zmiany.

Oto jak używać właściwości will-change;

• Wstaw następujący wiersz do swojego kodu;

 wola-zmiana: transformacja, nieprzejrzystość; /* Dodana linia */

Wskazówka 3: Przenoszenie animacji na procesor graficzny

Przenoszenie animacji do procesora graficznego (jednostki przetwarzania grafiki) to technika optymalizacji animacji internetowych, dzięki czemu są one płynniejsze i mniej obciążają procesor (jednostkę centralną).

To podejście jest szczególnie skuteczne w rozwiązywaniu problemów z animacjami niezłożonymi, ponieważ wykorzystuje zdolność procesora graficznego do bardziej wydajnej obsługi zadań graficznych.

Możesz przeładować animacje na procesor graficzny, używając właściwości Transform i Opacity dla animacji, ponieważ są one bardziej wydajne niż animowanie właściwości, takich jak szerokość, wysokość, góra lub lewa strona.

Zamiast lewego i prawego można używać właściwości transformacji i krycia. Oto przykład:

Niezoptymalizowany kod:

 @klatki kluczowe przesuń w lewo {

    od {po lewej: 0; }

    do {po lewej: 100px; }

}

Zoptymalizowany kod:

 @klatki kluczowe przesuń w lewo {

    z { przekształcenie: przetłumaczX(0); }

    do { przekształcenie: tłumaczenieX(100px); }

}

Wskazówka 4: Korzystanie z wydajnych bibliotek i narzędzi

Włączenie wydajnych bibliotek, takich jak GreenSock Animation Platform (GSAP) lub Velocity.js, może być bardzo skuteczne w rozwiązywaniu błędów niezłożonych animacji.

Biblioteki te są zoptymalizowane pod kątem wydajności, oferując płynniejsze i wydajniejsze animacje niż standardowe CSS lub JavaScript.

Aby włączyć bibliotekę GSAP, wykonaj następujące kroki;

• Znajdź łącze CDN do GSAP.
• Otwórz plik HTML, w którym chcesz korzystać z GSAP.
• Musisz umieścić link CDN wewnątrz tagu <script>. Najlepiej umieścić ten tag na końcu sekcji <body>.

 <!DOCTYPE html>

<html>

<głowa>

    <title>Twoja strona internetowa</title>

    <!-- Inne elementy głowy -->

</head>

<ciało>

    <!-- Tutaj znajduje się Twoja treść HTML -->

    <!-- Skrypt CDN GSAP na końcu treści -->

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

</ciało>

</html>

W jaki sposób hosting Cloudways może uzupełnić Twoje zoptymalizowane animacje

Cloudways Hosting ulepsza strony internetowe dzięki zoptymalizowanym animacjom, oferując duże prędkości i długi czas pracy od najlepszych dostawców usług w chmurze, takich jak DigitalOcean, AWS i Google Cloud. Zaawansowane rozwiązania buforowania, w tym Memcached, Varnish i Redis, zapewniają szybkie ładowanie animacji. Zoptymalizowany stos platformy wraz z Enterprise CDN Cloudflare dodatkowo zwiększa wydajność animacji, szczególnie w godzinach szczytu. W połączeniu z solidnymi funkcjami bezpieczeństwa Cloudways zapewnia idealne, ekonomiczne środowisko hostingowe dla witryn bogatych w animacje.

Streszczenie

I to wszystko. Zbadaliśmy kluczowe strategie unikania niezłożonych animacji, koncentrując się na najlepszych praktykach w animacji internetowej.

Omówiliśmy także przyczyny występowania niezłożonych animacji oraz ich wpływ na wydajność sieci i renderowanie przeglądarki.

Jeśli masz jakiekolwiek pytania dotyczące tego tematu, skontaktuj się z nami.