Làm sao để tăng tốc độ load cho ảnh nền

Ngày đăng: 29/07/2021
Cập nhật: 15/08/2021

Hình nền thường được sử dụng ở trên cùng trong bài viết, danh mục, từ khóa, … Nó có thể là hình ảnh đại diện của bài đăng trên blog.

1. Vì sao ảnh nền lại chậm?

1.1. Yêu cầu mức độ ưu tiên thấp

Nếu hình ảnh nằm trong tệp CSS bên ngoài, nó sẽ chỉ được tải xuống sau khi tải xuống tệp CSS đó và phân tích tệp CSS. Nó sẽ kiểm tra khi class trong CSS đó thực sự được sử dụng trong HTML.

1.2. Lazy Load & tải trước

Bạn vẫn có thể sử dụng tải Lazy Load nếu chúng ở dạng HTML. Các plugin như FlyingPress tự động phát hiện và tải chúng theo kiểu Lazy Load.

Lưu ý: Nếu bạn đang sử dụng FlyingPress, chúng tôi có một lớp trợ giúp “lazy-bg” để tải hình nền theo kiểu lazy load ngay khi nó nằm bên trong tệp CSS.

2. Làm thế nào để tăng tốc hình ảnh nền?

2.1. Sử dụng thẻ IMG với object-fit

Hình nền thường được sử dụng trong sliders với một số văn bản/nội dung ở trung tâm hoặc bạn có một div cố định và bạn muốn đặt một hình ảnh sẽ ‘fill’ mà không thay đổi kích thước vùng background-size: cover

Tuy nhiên, có một thuộc tính object-fit: cover mang lại lợi ích tương tự. Hỗ trợ trình duyệt cũng tốt.

<!---PT Cũ---->
<div style="background-image: url('/background.jpg'); background-size: cover"></div>
<!---PT Mới---->
<img src="/background.jpg" alt="Hình nền" style="object-fit: cover" />

2.2. Tải trước hình nền

Cho dù bạn đang sử dụng hình nền hay thẻ IMG nếu hình ảnh ở trong màn hình đầu tiên ở trên cùng, hãy tải trước hình ảnh đó, yêu cầu trình duyệt tải xuống hình ảnh đó ở mức ưu tiên cao.

<html>
  <head>
    <!----Preload background----->
    <link ref="preload" href="/background.jpg" as="image" />
  </head>
  <body>
    <div style="background-image: url('/background.jpg'); background-size: cover"></div>
  </body>
</html>

2.3. Thẻ IMG có ‘display: none’

Hình nền có thể được sử dụng cùng với

  • background-color
  • background-repeat
  • background-attachment
  • background-position
  • background-blend-mode etc.

Vì vậy, trong một số tình huống, tốt hơn nên sử dụng hình nền thay vì thẻ IMG để tận dụng các thuộc tính CSS khác.

Bạn có thể thêm thẻ IMG bình thường với hiển thị: không có. Thao tác này sẽ yêu cầu trình duyệt tải xuống hình ảnh ngay lập tức, nhưng hiển thị nó bằng hình nền. 

<!---inline background image --->
<div style="background-image: url('/background.jpg'); background-size: cover">
  <img src="/image.jpg" style="display: none" />
</div>
<!---External/Internal BG image--->
<style>
.bg{
  background-image: url("/background.jpg");
  background-size: cover;
}
</style>
<div class="bg">
  <img src="/image.jpg" style="display: none" />
</div>

2.4. Thêm hình ảnh thích ứng

Bạn thêm srcset và kích thước vào hình ảnh bình thường để cung cấp hình ảnh đáp ứng dựa trên thiết bị:

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Tương tự, bạn có thể làm tương tự đối với hình nền bằng cách sử dụng image-set:

.bg{
  background-image: url("cat.jpg");
  background-image: image-set("bg.jpg" 1x, "bg-2x.jpg" 2x, "bg-print.jpg" 600dpi);
  background-size: cover;
}

Nếu không, bạn sẽ cung cấp cùng một hình ảnh lớn cho MacBook 2880px và iPhone 6s 750px!

2.5. Background trong HTML

Nếu hình nền của bạn bên trong tệp CSS bên ngoài, hay trong HTML. Bằng cách này, trình duyệt không phải đợi tải xuống tệp CSS đó và sau đó mới tải hình ảnh xuống.

<style>
.bg{
  background-image: url("/bg.jpg");
}
</style>
<div class="bg"></div>
<div style="background-image: url('bg.jpg')"></div>

Chỉ vậy thôi, cũng là giúp website bạn trở lên tuyệt vời hơn.