Tối ưu hoá hình nền CSS bằng truy vấn nội dung nghe nhìn

Demián Renzulli
Demián Renzulli
X GitHub Nhiễu

Nhiều trang web yêu cầu các tài nguyên có dung lượng lớn (như hình ảnh) không được tối ưu hoá cho một số màn hình nhất định và gửi các tệp CSS lớn có chứa các kiểu mà một số thiết bị sẽ không bao giờ sử dụng. Sử dụng truy vấn phương tiện là một kỹ thuật phổ biến để phân phối các biểu định kiểu và tài sản được thiết kế riêng cho các màn hình khác nhau nhằm giảm lượng dữ liệu được chuyển đến người dùng và cải thiện hiệu suất tải trang. Hướng dẫn này trình bày cho bạn cách sử dụng các cụm từ tìm kiếm về nội dung nghe nhìn để gửi những hình ảnh có kích thước chỉ bằng mức cần thiết, một kỹ thuật thường được gọi là hình ảnh thích ứng.

Điều kiện tiên quyết

Hướng dẫn này giả định rằng bạn đã quen thuộc với Công cụ của Chrome cho nhà phát triển. Bạn có thể sử dụng Công cụ cho nhà phát triển của một trình duyệt khác nếu muốn. Bạn chỉ cần ánh xạ ảnh chụp màn hình Công cụ của Chrome cho nhà phát triển trong hướng dẫn này trở lại với các tính năng có liên quan trong trình duyệt mà bạn chọn.

Tìm hiểu về hình nền thích ứng

Trước tiên, hãy phân tích lưu lượng truy cập mạng của bản minh hoạ chưa được tối ưu hoá:

  1. Mở bản minh hoạ chưa được tối ưu hoá trong thẻ Chrome mới.
  2. Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
  3. Nhấp vào thẻ Mạng.
  4. Tải lại trang.

Bạn sẽ thấy hình ảnh duy nhất đang được yêu cầu là background-desktop.jpg, có kích thước 1006KB:

Theo dõi mạng Công cụ cho nhà phát triển cho hình nền chưa được tối ưu hoá.

Đổi kích thước cửa sổ trình duyệt và chú ý rằng Nhật ký mạng không hiển thị bất kỳ yêu cầu mới nào đang được trang thực hiện. Điều này có nghĩa là cùng một nền hình ảnh đang được sử dụng cho mọi kích thước màn hình.

Bạn có thể xem các kiểu kiểm soát hình nền trong style.css:

body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}

Dưới đây là ý nghĩa của từng thuộc tính được sử dụng:

  • background-position: center center: Căn giữa hình ảnh theo chiều dọc và chiều ngang.
  • background-repeat: no-repeat: Chỉ hiện hình ảnh một lần.
  • background-attachment: fixed: Tránh làm cho hình nền cuộn.
  • background-size: cover: Đổi kích thước hình ảnh để bao phủ toàn bộ vùng chứa.
  • background-image: url(images/background-desktop.jpg): URL của hình ảnh.

Khi được kết hợp, các kiểu này cho trình duyệt biết phải điều chỉnh hình nền cho phù hợp với các chiều cao và chiều rộng khác nhau của màn hình. Đây là bước đầu tiên để có được nền thích ứng.

Việc sử dụng một hình nền duy nhất cho tất cả kích thước màn hình có một số hạn chế như sau:

  • Số lượng byte được gửi như nhau, bất kể kích thước màn hình là bao nhiêu, ngay cả khi nền hình ảnh nhỏ hơn và nhẹ hơn đối với một số thiết bị như điện thoại cũng sẽ đẹp. Nhìn chung, bạn nên gửi hình ảnh nhỏ nhất có thể mà vẫn hiển thị đẹp mắt trên màn hình của người dùng để cải thiện hiệu suất và tiết kiệm dữ liệu người dùng.
  • Ở các thiết bị nhỏ hơn, hình ảnh sẽ bị kéo giãn hoặc bị cắt để che phủ toàn bộ màn hình, từ đó có thể ẩn những phần liên quan của nền đối với người dùng.

Trong phần tiếp theo, bạn sẽ tìm hiểu cách áp dụng một biện pháp tối ưu hoá để tải các hình nền khác nhau, tuỳ theo thiết bị của người dùng.

Sử dụng truy vấn phương tiện

Sử dụng truy vấn phương tiện là một kỹ thuật phổ biến để khai báo các biểu định kiểu sẽ chỉ áp dụng cho một số loại nội dung nghe nhìn hoặc thiết bị nhất định. Triển khai các quy tắc này bằng cách dùng quy tắc@media, cho phép bạn xác định một tập hợp các điểm ngắt, trong đó các kiểu cụ thể được xác định. Khi đáp ứng các điều kiện đã xác định theo quy tắc @media (ví dụ: một chiều rộng màn hình nhất định), nhóm kiểu được xác định bên trong điểm ngắt sẽ được áp dụng.

Bạn có thể làm theo các bước sau để áp dụng các truy vấn nội dung nghe nhìn cho trang web để sử dụng nhiều hình ảnh, tuỳ thuộc vào chiều rộng tối đa của thiết bị yêu cầu trang.

  • Trong style.css, hãy xoá dòng chứa URL hình nền:
body {
  background-position: center center;
  background-attachment: fixed;
  background-repeat: no-repeat; background-size: cover;
  background-image: url(images/background-desktop.jpg);
}
  • Tiếp theo, hãy tạo một điểm ngắt cho từng chiều rộng màn hình, dựa trên các kích thước phổ biến tính bằng pixel mà màn hình thiết bị di động, máy tính bảng và máy tính thường có:

Đối với thiết bị di động:

@media (max-width: 480px) {
    body {
        background-image: url(images/background-mobile.jpg);
    }
}

Đối với máy tính bảng:

@media (min-width: 481px) and (max-width: 1024px) {
    body {
        background-image: url(images/background-tablet.jpg);
    }
}

Đối với thiết bị máy tính:

@media (min-width: 1025px) {
    body {
        background-image: url(images/background-desktop.jpg);
   }
}

Mở phiên bản style.css được tối ưu hóa trong trình duyệt của bạn để xem các thay đổi được thực hiện.

Đo lường các thiết bị khác nhau

Tiếp theo, hãy trực quan hoá trang web kết quả ở nhiều kích thước màn hình và trên các thiết bị di động được mô phỏng:

  1. Mở trang web được tối ưu hoá trong thẻ Chrome mới.
  2. Thu hẹp khung nhìn (nhỏ hơn 480px).
  3. Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
  4. Nhấp vào thẻ Mạng.
  5. Tải lại trang. Hãy lưu ý cách hình ảnh background-mobile.jpg được yêu cầu.
  6. Làm cho khung nhìn rộng hơn. Khi phạm vi rộng hơn 480px, hãy chú ý đến cách background-tablet.jpg được yêu cầu. Khi phạm vi rộng hơn 1025px, hãy chú ý đến cách background-desktop.jpg được yêu cầu.

Khi chiều rộng của màn hình trình duyệt thay đổi, hình ảnh mới sẽ được yêu cầu.

Cụ thể, khi chiều rộng thấp hơn giá trị được xác định trong điểm ngắt trên thiết bị di động (480px), bạn sẽ thấy Nhật ký mạng sau:

Theo dõi mạng Công cụ cho nhà phát triển cho hình nền được tối ưu hoá.

Kích thước của nền mới cho thiết bị di động nhỏ hơn 67% so với nền dành cho máy tính.

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

Các phần tử có hình nền CSS được coi là ứng cử viên cho Thời gian hiển thị nội dung lớn nhất (LCP). Tuy nhiên, trình quét tải trước trình duyệt không thể phát hiện hình nền CSS. Điều này có nghĩa là bạn có thể trì hoãn LCP của trang web nếu không cẩn thận.

Lựa chọn đầu tiên bạn nên cân nhắc là liệu hình ảnh ứng viên LCP của bạn có thể hoạt động trong phần tử <img> có các thuộc tính srcset và sizes để phản hồi hay không. Trình duyệt tải trước trình quét sẽ khám phá các phần tử <img> và gửi yêu cầu cho các phần tử đó trong khi trình phân tích cú pháp bị chặn khi kết xuất.

Nếu bạn không thể (hoặc không muốn) tránh sử dụng hình nền CSS, lựa chọn thứ hai sẽ là tải trước hình ảnh thích ứng để đảm bảo bạn tải trước hình ảnh phù hợp với kích thước khung nhìn phù hợp. Các phần tử <link> media, imagesrcset và imagesizes sẽ gợi ý cho trình duyệt rằng một gợi ý về tài nguyên nhất định chỉ áp dụng trong một số điều kiện khung nhìn nhất định, tránh tình trạng lãng phí tải trước khi bạn chỉ muốn tải một tài nguyên phù hợp với khung nhìn hiện tại.

Tóm tắt

Trong hướng dẫn này, bạn đã tìm hiểu cách áp dụng truy vấn phương tiện để yêu cầu hình nền được điều chỉnh cho phù hợp với kích thước màn hình cụ thể và tiết kiệm byte khi truy cập trang web trên các thiết bị nhỏ hơn, như điện thoại di động. Bạn đã sử dụng quy tắc @media để triển khai nền thích ứng. Kỹ thuật này được tất cả trình duyệt hỗ trợ rộng rãi. Tính năng CSS mới: image-set(), có thể được sử dụng cho cùng một mục đích với ít dòng mã hơn. Tại thời điểm chúng tôi viết bài này, tính năng này không được hỗ trợ trong tất cả các trình duyệt, nhưng bạn có thể muốn theo dõi quá trình phát triển của tình hình sử dụng, vì nó có thể là một giải pháp thay thế thú vị cho kỹ thuật này.