Tìm hiểu về 3 tính năng mới về hiệu suất web được ra mắt tại I/O 2019.
Trong buổi trò chuyện "Tốc độ ở quy mô lớn" tại Google I/O 2019, chúng tôi đã công bố 3 điều mà chúng tôi hy vọng sẽ cải thiện hiệu suất web trong năm tới.
Lighthouse hiện hỗ trợ tính năng Ngân sách hiệu suất
LightWallet là một tính năng mới trong Lighthouse, giúp hỗ trợ thêm ngân sách hiệu suất. Ngân sách hiệu suất thiết lập tiêu chuẩn về hiệu suất của trang web. Quan trọng hơn, các tính năng này giúp bạn dễ dàng xác định và khắc phục các trường hợp hồi quy về hiệu suất trước khi phát hành.
LightWallet có trong phiên bản mới nhất của Lighthouse CLI và chỉ mất vài phút để thiết lập. Những hướng dẫn này cung cấp thêm thông tin.
Bạn không biết nên đặt ngân sách bao nhiêu? Hãy thử Công cụ tính toán ngân sách hiệu suất thử nghiệm của chúng tôi. Công cụ này có thể tạo cấu hình ngân sách tương thích với LightWallet.
Tính năng tải từng phần hình ảnh và iframe ở cấp trình duyệt được cung cấp trên web
Các trang web thường chứa một lượng lớn hình ảnh, điều này góp phần làm tăng mức sử dụng dữ liệu, làm trang web trở nên cồng kềnh và làm chậm tốc độ tải trang. Nhiều hình ảnh trong số này nằm ngoài màn hình, đòi hỏi người dùng phải cuộn để xem.
Cho đến nay, bạn cần giải quyết việc tải hình ảnh từng phần bằng cách sử dụng thư viện JavaScript, nhưng điều đó có thể sớm thay đổi. Mùa hè này, Chrome sẽ ra mắt tính năng hỗ trợ thuộc tính tải. Tính năng này sẽ mang tính năng tải lười <img>
và <iframe>
được chuẩn hoá đến web.
Thuộc tính loading
cho phép trình duyệt trì hoãn việc tải hình ảnh ngoài màn hình và khung iframe cho đến khi người dùng cuộn đến gần các hình ảnh đó. loading
hỗ trợ ba giá trị:
lazy
: là một ứng cử viên phù hợp để tải lười.eager
: không phải là ứng viên phù hợp để tải lười. Tải ngay.auto
: trình duyệt sẽ xác định xem có tải lười hay không.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
Phương pháp phỏng đoán chính xác cho "khi người dùng cuộn gần" là do trình duyệt quyết định. Nhìn chung, chúng tôi hy vọng rằng trình duyệt sẽ bắt đầu tìm nạp hình ảnh và nội dung iframe bị trì hoãn một chút trước khi nội dung đó xuất hiện trong khung nhìn.
Thuộc tính loading
được triển khai phía sau các cờ trong Chrome Canary. Bạn có thể thử bản minh hoạ này trong Chrome phiên bản 75 trở lên khi bật cờ about://flags/#enable-lazy-image-loading
và about://flags/#enable-lazy-frame-loading
.
Bạn có thể xem bài viết về tính năng tải từng phần để biết thêm thông tin chi tiết.
Google Fonts hiện hỗ trợ font-display làm tham số truy vấn
Chúng tôi đã thông báo rằng tính năng hỗ trợ font-display hiện đã có trong phiên bản chính thức cho tất cả Google Fonts thông qua thông số chuỗi truy vấn hiển thị:
https://fonts.googleapis.com/css?family=Lobster&display=swap
Chỉ số mô tả font-display
cho phép bạn quyết định cách phông chữ web hiển thị hoặc dự phòng, tuỳ thuộc vào thời gian tải phông chữ. Phương thức này hỗ trợ một số giá trị bao gồm auto
, block
, swap
, fallback
và optional
.
Trước đây, cách duy nhất để chỉ định font-display
cho phông chữ web từ Google Fonts là tự lưu trữ các phông chữ đó, nhưng thay đổi này giúp bạn không cần phải làm như vậy.
Tài liệu về Google Fonts đã được cập nhật để thêm font-display
vào các mã nhúng mặc định (như trong phần dưới đây). Chúng tôi hy vọng điều này sẽ khuyến khích nhiều nhà phát triển hơn thử nghiệm tính năng mới này.
Dưới đây là bản minh hoạ trên Glitch về cách sử dụng màn hình với nhiều bộ phông chữ. Hãy thử tính năng này bằng mô phỏng mạng DevTools để xem tác động của font-display: swap
.
Xem thêm
Buổi trò chuyện của chúng tôi cũng đề cập đến một số nghiên cứu điển hình về việc sử dụng các mẫu hiệu suất nâng cao để cải thiện trải nghiệm người dùng. Những trang web này bao gồm các trang web tận dụng CDN hình ảnh, nén Brotli, phân phát JavaScript thông minh và tải trước để tăng tốc các trang của họ. Xem buổi trò chuyện để tìm hiểu thêm nhé :)