Tìm hiểu về 3 tính năng mới ra mắt liên quan đến hiệu suất web tại I/O 2019.
Trong bài nói chuyện "Tốc độ trên 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ợ ngân sách hiệu suất
LightWallet là một tính năng mới trong Lighthouse, bổ sung khả năng hỗ trợ cho ngân sách hiệu suất. Ngân sách hiệu suất thiết lập các tiêu chuẩn cho hiệu suất của trang web. Quan trọng hơn, bạn có thể xác định và khắc phục các lỗi 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. Hướng dẫn này cung cấp thêm thông tin.
Bạn không chắc nên đặt ngân sách bao nhiêu? Hãy thử Công cụ tính 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 chậm hình ảnh và iframe ở cấp trình duyệt đã có trên web
Các trang web thường chứa một số lượng lớn hình ảnh, góp phần vào việc sử dụng dữ liệu, làm phình trang và tải trang chậm hơn. Nhiều hình ảnh trong số này nằm ngoài màn hình, yêu cầu người dùng phải cuộn để xem.
Cho đến nay, bạn cần giải quyết vấn đề tải chậm hình ảnh bằ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ợ
cho thuộc tính loading,
mang đến tính năng tải chậm <img> và <iframe> được chuẩn hoá cho web.
Thuộc tính loading cho phép trình duyệt trì hoãn việc tải hình ảnh và iframe ngoài màn hình cho đến khi người dùng cuộn đến gần chúng. loading hỗ trợ ba giá trị:
lazy: là một lựa chọn phù hợp để tải chậm.eager: không phải là một lựa chọn phù hợp để tải chậm. Tải ngay.auto: trình duyệt sẽ xác định xem có tải chậm 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 đến gần" được giao cho trình duyệt. Nhìn chung, chúng tôi hy vọng rằng các 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ội dung đó xuất hiện trong khung nhìn.
Thuộc tính loading được triển khai sau các cờ trong Chrome Canary. Bạn có thể dùng thử bản minh hoạ này trong Chrome 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 trong bài viết về tính năng tải từng phần.
Google Fonts hiện hỗ trợ font-display dưới dạng 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 tham số chuỗi truy vấn hiển thị:
https://fonts.googleapis.com/css?family=Lobster&display=swap
Phần mô tả font-display cho phép bạn quyết định cách phông chữ web sẽ hiển thị hoặc dự phòng, tuỳ thuộc vào thời gian tải phông chữ. Thuộc tính 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ữ, nhưng thay đổi này giúp bạn không cần phải làm như vậy nữa.
Tài liệu về Google Fonts đã được cập nhật để thêm font-display vào mã nhúng mặc định (như bên dưới). Chúng tôi hy vọng điều này sẽ khuyến khích nhiều nhà phát triển dùng thử tính năng bổ sung thú vị này.
Sau đây là bản minh hoạ trên Glitch về cách sử dụng display với nhiều bộ phông chữ. Hãy thử dùng tính năng mô phỏng mạng của Công cụ cho nhà phát triển để xem tác động của font-display: swap.
Xem thêm
Bài nói 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. Các 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ìm nạp trước để tăng tốc trang. Xem bài nói chuyện để tìm hiểu thêm :)