Hướng dẫn cần thiết để cải thiện các chỉ số quan trọng về web bằng cách sử dụng Lazy Loading và BlurHash

Ngày nay, tốc độ trang web ngày càng trở nên quan trọng hơn khi các nghiên cứu cho thấy 70% người tiêu dùng nói rằng tốc độ trang ảnh hưởng đến quyết định mua hàng trực tuyến của họ. Nhưng ngoài trải nghiệm của người tiêu dùng, Google gần đây đã cập nhật báo cáo Core Web Vitals (CWV) và cung cấp hướng dẫn về các số liệu quan trọng nhất về hiệu suất trang. Điều này có nghĩa là chất lượng của trải nghiệm người dùng và hiệu suất trang hiện được xem xét ngày càng nhiều hơn khi nói đến thuật toán tìm kiếm của nó.

Tóm tắt nhanh: Các chỉ số quan trọng về trang web đo lường ba khía cạnh chính của trải nghiệm web: tải, tính tương tác và độ ổn định hình ảnh. Một trong những cách hiệu quả nhất để cải thiện Core Web Vitals (CWV) — và SEO — là tối ưu hóa nội dung hình ảnh. Có một số cách để thực hiện điều này, bao gồm nén hình ảnh phù hợp, thay đổi kích thước và chuyển đổi hình ảnh thế hệ tiếp theo.

Ngoài ba kỹ thuật đó, bạn có thể sẽ thấy Trì hoãn hình ảnh ngoài màn hình, còn được gọi là tải chậm, là một trong những cơ hội cải thiện trong phân tích Thông tin chi tiết về tốc độ trang của bạn. Sử dụng trình giữ chỗ, chẳng hạn như BlurHash, cũng là những tùy chọn tuyệt vời để cải thiện thời gian tải được cảm nhận và mang lại trải nghiệm người dùng tốt hơn khi kết nối hoặc trang web tải hình ảnh chậm.

Lazy Loading là gì?

Hãy tưởng tượng một trang thương mại điện tử có 100 bức ảnh giày có độ phân giải cao. Nếu trình duyệt tải tất cả ảnh cùng một lúc, một số ảnh ở cuối trang có thể xuất hiện trước khi bạn có thể cuộn đến chúng, trong khi ảnh trong chế độ xem của bạn thì không, điều này có thể tạo ra trải nghiệm người dùng không tốt.

Lazy loading là kỹ thuật làm trì hoãn quá trình tải hình ảnh ngoài màn hình cho đến khi khách truy cập cuộn và hình ảnh đi vào chế độ xem. Nó cho phép tải ít hình ảnh hơn vào bất kỳ thời điểm nào và tăng tốc thời gian tải cho mỗi hình ảnh, điều này có thể cải thiện Sơn có nội dung lớn nhất.

Lazy loading cũng có thể cải thiện First Input Delay (FID). FID là thời gian cần thiết để một trang phản hồi tương tác đầu tiên của người dùng, chẳng hạn như nhấp chuột. Bằng cách trì hoãn việc tải các thành phần lớn như hình ảnh một cách có chiến lược, trang web có thể xử lý JavaScript và phản hồi các tương tác nhanh hơn. Trong ví dụ bên dưới, đối với nytimes.com , vào ngày phân tích, Nó có thể đã cải thiện tốc độ trang thêm 1,5 giây nếu triển khai tính năng tải chậm.

Cách triển khai tải chậm

Cách bạn triển khai tải chậm tùy thuộc vào cơ sở mã của bạn và các trình duyệt mà bạn hỗ trợ. Ngoài loading=“lazy”, một thuộc tính HTML được Chrome hỗ trợ, nhà phát triển có thể sử dụng JavaScript và/hoặc API quan sát giao lộ yêu cầu. Biểu đồ sau đây từ caniuse.com hiển thị trình duyệt nào hỗ trợ thuộc tính tải chậm HTML:

Tuy nhiên, do các trình duyệt đang thay đổi nhanh như thế nào và các khả năng độc đáo của chúng, các nhà phát triển ngày càng coi việc sử dụng JavaScript lazysizes.js như một phương pháp hay nhất. Trong video sau đây, các đối tác của chúng tôi tại Cantilever minh họa và so sánh việc triển khai loading=“lazy” và lazysizes.js.

Phương pháp hay nhất: lazysizes.js + imgix.js

Sử dụng lazysizes.js cùng với imgix.js là một cách tuyệt vời để kết hợp các lợi ích của việc tối ưu hóa hình ảnh imgix và lazy loading. Đây là một ví dụ về cách nó được thực hiện như một thuộc tính meta:

<đầu>

<meta property="ix:srcAttribute" content="data-src">

<meta property="ix:srcsetAttribute" content="data-srcset">

<meta property="ix:sizesAttribute" content="data-sizes">

</head>

Và đây là một ví dụ về cách nó được thực hiện trong JavaScript:

imgix.config.srcAttribute = 'data-src';

imgix.config.srcsetAttribute = 'data-srcset';

imgix.config.sizesAttribute = 'data-size';

Sử dụng Trình giữ chỗ với Lazy Loading

Rủi ro của việc lười tải là nó có thể làm tăng tính không ổn định của bố cục trang, dẫn đến điểm CLS kém hơn. Ví dụ: khi khách truy cập cuộn nhanh xuống và bắt đầu đọc chú thích hình ảnh, hình ảnh có thể đột ngột xuất hiện, đẩy chú thích ra khỏi tầm nhìn. Cách để giảm thiểu vấn đề này là sử dụng trình giữ chỗ chất lượng thấp hoặc BlurHash , sẽ chiếm một khung hình cho đến khi thích hợp để tải phiên bản đầy đủ chi tiết.

Khi bạn đã áp dụng mã BlurHash cho hình ảnh của mình, trình giữ chỗ kết quả sẽ giống như sau:

Sử dụng BlurHash làm trình giữ chỗ của bạn

BlurHash là một thuật toán cho phép bạn tạo một phiên bản nhỏ gọn của trình giữ chỗ hình ảnh. Thuật toán tạo ra một chuỗi ký tự mã hóa hình ảnh được làm mờ, với số lượng ký tự được quyết định bởi chất lượng của hình ảnh. Chuỗi đủ ngắn để bạn có thể phân phát trực tiếp trong phần đánh dấu trang của mình và sau đó chuỗi có thể được giải mã thành hình ảnh mờ—mà không cần phải tìm nạp và tải xuống tệp hình ảnh.

Một lợi ích chính của BlurHash là bạn có thể chuyển đổi các tệp hình ảnh lớn thành một lượng dữ liệu nhỏ hơn để hình ảnh bị mờ xuất hiện trong khi tệp gốc vẫn đang tải. Một kỹ sư tại Wolt nảy ra ý tưởng cho BlurHash trong khi cố gắng tìm giải pháp tốt hơn về cách tải hình ảnh trên kết nối internet chậm hơn.

Cách sử dụng tính năng BlurHash

Để tạo một hình ảnh mờ, chỉ cần thêm fm=blurhash vào bất kỳ hình ảnh nào để nhận chuỗi BlurHash. Khi bạn có chuỗi BlurHash, bạn có thể sử dụng nó trong thành phần BlurHash. Thành phần BlurHash chịu trách nhiệm giải mã hàm băm thành một hình ảnh có thể hiển thị.

Trong ví dụ cụ thể này, thành phần React BlurHash tạo ra một phần tử canvas trong phần đánh dấu cuối cùng. Lưu ý: đánh dấu được tạo có thể khác một chút tùy thuộc vào thư viện hoặc bộ giải mã khung được sử dụng.

nhập './App.css';

nhập Imgix từ "Reac-imgix";

nhập {Blurhash} từ "Reac-blurhash";

chức năng Ứng dụng () {

trở lại (

<div className="Ứng dụng">

<section className="App-header">

< Phấn má hồng

hash="eCF6B#-:0JInxr?@s;nmIoWUIko1%NocRk.8xbIUaxR*^+s;RiWAWU"

chiều rộng={600}

chiều cao={400}

/>

<Imgix

src="https://assets.imgix.net/example-images/puffins.jpg"

chiều rộng={600}

chiều cao={400}

/>

</phần>

</div>

);

}

Khi bạn đã áp dụng mã BlurHash cho hình ảnh của mình, trình giữ chỗ kết quả sẽ giống như sau:

Bao gồm chuỗi BlurHash với đánh dấu của bạn khi xây dựng để đảm bảo người dùng nhìn thấy phiên bản mờ của hình ảnh ngay lập tức.

Mang đi

Số liệu CWV của bạn quan trọng hơn bao giờ hết, nhưng tin tốt là bạn có thể cải thiện chúng theo một số cách nhanh chóng và hiệu quả. Kết hợp tải từng phần với tối ưu hóa hình ảnh và sử dụng trình giữ chỗ hiệu quả như BlurHash là hai cách để đạt được kết quả đã được chứng minh. Bạn có thể dễ dàng thực hiện các kỹ thuật này bằng cách sử dụng imgix, hãy xem của chúng tôi tài liệu hoặc là dùng thử miễn phí .