Cách tối ưu hóa tải hình ảnh trên trang web của bạn

Một trang web chứa đầy hình ảnh có thể là một nút cổ chai lớn cho hiệu suất trang web. Đây là cách tôi tối ưu hóa tải hình ảnh để thực hiện trải nghiệm người dùng tốt hơn.

Có một trang web đầy những hình ảnh đẹp là tuyệt vời và tất cả nhưng có thể là một nút cổ chai lớn để tải trang. Tôi thường thấy các trang web tải hình ảnh trị giá vài megabyte chỉ để có một thanh trượt trên trang chủ của họ. Hãy tưởng tượng bạn trên một kết nối di động 3G chậm tải trang web đó. Điều đó sẽ mất nhiều thời gian để tải và kết quả là người dùng rời khỏi trang web của bạn. Một cách tốt để kiểm tra điều này trên trang web hiện tại của bạn là chọn điều chỉnh mạng trong Devtools của Chrome.

Vấn đề

Vấn đề ở đây là thường tài liệu trang web đã được tải trong khi hình ảnh vẫn đang tải. Điều này dẫn đến các phần trống trên trang của bạn nơi hình ảnh tải từ từ. Không phải là thứ bạn muốn.

Trong ví dụ dưới đây, tôi đã tạo một trang web đơn giản chứa hình ảnh nền là 4,8 MB. Như bạn có thể thấy DOM được tải trong 1,14 giây. Vì vậy, về cơ bản người dùng sẽ thấy nội dung sau 1,14 giây. Khá tốt cho mạng 3G. Tuy nhiên, hình nền mất 27,32 giây để tải trong đó người dùng nhìn thấy các phần của hình ảnh đang tải. Người dùng có thể đã rời khỏi trang web của bạn tại thời điểm này.

Một trang web tối ưu xấu đơn giản với hình nền 4,8 MB qua mạng di động 3G nhanh

Có vẻ như không chỉ trải nghiệm người dùng của bạn giảm xuống vì điều này. Năm 2010, Google tuyên bố rằng tốc độ trang là một yếu tố trong thuật toán xếp hạng của họ. Kỳ vọng của tôi là điều này đã trở thành một yếu tố ngày càng quan trọng hơn trong những năm qua. Google dường như đầu tư rất nhiều vào việc cho các nhà phát triển biết về hiệu suất trang trong các hội nghị của họ.

Dung dịch

Vậy làm thế nào để chúng ta khắc phục vấn đề này? Chà, điều đầu tiên chúng ta có thể làm là nén hình nền bằng cách sử dụng các công cụ khác nhau trên internet. Đây là một chiến thắng dễ dàng và sẽ giảm thời gian tải xuống khoảng mười giây. Đây dường như là một bước tiến lớn nhưng mười giây vẫn còn quá nhiều.

Bước tiếp theo sẽ là tải một hình ảnh được gọi là ‘giữ chỗ trước khi chúng ta thực sự tải hình ảnh gốc. Giữ chỗ này là một biến thể độ phân giải thấp của hình ảnh gốc. Khi chúng tôi tạo hình ảnh này, chúng tôi đã giảm độ phân giải của hình ảnh từ 7372x4392 pixel xuống 20x11 pixel. Điều này dẫn đến kích thước hình ảnh từ 4,8 MB đến 900 byte.

Việc giảm kích thước này dẫn đến thời gian tải là 550 mili giây thay vì 10 giây. Nhưng bây giờ chúng ta có một hình ảnh mờ độ phân giải thấp làm nền của chúng tôi. Điều này là hoàn hảo trong những giây đầu tiên trang đang tải nhưng chúng tôi muốn cung cấp cho người dùng trải nghiệm tuyệt vời về hình nền ban đầu của chúng tôi.

Để làm như vậy, trước tiên chúng tôi muốn tải hình ảnh có độ phân giải thấp và đã tải hình ảnh độ phân giải cao không đồng bộ trong nền. Khi hình ảnh độ phân giải cao được tải, chúng tôi muốn thay đổi độ phân giải thấp với hình ảnh độ phân giải cao.

Để thực hiện điều này, tôi đã sử dụng javascript sau đây mà tôi đã tải trước thẻ body. Bằng cách này, tập lệnh của chúng tôi không hiển thị - chặn nội dung trang của chúng tôi.

(() => {
  'Sử dụng nghiêm ngặt';
  // Trang được tải
  const object = document.getElementsByClassName ('asyncImage');
  Array.from (đối tượng) .map ((mục) => {
    // Bắt đầu tải hình ảnh
    const img = hình ảnh mới ();
    img.src = item.dataset.src;
    // Khi hình ảnh được tải thay thế src của phần tử HTML
    img.onload = () => {
      item. classList.remove ('asyncImage');
      trả lại hàng.nodeName === 'IMG'?
        item.src = item.dataset.src:
        item.style.backgroundImage = `url ($ {item.dataset.src})`;
    };
  });
}) ();

Hàm javascript quét DOM cho bất kỳ lớp ‘asyncImage nào. Sau đó, nó sẽ tải tất cả các hình ảnh được cung cấp trong thuộc tính data-src trên các phần tử này. Khi một hình ảnh được tải, nó sẽ thay thế nguồn của thẻ hình ảnh hoặc hình nền không phải là một yếu tố IMG.

...

hoặc là

Mặt trời mọc phong cảnh đẹp

Vì tập lệnh loại bỏ lớp của phần tử một khi hình ảnh đã được thay đổi, chúng tôi có thể thực hiện một số chuyển đổi CSS tuyệt vời nếu chúng tôi muốn. Ví dụ, quá trình chuyển đổi dễ dàng sẽ dẫn đến hiện tượng mờ dần sau khi hình ảnh được thay thế.

Phần kết luận

Vậy chúng ta đã làm gì? Chúng tôi đã cải thiện trải nghiệm người dùng của mình, giúp trang web của chúng tôi tải nhanh hơn, giúp người dùng dễ truy cập hơn mà không cần kết nối nhanh và có thể cải thiện thứ hạng của chúng tôi trong Google. Đó là một cải tiến lớn cho một thay đổi nhỏ như vậy.

Tình huống mới trong đó trước tiên chúng ta tải hình ảnh có độ phân giải thấp và sau đó thay thế bằng hình ảnh gốc

Như bạn có thể thấy, chúng tôi tải hình ảnh giữ chỗ trong 570ms. Khi tải xong, người dùng sẽ thấy phiên bản có độ phân giải thấp của hình ảnh gốc. Khi hình ảnh gốc được tải, nó sẽ thay thế hình ảnh độ phân giải thấp.

Chúng tôi không có bất kỳ vấn đề kết xuất hình ảnh kỳ lạ nào nữa và chúng tôi cung cấp cho người dùng một sơn đầu tiên nhanh chóng.

Xem một ví dụ làm việc ở đây

Tải hình ảnh lười biếng

Khi bạn muốn cải thiện quá trình tải hình ảnh của mình hơn nữa, bạn có thể muốn xem xét để lười tải hình ảnh của mình.

Tải nhanh là một kỹ thuật trong đó hình ảnh không trực tiếp trong chế độ xem của người dùng không được tải. Khi hình ảnh đến gần đường viền của khung nhìn, hình ảnh sẽ được tải.

Lợi ích của việc này là tải ít byte hơn khi tải trang ban đầu. Thường thì không phải tất cả các hình ảnh đều cần thiết để hiển thị trong chế độ xem của người dùng. Khi người dùng bắt đầu cuộn, chúng tôi cần ngày càng nhiều nội dung có thể được tải vào. Cách tiếp cận tốt để thực hiện hành vi này là xem qua Giao diện quan sát.

Tôi hy vọng bạn thích đọc bài viết này và rất hào hứng khi tự mình thực hiện cải tiến này :). Một số vỗ tay có nghĩa là rất nhiều.