Bạn có thể tải trước hình ảnh thích ứng. Việc này giúp hình ảnh tải nhanh hơn đáng kể bằng cách giúp trình duyệt xác định đúng hình ảnh từ srcset trước khi hiển thị thẻ img.
Tổng quan về hình ảnh thích ứng
Hỗ trợ trình duyệt
- 73
- 79
- 78
- 17,2
Giả sử bạn đang duyệt web trên một màn hình rộng 300 pixel và trang yêu cầu hình ảnh rộng 1500 pixel. Trang đó đã lãng phí nhiều dữ liệu di động của bạn vì màn hình không thể làm gì với độ phân giải cao hơn đó. Lý tưởng nhất là trình duyệt sẽ tìm nạp phiên bản hình ảnh rộng hơn một chút so với kích thước màn hình, chẳng hạn như 325 pixel. Điều này đảm bảo hình ảnh có độ phân giải cao mà không lãng phí dữ liệu và cho phép hình ảnh tải nhanh hơn.
Hình ảnh thích ứng cho phép các trình duyệt tìm nạp các tài nguyên hình ảnh khác nhau cho các thiết bị khác nhau. Nếu bạn không sử dụng cDN hình ảnh, hãy lưu nhiều kích thước cho mỗi hình ảnh và chỉ định các kích thước đó trong thuộc tính srcset. Giá trị w cho trình duyệt biết chiều rộng của mỗi phiên bản, nhờ đó trình duyệt có thể chọn phiên bản phù hợp cho mọi thiết bị:
<img src="small.jpg" srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w" alt="…">
Tổng quan về việc tải trước
Tải trước cho phép bạn thông báo cho trình duyệt về các tài nguyên quan trọng mà bạn muốn tải càng sớm càng tốt, trước khi được phát hiện trong HTML. Cách này đặc biệt hữu ích đối với các tài nguyên không dễ phát hiện, chẳng hạn như phông chữ có trong biểu định kiểu, hình nền hoặc tài nguyên được tải từ một tập lệnh.
<link rel="preload" as="image" href="important.png">
imagesrcset và imagesizes
Phần tử <link> sử dụng các thuộc tính imagesrcset và imagesizes để tải trước hình ảnh thích ứng. Bạn có thể dùng các thuộc tính này cùng với <link rel="preload">, với cú pháp srcset và sizes dùng trong phần tử <img>.
Ví dụ: nếu bạn muốn tải trước hình ảnh thích ứng được chỉ định bằng:
<img src="wolf.jpg" srcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" sizes="50vw" alt="A rad wolf">
Bạn có thể làm việc đó bằng cách thêm đoạn mã sau vào <head> của HTML:
<link rel="preload" as="image" href="wolf.jpg" imagesrcset="wolf_400px.jpg 400w, wolf_800px.jpg 800w, wolf_1600px.jpg 1600w" imagesizes="50vw">
Thao tác này sẽ bắt đầu một yêu cầu bằng cách sử dụng cùng một logic lựa chọn tài nguyên mà srcset và sizes sử dụng.
Trường hợp sử dụng
Sau đây là một số trường hợp sử dụng cho việc tải trước hình ảnh thích ứng.
Tải trước hình ảnh thích ứng được chèn động
Hãy tưởng tượng bạn đang tải động hình ảnh chính trong một bản trình chiếu và bạn biết hình ảnh nào sẽ hiển thị đầu tiên. Trong trường hợp đó, bạn nên cho thấy hình ảnh đó càng sớm càng tốt chứ không nên chờ tập lệnh trình chiếu tải hình ảnh đó.
Bạn có thể kiểm tra vấn đề này trên trang web bằng thư viện hình ảnh được tải động:
- Mở bản minh hoạ cách tạo trang trình bày này trong thẻ mới.
- Nhấn
Control+Shift+J(hoặcCommand+Option+Jtrên máy Mac) để mở Công cụ cho nhà phát triển. - Nhấp vào thẻ Mạng.
- Trong danh sách thả xuống của mục Điều tiết, chọn 3G nhanh.
- Tắt hộp kiểm Tắt bộ nhớ đệm.
- Tải lại trang.
Việc sử dụng preload ở đây cho phép hình ảnh bắt đầu tải trước để hình ảnh có thể sẵn sàng hiển thị khi trình duyệt cần hiển thị.
Để xem sự khác biệt mà quá trình tải trước tạo ra, hãy kiểm tra cùng một thư viện hình ảnh được tải động, nhưng với hình ảnh đầu tiên được tải trước bằng cách làm theo các bước trong ví dụ đầu tiên.
Tải trước hình nền bằng cách sử dụng tập hợp hình ảnh
Nếu có nhiều hình nền cho các mật độ màn hình khác nhau, thì bạn có thể chỉ định các hình nền đó trong CSS bằng cú pháp image-set. Sau đó, trình duyệt có thể chọn hiển thị quảng cáo dựa trên DPR của màn hình.
background-image: image-set( "cat.png" 1x, "cat-2x.png" 2x);
Vấn đề với hình nền CSS là trình duyệt chỉ phát hiện ra chúng sau khi đã tải xuống và xử lý tất cả CSS trong <head> của trang.
Bạn có thể kiểm tra vấn đề này trên một trang web ví dụ có hình nền thích ứng.
Tính năng tải trước hình ảnh thích ứng giúp bạn tải những hình ảnh đó nhanh hơn.
<link rel="preload" as="image" imagesrcset="cat.png 1x, cat-2x.png 2x">
Việc bỏ thuộc tính href cho phép bạn đảm bảo rằng các trình duyệt không hỗ trợ imagesrcset trên phần tử <link> nhưng vẫn hỗ trợ image-set trong CSS để tải đúng nguồn xuống. Tuy nhiên, chúng sẽ không được hưởng lợi từ việc tải trước trong trường hợp này.
Bạn có thể kiểm tra cách hoạt động của ví dụ trước với hình nền thích ứng tải trước trong bản minh hoạ tải trước nền thích ứng.
Hiệu quả thiết thực của việc tải trước hình ảnh thích ứng
Trên lý thuyết, việc tải trước hình ảnh thích ứng có thể tăng tốc độ hình ảnh, nhưng trên thực tế thì có tác dụng gì?
Để trả lời rằng tôi đã tạo 2 bản sao của cửa hàng PWA minh hoạ: một bản không tải trước hình ảnh và một bản tải trước một số hình ảnh. Vì trang web tải từng phần hình ảnh bằng JavaScript, nên có thể bạn sẽ được hưởng lợi từ việc tải trước các hình ảnh xuất hiện trong khung nhìn ban đầu.
Điều đó đã tạo ra kết quả sau đây cho trường hợp không tải trước và tải trước hình ảnh:
- Start Render (Bắt đầu kết xuất) vẫn giữ nguyên.
- Chỉ số tốc độ cải thiện đôi chút (273 mili giây, vì hình ảnh đến nhanh hơn không chiếm nhiều phần lớn vùng pixel).
- Last Painted Hero đã cải thiện đáng kể, thêm 1,2 giây.
Tải trước và <picture>
Nhóm hoạt động về hiệu suất web đang thảo luận về việc thêm phần tử tải trước tương đương cho srcset và sizes, chứ không phải phần tử <picture> xử lý trường hợp sử dụng "hướng dẫn hình ảnh".
Vẫn còn một số vấn đề kỹ thuật cần giải quyết khi tải trước <picture>, nhưng trong thời gian chờ đợi, có một số giải pháp như sau:
<picture>
<source srcset="small_cat.jpg" media="(max-width: 400px)">
<source srcset="medium_cat.jpg" media="(max-width: 800px)">
<img src="large_cat.jpg">
</picture>
Logic chọn nguồn hình ảnh của phần tử <picture> sẽ lần lượt xem qua các thuộc tính media của các phần tử <source>, tìm giá trị đầu tiên phù hợp và sử dụng tài nguyên đính kèm.
Do tính năng tải trước thích ứng không có khái niệm "đặt hàng" hay "khớp đầu tiên", nên bạn cần chuyển đổi các điểm ngắt thành như sau:
<link rel="preload" href="small_cat.jpg" as="image" media="(max-width: 400px)">
<link rel="preload" href="medium_cat.jpg" as="image" media="(min-width: 400.1px) and (max-width: 800px)">
<link rel="preload" href="large_cat.jpg" as="image" media="(min-width: 800.1px)">
Tải trước và type
Phần tử <picture> cũng hỗ trợ tính năng so khớp trên type đầu tiên, cho phép bạn cung cấp nhiều định dạng hình ảnh để trình duyệt có thể chọn định dạng hình ảnh đầu tiên hỗ trợ. Trường hợp sử dụng này không hỗ trợ tính năng tải trước.
Đối với các trang web sử dụng tính năng so khớp kiểu, bạn nên tránh tải trước. Thay vào đó, trình quét tải trước sẽ nhận hình ảnh từ các phần tử <picture> và <source>. Dù sao thì đây cũng là phương pháp hay nhất, đặc biệt là khi sử dụng Gợi ý về mức độ ưu tiên để giúp sắp xếp mức độ ưu tiên cho hình ảnh thích hợp.
Ảnh hưởng đối với thời gian hiển thị nội dung lớn nhất (LCP)
Vì hình ảnh có thể là Thời gian hiển thị nội dung lớn nhất (LCP), nên việc tải trước hình ảnh có thể cải thiện LCP của trang web.
Bất kể hình ảnh bạn đang tải trước có thích ứng hay không, tính năng tải trước vẫn hoạt động hiệu quả nhất khi không thể tìm thấy tài nguyên hình ảnh trong tải trọng đánh dấu ban đầu. Bạn cũng sẽ được cải thiện LCP nhiều hơn trên các trang web hiển thị mã đánh dấu phía máy khách so với các trang web gửi mã đánh dấu hoàn chỉnh từ máy chủ.