Tìm hiểu về ba lần ra mắt các tính năng mới dựa trên hiệu suất web tại I/O 2019.
Trong cuộc nói chuyện về"Tốc độ theo quy mô" 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ẽ giúp cải thiện hiệu suất web trong năm tới.
Lighthouse hiện đã hỗ trợ tính năng Lập ngân sách hiệu suất
LightWallet là một tính năng mới trong Lighthouse hỗ trợ thêm 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 về hiệu suất của trang web. Quan trọng hơn, các định dạng này giúp bạn dễ dàng xác định và khắc phục trường hợp hồi quy hiệu suất trước khi gửi.
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 dùng thử Công cụ tính ngân sách hiệu suất để 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 iframe và hình ảnh cấp trình duyệt đã có mặt 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 làm tăng mức sử dụng dữ liệu, kích thước trang và tốc độ 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 từng phần bằng cách sử dụng thư viện JavaScript. Tuy nhiên, điều này có thể sẽ 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, giúp tải từng phần <img> và <iframe> đã chuẩn hoá lên 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 các hình ảnh đó. loading hỗ trợ 3 giá trị:
lazy: là một đề xuất phù hợp để tải từng phần.eager: không phải là một đề xuất phù hợp để tải từng phần. Tải ngay lập tức.auto: trình duyệt sẽ xác định xem có tải từng phần hay không.
<img src="io2019.jpg" loading="lazy" alt="..." />
<iframe src="video-player.html" loading="lazy"></iframe>
Thông tin phỏng đoán chính xác cho "khi người dùng cuộn gần" sẽ do trình duyệt phụ trách. 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 bị trì hoãn và nội dung iframe một chút trước khi đưa vào khung nhìn.
Thuộc tính loading được triển khai sau cờ trong Chrome Canary. Bạn có thể
dùng thử bản minh hoạ này trong Chrome
75 trở lên sau 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 để ghi lại tính năng tải từng phần.
Google Fonts hiện hỗ trợ tính năng hiển thị phông chữ 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ợ dành cho font-display hiện đã được hỗ trợ trong phiên bản chính thức cho tất cả Google Fonts thông qua tham số display query-string (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 sẽ hiển thị hoặc dự phòng, tuỳ thuộc vào thời gian tải. Công 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ữ trên web trong Google Fonts là tự lưu trữ các phông chữ đó, nhưng sự thay đổi này khiến bạn không cần thực hiện việc này.
Tài liệu về Google Fonts đã được cập nhật để đưa font-display vào các nội dung nhúng mã mặc định (như bên dưới). Chúng tôi hy vọng điều này sẽ khuyến khích thêm nhiều nhà phát triển thử nghiệm tiện ích bổ sung thú vị này.
Đây là bản minh hoạ về lỗi trục trặc khi sử dụng màn hình có nhiều bộ phông chữ. Hãy dùng thử bằng tính nă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 ta 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 các trang web tận dụng CDN hình ảnh, tính năng nén Brotli, phân phát JavaScript thông minh và tìm nạp trước để tăng tốc độ trang. Xem cuộc trò chuyện để tìm hiểu thêm :)