Trang này được dịch bởi Cloud Translation API.

Tải trước hình ảnh thích ứng

Barry Pollard

Yoav Weiss

Bạn có thể tải trước hình ảnh thích ứng để hình ảnh có thể 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

Giả sử bạn đang duyệt web trên màn hình rộng 300 pixel và trang yêu cầu hình ảnh rộng 1500 pixel. Trang đó đã làm lãng phí rất nhiều vì màn hình của bạn không thể thực hiện bất kỳ thao tác nào với độ phân giải cao hơn mức đó. Tốt nhất là trình duyệt sẽ tìm nạp phiên bản hình ảnh chỉ là một phần nhỏ rộng hơn kích thước màn hình, ví dụ: 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, đồng thời 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 không Bạn có thể sử dụng CDN hình ảnh, lưu nhiều kích thước cho mỗi hình ảnh và chỉ định chúng trong thuộc tính srcset. Giá trị w cho biết cho trình duyệt xem chiều rộng của từng phiên bản để công cụ 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ề tải trước

Hỗ trợ trình duyệt

Nguồn

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 chúng được phát hiện trong HTML. Điều này đặc biệt hữu ích đối với các tài nguyên chưa sẵn sà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 cá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. Sử dụng kết hợp <link rel="preload">, với cú pháp srcset và sizes được sử dụng trong hàm 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 này 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ẽ khởi tạo 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 srcset và sizes dùng.

Trường hợp sử dụng

Sau đây là một số trường hợp sử dụng để 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 tự động hình ảnh chính trong 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 đó, có thể bạn nên hiển thị hình ảnh đó càng sớm càng tốt mà không phải chờ tập lệnh trình chiếu tải tệp đó.

Bạn có thể kiểm tra vấn đề này trên một trang web bằng thư viện hình ảnh được tải động:

Mở bản minh hoạ trình chiếu này trong một thẻ mới.
Nhấn Control+Shift+J (hoặc Command+Option+J trê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 Điều tiết, chọn 3G nhanh.
Bỏ chọn hộp kiểm Disable cache.
Tải lại trang.

Bảng điều khiển Mạng Công cụ của Chrome cho nhà phát triển hiển thị một thác nước có tài nguyên JPEG chỉ bắt đầu tải xuống sau một số đoạn JavaScript. — Nếu không tải trước, hình ảnh sẽ bắt đầu tải sau khi trình duyệt chạy xong tập lệnh. Đối với hình ảnh đầu tiên, độ trễ đó là không cần thiết.

Việc sử dụng preload ở đây sẽ cho phép hình ảnh bắt đầu tải trước, do đó sẵn sàng hiển thị khi trình duyệt cần hiển thị quảng cáo.

Bảng điều khiển Mạng Công cụ của Chrome cho nhà phát triển hiển thị một thác nước với một tài nguyên JPEG đang tải xuống song song với một số JavaScript. — Việc tải trước hình ảnh đầu tiên cho phép hình ảnh bắt đầu tải cùng lúc với tập lệnh.

Để thấy 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 phiên bản được tải động thư viện hình ảnh 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 nhóm hình ảnh

Nếu có các hình nền khác nhau cho các mật độ màn hình khác nhau, bạn có thể hãy chỉ định chúng trong CSS bằng cú pháp image-set. Sau đó, trình duyệt có thể chọn màn hình nào để hiển thị dựa trên DPR.

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 phát hiện ra chúng chỉ sau khi hệ thống 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 mẫu bằng hình nền thích ứng.

Bảng điều khiển Mạng Công cụ của Chrome cho nhà phát triển hiển thị một thác nước có tài nguyên JPEG chỉ bắt đầu tải xuống sau một số CSS. — Trong ví dụ này, quá trình tải hình ảnh xuống chỉ bắt đầu khi CSS được tải xuống hoàn toàn, gây ra độ trễ không cần thiết đối với màn hình hiển thị của hình ảnh.

Tính năng tải trước hình ảnh thích ứng cho phé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 loại bỏ thuộc tính href giú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 có hỗ trợ image-set trong CSS tải xuống đúng nguồn. Tuy nhiên, tính năng tải trước trong trường hợp này.

Bạn có thể kiểm tra xem ví dụ trước hoạt động như thế nào với một ứng dụng thích ứng đã tải trước hình nền trong bản minh hoạ tải trước nền thích ứng.

Bảng điều khiển Mạng Công cụ của Chrome cho nhà phát triển hiển thị một thác nước với tài nguyên JPEG đang tải xuống trong parrallel cho một số CSS. — Ở đây, hình ảnh và CSS bắt đầu tải xuống cùng một lúc, cho phép hình ảnh tải nhanh hơn.

Hiệu quả thực tế của việc tải trước hình ảnh thích ứng

Theo lý thuyết, việc tải trước hình ảnh thích ứng có thể giúp tăng tốc độ hình ảnh, nhưng điều đó có tác dụng gì làm trong thực tế?

Để trả lời rằng tôi đã tạo hai bản sao của một cửa hàng ứng dụng web tiến bộ (PWA), hãy làm như sau: một định dạng không tải trước hình ảnh và một tuỳ chọn tải trước một số tuỳ chọn trong số đó. Do trang web tải từng phần hình ảnh bằng JavaScript, nên trang web này có thể hưởng lợi từ tải trước các mô-đun xuất hiện trong khung nhìn ban đầu.

Điều đó mang lại các kết quả sau đây cho không tải trước và để tải trước hình ảnh:

Bắt đầu kết xuất vẫn giữ nguyên.
Chỉ số tốc độ được cải thiện một chút (273 mili giây, vì hình ảnh đến nhanh hơn không chiếm một đoạn lớn của vùng pixel).
Ảnh chính được vẽ cuối cùng được cải thiện đáng kể, thêm 1,2 giây.

Phép so sánh cuộn phim trên WebPageTest cho thấy hình ảnh được tải trước sẽ hiển thị nhanh hơn khoảng 1,5 giây. — Hình ảnh xuất hiện nhanh hơn đáng kể khi tải trước, giúp cải thiện đáng kể trải nghiệm người dùng.

Tải trước và `<picture>`

Nhóm làm việc về hiệu suất web đang thảo luận về việc thêm một tuỳ chọn tải trước tương đương cho srcset và sizes, nhưng không phải là <picture> là phần tử xử lý "hướng nghệ thuật" trường hợp sử dụng.

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, vẫn có cách giải quyết:

<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ẽ vượt qua media của các phần tử <source> theo thứ tự, tìm thuộc tính đầu tiên khớp và sử dụng tài nguyên đính kèm.

Bởi vì tính năng tải trước thích ứng không có khái niệm "đơn đặt hàng" hoặc "lần đầu tiên", bạn sẽ cần dịch các điểm ngắt thành nội dung 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ợ so khớp trên type đầu tiên để bạn có thể cung cấp các định dạng hình ảnh khác nhau để trình duyệt có thể chọn định dạng hình ảnh đầu tiên mà nó hỗ trợ. Tính năng tải trước không hỗ trợ trường hợp sử dụng này.

Đố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 sử dụng tính năng tải trước và thay vào đó, trình quét tải trước chọn hình ảnh từ Thay vào đó, 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 tính năng Tìm nạp mức độ ưu tiên để được trợ giúp xác định mức độ ưu tiên hình ảnh thích hợp.

Ảnh hưởng đến nội dung lớn nhất hiển thị (LCP)

Vì hình ảnh có thể là ứng cử viên có Nội dung lớn nhất hiển thị (LCP), việc tải trước quảng cáo 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, thì 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 mã đá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 trên ứng dụng so với các trang web gửi đánh dấu hoàn chỉnh từ máy chủ.