Hướng dẫn tải ảnh Background nhanh hơn

Hình nền thường được sử dụng ở những nơi có một số văn bản hoặc nội dung ở trên cùng. Nó có thể là thanh trượt, hình ảnh đặc trưng của bài đăng trên blog (như bên dưới) hoặc hình ảnh anh hùng. Tại sao hình Background chậm? Yêu cầu mức độ ưu tiên thấp

Hình nền thường được sử dụng ở những nơi có một số văn bản hoặc nội dung ở trên cùng. Nó có thể là thanh trượt, hình ảnh đặc trưng của bài đăng trên blog (như bên dưới) hoặc hình ảnh anh hùng.

Tại sao hình Background chậm?

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 và phân tích cú pháp tệp CSS và khi lớp CSS thực sự được sử dụng trong HTML.

Điều này có thể phản ánh trong chỉ số quan trọng web cốt lõi của bạn như Sơn có nội dung lớn nhất (FCP) nếu những hình nền đó nằm trong màn hình đầu tiên ở trên.

Nếu đó là thẻ IMG, hình ảnh được tải xuống ngay lập tức khi HTML được phân tích cú pháp.

Khó tải & tải trước

Thẻ IMG có thể tận dụng tính năng tải chậm của trình duyệt gốc, không yêu cầu bất kỳ JavaScript nào.

Bạn vẫn có thể tải chậm hình ảnh nền nếu chúng ở dạng HTML dưới dạng nội tuyến. Các plugin như FlyingPress tự động phát hiện và tải chúng một cách lười biếng.

Tuy nhiên, nếu hình nền nằm bên trong tệp CSS bên ngoài hoặc bên trong, mọi thứ sẽ trở nên phức tạp vì chúng tôi không thể tìm ra liệu một phần tử HTML có hình nền hay không.

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 chậm ngay cả bên trong tệp CSS.

Làm thế nào để tải ảnh Background nhanh hơn?

Sử dụng thẻ IMG với đối tượng phù hợp

Hình nền thường được sử dụng trong thanh trượt 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ẽ ‘lấp đầy’ mà không thay đổi kích thước vùng (background-size: cover).

Trước đây, rất khó để đạt được điều này với thẻ IMG. Vì vậy, sử dụng hình ảnh nền có ý nghĩa.

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

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, hãy tải trước hình ảnh đó. Tải trước yêu cầu trình duyệt tải xuống hình ảnh đó ở mức ưu tiên cao.

Thẻ IMG có hack ‘display: none’

Hình nền có thể được sử dụng cùng với màu nền, lặp lại nền, tệp đính kèm nền, vị trí nền và chế độ hòa trộn nền, v.v.

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ị hình ảnh đó bằng hình nền.

Thêm responsive images

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:

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!

Hình nền nội tuyến trong HTML

Nếu hình nền của bạn bên trong tệp CSS bên ngoài, hãy nội dòng nó trong HTML. Bằng cách này, trình duyệt không phải đợi tải xuống tệp CSS đó rồi tải hình ảnh xuống.

Bài viết liên quan

Cách sửa code WordPress: HTML, PHP và CSS

Nếu như WordPress visual editor không tùy chỉnh được như ý bạn? Biết cách sửa co

Học WordPress: 12 nguồn tài liệu WordPress tốt nhất cho người mới

Muốn học WordPress nhưng chưa biết học ở đâu cho tốt? Xem ngay 12 nguồn tài liệ

9 mẹo để cải thiện FCP trong WordPress

Google gần đây đã đưa ra thông báo rằng họ đang xếp hạng các trang web dựa tr

Thay đổi kích thước hình ảnh mà không làm giảm chất lượng

Khi tạo ra một bài viết nào đó, ngoài việc tọa nội dung chất lượng ra thì hì