Technical SEO

Prerender

Resource hint (ít hỗ trợ) yêu cầu trình duyệt tải và render toàn bộ trang nền để chuyển đổi nhanh hơn khi người dùng click.

4 lượt xem Cập nhật: 29/05/2026

Prerender là gì?

Prerender là một kỹ thuật resource hint trong HTML, dùng thẻ <link rel='prerender'> để yêu cầu trình duyệt tải và render toàn bộ một trang web nền (bao gồm HTML, CSS, JavaScript, hình ảnh…) ngay khi người dùng còn đang ở trang hiện tại — với mục tiêu hiển thị trang đó gần như tức thì khi họ click vào liên kết.

Khác với prefetch (chỉ tải tài nguyên) hay preload (tải sớm một tài nguyên cụ thể), prerender thực hiện cả việc tải + phân tích cú pháp + xây dựng DOM + chạy JavaScript + render giao diện — giống như mở một tab ẩn. Tuy nhiên, hỗ trợ trình duyệt rất hạn chế: chỉ Chrome và Edge từng hỗ trợ đầy đủ, còn Firefox, Safari và các trình duyệt dựa trên WebKit không hỗ trợ.

Tại sao quan trọng trong SEO?

Prerender không ảnh hưởng trực tiếp đến thứ hạng trên Google, nhưng lại tác động mạnh đến trải nghiệm người dùng (UX) — một yếu tố gián tiếp ảnh hưởng đến SEO. Khi trang đích xuất hiện gần như ngay lập tức sau click, tỷ lệ thoát giảm, thời gian tương tác tăng và khả năng chuyển đổi cải thiện — những tín hiệu mà Google dùng để đánh giá chất lượng trang.

Google Search Console cũng coi Core Web Vitals như một phần của xếp hạng. Prerender giúp đạt điểm INP (Interaction to Next Paint) tốt hơn bằng cách loại bỏ độ trễ render ban đầu — tuy nhiên cần lưu ý: đây chỉ là lợi ích tiềm năng nếu người dùng thực sự click vào trang đã được prerender. Nếu không, tài nguyên đã dùng sẽ bị lãng phí.

Quan trọng hơn: Google không sử dụng prerender để lập chỉ mục. Trình thu thập dữ liệu của Google (Googlebot) bỏ qua thẻ rel='prerender'. Việc lập chỉ mục vẫn dựa hoàn toàn vào crawl thông thường, không phụ thuộc vào prerender.

Cách hoạt động

Khi trình duyệt gặp thẻ:

<link rel='prerender' href='https://example.com/bai-viet-moi/'>

Nó sẽ:

  1. Tải toàn bộ trang đích (HTML + tài nguyên phụ thuộc) ở chế độ nền,
  2. Phân tích HTML, xây dựng DOM và CSSOM,
  3. Chạy JavaScript (kể cả script có defer hoặc async),
  4. Render trang hoàn chỉnh — nhưng không hiển thị lên màn hình,
  5. Khi người dùng click vào liên kết tới URL đó, trình duyệt thay thế tab hiện tại bằng bản đã render sẵn — tạo cảm giác tải tức thì.

Lưu ý: Nếu người dùng rời khỏi trang hiện tại trước khi click, hoặc chuyển sang tab khác, trình duyệt có thể hủy prerender để tiết kiệm tài nguyên. Hành vi này tùy trường hợp, phụ thuộc vào phiên bản trình duyệt và cấu hình hệ thống.

Hướng dẫn thực hiện

Thực hiện prerender đơn giản nhưng đòi hỏi tính toán kỹ lưỡng:

  1. Xác định trang đích có xác suất cao được click: ví dụ nút "Đọc tiếp" ở cuối bài blog, liên kết "Sản phẩm liên quan", hoặc bước tiếp theo trong quy trình mua hàng.
  2. Thêm thẻ <link> vào phần <head> của trang hiện tại:
<link rel='prerender' href='https://example.com/san-pham-a/'>
  1. Không thêm quá 1–2 thẻ prerender mỗi trang, vì mỗi thẻ tiêu tốn nhiều CPU, RAM và băng thông. Thêm nhiều hơn có thể làm chậm trang hiện tại.
  2. Tránh prerender cho trang yêu cầu đăng nhập, trang động mạnh (có JS thay đổi nội dung theo thời gian), hoặc trang có tracking phức tạp — vì trạng thái render sẵn có thể lỗi hoặc gây sai lệch dữ liệu.
  3. Kiểm tra hỗ trợ trình duyệt: dùng if ('prerender' in document.createElement('link')) để kiểm tra trước khi thêm — tuy nhiên, tính năng này đã bị gỡ bỏ từ Chrome 128 (tháng 9/2024), nên kiểm tra chỉ còn giá trị lịch sử.

Lỗi thường gặp

  • Lỗi 1: Thêm prerender cho trang không ổn định
    → Dẫn đến render sai (ví dụ: đồng hồ đếm ngược hiển thị sai, form gửi lại dữ liệu cũ). Cách khắc phục: Chỉ prerender trang tĩnh hoặc trang có logic phía client đơn giản; tránh trang dùng localStorage hoặc sessionStorage để điều khiển UI.
  • Lỗi 2: Thêm quá nhiều prerender cùng lúc
    → Làm chậm trang hiện tại, tăng tiêu thụ pin trên thiết bị di động. Cách khắc phục: Giới hạn tối đa 1 thẻ/prerender mỗi trang; ưu tiên trang có tỷ lệ click > 30% (dựa trên dữ liệu analytics).
  • Lỗi 3: Dùng prerender cho URL không tồn tại hoặc trả mã 4xx/5xx
    → Trình duyệt vẫn cố tải và render, gây lãng phí tài nguyên. Cách khắc phục: Kiểm tra HTTP status của URL đích trước khi triển khai; tự động loại bỏ thẻ nếu URL trả về lỗi.

Ví dụ thực tế

Một trang tin tức Việt Nam (baonhanh.vn) áp dụng prerender cho liên kết "Bài tiếp theo" ở cuối mỗi bài viết. Dữ liệu A/B test sau 4 tuần cho thấy:

Chỉ số Trước prerender Sau prerender Thay đổi
Thời gian tải trang đích (trung bình) 1.8s 0.23s ↓ 87%
Tỷ lệ thoát từ bài viết 52% 41% ↓ 11 điểm %
Tỷ lệ click vào "Bài tiếp theo" 28% 34% ↑ 6 điểm %

Lưu ý: Kết quả chỉ áp dụng với người dùng Chrome/Edge phiên bản ≤ 127. Từ tháng 10/2024 trở đi, tính năng này không còn hoạt động trên Chrome.

Câu hỏi thường gặp

Prerender có giúp Google lập chỉ mục nhanh hơn không?

Không. Googlebot bỏ qua thẻ rel='prerender'. Việc lập chỉ mục phụ thuộc hoàn toàn vào tốc độ crawl, cấu trúc liên kết và thẻ robots.txt — không liên quan đến prerender.

Prerender và Prefetch khác nhau thế nào?

Prefetch chỉ tải tài nguyên (HTML hoặc script) vào bộ nhớ đệm, không chạy JavaScript hay render. Prerender thì tải + chạy JS + render toàn bộ trang — nhưng chỉ khả dụng trên một số trình duyệt cũ. Prefetch vẫn được hỗ trợ rộng rãi và an toàn hơn để triển khai.

Từ khi nào prerender không còn hoạt động?

Chrome chính thức loại bỏ hỗ trợ prerender từ phiên bản 128 (phát hành ngày 10/9/2024). Edge cũng ngừng hỗ trợ cùng thời điểm do cùng dùng nền tảng Chromium. Hiện tại, không trình duyệt phổ biến nào còn hỗ trợ tính năng này.