Mẹo cải thiện hiệu suất CSS và JS animation không thể bỏ qua
Hình ảnh thiết kế dạng animation có thể giúp website nổi bật so với các đối thủ, nhưng khả năng tối ưu tài nguyên không tốt có thể dẫn đến các vấn đề về hiệu suất, và cuối cùng dẫn đến người dùng rời bỏ.
Nếu bất kỳ hình ảnh động nào hiển thị ở mức dưới 60 khung hình mỗi giây, có thể gây sự chú ý từ khách truy cập và trải nghiệm người dùng sẽ bị ảnh hưởng. Bizfly Cloud dẫn sau đây sẽ giúp duy trì các file CSS và JavaScript animation của bạn hoạt động trơn tru.
CSS animation so với JavaScript animation
Animation được tạo bằng JavaScript đôi khi được gọi là imperative animation và nếu chúng được tạo bằng CSS gọi là declarative animation.
CSS animation được xử lý bởi compositor thread của trình duyệt thay vì main thread chịu trách nhiệm vẽ và tạo kiểu. Do đó, các animation như vậy không bị ảnh hưởng bởi các nhiệm vụ phức tạp hơn trong main thread. Tất nhiên, các animation kích hoạt các sự kiện vẽ hoặc bố cục sẽ yêu cầu công việc từ main thread, điều này phủ nhận lợi ích của việc sử dụng CSS animation.
JavaScript animation
Mặt khác, JavaScript luôn được chạy bởi main thread. Tuy nhiên, JavaScript cung cấp cho bạn quyền kiểm soát lớn hơn đối với animation, do đó, định dạng này sẽ phù hợp trong một số trường hợp. Mặc dù CSS khá lý tưởng cho các chuyển đổi đơn giản, JavaScript được khuyến nghị sử dụng cho animation với các hiệu ứng nâng cao như boucing chẳng hạn. Animation cho phép các hành động tạm dừng hoặc tua lại, cũng phải được làm động bằng JavaScript. JavaScript cũng cần thiết cho các hiệu ứng nhất định như cuộn parallax. Với sự trợ giúp của Web Animations API, bạn có thể tạo các animation phức tạp cho các ứng dụng hướng đối tượng. Bạn cũng có thể sử dụng JavaScript để kiểm soát CSS animation.
Mẹo tối ưu hình ảnh JavaScript animation
1. Sử dụng requestAnimationFrame ()
Thay vì sử dụng setTimeOut () và setInterval (), hãy sử dụng phương thức JavaScript requestAnimationFrame () để chạy animation code vào thời điểm tốt nhất cho trình duyệt. Phương pháp này sẽ lựa chọn tỷ lệ khung hình phù hợp cho thiết bị người dùng, vì vậy khách truy cập trên thiết bị di động sẽ thấy tỷ lệ khung hình khác với người dùng máy tính để bàn.
2. Phân tách animation từ các event
Code chịu trách nhiệm xử lý các event như scroll phải được tách biệt khỏi animation code.
3. Sử dụng mã JavaScript ngắn gọn
Hãy cảnh giác khi thêm một lượng lớn JavaScript vào trang web của bạn. Nếu code trở nên khó sử dụng, bạn có thể thử sử dụng các web worker để chạy JavaScript animation trên một thread khác.
4. Không nên sử dụng jQuery
Tránh xa các thư viện animation cũ như jQuery. Nếu bạn đang tìm kiếm định dạng nào đó tương tự, Velocity.js về cơ bản hoạt động theo cùng một cách, nhưng nó nhanh hơn nhiều và hỗ trợ nhiều tính năng hơn. Thay thế jQuery's $.animate() bằng $ .velocity () sẽ tạo ra sự khác biệt lớn cho người dùng di động. Web Designer Depot có một danh sách đầy đủ các công cụ animation cho JavaScript.
Chọn thuộc tính CSS nào để tạo hiệu ứng
Liên tục tải animation có thể tiêu tốn một lượng tài nguyên đáng kể. Độ khó để tạo hiệu ứng cho một thuộc tính càng nhiều, tốc độ khung hình sẽ càng chậm. Do đó, việc chọn các thuộc tính CSS phù hợp để tạo hiệu ứng có thể có tác động rất lớn đến hiệu suất trang.
Có ba loại thuộc tính CSS chính:
Thuộc tính layout – Các thuộc tính này xác định kích thước và vị trí của các thành phần trên trang. Các animation thay đổi chiều rộng và chiều cao của các thành phần có thể ảnh hưởng đến vị trí của các thành phần trang khác, điều này có thể gây ra một phản ứng dây chuyền. Vì các animation thay đổi bố cục trang đặc biệt tiêu tốn tài nguyên, tốt nhất nên tránh.
Thuộc tính Paint - Các thuộc tính này xác định sự xuất hiện của các thành phần trên trang. Thực hiện thay đổi đối với các thuộc tính như đổ lại màu, có thể tiêu tốn tài nguyên. Điều này có nghĩa là, các animation dạng đơn giản chiếm một phần diện tích không đáng kể có thể có tác động không đáng kể đến hiệu suất tổng thể. Animation lớn hơn có thể không đáng để sử dụng.
Thuộc tính tổng hợp - Bao gồm transform và opacity, là những lựa chọn tốt nhất để tạo CSS animation với chi phí tối thiểu. Với thuộc tính transform, bạn có thể chia tỷ lệ và xoay hình động mà không ảnh hưởng đến bố cục trang. Cố gắng sử dụng các thuộc tính tổng hợp cho animation bất cứ khi nào có thể. Với một chút sáng tạo, bạn có thể sẽ phải ngạc nhiên với những gì mình có thể tạo ra chỉ với những tính năng này.
Mẹo tối ưu hình ảnh CSS Animation
1. Tránh các animation đồng thời
Animation đứng độc lập có thể chạy mượt mà nhưng chưa chắc hoạt động tốt khi chạy cùng với hàng tá animation khác trên trang. Cùng một lúc có đến nhiều hơn hai animation có khả năng gây ra độ trễ. Do đó, việc đặt thời gian sao cho các animation không cùng chạy một lúc là rất quan trọng để duy trì hiệu suất ổn định. Vấn đề này có thể được giải quyết bằng cách tạo độ trễ khi chuyển tiếp. Việc tối ưu hóa quỹ đạo cho các animation có thể đòi hỏi một số thử nghiệm và chữa lỗi, tuy nhiên hiệu suất cải thiện mà bạn nhận được sẽ bù đắp cho những nỗ lực này.
2. Kiểm tra animation trong chuyển động chậm
Nếu một animation chạy mượt trong chuyển động chậm, nó sẽ hiển thị tuyệt vời ở tốc độ bình thường. Làm chậm một animation có thể giúp bạn xác định chính xác hơn các vấn đề khi rending.
3. Trì hoãn tất cả các animation xuống bằng một phần của giây
Vì trình duyệt phải hoạt động ở công suất lớn khi trang bắt đầu tải, việc trì hoãn tất cả animation cho đến khoảng vài trăm mili giây sau sự kiện tải ban đầu có thể tạo ra sự khác biệt đáng chú ý trong hiệu suất tổng thể.
4. Không nên lồng animation khi thao tác cuộn
Các animation vẫn hoạt động khi người dùng cuộn xuống để xem tiếp không chỉ gây khó chịu mà còn làm giảm hiệu suất của các thành phần khác trên màn hình một cách rõ rệt.
5. Kết hợp CSS với SVGs
SVG là lựa chọn tuyệt vời cho animation vì chúng có thể được thu nhỏ mà không làm giảm độ phân giải. Bạn có thể tạo SVG trong một chương trình như Adobe Illustrator và áp dụng CSS để thay đổi giao diện. Thêm một lý do để chọn SVG thay vì các phông chữ icon.
Khi nào nên sử dụng Will-Change
Nếu bạn đã thử mọi cách và vẫn gặp sự cố về hiệu suất, thì có thể thêm thuộc tính Will-Change vào animation. Đúng như tên gọi của nó, Will-Change chỉ ra rằng các thuộc tính của phần tử sẽ thay đổi để trình duyệt có thể chuẩn bị thích hợp. Liệt kê các thuộc tính cụ thể sẽ thay đổi như sau:
.element {
will-change: transform, opacity;
}
Vì việc sử dụng will-change sẽ tiêu tốn tài nguyên, do đó nếu sử dụng quá mức có thể dẫn đến các vấn đề về hiệu suất nặng nề hơn. Đặt nó trước mỗi animation theo mặc định là đề xuất. Chỉ sử dụng sẽ will-change như là phương sách cuối cùng khi tối ưu hiệu suất trang.
Thử nghiệm
Kiểm tra hiệu suất phải được thực hiện liên tục khi áp dụng animation cho ứng dụng web. Càng mất nhiều thời gian xác định các vấn đề rending, càng khó xác định gốc rễ của vấn đề.
Các công cụ dành cho nhà phát triển cho Chrome, Firefox và Safari cung cấp bảng phân tích theo từng khung hình thiết kế và render cho mỗi animation trong các tab Network. Thông tin này có thể giúp bạn tối ưu hóa animation trong khi thiết kế. Nếu bạn sử dụng Chrome, hãy xem bên dưới tab Rendering trong bảng điều khiển DevTools để biết các tính năng bổ sung như FPS meter.
Kích thước màn hình của người dùng có ảnh hưởng lớn đến khả năng hiển thị, do đó hãy chắc chắn kiểm tra dự án trên nhiều nền tảng bao gồm cả thiết bị di động.
Tối ưu hóa animation cho web là một quá trình tương đối đơn giản. Bên cạnh việc theo dõi hiệu suất website ảnh hưởng đến chuyển đổi như thế nào, cũng cần chú ý đến tác động của animation đối với kết quả cuối cùng. Nếu sử dụng hoạt ảnh động không đem lại nhiều hiệu quả, thì việc áp dụng chỉ gây lãng phí tài nguyên không cần thiết mà thôi.
Theo Bizfly Cloud chia sẻ
>>> Có thể bạn quan tâm: 10 lý do không thể bỏ qua CDN khi tối ưu website
