WebPageTest hướng dẫn — đo performance chi tiết hơn PSI

WebPageTest (WPT) là công cụ đo hiệu năng miễn phí với độ chi tiết cao hơn PSI. WPT cho phép chọn vị trí địa lý, trình duyệt, tốc độ mạng, kèm biểu đồ waterfall, filmstrip và video.

WPT là gì — so với PSI

WebPageTest miễn phí tại webpagetest.org, phiên bản trả phí qua catchpoint.com/webpagetest. WPT chi tiết hơn PSI: chọn vị trí từ 40+ thành phố, trình duyệt Chrome/Firefox/Edge, tốc độ mạng tùy chỉnh.

Kèm waterfall và filmstrip cho từng lần chạy.

Đánh đổi: WPT phức tạp hơn, cần hiểu các chỉ số để dùng hiệu quả.

WPT vs PSI — khi nào dùng cái nào

Khi nào cần WPT thay vì PSI?

Dùng WPT khi cần debug tắc nghẽn mạng qua waterfall, so sánh trước/sau fix bằng filmstrip, hoặc test từ vị trí gần người dùng thật.

PSI đủ cho kiểm tra nhanh hàng ngày. WPT dành cho audit sâu và so sánh có chứng cứ.

Bước 1 — Thiết lập test

WPT có hơn 30 tùy chọn cấu hình — người mới thường bị ngợp. Chọn cài đặt phù hợp đối tượng người dùng và mục tiêu test.

Không cần cấu hình hết tất cả.

Cài đặt khuyến nghị cho shop VN

1. Dán URL cần test — URL trang cụ thể, không mặc định trang chủ.
2. Test Location: “Singapore – EC2” — gần VN nhất, độ trễ 30-50ms.
3. Trình duyệt: Chrome mobile (Pixel 5 mặc định).
4. Kết nối: “4G” (1.6Mbps tải về, 750kbps tải lên, 170ms RTT) — gần với người dùng mobile VN điển hình.
5. Số lần test: 3 (lấy trung vị) hoặc 9 (đủ độ tin cậy thống kê).
6. Repeat View: “First View and Repeat View” — đo cả chưa cache và đã cache.
7. Bấm “Start Test” và chờ 1-3 phút.

Cài đặt nâng cao

• Capture Video: tick để có filmstrip và video tiến trình tải.
• Block requests: mô phỏng tắt plugin hoặc script để xem tác động.
• Custom script: tự động hoá đăng nhập, click, cuộn trang trước khi đo.
• Lighthouse Audit: tick để có kết quả Lighthouse kèm theo WPT.

Singapore vs Hong Kong vs Tokyo cho người dùng VN?

Singapore (EC2) là lựa chọn tốt nhất — độ trễ từ TP.HCM khoảng 30-50ms, mạng ổn định. Hong Kong gần hơn nhưng không nhất quán.

Tokyo xa hơn (80-120ms) — không phản ánh đúng người dùng VN.

Bước 2 — Đọc biểu đồ waterfall

Waterfall hiển thị mọi request HTTP với thời gian chi tiết: DNS, connect, SSL, send, wait (TTFB), receive. Đây là công cụ debug mạng mạnh nhất WPT có — PSI không có waterfall, phải dùng Chrome DevTools thủ công.

5 thông tin quan trọng từ waterfall

1. TTFB của tài liệu HTML (request #1): thời gian wait = TTFB. Trên 800ms là tắc nghẽn server.
2. Tài nguyên chặn hiển thị: CSS/JS tải trước lần vẽ đầu tiên. Càng nhiều càng chậm FCP.
3. Nhiều tên miền, nhiều DNS lookup: mỗi tên miền mới thêm 30-100ms. Nên dùng ít domain.
4. Ảnh lớn chặn cuộn: request ảnh trên 500KB không có lazy load.
5. Request bên thứ ba chậm: tracker (GA, Facebook Pixel, widget chat) chiếm thời gian chính.

Ý nghĩa màu sắc trong waterfall

Xanh dương : DNS lookup
Cam        : TCP connect
Tím        : SSL/TLS handshake
Xanh lá    : Thời gian chờ (TTFB) — server xử lý
Xanh nhạt  : Nhận dữ liệu (tải về)
Xám        : Chờ tài nguyên khác

Đọc waterfall — thứ tự ưu tiên

Tập trung vào 10 request đầu tiên — chúng quyết định phần lớn FCP và LCP. Request có thanh xanh lá (TTFB) dài hơn 500ms cần điều tra server hoặc cache.

Tham chiếu với bài TTFB — phân tích sâu và cách tối ưu khi TTFB là tắc nghẽn chính.

Bước 3 — Đọc filmstrip

Filmstrip ghi ảnh chụp màn hình mỗi 100ms (hoặc 200/500ms tùy cấu hình) trong quá trình tải. Trực quan hoá tiến trình từ màn hình trắng → lần vẽ đầu tiên → LCP → tải hoàn toàn.

Các pattern filmstrip cần phân tích

• Màn hình trắng kéo dài (trên 1 giây): TTFB chậm hoặc CSS chặn hiển thị nặng.
• FCP nhanh nhưng LCP muộn: ảnh hero tải chậm — fix bằng WebP và priority hint.
• Layout nhảy giữa các khung: CLS — phần tử dịch chuyển sau khi hiển thị ban đầu. Fix bằng đặt trước kích thước.
• Tải hoàn toàn muộn (trên 5 giây): script tracker hoặc analytics bên thứ ba.

So sánh 2 test trước/sau fix

1. Chạy test baseline → lưu URL kết quả.
2. Triển khai fix.
3. Chạy test mới → lưu URL kết quả.
4. Vào tab “Compare” của WPT → dán 2 URL test → bấm “Compare”.
5. WPT hiển thị filmstrip và waterfall song song cùng chênh lệch chỉ số.

Filmstrip và CLS

Filmstrip là cách trực quan nhất để xác định CLS. So sánh 2 khung liên tiếp, thấy phần tử di chuyển là có CLS.

PSI không có filmstrip — cần DevTools để làm thủ công.

Xem thêm Fix CLS — 5 bước phát hiện và sửa.

Bước 4 — Audit kết quả theo grade

WPT chấm điểm A-F cho 6 hạng mục: First Byte Time, Keep-alive Enabled, Compress Transfer, Compress Images, Cache static content, Effective use of CDN. Grade F hoặc D là ưu tiên cao cần fix.

Grade thường thấp cho WordPress

Grade A-B — không cần ưu tiên

Grade A hoặc B có nghĩa hạng mục đó đã ổn. Không cần đầu tư thêm thời gian — tập trung vào grade C-F.

Bước 5 — Theo dõi cải thiện theo thời gian

WPT lưu lịch sử mọi test trong tài khoản. So sánh kết quả theo thời gian giúp đo mức cải thiện sau từng thay đổi lớn.

Thiết lập baseline theo dõi

1. Đăng nhập tài khoản WPT (miễn phí).
2. Chạy baseline 9 lần cho các URL quan trọng: trang chủ, 3 landing page, 5 trang sản phẩm bán chạy.
3. Lưu URL kết quả vào bảng tính kèm ngày và chỉ số.
4. Sau mỗi thay đổi lớn: chạy lại 9 lần cùng cấu hình.
5. Cập nhật bảng tính với chênh lệch.
6. Xem lại mỗi quý: cải thiện có nhất quán không?

Tích hợp CI/CD — nâng cao

• Lấy API key trong phần cài đặt tài khoản WPT.
• Thêm bước chạy WPT test sau mỗi lần triển khai.
• Fail build nếu chỉ số giảm quá ngưỡng (ví dụ LCP tăng trên 200ms).
• Công cụ: npm package webpagetest-cli, tích hợp GitHub Actions.

3 vs 9 lần chạy — khác gì?

3 lần đủ cho vòng lặp phát triển hàng ngày, trung vị biến động ±10%. 9 lần dùng cho audit chính thức, biến động ±3%.

Checklist dùng WPT cho shop VN

1. Chọn Test Location “Singapore EC2” mặc định cho shop nhắm người dùng VN.
2. Chọn kết nối 4G để phản ánh người dùng mobile điển hình.
3. Chạy 3 lần lấy trung vị cho iterate hàng ngày, 9 lần cho audit chính thức.
4. Tick “Capture Video” để có filmstrip — cần thiết để phân tích CLS và tiến trình tải.
5. Xem 10 request đầu trong waterfall trước khi kéo xuống.
6. So sánh grade — tập trung fix F và D trước.
7. Sau fix, dùng tính năng Compare để đối chiếu filmstrip và waterfall.
8. Lưu URL kết quả vào bảng tính để theo dõi cải thiện qua thời gian.
9. Dùng PSI cho check nhanh hàng ngày, WPT cho audit sâu định kỳ.

Bài liên quan trong cluster Performance

• PageSpeed Insights — kiểm tra nhanh CWV
• CrUX — dữ liệu thực tế Google
• Tối ưu LCP — đo và fix
• TTFB — phân tích sâu
• Fix CLS — phát hiện và sửa

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

Cần hỗ trợ audit hiệu năng chuyên sâu và lập kế hoạch tối ưu Core Web Vitals? Xem dịch vụ tối ưu hiệu năng của Web22.