Tìm hiểu về 3 tính năng mới ra mắt hiệu suất web từ 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 phồng trang và làm chậm quá trình 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. Vào mùa hè này, Chrome sẽ ra mắt tính năng hỗ trợ thuộc tính tải, giúp 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à
iframe cho đến khi người dùng cuộn gần chúng. 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. Nói 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 bị trì hoãn và nội dung iframe một chút trước khi nó vào 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 thêm thông tin chi tiết về tính năng tải từng phần để write-up.
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 việc này sẽ khuyến khích thêm nhiều nhà phát triển dùng thử tính năng bổ sung thú vị 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 thực tế 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. Trong đó bao gồm những trang web tận dụng CDN hình ảnh, nén Bratli, phân phát JavaScript thông minh và tìm nạp trước để tăng tốc độ trang. Xem buổi trò chuyện để tìm hiểu thêm nhé :)