Hoạt ảnh ảnh hưởng đến các chỉ số quan trọng của trang web như thế nào (LCP, INP và CLS)
Hoạt ảnh và thời gian chạy hoạt ảnh ảnh hưởng như thế nào đến LCP, INP và CLS cũng như những cách thiết thực để duy trì chuyển động phong phú mà không ảnh hưởng đến Core Web Vitals.
Điểm chính
Hoạt ảnh có thể ảnh hưởng đến cả ba Quan trọng web cốt lõi: các tệp hoạt ảnh nặng và thời gian chạy có thể làm chậm LCP, hoạt ảnh dựa trên JavaScript có thể chặn luồng chính và làm xấu đi INP, đồng thời các thuộc tính bố cục hoạt ảnh hoặc tải hoạt ảnh mà không có khoảng trống dành riêng sẽ gây ra CLS. Giữ nội dung anh hùng độc lập với hoạt ảnh, thời gian chạy tải từng phần dưới màn hình đầu tiên, chuyển đổi hoạt ảnh và độ mờ, đồng thời dành không gian cho mọi phần tử hoạt ảnh.
Ba số liệu và mục tiêu của chúng
Core Web Vitals của Google, được ghi lại trên web.dev, đo lường khả năng tải (Sơn có nội dung lớn nhất, tốt ở mức 2,5 giây trở xuống), khả năng phản hồi (Tương tác với lần sơn tiếp theo, tốt ở 200 mili giây trở xuống) và độ ổn định hình ảnh (Thay đổi bố cục tích lũy, tốt ở mức 0,1 trở xuống), được đo ở phân vị thứ 75 của số lượt tải trang thực.
LCP: không bắt anh hùng chờ hoạt ảnh
Nếu phần tử lớn nhất trên màn hình là hoạt ảnh cần thời gian chạy và tệp để tải trước, LCP sẽ đợi cả hai. Trước tiên, hãy hiển thị hình ảnh tĩnh hoặc văn bản thực, sau đó nâng cao hình ảnh đó và chỉ tải thời gian chạy hoạt ảnh cho nội dung ở gần hoặc dưới màn hình đầu tiên khi cần.
INP: giữ chủ đề chính miễn phí
INP đo lường tốc độ trang phản hồi với các lần nhấn và nhấp chuột. Web.dev giải thích rằng các tác vụ dài trên luồng chính sẽ làm chậm phản hồi với đầu vào. Hoạt ảnh chạy JavaScript phức tạp trên mọi khung hình hoặc nhiều hoạt ảnh bắt đầu cùng một lúc có thể gây ra chính xác điều đó. Ưu tiên chuyển đổi CSS về biến đổi và độ mờ để có các hiệu ứng đơn giản, tạm dừng hoạt ảnh ngoài màn hình và tránh bắt đầu công việc nặng nhọc để đáp ứng với tương tác.
CLS: dự trữ không gian và chuyển đổi hoạt hình
Web.dev khuyên bạn nên sử dụng thuộc tính biến đổi CSS để tạo hiệu ứng động mà không kích hoạt thay đổi bố cục: chia tỷ lệ thay vì thay đổi chiều rộng và chiều cao, dịch thay vì thay đổi trên cùng hoặc bên trái. Cung cấp cho mọi phần tử hoạt ảnh, bao gồm hoạt ảnh dựa trên canvas, kích thước cố định trước khi tải để trang không bị nhảy khi xuất hiện.
Thời gian chạy canvas
Thời gian chạy dựa trên canvas chẳng hạn như trình kết xuất canvas của Lottie, Rive và ExodeUI vẽ bên ngoài DOM, giúp tránh bố cục hoạt động trên mỗi khung hình nhưng thêm thời gian chạy để tải xuống và chạy. Đo lường sự cân bằng cho trang của bạn: tải từng phần thời gian chạy, đặt kích thước canvas trong CSS lên phía trước và thử nghiệm trên điện thoại tầm trung.
Nguyên tắc chính cần nhớ
- Mục tiêu: LCP 2,5 giây, INP 200 ms, CLS 0,1 ở phân vị thứ 75
- Không làm cho phần tử LCP phụ thuộc vào thời gian chạy hoạt ảnh
- Giữ chủ đề chính miễn phí trong quá trình tương tác
- Biến đổi sinh động và độ mờ; dành không gian cho các yếu tố hoạt hình
- Thời gian chạy tải chậm và thử nghiệm trên điện thoại tầm trung
Câu hỏi thường gặp
Nguồn
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev