Sáng kiến Aurora của Chrome là một dự án cộng tác giữa Chrome và các khung và công cụ JavaScript nguồn mở để cải thiện trải nghiệm người dùng trên web. Nếu bạn mới biết đến Aurora, hãy xem bài đăng giới thiệu của chúng tôi để tìm hiểu thêm về sứ mệnh và phương pháp của chúng tôi.
Vì chúng tôi chưa phát hành lộ trình nào kể từ năm 2021, nên chúng tôi muốn chia sẻ những gì chúng tôi đã làm và một số dự án thú vị mà chúng tôi dự định triển khai trong năm 2023.
Điểm nổi bật gần đây của dự án
Trong vài năm qua, chúng tôi đã hợp tác với các khung như Next.js, Angular và Nuxt để tối ưu hoá Chỉ số quan trọng chính của 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.
Hình ảnh
Hình ảnh thường là nguồ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 đang theo đuổi với các bên liên quan đến khung để đảm bảo rằng các phương pháp hay nhất luôn sẵn sàng, nhờ đó, nhà phát triển có thể phân phối hình ảnh một cách tối ưu theo mặc định khi sử dụng các khung mà chúng tôi đang hợp tác.
Chỉ thị hình ảnh Angular
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 cho phiên bản cũ là 13.4 và 14.3. Theo mặc định, lệnh này bật tính năng tải lười gốc, 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: Kiểm thử 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 lệnh 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, tức là cải thiện 75% về LCP.
Đọ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 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ính năng tải lười gốc và thuộc tính HTML fetchpriority. Phiên bản mới có sẵn theo mặc định từ Next 13.
Mức tác động : Đối tác Leboncoin của chúng tôi đã có thể cải thiện LCP của một số trang lên đến 60% bằng cách chuyển sang phiên bản mới của next/image.
Phông chữ trên web
Việc tối ưu hoá phông chữ web có thể khó khăn vì không chỉ đơn thuần là giảm kích thước chuyển tài nguyên phông chữ. Phông chữ web cũng có thể đóng góp đáng kể vào chỉ số Mức thay đổi bố cục tích luỹ (CLS) của trang và bạn cần phải nỗ lực đáng kể để giảm thiểu mức thay đổi bố cục do việc hoán đổi phông chữ. May mắn thay, chúng tôi đã hợp tác với các khung để giúp nhà phát triển web thực hiện nhiệm vụ này dễ dàng hơn.
Công cụ cải thiện tính năng dự phòng phông chữ trong Next.js, Nuxt và Vite
Chúng tôi đã phát hành một tính năng trong Next 13 giúp điều chỉnh kích thước phông chữ dự phòng của trang để căn chỉnh tốt hơn với phông chữ web khi tải. Điều này làm giảm CLS 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 này đã 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.
Mức tác động: Đối tác Vox Media của chúng tôi đã có thể giảm CLS trên The Verge xuống còn 0 trong bản phát hành chính thức trên một số trang bằng cách sử dụng tính năng này.
Hãy đọc thêm trong các bài đăng trên blog của chúng tôi về cách tạo phông chữ dự phòng được cải thiện và các công cụ khung phông chữ dự phòng.
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 nhằm tối ưu hoá hiệu suất của Phông chữ Google. Mô-đun này tự động tải xuống và tự lưu trữ phông chữ Google để tránh phải thực hiện thêm một lượt truy cập máy chủ và cũng hỗ trợ các tuỳ chọn nội tuyến phông chữ.
Tập lệnh của bên thứ ba
JavaScript của bên thứ ba có thể là nguồn gây ra các vấn đề về hiệu suất và có thể ảnh hưởng đến các chỉ số như Số lượt tương tác đến lượt vẽ 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, mặc định là tải các tập lệnh sau khi hydrat hoá để ngăn chặn việc chặn đường dẫn quan trọng trong quá trình tải. WebView cũng có chế độ worker web tích hợp Partytown để di chuyển hoàn toàn tập lệnh ra khỏi luồng chính.
Mức tác động: Trong các thử nghiệm trong phòng thí nghiệm của Lighthouse, CareerKarma đã giảm 24% LCP bằng cách sử dụng next/script component với chế độ worker được bật.
Hãy đọc thêm trong bài đăng trên blog của chúng tôi, Tối ưu hoá 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 chỉ dừng lại ở việc cải thiện Chỉ số quan trọng chính của trang web. Chúng tôi cũng đang nỗ lực tận dụng nhiều tính năng mới hơn và giúp nhà phát triển dễ dàng bắt đầu sử dụng các tính năng tiên tiến nhất của nền tảng web.
Tìm kiếm vùng chứa polyfill
Chúng tôi đã cập nhật polyfill truy vấn vùng chứa để hỗ trợ nhiều tính năng CSS hơn và cải thiện hiệu suất của polyfill này, hướng đến bản phát hành 1.0.
Đọc thêm trong bài đăng trên blog của chúng tôi, Bên trong Polyfill truy vấn vùng chứa.
Aurora sẽ làm gì tiếp theo?
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á Chỉ số quan trọng chính của 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: Thành phần trình bao bọc có thể hỗ trợ tải các thư viện phổ biến của bên thứ ba 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 thay vì thẻ tập lệnh và khung sẽ chọn chiến lược tải tốt nhất. Hãy xem RFC để biết thêm thông tin chi tiết.
Trải nghiệm của nhà phát triển về SSR và tính năng làm mới của Angular: Chúng tôi đã phối hợp chặt chẽ với nhóm Angular về dự án SSR và làm mới. Chúng tôi tập trung nâng cấp trải nghiệm của nhà phát triển khi sử dụng SSR, cho phép nhiều ứng dụng tận dụng các lợi ích của LCP hơn. Hãy chú ý theo dõi RFC chính thức về các tính năng thao tác DOM SSR.
Tính năng
nuxt/imagevà lệnh ảnh Angular: Chúng tôi dự định cung cấp một số tính năng thú vị cho Angular, chẳng hạn như tạo gợi ý kết nối trước tự động, công cụ di chuyển để hỗ trợ quá trình 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 chonuxt/image.Nghiên cứu về INP (trên nhiều khung): Vì Lượt tương tác đến nội dung hiển thị 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 đang tăng cường hỗ trợ để cải thiện INP trong các khung. Việc này sẽ bao gồm việc phân tích nguyên nhân gốc rễ của các vấn đề về INP trong khung và tạo các giải pháp tích hợp cho người dùng khung nếu có thể.
Speedometer 3: Chúng tôi cũng đang giúp triển khai thế hệ tiếp theo 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 để nắm bắt tin tức, bài nói 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:
- Kara Erickson – karaforthewin@
- Houssein Djirdeh – hdjirdeh@
- Katie Hempenius – katiehempenius@
- Alex Castle – atcastle@
- Gerald Monaco – devknoll@
- Janicklas Ralph James – janicklas@
- Thorsten Kober – tckober@