Menghindari Masalah Animasi Non-Komposit

Pernahkah Anda mengeklik sebuah situs web dan mendapati situs tersebut tersendat dan lambat saat Anda menggulirnya?

Membuat frustrasi, bukan?

Nah, bagaimana jika kami memberi tahu Anda bahwa rahasia di balik hambatan tersebut terletak pada sesuatu yang disebut animasi non-komposisi?

Ini adalah animasi yang tidak diproses secara efisien oleh browser, sehingga memberikan beban ekstra pada prosesor utama komputer dan menyebabkan masalah kinerja.

Tapi jangan khawatir, ada cara untuk memperbaikinya.

Pada blog kali ini kita akan membahas tentang animasi non-komposit dan cara memperbaikinya. Kami akan memandu Anda melalui langkah-langkah sederhana untuk memuluskan animasi yang tersentak-sentak tersebut, menjadikan situs web Anda tidak hanya lebih cepat tetapi juga menyenangkan untuk dinavigasi oleh pengunjung Anda.

Mari kita mulai.

Apa itu Animasi Non Komposit?

Animasi non-komposit adalah jenis animasi web yang diproses terutama oleh CPU, bukan GPU (Graphics Processing Unit).

Pendekatan pemrosesan ini sering kali menghasilkan rendering yang kurang efisien, sehingga berpotensi menyebabkan masalah kinerja seperti kecepatan frame yang lebih lambat dan kelambatan antarmuka pengguna, terutama pada halaman web yang kompleks atau perangkat yang kurang bertenaga.

Mengurangi Pergeseran Tata Letak Kumulatif (CLS) menjanjikan peningkatan skor Kinerja Lighthouse Anda.

Mengapa Menghindari Animasi Non Komposit Penting untuk Kinerja Web?

Menghindari animasi non-komposisi penting untuk kinerja web karena beberapa alasan. Pertama, animasi non-komposit, yang diproses oleh CPU, mungkin kurang efisien dan lebih lambat dibandingkan animasi yang diproses dengan GPU.

Ketidakefisienan ini sering kali menyebabkan penurunan kecepatan frame, menyebabkan animasi tampak terputus-putus atau lamban, yang dapat berdampak negatif pada pengalaman pengguna. Halaman web dengan animasi yang lebih halus terasa lebih responsif dan umumnya lebih menyenangkan untuk berinteraksi.

Kedua, animasi yang menggunakan CPU secara intensif dapat membebani sumber daya sistem, terutama pada perangkat yang kurang bertenaga seperti ponsel cerdas atau komputer lama. Ketegangan ini tidak hanya memperlambat animasi itu sendiri tetapi juga proses lain yang berjalan di halaman web.

Akibatnya, kinerja situs web secara keseluruhan dapat terganggu. Tidak hanya itu, kinerja situs web yang terganggu juga dapat berdampak negatif terhadap keberhasilan pemasaran digital. Periksa blog ini “ Dampak Kecepatan Situs Web terhadap Kesuksesan Pemasaran Digital ” untuk mengetahui caranya.

Catatan: Berikut beberapa tip mudah untuk mempercepat situs WordPress Anda agar kinerjanya lebih baik .

Bagaimana Animasi Non-komposisi Mempengaruhi Kinerja Halaman dan Rendering Browser?

Animasi non-komposit dapat berdampak besar pada kinerja halaman dan rendering browser. Di sisi kinerja, mereka cenderung memperlambat situs web. Hal ini terjadi karena prosesor utama (CPU) komputer bekerja terlalu keras, mencoba menangani animasi kompleks di atas tugas lainnya.

Akibatnya, website menjadi kurang responsif terhadap interaksi pengguna seperti mengklik atau menggulir. Hal ini terutama terlihat pada perangkat dengan kekuatan pemrosesan yang lebih kecil, seperti ponsel.

Mengenai rendering browser, animasi non-komposit sering kali menyebabkan gerakan layar terputus-putus dan tidak rata. Karena CPU kurang efisien dalam menggambar dan mengelola animasi ini dibandingkan GPU, animasi dapat terlihat tersendat dan tidak mulus.

Hal ini memengaruhi daya tarik visual dan dapat membuat situs web terasa lebih lambat karena browser kesulitan untuk mengimbangi rendering animasi yang menuntut ini. Selain itu, beban pada CPU dapat menyebabkan waktu pemuatan halaman web lebih lama, karena memerlukan lebih banyak waktu untuk memproses dan menampilkan elemen animasi.

Bagaimana Cara Mendeteksi Animasi Non-Komposit?

Mendeteksi animasi non-komposit dapat dilakukan menggunakan alat analisis kinerja seperti Google PageSpeed ​​Insights dan GTmetrix. Berikut 10 Alat Uji Kecepatan WordPress terbaik yang dapat Anda gunakan untuk mendeteksi animasi non-komposit.

Alat-alat ini menganalisis berbagai aspek kinerja situs web Anda, termasuk bagaimana animasi dirender.

Inilah cara Anda menggunakannya:

Wawasan Kecepatan Laman Google

• Kunjungi situs web PageSpeed ​​Insights , masukkan URL laman web Anda, dan klik 'Analisis'. Alat ini mengevaluasi laman Anda untuk kinerja seluler dan desktop.

• Setelah analisis, PageSpeed ​​Insights memberikan skor dan laporan terperinci. Lihat di bagian 'Diagnostik' pada laporan.
• Cari peringatan yang mengatakan sesuatu seperti “Hindari animasi non-komposit.” Ini menunjukkan bahwa halaman Anda memiliki animasi yang dapat dioptimalkan untuk kinerja yang lebih baik.

Metrik GT

• Kunjungi situs web GTmetrix , masukkan URL situs Anda, dan mulai pengujian. GTmetrix menawarkan analisis komprehensif tentang kinerja pemuatan situs Anda.

• Setelah analisis selesai, Anda akan mendapatkan laporan terperinci. GTmetrix lebih berfokus pada metrik kinerja umum, sehingga mungkin tidak secara langsung menunjukkan animasi non-komposit seperti PageSpeed ​​Insights.
• Cari waktu rendering dan metrik beban CPU, seperti 'Total Waktu Pemblokiran' atau 'Waktu untuk Interaktif'.
• Meskipun GTmetrix mungkin tidak secara eksplisit menyebutkan animasi non-komposit, nilai yang tinggi di area ini dapat menunjukkan proses rendering yang tidak efisien, yang mungkin disebabkan oleh animasi non-komposit.

Selain itu, Anda juga dapat melakukan stress test untuk mengetahui performa website Anda.

Bagaimana Browser Menangani Animasi?

Saat menangani animasi, browser menggunakan dua bagian utama komputer: CPU (Central Processing Unit) dan GPU (Graphics Processing Unit). Animasi sederhana, seperti mengubah warna atau teks, biasanya dikelola oleh CPU.

Namun, untuk animasi yang lebih kompleks, terutama yang melibatkan pergerakan atau transformasi, browser mencoba menggunakan GPU. GPU lebih baik untuk tugas-tugas ini karena dirancang untuk menangani grafik dan dapat menghasilkan animasi yang halus dan lancar.

Namun, jika animasi tidak dikonfigurasi dengan benar, browser mungkin masih menggunakan CPU untuk animasi tersebut, sehingga membuat animasi menjadi kurang mulus dan memperlambat keseluruhan situs web. Jadi, pengembang web berupaya memastikan animasi mereka ramah GPU untuk kinerja terbaik.

Penyebab Animasi Non-Komposit

Untuk mengatasi masalah animasi non-komposit, pertama-tama penting untuk memahami apa penyebabnya. Berikut beberapa alasan umum:

Menganimasikan Properti Non-Komposit

Menganimasikan properti non-komposit sering kali menghasilkan animasi non-komposit. Hal ini terjadi ketika properti seperti 'lebar', 'tinggi', atau 'margin', yang mengharuskan browser melakukan banyak perhitungan ulang dan menggambar ulang, digunakan dalam animasi.

Properti ini tidak ditangani secara efisien oleh GPU, sehingga memberikan lebih banyak beban pada CPU, sehingga membuat animasi menjadi kurang mulus.

Menggunakan JavaScript untuk Menganimasikan

Menggunakan JavaScript untuk menganimasikan juga dapat menimbulkan masalah. Animasi berbasis JavaScript, terutama jika tidak dioptimalkan, dapat menuntut banyak CPU. Meskipun JavaScript menawarkan lebih banyak kontrol atas animasi, hal ini dapat menyebabkan masalah kinerja jika animasinya rumit atau tidak dikodekan secara efisien.

Area Lukis yang Kompleks

Area dicat yang rumit dalam animasi juga bisa menjadi penyebab lainnya. Jika Anda memiliki area luas yang perlu sering dicat ulang selama animasi, hal ini akan memberikan tekanan yang signifikan pada sistem. Hal ini terutama berlaku untuk grafik rumit atau gambar resolusi tinggi yang berubah dengan cepat.

Grafik atau Media Tidak Efisien

Penggunaan grafis atau media yang tidak efisien dalam animasi adalah penyebab umum lainnya. Gambar, video, atau grafik beresolusi tinggi yang tidak dioptimalkan untuk penggunaan web dapat memperlambat animasi. Browser berjuang lebih keras untuk merender elemen-elemen berat ini, terutama jika elemen-elemen tersebut merupakan bagian dari rangkaian animasi.

Penggunaan Bayangan dan Filter yang Berlebihan

Terakhir, penggunaan bayangan dan filter yang berlebihan di CSS dapat menyebabkan animasi tidak dikomposisi. Efek-efek ini, meskipun menarik secara visual, memerlukan banyak sumber daya. Menerapkannya ke elemen bergerak dapat berdampak signifikan pada kinerja, karena mengharuskan browser melakukan banyak pemrosesan ekstra.

Catatan: Pelajari penyebab lain dari website lambat .

Cara Menghindari Animasi Non-komposit

Animasi non-komposisi dapat berdampak signifikan terhadap kinerja situs web Anda, sehingga menyebabkan pengalaman pengguna yang lamban. Kunci untuk mengatasi masalah ini terletak pada pengoptimalan cara penanganan animasi.

Berikut adalah pendekatan langkah demi langkah untuk memperbaiki masalah ini. Sebelum melanjutkan ke perbaikan, saya akan menunjukkan kepada Anda bagaimana tampilan skor situs web dengan kesalahan ini:

• Beralih ke bagian diagnostik, kami menemukan kesalahan "hindari animasi non-komposisi".

Berikut langkah-langkah yang perlu Anda ikuti untuk memperbaiki masalah ini.

• Buka Dasbor WordPress Anda
• Pilih Penampilan > Sesuaikan
• Anda mungkin menemukan kode CSS di bagian “CSS tambahan”. Ada kemungkinan besar kode ini tidak menggunakan animasi css yang dioptimalkan, sehingga menyebabkan kesalahan ini terjadi.

• Jika Anda seorang pengembang, Anda pasti sudah tahu bahwa kode ini tidak dioptimalkan. Dan berikut adalah perubahan yang akan memberikan keajaiban bagi situs web Anda.

Perubahan 1: Menambahkan Properti Will-Change

Perubahan ini tentang memberi tahu browser tentang perubahan animasi yang akan datang, yang dapat membantu mengoptimalkan kinerja rendering.

 .animasi-saya {

    lebar: 100 piksel;

    tinggi: 100 piksel;

    warna latar: merah;

    posisi: mutlak;

    akan berubah: transformasi, opacity; /* Menambahkan baris */

    animasi: complexMove 5s linier tak terbatas;

}

/* Keyframe lainnya tetap tidak berubah */

Perubahan 2: Mengurangi Kompleksitas Animasi

Di sini, transformasi skala sebesar 50% telah dimodifikasi dari skala(2) menjadi skala(1.5). Ini mengurangi kompleksitas dan intensitas animasi.

 .animasi-saya {

    /* ... properti lainnya ... */

    akan berubah: transformasi, opacity; /* Dengan asumsi Perubahan 1 disimpan */

    animasi: complexMove 5s linier tak terbatas;

}

@keyframes kompleksPindahkan {

    /* ... 0% dan 100% bingkai utama ... */

    50% {

        transformasi: skala terjemahanX(300%) putar(180 derajat)(1,5); /* Garis yang diubah */

        opacity: 0,5;

    }

    /* ... 100% bingkai utama ... */

}

Berikut tampilan kode akhir Anda:

 .animasi-saya {

    lebar: 100 piksel;

    tinggi: 100 piksel;

    warna latar: merah;

    posisi: mutlak;

    akan berubah: transformasi, opacity; /* Memberi tahu browser tentang perubahan yang akan datang */

    animasi: complexMove 5s linier tak terbatas;

}

@keyframes kompleksPindahkan {

    0%, 100% {

        transformasi: TranslateX(0) putar(0) skala(1);

        opacity: 1;

    }

    50% {

        transformasi: skala terjemahanX(300%) putar(180 derajat)(1,5); /* Skala yang disederhanakan untuk mengurangi kompleksitas */

        opacity: 0,5;

    }

}

• Cukup hapus kode sebelumnya dan salin dan tempel kode baru ini ke css tambahan Anda. Ini tidak akan mengubah animasi, tapi pasti akan menghapus kesalahan ini.

• Anda dapat melihat kesalahannya sudah tidak ada lagi.
• Dan hal baiknya adalah, dengan kode yang dioptimalkan, Anda dapat meningkatkan skor kinerja. Kita melihat di awal bagian ini bahwa skor kinerjanya adalah 77.
• Berikut peningkatan skor kinerjanya:

Oleh karena itu, beberapa tip umum yang harus Anda ingat untuk mengatasi kesalahan ini adalah:

Tip 1: Optimalkan Animasi CSS

Daripada menganimasikan properti seperti tinggi, lebar, atau kiri, yang dapat menghabiskan banyak sumber daya, gunakanlah
mengubah
Dan
opacity . Properti ini memiliki akselerasi GPU dan dapat ditangani dengan lebih efisien oleh browser.

Berikut contoh kode sebelum dan sesudah optimasi:

Sebelum Optimasi:

 .animate-kiri {

    posisi: relatif;

    animasi: moveLeft 2s linier tak terbatas;

}

@keyframes pindah ke Kiri {

    dari { kiri: 0; }

    ke { kiri: 100 piksel; }

}

Setelah Optimasi:

 .animate-kiri {

    posisi: relatif;

    animasi: moveLeft 2s linier tak terbatas;

}

@keyframes pindah ke Kiri {

    dari { transformasi: terjemahkanX(0); }

    ke { transformasi: TranslateX(100px); }

}

Tip 2: Memanfaatkan Kekuatan Properti CSS 'Will-Change'

Gunakan properti will-change untuk memberi tahu browser tentang elemen yang akan berubah dalam waktu dekat. Hal ini memungkinkan browser untuk mempersiapkan dan mengoptimalkan perubahan.

Berikut cara menggunakan properti will-change;

• Masukkan baris berikut dalam kode Anda;

 akan berubah: transformasi, opacity; /* Menambahkan baris */

Tip 3: Membongkar Animasi ke GPU

Membongkar animasi ke GPU (Graphics Processing Unit) adalah teknik untuk mengoptimalkan animasi web, menjadikannya lebih lancar dan mengurangi beban pada CPU (Central Processing Unit).

Pendekatan ini sangat efektif dalam menyelesaikan masalah animasi non-komposit, karena memanfaatkan kemampuan GPU untuk menangani tugas grafis dengan lebih efisien.

Anda dapat memindahkan animasi ke GPU menggunakan properti Transform dan Opacity untuk animasi karena properti tersebut lebih efisien daripada menganimasikan properti seperti lebar, tinggi, atas, atau kiri.

Anda dapat menggunakan properti transformasi dan opacity alih-alih kiri dan kanan. Berikut ini contohnya:

Kode yang Tidak Dioptimalkan:

 @keyframes pindah ke Kiri {

    dari { kiri: 0; }

    ke { kiri: 100 piksel; }

}

Kode yang Dioptimalkan:

 @keyframes pindah ke Kiri {

    dari { transformasi: terjemahkanX(0); }

    ke { transformasi: TranslateX(100px); }

}

Tip 4: Menggunakan Perpustakaan dan Alat yang Efisien

Menggabungkan perpustakaan yang efisien seperti GreenSock Animation Platform (GSAP) atau Velocity.js bisa sangat efektif dalam mengatasi kesalahan animasi non-komposit.

Pustaka ini dioptimalkan kinerjanya, menawarkan animasi yang lebih halus dan efisien dibandingkan CSS atau JavaScript standar.

Untuk menggabungkan perpustakaan GSAP, ikuti langkah-langkah berikut;

• Temukan tautan CDN untuk GSAP.
• Buka file HTML tempat Anda ingin menggunakan GSAP.
• Anda perlu menempatkan tautan CDN di dalam tag <script>. Tag ini idealnya ditempatkan di dekat akhir bagian <body> Anda.

 <!DOCTYPEhtml>

<html>

<kepala>

    <title>Halaman Web Anda</title>

    <!-- Elemen kepala lainnya -->

</kepala>

<tubuh>

    <!-- Konten HTML Anda ada di sini -->

    <!-- Skrip CDN GSAP di akhir isi -->

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

</tubuh>

</html>

Bagaimana Cloudways Hosting Dapat Melengkapi Animasi Anda yang Dioptimalkan

Cloudways Hosting menyempurnakan situs web dengan animasi yang dioptimalkan dengan menawarkan kecepatan tinggi dan waktu aktif tinggi dari penyedia cloud terkemuka seperti DigitalOcean, AWS, dan Google Cloud. Solusi caching canggihnya, termasuk Memcached, Varnish, dan Redis, memastikan pemuatan animasi dengan cepat. Tumpukan platform yang dioptimalkan, bersama dengan CDN Perusahaan Cloudflare, semakin meningkatkan kinerja animasi, terutama selama lalu lintas puncak. Ditambah dengan fitur keamanan yang kuat, Cloudways menyediakan lingkungan hosting yang ideal dan hemat biaya untuk situs web yang kaya akan animasi.

Ringkasan

Dan itu saja. Kami telah mengeksplorasi strategi utama untuk menghindari animasi non-komposisi, dengan fokus pada praktik terbaik dalam animasi web.

Kami juga telah membahas penyebab terjadinya animasi non-komposisi dan pengaruhnya terhadap kinerja web dan rendering browser.

Jika Anda memiliki pertanyaan mengenai topik ini, jangan ragu untuk menghubungi kami.