Technical SEO

Load Event

Sự kiện kích hoạt khi toàn bộ trang (HTML, CSS, JS, hình ảnh, iframe) đã được tải xong.

3 lượt xem Cập nhật: 26/05/2026

Load Event là gì?

Load Event là một sự kiện trong trình duyệt xảy ra khi toàn bộ trang web — bao gồm HTML, CSS, JavaScript, hình ảnh, iframe và mọi tài nguyên được tham chiếu trực tiếp — đã được tải xong và sẵn sàng để tương tác. Đây là một phần của Web API Events, được kích hoạt trên đối tượng window hoặc document, và chỉ chạy sau khi tất cả nội dung (kể cả tài nguyên bên ngoài như ảnh từ CDN) hoàn tất tải.

Khác với DOMContentLoaded — chỉ chờ DOM được xây dựng xong — load đợi thêm thời gian để các tài nguyên nặng như ảnh, font, video hay iframe cũng tải xong. Vì vậy, thời điểm load xảy ra luôn muộn hơn DOMContentLoaded.

Tại sao quan trọng trong SEO?

Load Event không ảnh hưởng trực tiếp đến thứ hạng tìm kiếm, nhưng lại có vai trò gián tiếp rất lớn qua ba yếu tố chính:

  • Tốc độ trải nghiệm người dùng (UX): Nếu trang mất quá lâu để đạt trạng thái load, người dùng dễ rời đi — làm tăng tỷ lệ thoát (bounce rate), giảm thời gian ở lại — hai tín hiệu mà Google coi là yếu tố xếp hạng gián tiếp.
  • Tương thích với công cụ đo lường: Nhiều hệ thống phân tích (Google Analytics 4, Hotjar, GTM) dùng sự kiện load làm mốc để gửi dữ liệu lần đầu. Nếu load bị trì hoãn, dữ liệu báo cáo có thể thiếu hoặc sai lệch.
  • Ảnh hưởng đến Core Web Vitals: Mặc dù load không phải chỉ số Core Web Vitals, nhưng nó thường trùng với thời điểm Largest Contentful Paint (LCP) đã hoàn tất và Interaction to Next Paint (INP) bắt đầu ổn định. Trang chậm load thường đồng nghĩa với LCP cao, INP kém — hai yếu tố Google đánh giá nghiêm ngặt.

Cách hoạt động

Khi trình duyệt xử lý một trang, nó thực hiện tuần tự các bước: phân tích HTML → xây dựng DOM → tải CSS/JS đồng thời → render → tải ảnh & iframe → hoàn tất load. Sự kiện load chỉ được phát đi khi tất cả các điều kiện sau đều thoả mãn:

  1. DOM đã được xây dựng đầy đủ.
  2. Mọi stylesheet đã được tải và áp dụng.
  3. Mọi script (đặc biệt loại <script src="..."> không có thuộc tính async hoặc defer) đã thực thi xong.
  4. Mọi hình ảnh, biểu tượng (<img>, <picture>, <svg> có xlink:href), iframe và tài nguyên được gọi qua CSS (background-image, @font-face) đã tải thành công hoặc thất bại (không chờ timeout vô hạn).

Lưu ý: Nếu một ảnh bị lỗi 404 hoặc timeout, trình duyệt vẫn kích hoạt load — vì đây là trạng thái “hoàn tất tải”, không phải “tải thành công”.

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

Để theo dõi hoặc tận dụng load đúng cách, bạn nên làm theo các bước sau:

  1. Thêm trình xử lý sự kiện đúng vị trí: Dùng window.addEventListener('load', callback) hoặc window.onload = callback. Nên ưu tiên addEventListener vì hỗ trợ nhiều hàm cùng lúc.
  2. Tránh đặt logic quan trọng vào load nếu không cần thiết: Vì load xảy ra muộn, nên không phù hợp cho các tác vụ cần sớm như hiển thị spinner, khởi tạo menu, hoặc gửi analytics ban đầu. Thay vào đó, ưu tiên DOMContentLoaded hoặc IntersectionObserver cho lazy load.
  3. Đảm bảo tài nguyên không chặn: Kiểm tra ảnh không nén, iframe không cần thiết, font chưa tối ưu — những yếu tố này kéo dài thời gian load. Dùng Chrome DevTools > Network tab, lọc theo Finish để xác định tài nguyên nào chậm nhất.
  4. Thử nghiệm với performance.getEntriesByType('navigation'): Đo thời gian loadEventEnd - loadEventStart để theo dõi xu hướng qua thời gian. Giá trị này có thể lấy từ performance.getEntries()[0] nếu trang mới tải.

Lỗi thường gặp

Dưới đây là những vấn đề phổ biến liên quan đến load và cách khắc phục:

Lỗi Nguồn gốc Cách khắc phục
load bị trì hoãn hơn 5 giây Ảnh không nén, iframe từ bên ngoài (Facebook, YouTube), font quá nặng Áp dụng lazy load cho ảnh & iframe; dùng font-display: swap; thay thế iframe bằng thumbnail + click để tải
Callback load không chạy Script chạy trước khi window tồn tại, hoặc bị chặn bởi CSP / ad blocker Đặt script ở cuối <body> hoặc dùng defer; kiểm tra Console và CSP header
Phân tích GA4 gửi muộn hoặc thiếu GA4 khởi tạo sau load, hoặc phụ thuộc vào sự kiện load để gửi event Sử dụng gtag('config', ...) sớm hơn; hoặc chuyển sang theo dõi qua visibilitychange hoặc DOMContentLoaded

Ví dụ thực tế

Một trang tin tức Việt Nam từng ghi nhận thời gian load trung bình là 8.2s trên di động. Nguyên nhân chính là 3 iframe Facebook Embed (mỗi cái tải ~1.2s) và 5 ảnh banner chưa nén (tổng 8MB). Sau khi:

  • Thay iframe bằng nút “Xem bài viết trên Facebook” (mở mới tab),
  • Nén ảnh xuống còn 300KB tổng, dùng định dạng WebP,
  • Thêm loading="lazy" cho ảnh không nằm trong viewport,

→ Thời gian load giảm còn 2.4s, tỷ lệ thoát giảm 22%, thời gian ở lại tăng 37%. Báo cáo Search Console cũng ghi nhận tăng 14% lượt nhấp từ kết quả tìm kiếm trong 30 ngày sau tối ưu.

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

Load Event có giống với thời điểm người dùng thấy trang không?

Không. Người dùng thường thấy nội dung sau DOMContentLoaded hoặc First Contentful Paint (FCP). load xảy ra muộn hơn — khi mọi thứ đã tải xong, kể cả những phần không cần thiết cho trải nghiệm đọc đầu tiên.

Có nên dùng load Event để khởi chạy chức năng chính của trang?

Tùy trường hợp. Nếu chức năng phụ thuộc vào ảnh hoặc iframe (ví dụ: gallery có zoom ảnh), thì dùng load là hợp lý. Còn nếu chỉ cần DOM và CSS, hãy dùng DOMContentLoaded để cải thiện tốc độ phản hồi.

Load Event có được Googlebot kích hoạt không?

Có thể thay đổi. Googlebot hiện chủ yếu dựa vào DOM và mạng lưới liên kết để lập chỉ mục, không thực thi JS đầy đủ như trình duyệt người dùng. Vì vậy, Googlebot không đảm bảo kích hoạt load — đặc biệt với tài nguyên bị chặn hoặc yêu cầu tương tác. Không nên phụ thuộc vào load để render nội dung quan trọng.