Chào bạn, tui là Bình Nguyễn đây. Tui mới đây có xem một cuộc đàm thoại rất hay và bổ ích của Google, trong đó, John Mueller và Martin Splitt đã thảo luận rất chuyên sâu về Lazy Loading và những ảnh hưởng của nó đến SEO. Cuộc trò chuyện này rất thú vị và đã đưa ra một cảnh báo quan trọng: Lazy Loading sai chỗ có thể làm chậm LCP, một trong ba chỉ số quan trọng nhất của Core Web Vitals.
Trong tập phim podcast “Search Off the Record” này, các chuyên gia của Google đã làm rõ về việc tối ưu hóa hiệu suất của trang web với các kỹ thuật tải lười biếng. Tui nhận thấy đây là một chủ đề cực kỳ quan trọng, đặc biệt với những ai đang làm SEO và phát triển website. Vì vậy, tui đã tổng hợp lại những điểm chính từ cuộc trò chuyện này để chia sẻ đến bạn.
Lazy Loading là gì và tại sao nó quan trọng?
Tải lười biếng (lazy loading) là một kỹ thuật chỉ tải tài nguyên khi người dùng cần đến chúng. Thay vì tải tất cả mọi thứ cùng lúc, nó giúp trang web của bạn tải nhanh hơn, tiết kiệm tài nguyên như pin và băng thông mạng. Kỹ thuật này đặc biệt hữu ích cho các trang dài hoặc có nhiều tài nguyên không quan trọng. Martin Splitt nhấn mạnh rằng lazy loading là một cách để tránh những công việc không mang lại kết quả, như việc tải hình ảnh hoặc video ở cuối trang mà người dùng có thể không bao giờ cuộn tới.
Ban đầu, lazy loading phải được các nhà phát triển tự mình triển khai bằng các thư viện JavaScript. Tuy nhiên, trong vài năm gần đây, các trình duyệt đã có một thuộc tính HTML gốc là “loading” cho phép bạn chỉ định “lazy” cho hình ảnh và iframe. Thậm chí, Martin còn tiết lộ rằng một thành viên trong nhóm của Google đã đóng góp vào WordPress để nền tảng này sử dụng lazy loading hình ảnh theo mặc định.
Tác động của Lazy Loading đến SEO
Cuộc thảo luận đã làm rõ rằng lazy loading có những tác động đáng kể đến SEO, đặc biệt là về hiệu suất và khả năng lập chỉ mục của trang web.
1. Ảnh hưởng đến Core Web Vitals
Martin khẳng định rằng hiệu suất là mối quan tâm chính mà lazy loading giải quyết và nó có tác động trực tiếp đến Core Web Vitals. Cụ thể, việc sử dụng lazy loading không đúng cách có thể ảnh hưởng tiêu cực đến Largest Contentful Paint (LCP). Nếu một hình ảnh hiển thị ngay khi người dùng truy cập trang (ví dụ: hình ảnh chính – hero image) lại bị lazy loading, trình duyệt sẽ ưu tiên các tài nguyên không lazy loading khác trước, làm cho hình ảnh chính xuất hiện muộn hơn bình thường và khiến LCP chậm đi.
2. Tác động đến lập chỉ mục (Indexing) và xếp hạng (Ranking)
Martin cho biết lazy loading không thực sự có tác động lớn đến thứ hạng trong hầu hết các trường hợp, nhưng nó có thể ảnh hưởng đến khả năng lập chỉ mục của Google. Vấn đề này thường xảy ra khi bạn sử dụng các thư viện JavaScript tùy chỉnh để lazy loading và các thư viện này không được triển khai đúng cách. Googlebot có thể gặp vấn đề khi xử lý các thuộc tính tùy chỉnh như
data-source thay vì thuộc tính src tiêu chuẩn và do đó không thể thu thập hình ảnh. Điều này có thể khiến hình ảnh không được lập chỉ mục, và nếu bạn không xuất hiện cho các truy vấn có liên quan, nguyên nhân có thể là do nội dung đó không được thu thập dữ liệu đúng cách.
3. Tải hình ảnh nhỏ và video
Cuộc trò chuyện cũng đề cập đến các tài nguyên khác ngoài hình ảnh lớn. Với những hình ảnh nhỏ, trang trí, Martin khuyên nên tải chúng bằng CSS thay vì thẻ
<img>, vì chúng không có ý nghĩa ngữ nghĩa đối với nội dung chính và sẽ được tải ngay lập tức. Đối với video, việc lazy loading cũng rất hữu ích vì chúng tốn nhiều tài nguyên. Một kỹ thuật phổ biến là chỉ tải hình ảnh poster (thumbnail) và chỉ tải video khi nó xuất hiện trong khung nhìn.
Cách kiểm tra và fix lỗi lazy loading nhanh chóng
Với tư cách là một SEOer hoặc nhà phát triển, bạn nên luôn kiểm tra xem lazy loading có hoạt động đúng cách hay không. John và Martin đã đưa ra một vài cách đơn giản để kiểm tra.
1. Dùng công cụ Kiểm tra URL của Google Search Console
Đây là cách dễ nhất để kiểm tra. Bạn có thể sử dụng công cụ Kiểm tra URL (URL Inspection Tool) trong Google Search Console để xem HTML đã được kết xuất (rendered HTML) của trang. Bằng cách này, bạn có thể kiểm tra xem các URL hình ảnh và nội dung được lazy loading có xuất hiện trong mã nguồn đã kết xuất hay không. Nếu nội dung quan trọng bị thiếu trong HTML đã kết xuất, có khả năng lazy loading của bạn đang gặp vấn đề với Googlebot.
2. Kiểm tra chỉ mục hình ảnh
Nếu bạn nghi ngờ các hình ảnh được lazy loading không được lập chỉ mục đúng cách, bạn có thể kiểm tra xem chúng có xuất hiện trong chỉ mục hình ảnh của Google hay không. Nếu các hình ảnh không được chọn ở quy mô lớn, đó có thể là dấu hiệu cho thấy việc triển khai lazy loading của bạn đang gặp lỗi.
John và Martin đều kết luận rằng lazy loading là một công cụ tuyệt vời để cải thiện hiệu suất, nhưng cần phải được sử dụng một cách thông minh. Việc sử dụng thuộc tính
loading=lazy gốc của trình duyệt là cách tốt nhất trong hầu hết các trường hợp, nhưng với những tính năng tùy chỉnh phức tạp hơn, các thư viện JavaScript vẫn có thể cần thiết.