Technical SEO

Navigation Timing API

API JavaScript cung cấp dữ liệu chi tiết về thời gian tải trang, bao gồm DNS lookup, TCP connect, SSL handshake, response start và DOM load.

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

Navigation Timing API là gì?

Navigation Timing API là một giao diện lập trình (API) tích hợp sẵn trong trình duyệt, cho phép thu thập dữ liệu thời gian chi tiết về quá trình tải trang web — từ lúc người dùng nhập URL hoặc nhấp vào liên kết đến khi trang hoàn toàn sẵn sàng để tương tác. Đây là phần mở rộng của Performance API, hoạt động trên nền tảng JavaScript và chỉ khả dụng trong môi trường trình duyệt (không chạy được trên Node.js).

API này cung cấp một đối tượng performance.timing (trong các trình duyệt cũ hơn) và hiện đại hơn là performance.getEntriesByType('navigation'), trả về chuỗi thời điểm đo lường theo mốc thời gian tuyệt đối (Unix timestamp tính bằng millisecond), giúp phân tích từng giai đoạn: DNS lookup, TCP connect, SSL/TLS handshake, request gửi đi, phản hồi bắt đầu (responseStart), DOMContentLoaded, loadEventEnd…

Tại sao quan trọng trong SEO?

Google và các công cụ tìm kiếm ngày càng coi trọng trải nghiệm người dùng (UX) như một yếu tố xếp hạng trực tiếp. Trong đó, tốc độ tải trang là thành phần then chốt của Core Web Vitals — đặc biệt là Largest Contentful Paint (LCP) và Time to Interactive (TTI). Navigation Timing API không phải là công cụ xếp hạng, nhưng là cơ sở dữ liệu chính xác nhất để đo lường nguyên nhân gốc rễ của chậm tải ở cấp trình duyệt.

Khi bạn hiểu rõ thời gian tiêu tốn ở từng bước (ví dụ: DNS mất 800ms, SSL mất 1.2s), bạn có thể ưu tiên khắc phục đúng vấn đề — thay vì đoán mò. Điều này giúp:

  • Giảm thời gian LCP thông qua tối ưu hóa đường dẫn mạng và CDN
  • Phát hiện lỗi cấu hình server (ví dụ: SSL handshake thất bại hoặc chậm do cipher không hỗ trợ)
  • Đánh giá hiệu quả của các thay đổi kỹ thuật (như chuyển sang HTTP/3, bật QUIC, thay DNS)
  • Hỗ trợ báo cáo hiệu suất nội bộ hoặc cho khách hàng với số liệu khách quan, không phụ thuộc vào công cụ bên ngoài (như Lighthouse hay WebPageTest)

Cách hoạt động

Navigation Timing API dựa trên mô hình timing navigation được định nghĩa trong tiêu chuẩn W3C. Khi trình duyệt bắt đầu tải một trang (qua địa chỉ URL, chuyển trang, F5, hoặc history.pushState), nó tự động ghi lại 26 mốc thời gian (theo tiêu chuẩn Navigation Timing Level 2). Các mốc này được lưu trong performance.getEntriesByType('navigation')[0].

Mỗi mốc là một thuộc tính dạng number (millisecond kể từ epoch), ví dụ:

  • startTime: Thời điểm bắt đầu điều hướng (luôn bằng 0 trong context của entry)
  • domainLookupStart → domainLookupEnd: Thời gian tra cứu DNS
  • connectStart → secureConnectionStart: Bắt đầu kết nối và bắt đầu thiết lập SSL/TLS
  • requestStart: Thời điểm gửi yêu cầu HTTP
  • responseStart: Thời điểm nhận byte đầu tiên từ server
  • domContentLoadedEventStart: Thời điểm bắt đầu xử lý sự kiện DOMContentLoaded
  • loadEventEnd: Thời điểm hoàn tất sự kiện window.onload

Lưu ý: Một số thuộc tính như secureConnectionStart sẽ trả về 0 nếu kết nối không dùng HTTPS — đây là hành vi chuẩn, không phải lỗi.

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

  1. Kiểm tra hỗ trợ trình duyệt: Navigation Timing API được hỗ trợ đầy đủ từ Chrome 28+, Firefox 39+, Edge 12+, Safari 11+. Không cần polyfill cho website hiện đại.
  2. Lấy dữ liệu cơ bản: Dùng đoạn mã sau ngay sau thẻ <head> hoặc trong DOMContentLoaded: 
    if ('performance' in window && 'getEntriesByType' in performance) {
  const navEntries = performance.getEntriesByType('navigation');
  if (navEntries.length > 0) {
    const nav = navEntries[0];
    console.log('DNS time:', nav.domainLookupEnd - nav.domainLookupStart);
    console.log('SSL time:', nav.secureConnectionStart ? nav.connectEnd - nav.secureConnectionStart : 0);
    console.log('TTFB:', nav.responseStart - nav.requestStart);
  }
}
  3. Gửi dữ liệu về backend: Dùng navigator.sendBeacon() để gửi dữ liệu hiệu suất mà không làm gián đoạn trải nghiệm người dùng.
  4. Phân tích theo phân khúc: Gắn nhãn dữ liệu theo thiết bị (mobile/desktop), nguồn lưu lượng (organic/search, direct), hoặc phiên bản trang (AMP/non-AMP) để so sánh hiệu suất thực tế.
  5. Kết hợp với Google Analytics 4 (GA4): Dùng gtag('event', 'navigation_timing', {...}) để đưa chỉ số vào báo cáo tùy chỉnh.

Lỗi thường gặp

  • Không có dữ liệu navigation entry: Xảy ra khi trang được tải từ cache (back/forward cache) hoặc reload bằng Ctrl+R trong một số trình duyệt. Giải pháp: Kiểm tra nav.type — giá trị 'navigate', 'reload', 'back_forward' hoặc 'prerender'. Chỉ xử lý các entry có type === 'navigate' hoặc 'reload' nếu cần.
  • Giá trị secureConnectionStart bằng 0: Không phải lỗi — xảy ra khi trang không dùng HTTPS hoặc trình duyệt không ghi nhận giai đoạn SSL (ví dụ: dùng HTTP/2 với server đã thiết lập trước). Không nên dùng giá trị này để tính toán nếu chưa kiểm tra nav.protocol === 'https:'.
  • Dữ liệu bị cắt do giới hạn thời gian: Một số trình duyệt (đặc biệt trên iOS) giới hạn thời gian ghi log hiệu suất. Giải pháp: Ghi dữ liệu sớm nhất có thể — tốt nhất là trong <head>, trước khi chạy bất kỳ script nào khác.

Ví dụ thực tế

Một website thương mại điện tử phát hiện LCP trung bình là 4.2s trên mobile. Qua phân tích Navigation Timing API, nhóm kỹ thuật thấy:

Giai đoạn Thời gian trung bình (ms) Ghi chú
DNS Lookup 1.120 Cao bất thường — DNS provider cũ, không hỗ trợ Anycast
TCP Connect 340 Bình thường
SSL Handshake 890 Chậm do thiếu OCSP stapling và cipher không tối ưu
TTFB 1.420 Cộng dồn từ DNS + SSL + server xử lý
DOM Content Loaded 2.850 Ảnh hưởng bởi blocking JS/CSS

Sau khi chuyển DNS sang Cloudflare và bật OCSP stapling, DNS giảm còn 180ms, SSL còn 210ms → TTFB giảm còn 720ms → LCP cải thiện xuống còn 2.6s. Kết quả: tỷ lệ thoát trên mobile giảm 14%, thời gian xem trung bình tăng 22%.

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

Navigation Timing API có thay thế được Lighthouse không?

Không. Lighthouse là công cụ kiểm thử trong môi trường kiểm soát (lab), còn Navigation Timing API thu thập dữ liệu từ người dùng thật (field data). Hai nguồn bổ sung cho nhau: Lighthouse giúp phát hiện vấn đề tiềm năng, Navigation Timing API xác nhận mức độ ảnh hưởng thực tế.

API này có thu thập dữ liệu cá nhân không?

Không. Navigation Timing API chỉ trả về thời gian tuyệt đối và chênh lệch thời gian — không bao gồm URL đầy đủ (chỉ origin), không ghi nhận IP, cookie, user agent hay bất kỳ thông tin nhận dạng nào. Dữ liệu này được coi là phi cá nhân theo GDPR nếu không ghép nối với định danh khác.

Có cần bật gì trên server để API hoạt động?

Không cần cấu hình đặc biệt. Tuy nhiên, để đo SSL handshake chính xác, server cần hỗ trợ HTTPS đúng chuẩn (TLS 1.2+, chứng chỉ hợp lệ, OCSP stapling được khuyến khích). Nếu dùng service worker, cần đảm bảo nó không chặn hoặc làm chậm việc gọi performance.getEntriesByType('navigation') — điều này tùy trường hợp.