Có gì mới về Aurora?

Kara Erickson
Kara Erickson
X

Sáng kiến Aurora của Chrome là sự cộng tác giữa Chrome và các khung JavaScript nguồn mở cũng như công cụ nhằm cải thiện trải nghiệm người dùng trên web. Nếu Aurora còn mới đối với bạn, hãy xem bài đăng giới thiệu để tìm hiểu thêm về sứ mệnh và phương pháp của chúng tôi.

Vì chưa công bố lộ trình kể từ năm 2021, nên chúng tôi muốn chia sẻ những việc chúng tôi đã làm cũng như một số dự án thú vị mà chúng tôi dự kiến triển khai trong năm 2023.

Thông tin nổi bật gần đây về dự án

Trong vài năm qua, chúng tôi đã hợp tác với các nền tảng như Next.js, Angular và Nuxt để tối ưu hoá Các chỉ số quan trọng về trang web. Sau đây là một số điểm nổi bật kể từ lần cập nhật gần đây nhất của chúng tôi.

Hình ảnh

Hình ảnh thường là nguyên nhân gây ra vấn đề về hiệu suất. Sau đây là một số phương pháp mà chúng tôi đã triển khai với các bên liên quan của khung nhằm đảm bảo có thể áp dụng các phương pháp hay nhất ngay từ đầu. Nhờ đó, theo mặc định, nhà phát triển có thể cung cấp hình ảnh một cách tối ưu khi họ sử dụng các khung mà chúng tôi hợp tác.

Lệnh hình ảnh góc

Chúng tôi đã phát hành một chỉ thị hình ảnh ổn định cho khung Angular, có trong Angular 15 và được điều chỉnh đặc biệt cho phiên bản cũ 13.4 và 14.3. Lệnh này bật tính năng tải từng phần gốc theo mặc định, thêm gợi ý fetchpriority vào hình ảnh ưu tiên và tự động tạo các thuộc tính srcset thích hợp cho hình ảnh thích ứng.

Tác động: Thử nghiệm trong phòng thí nghiệm Lighthouse được thực hiện trên môi trường đảm bảo chất lượng của Land's End trước và sau khi sử dụng chỉ thị hình ảnh. Trên máy tính, Thời gian hiển thị nội dung lớn nhất (LCP) trung bình của họ giảm từ 12 giây xuống 3 giây, LCP cải thiện 75%.

So sánh cuộn phim: Trang web Một có thẻ hình ảnh gốc so với Trang web 2 có chỉ thị hình ảnh Angular.

Đọc thêm về lệnh này trong bài đăng trên blog của chúng tôi, Tối ưu hoá hình ảnh bằng lệnh hình ảnh Angular.

Cải tiến vào next/image

Chúng tôi cũng đã làm việc với nhóm Next.js để cập nhật thành phần hình ảnh nhằm sử dụng các tính năng mới của trình duyệt như tải từng phần gốc và thuộc tính HTML fetchpriority. Phiên bản mới sẽ có sẵn theo mặc định từ ngày 13 tháng tiếp theo.

Tác động : Đối tác Leboncoin của chúng tôi đã cải thiện LCP của một số trang lên tới 60% bằng cách chuyển sang phiên bản next/image mới.

Phông chữ trên web

Tính năng tối ưu hoá phông chữ trên web có thể không dễ thực hiện, vì bạn cần làm nhiều việc hơn ngoài việc giảm kích thước chuyển của các tài nguyên phông chữ. Phông chữ trên web cũng có thể đóng góp đáng kể vào chỉ số Điểm số tổng hợp về mức thay đổi bố cục (CLS) của trang và việc giảm thiểu những thay đổi về bố cục do việc hoán đổi phông chữ đòi hỏi công sức đáng kể. May mắn là chúng tôi đã hợp tác với các khung để giúp các nhà phát triển web thực hiện công việc này dễ dàng hơn nữa.

Công cụ giúp cải thiện tính năng dự phòng phông chữ trong Next.js, Nuxt và Vite

Chúng tôi đã cung cấp một tính năng trong chương trình tiếp theo 13. Tính năng này giúp điều chỉnh kích thước của phông chữ dự phòng trên trang để phù hợp hơn với phông chữ trên web khi tải. Điều này sẽ làm giảm CLS (Điểm số tổng hợp về mức thay đổi bố cục) liên quan đến phông chữ. Chúng tôi đã chia sẻ phương pháp của mình với nhóm Nuxt và phương pháp đó đã trở thành nguồn cảm hứng cho mô-đun nuxtjs/fontaine và trình bổ trợ Vite fontaine, cả hai đều sử dụng cùng một thuật toán cơ bản.

Tác động: Đối tác Vox Media của chúng tôi đã giảm CLS xuống còn 0 trên The Verge trong phiên bản chính thức trên một số trang sử dụng tính năng này.

Đọc thêm trong các bài đăng trên blog của chúng tôi về cách tạo tính năng dự phòng phông chữ được cải thiện và công cụ khung dự phòng phông chữ.

Mô-đun nuxtjs/google-fonts

Chúng tôi đã hợp tác với nhóm Nuxt để phát hành một mô-đun giúp tối ưu hoá hiệu suất của Google Font. Mô-đun này tự động tải xuống và tự lưu trữ phông chữ của Google để tránh phải đi trọn vòng trên máy chủ, đồng thời cũng hỗ trợ các tuỳ chọn cùng dòng phông chữ.

Tập lệnh của bên thứ ba

JavaScript của bên thứ ba có thể gây ra các vấn đề về hiệu suất và có thể ảnh hưởng đến các chỉ số như Lượt tương tác với Nội dung hiển thị tiếp theo (INP), vì công việc mà các tập lệnh này lên lịch có thể trì hoãn việc chạy các lượt tương tác của người dùng.

Thành phần next/script cho tập lệnh của bên thứ ba

Chúng tôi đã tạo một thành phần tập lệnh cho Next 12 trở lên. Thành phần này mặc định tải tập lệnh sau khi hydrat nước để ngăn chặn đường dẫn quan trọng trong quá trình tải. API này cũng có chế độ trình chạy web tích hợp Partytown để di chuyển tập lệnh hoàn toàn ra khỏi luồng chính.

Tác động: Trong các thử nghiệm trong phòng thí nghiệm Lighthouse, CareerKarma nhận thấy LCP giảm 24% khi sử dụng next/script component khi bật chế độ trình thực thi.

So sánh dải phim cho thấy sự ứng biến trong LCP

Đọc thêm trong bài đăng trên blog của chúng tôi, Tối ưu hóa việc tải tập lệnh của bên thứ ba trong Next.js.

Khác

Quan hệ đối tác của chúng tôi với các nhà phát triển khung không dừng lại ở việc cải thiện Các chỉ số quan trọng về trang web. Chúng tôi cũng đang nỗ lực tận dụng thêm nhiều tính năng mới và giúp các nhà phát triển dễ dàng bắt đầu sử dụng các tính năng tiên tiến trên nền tảng web.

Truy vấn vùng chứa nhiều màu

Chúng tôi đã cập nhật tính năng truy vấn vùng chứa polyfill để hỗ trợ nhiều tính năng CSS hơn và cải thiện hiệu suất của tính năng này trước khi phát hành phiên bản 1.0.

Đọc thêm trong bài đăng trên blog của chúng tôi, Inside the Container Query Polyfill.

Điều gì tiếp theo cho Aurora?

Trong giai đoạn 2023 – 2024, chúng tôi sẽ triển khai một số dự án thú vị để tối ưu hoá Các chỉ số quan trọng về trang web cho các nhà phát triển khung.

Trong năm tới, chúng tôi sẽ tập trung vào những việc sau:

  • Thành phần trình bao bọc của bên thứ ba cho Next.js và Nuxt: Các thành phần trình bao bọc có thể hỗ trợ việc tải thư viện bên thứ ba phổ biến theo cách tối ưu cho LCP và INP. Thả một thẻ thành phần vào DOM để tải bên thứ ba của bạn thay vì thẻ tập lệnh và khung sẽ chọn chiến lược tải tốt nhất. Vui lòng xem phần RFC để biết thêm chi tiết.

  • Kinh nghiệm của nhà phát triển về SSR và phương pháp hydrat hoá: Chúng tôi đã và đang phối hợp chặt chẽ với nhóm Angular trong dự án SSR và dự án hydrat hoá. Mục tiêu của chúng tôi là nâng cấp trải nghiệm sử dụng SSR của nhà phát triển để giúp thêm nhiều ứng dụng được khai thác các lợi ích của LCP. Hãy chú ý theo dõi RFC chính thức về các tính năng thao túng DOM SSR.

  • Chỉ thị hình ảnh góc cạnh và các tính năng của nuxt/image: Chúng tôi đã lên kế hoạch cho Angular nhiều tính năng thú vị, chẳng hạn như tự động tạo gợi ý kết nối trước, công cụ di chuyển để hỗ trợ chuyển đổi từ các phần tử <img> cơ bản, hỗ trợ phần tử <picture> và phần giữ chỗ. Chúng tôi cũng sẽ tham khảo ý kiến của nhóm Nuxt về một số tính năng mới cho nuxt/image.

  • Nghiên cứu INP (khung chéo): Vì Hoạt động tương tác với Sơn tiếp theo (INP) sẽ thay thế Độ trễ đầu vào đầu tiên (FID) vào năm 2024, nên chúng tôi sẽ tăng cường hỗ trợ để cải thiện INP trong các khung. Để làm được điều này, bạn sẽ phải phân tích nguyên nhân gốc của vấn đề liên quan đến INP trong các khung và việc xây dựng giải pháp tích hợp cho người dùng khung nếu có thể.

  • Đồng hồ tốc độ 3: Chúng tôi cũng đang giúp triển khai phiên bản mới của công cụ đo điểm chuẩn Speedometer để thể hiện bối cảnh khung web hiện đại của năm 2023.

Cập nhật thông tin mới nhất

Đánh dấu trang đích của chúng tôi để luôn cập nhật tin tức, các cuộc trò chuyện về công nghệ và bài đăng trên blog mới nhất của nhóm Aurora. Bạn cũng có thể theo dõi chúng tôi trên Twitter: