Rendering là gì? Quá trình Rendering diễn ra như thế nào?

Nội dung cần đạt:

Rendering là gì?

Khác biệt giữa Rendering & Indexing.

Tầm quan trọng của Rendering.

Cách công cụ tìm kiếm Render page.

Tối ưu hiệu suất quá trình kết xuất của search engine.

rendering là gì

Crawling – Indexing – Ranking, quy trình xếp hạng trang web thông dụng của các công cụ tìm kiếm.

Tuy nhiên năm 2018, Google xác nhận Rendering là một phần của quá trình xếp hạng và diễn ra ngay sau quá trình Crawling.

Trong hướng dẫn này cùng tìm hiểu tổng quan Rendering là gì? Quá trình này diễn ra như thế nào?

Rendering (kết xuất) là quá trình các công cụ tìm kiếm truy xuất các trang trên website của bạn, phân tích code, đánh giá nội dung để “xem trước” trang sẽ trông như thế nào đối với người dùng.

Khái niệm rendering là gì
khái niệm rendering là gì

Tất cả các thông tin thu thập được trong quá trình Rendering sẽ được sử dụng để xếp hạng website trên bảng tìm kiếm.

Giống như cách người dùng sử dụng trình duyệt để truy cập vào các website thông qua URL, các công cụ tìm kiếm (cụ thể ở đây là Google) sẽ sử dụng Puppeteer (headless chrome) ngay trên web server.

Về cơ bản, sự khác biệt giữa Indexing (lập chỉ mục) và Rendering (kết xuất) có thể được minh họa bằng hai hình ảnh sau:

Phân biệt indexing và rendering (01)
Phân biệt indexing và rendering (01)
Phân biệt indexing và rendering (02)
Phân biệt indexing và rendering (02)

Đây là 2 nội dung giống nhau tuy nhiên 1 phiên bản dùng trong Indexing, phiên bản còn lại sử dụng trong Rendering.

Rendering (Kết xuất) xảy ra sau khi một trang đã được thu thập thông tin (crawling) và trước quá trình lập chỉ mục (Indexing).

googlebot crawl render index
googlebot crawl render index

Rendering (kết xuất) cực kỳ quan trọng, nó giúp các công cụ tìm kiếm:

  • Hiểu sơ bộ nội dung cũng như cấu trúc của trang.
  • Đánh giá khách quan về trải nghiệm người dùng, các nội dung nên được ưu tiên hiển thị.
  • Phát hiện các nội dung ẩn, các quảng cáo, popup ẩn trên trang.

Những thông tin thu thập được từ quá trình Rendering sẽ được sử dụng để đánh giá xếp hạng trang web

Trong ví dụ này cùng tìm hiểu quá trình kết xuất trang web của công cụ tìm kiếm (đại diện trong ví dụ này là Google).

WRS Anatomy
WRS Anatomy
  1. URL được lấy từ hàng chờ thu thập thông tin
  2. Googlebot tiếp cận và tải tệp HTML gốc
    HTML gốc được chuyển đến giai đoạn xử lý, trích xuất các liên kết trong tệp
  3. Các liên kết này quay trở lại hàng chờ thu thập thông tin
  4. Sau khi thu thập thông tin, URL được xếp vào hàng chờ Rendering
  5. Khi mọi thứ sẵn sàng, URL được chuyển từ hàng đợi kết xuất sang trình kết xuất
  6. Trình kết xuất chuyển HTML được kết xuất đến hàng đợi Indexing
  7. Trích xuất các liên kết từ HTML được render để đưa chúng vào hàng đợi thu thập thông tin.
  8. Chuyển đến URL tiếp theo trong danh sách và lặp lại quy trình.

Rendering đóng vai trò quan trọng giúp các công cụ tìm kiếm đánh giá trải nghiệm người dùng. Dưới đây là các lưu ý giúp tăng hiệu quả cảu quá trình kết xuất:

  • Tối giản nội dung
  • Lazy Load
  • Sử dụng Cache
  • Hiệu suất sử dụng

Tối giản nội dung

Nội dung hướng đến người dùng, lược bỏ các hiệu ứng không cần thiết. Ưu tiên sử dụng cấu trúc HTML thông dụng.

Tối ưu việc sử dụng các đoạn mã bên thứ 3 để đo lường đánh giá hiệu quả nội dung. Khi sử dụng quá nhiều tập lệnh bên thứ 3 có thể gây tác động tiêu cực đến hiệu suất hiển thị, bảo mật, quyền riêng tư của người dùng.

Lazy Load

Theo HTTPArchive, hình ảnh là nội dung tốn tài nguyên nhất với trung bình khoảng 900KB.

Tính năng Lazy Load được hỗ trợ từ Chrome 76. Thêm thuộc tính loading=”lazy” để giamr độ trễ thời gian cũng như tăng tốc độ tải.

Tương tự, bạn cũng có thể tải tập lệnh không đồng bộ bằng cách thêm thuộc tính:

Sử dụng Cache

Bộ nhớ đệm giúp cải thiện hiệu suất quá trình kết xuất vì nó làm giảm các request không cần thiết. Hiện tại, nó đã được hỗ trợ trên tất cả các trình duyệt và không mất quá nhiều thời gian để thiết lập.

Với các website sử dụng javascript, nếu bạn chia JS thành các gói nhỏ dành riêng cho 1 chức năng cụ thể, chúng sẽ dễ dàng lưu vào bộ nhớ đệm trong thời gian dài.

Xem thêm Google’s Web Fundamentals để hiểu rõ hơn về cách thức và nội dung bạn hiện lưu trong bộ nhớ cache.

Hiệu suất sử dụng

Trong quá trình tải trang, Google có thể nắm bắt được các mốc thời gian quan trọng như Time to First Byte (TTFB) đến Time to Interactive (TTI), mức độ thân thiện với thiết bị di động ra sao. Tất cả những điều này đều là những yếu tố xếp hạng trang web.

Lighthouse là một công cụ kiểm tra miễn phí có thể giúp bạn xác định các vấn đề về hiệu suất.

Sử dụng hợp lý JavaScript

JavaScript giúp tăng trải nghiệm người dùng tuy nhiên nó cũng gây khó khăn cho các công cụ tìm kiếm trong việc kết xuất nội dung.

Điều này không có nghĩa bạn lược bỏ hoàn toàn JavaScript khỏi Website mà hãy sử dụng nó một cách hợp lý và tối giản nhất.

Ghi chú
Rendering giúp các công cụ tìm kiếm đánh giá sơ bộ và hiểu trải nghiệm người dùng trên Website.

Để tăng hiệu suất của quá trình rendering cần chú ý đến tốc độ tải, hiệu suất, bộ nhớ đệm, tối giản hóa nội dung…

Nguồn tham khảo trong bài viết:

Web.dev
Blog.google
httparchive.org
Search Engine Journal
developers.google.com

Mục lục nội dung