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

Demian Renzulli (Demian Renzulli)
Demian Renzulli

Nhiều trang web yêu cầu các tài nguyên nặng (như hình ảnh) chưa đượ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 biểu định kiểu và nội dung phù hợp đến các màn hình khác nhau nhằm giảm lượng dữ liệu được chuyển tới 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 cách sử dụng các truy vấn nội dung nghe nhìn để gửi hình ảnh chỉ lớn đến 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. Nếu muốn, bạn có thể sử dụng Công cụ cho nhà phát triển của trình duyệt khác. 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 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à lưu ý 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 tất cả các 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 thị 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 chiều cao và chiều rộng màn hình khác nhau. Đâ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ả các kích thước màn hình có một số hạn chế:

  • Số lượng byte được gửi như nhau, bất kể kích thước màn hình, ngay cả khi đối với một số thiết bị (như điện thoại), nền hình ảnh nhỏ hơn và nhẹ hơn sẽ trông vẫn đẹp mắt. Nhìn chung, bạn nên gửi hình ảnh nhỏ nhất có thể mà vẫn hiển thị đẹp 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 của 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 toàn bộ màn hình, có thể ẩn các phần có 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 tính năng 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 nội dung nghe nhìn

Sử dụng truy vấn nội dung đa phương tiện là một kỹ thuật phổ biến để khai báo biểu định kiểu chỉ áp dụng cho một số loại nội dung nghe nhìn hoặc thiết bị nhất định. Các quy tắc này được triển khai bằng cách sử 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 được quy tắc @media xác định (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ể thực hiện các bước sau để áp dụng các truy vấn nội dung đa phương tiện cho trang web để các hình ảnh khác nhau được sử dụng, 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, tạo một điểm ngắt cho từng chiều rộng màn hình, dựa trên 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 hoá trong trình duyệt để xem các thay đổi đã 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 (dưới 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 yêu cầu hình ảnh background-mobile.jpg.
  6. Mở rộng khung nhìn. Sau khi kích thước rộng hơn 480px, hãy chú ý đến cách yêu cầu background-tablet.jpg. Sau khi kích thước rộng hơn 1025px, hãy chú ý đến cách yêu cầu background-desktop.jpg.

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 để có hình nền được tối ưu hoá.

Kích thước của nền mới trên 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 của trình duyệt không thể phát hiện hình nền CSS, nghĩa là bạn có thể trì hoãn LCP của trang web của mình 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 đề xuất LCP của bạn có thể hoạt động trong phần tử <img> có các thuộc tính srcsetsizes để 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 về các phần tử đó trong khi trình phân tích cú pháp bị chặn kết xuất.

Nếu bạn không thể (hoặc không muốn) tránh việc 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 thuộc tính media, imagesrcsetimagesizes của các phần tử <link> 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 lãng phí nhiều nội dung 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 đã học cách áp dụng các truy vấn nội dung đa 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 số byte khi truy cập trang web trên các thiết bị nhỏ hơn, chẳng 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. Một 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 viết 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 cách phát triển việc sử dụng vì tính năng này có thể đại diện cho một lựa chọn thú vị cho kỹ thuật này.