Vào tháng 5 năm 2022, nhóm Aurora và Angular đã thông báo rằng họ sẽ cộng tác trên một lệnh hình ảnh cho Angular. Gần đây, chúng tôi đã phát hành hướng dẫn này cho bản dùng thử dành cho nhà phát triển trong Angular phiên bản 14.2. Bài đăng này trình bày cách lệnh hình ảnh mới, NgOptimizedImage, hỗ trợ tối ưu hoá hình ảnh trong Angular.
Thông tin khái quát
Hình ảnh là một thành phần phổ biến và quan trọng trong trải nghiệm người dùng trên web, với 99,9% trang web tạo ra yêu cầu cho một hoặc nhiều hình ảnh. Hình ảnh cũng là yếu tố đóng góp đáng kể nhất vào kích thước trang, chiếm trung bình 982 kilobyte mỗi trang.
Do số lượng và kích thước ngày càng tăng, hình ảnh có thể cản trở hiệu suất của trang web và ảnh hưởng đến các chỉ số Các chỉ số quan trọng về trang web. Đối với 79,4% trang dành cho máy tính, hình ảnh là phần tử Thời gian hiển thị nội dung lớn nhất (LCP) trong năm 2021. Do đó, việc theo đuổi hình ảnh được tối ưu hoá đã trở thành một nỗ lực không ngừng của nhiều người.
Nhóm Aurora tin tưởng vào việc tận dụng sức mạnh của các khung để cung cấp các giải pháp tích hợp sẵn cho các thách thức thường gặp của nhà phát triển. Bước đầu tiên của họ trong lĩnh vực tối ưu hoá hình ảnh là thành phần hình ảnh Next.js. Họ coi thành phần này là một nền tảng thử nghiệm để xem việc cải thiện trải nghiệm nhà phát triển (DX) về việc tối ưu hoá hình ảnh có thể giúp tăng hiệu suất cho nhiều ứng dụng sử dụng khung hơn hay không.
Tập hợp kết quả đầu tiên từ người dùng Next.js Leboncoin rất đáng khích lệ. Leboncoin đã cải thiện đáng kể chỉ số LCP (từ 2,4 giây xuống còn 1,7 giây) sau khi bắt đầu sử dụng next/image. Việc sử dụng next/image sau đó trong cộng đồng đã góp phần làm tăng số lượng gốc Next.js đáp ứng ngưỡng LCP. Chẳng bao lâu sau, có yêu cầu về các tính năng tương tự trong các khung khác, một trong số đó là Angular.
Do đó, Aurora đã tham khảo ý kiến của Angular và Nuxt để tạo nguyên mẫu thành phần hình ảnh cho các khung này. Thành phần hình ảnh Nuxt được phát hành vào năm ngoái. Giờ đây, lệnh hình ảnh Angular (NgOptimizedImage) đã được phát hành để đưa các tuỳ chọn tối ưu hoá hình ảnh mặc định vào Angular.
Cơ hội
Angular là một trong những khung JavaScript hàng đầu mà các nhà phát triển sử dụng hiện nay. Hơn 50 nghìn nguồn gốc được HTTPArchive thu thập thông tin trên thiết bị di động và có gần 3 triệu lượt tải xuống hằng tuần trên NPM.