Technical SEO

Resource Timing API

API JavaScript cung cấp dữ liệu chi tiết về thời gian tải từng tài nguyên (script, image, font…) để phân tích hiệu năng.

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

Resource Timing API là gì?

Resource 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 chi tiết về thời gian tải từng tài nguyên trên trang web — như tập tin JavaScript, CSS, hình ảnh, phông chữ (font), video, hoặc yêu cầu fetch/XHR. Dữ liệu này được ghi lại tự động khi trình duyệt xử lý các tài nguyên, không cần can thiệp từ phía máy chủ.

API hoạt động dựa trên tiêu chuẩn W3C Performance Timeline, và là phần mở rộng của window.performance. Nó cung cấp thông tin theo mili giây với độ chính xác cao (thường ±1 ms), bao gồm thời điểm bắt đầu, kết thúc, thời gian chờ DNS, kết nối mạng, gửi yêu cầu, nhận phản hồi…

Tại sao quan trọng trong SEO?

Google và các công cụ tìm kiếm hiện đại coi tốc độ tải trang là yếu tố xếp hạng trực tiếp — đặc biệt với Core Web Vitals (CWV). Resource Timing API giúp kỹ sư SEO và nhà phát triển:

  • Xác định chính xác tài nguyên nào gây chậm nhất (ví dụ: font bị chặn render, script đồng bộ chặn DOM)
  • Phân biệt giữa chậm do mạng (DNS, TCP, TLS) và chậm do máy chủ (TTFB, response time)
  • Đo lường hiệu quả của các tối ưu như lazy loading, preconnect, preload, hoặc chuyển sang CDN
  • Phát hiện lỗi ẩn như tài nguyên 404/500 không hiển thị trên giao diện nhưng làm chậm toàn bộ chuỗi tải
  • Hỗ trợ phân tích CWV: LCP (tài nguyên ảnh/font lớn nhất), CLS (font swap gây dịch chuyển), FID/INP (script chặn tương tác)

Khác với công cụ tổng quan như Lighthouse hay PageSpeed Insights, Resource Timing API cung cấp dữ liệu thực tế từ người dùng thật (Real User Monitoring – RUM), không phải mô phỏng. Đây là nguồn dữ liệu đáng tin cậy nhất để đánh giá hiệu năng trong điều kiện thực tế.

Cách hoạt động

Khi trình duyệt tải một tài nguyên có cùng nguồn (same-origin) hoặc được bật CORS, nó tự động tạo một đối tượng PerformanceResourceTiming và lưu vào bộ nhớ hiệu năng. Các đối tượng này có thể truy cập qua:

  1. window.performance.getEntriesByType('resource') — trả về danh sách tất cả tài nguyên đã tải
  2. window.performance.getEntriesByName('tên-tập-tin.js') — lọc theo tên cụ thể
  3. Sự kiện performanceentry (khi bật performance.setResourceTimingBufferSize())

Mỗi mục nhập chứa hơn 20 thuộc tính thời gian, ví dụ: startTime, domainLookupStart, connectStart, requestStart, responseStart, responseEnd, duration… Tất cả đều đo bằng mili giây kể từ thời điểm navigationStart.

Lưu ý: Tài nguyên từ miền khác (cross-origin) chỉ trả về một số thuộc tính cơ bản (như name, startTime, duration, initiatorType) trừ khi máy chủ gửi đúng header Timing-Allow-Origin.

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

Dưới đây là các bước triển khai Resource Timing API để phục vụ Technical SEO:

  1. Bật bộ đệm tài nguyên: Đặt kích thước bộ đệm trước khi tải bất kỳ tài nguyên nào:
    window.performance.setResourceTimingBufferSize(200);
  2. Thu thập dữ liệu sau khi trang tải xong (tránh mất dữ liệu do chuyển trang):
    window.addEventListener('load', () => {
      const resources = window.performance.getEntriesByType('resource');
      console.table(resources.map(r => ({
        name: r.name.split('/').pop(),
        type: r.initiatorType,
        duration: Math.round(r.duration),
        size: r.transferSize || 0
      })));
    });
  3. Gửi dữ liệu lên hệ thống phân tích (ví dụ: Google Analytics 4, DataDog, hoặc backend riêng) dưới dạng sự kiện tùy chỉnh — chú ý giới hạn kích thước payload (thường ≤ 8 KB).
  4. Thiết lập giám sát định kỳ: Ghi log dữ liệu mỗi 5–10 phút cho người dùng ở lại lâu, hoặc gửi ngay sau khi trang rời khỏi viewport (dùng pagehide hoặc visibilitychange).

Lỗi thường gặp

  • Không thấy dữ liệu tài nguyên cross-origin: Nguyên nhân thường là thiếu header Timing-Allow-Origin: * hoặc Timing-Allow-Origin: https://domain-cua-ban.com trên máy chủ. Cách khắc phục: thêm header này cho tất cả tài nguyên bên ngoài (CDN, font, analytics script…).
  • Dữ liệu bị cắt do bộ đệm đầy: Mặc định bộ đệm chỉ lưu ~150 mục nhập. Nếu trang có nhiều tài nguyên (ví dụ: SPA với hàng chục bundle), dữ liệu đầu tiên sẽ bị đẩy ra. Cách khắc phục: tăng kích thước bộ đệm sớm trong <head> hoặc dùng sự kiện resourcetimingbufferfull để gửi dữ liệu kịp thời.
  • Thời gian âm hoặc bằng 0: Xảy ra khi trình duyệt không thể đo chính xác (ví dụ: tài nguyên được cache mạnh, hoặc do giới hạn độ phân giải đồng hồ hệ thống). Giá trị 0 ở domainLookupStart hoặc connectStart thường có nghĩa là dữ liệu bị che do cross-origin hoặc cache. Đây là hành vi chuẩn — không phải lỗi.
  • Không bắt được tài nguyên động (dynamic import, fetch): Một số tài nguyên tải sau load (ví dụ: lazy load ảnh, component React) có thể bị bỏ sót nếu không lắng nghe sự kiện performanceentry. Cách khắc phục: đăng ký trình lắng nghe trước khi trang tải xong.

Ví dụ thực tế

Dưới đây là bảng phân tích 5 tài nguyên phổ biến trên một trang thương mại điện tử, lấy từ getEntriesByType('resource'):

Tài nguyên Loại Thời gian tải (ms) Ghi chú SEO
main.css css 127 Chậm do TTFB cao (89 ms) → kiểm tra server hoặc CDN
product-123.jpg img 412 LCP candidate — nên nén và dùng modern format (WebP/AVIF)
inter-bold.woff2 font 680 Gây FOIT/FOFT → cần font-display: swap và preload
analytics.js script 320 Chặn render → chuyển sang async hoặc đặt cuối <body>
api/products fetch 1120 Ảnh hưởng FID/INP → cần tối ưu API hoặc cache phía client

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

Resource Timing API có hoạt động trên mọi trình duyệt?

Có, hỗ trợ từ Chrome 25, Firefox 38, Safari 11, Edge 14 trở lên. Tỷ lệ phủ hiện tại (2024) trên desktop & mobile vượt 98%. Không hỗ trợ trên Internet Explorer.

Có cần bật CORS để đo tài nguyên từ CDN?

Có. Nếu CDN không gửi header Timing-Allow-Origin, bạn chỉ thấy duration và name, không có chi tiết DNS/TCP/TLS. Việc cấu hình phụ thuộc vào nhà cung cấp CDN — Cloudflare, AWS CloudFront, hoặc Vercel đều hỗ trợ tuỳ chỉnh header này.

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

Không. Lighthouse tốt để kiểm tra lần đầu, còn Resource Timing API là công cụ giám sát liên tục từ người dùng thật. Chúng bổ sung cho nhau: dùng Lighthouse để phát hiện vấn đề tiềm năng, dùng Resource Timing để xác minh mức độ nghiêm trọng trong thực tế. Kết hợp cả hai là cách tiếp cận tối ưu cho Technical SEO.