Cách đọc hiểu bảng Waterfall trong phân tích tốc độ website

bởi Nguyễn Đức Anh
Waterfall của GTmetrix

Tóm tắt: Bài viết này sẽ giúp bạn học cách biết ý nghĩa của từng thành phần trong bảng Waterfall và mối liên hệ của nó với tốc độ website.

Là người mới tham gia vào lĩnh vực tối ưu tốc độ trang web, đọc bảng Waterfall (*) có thể là điều mà bạn cảm thấy quá sức khó hiểu – thậm chí còn có cảm giác sợ hãi khi mới nhìn qua lần đầu.

Trong phần mở đầu của chuỗi bài viết về bảng Waterfall, bạn sẽ được tìm hiểu ý nghĩa của từng thanh (bar), dòng (line), và màu sắc của chúng, hy vọng rằng bài này sẽ giúp bạn hiểu rõ hơn báo cáo của GTmetrix (một công cụ chất lượng trong lĩnh vực đánh giá tốc độ tải trang).

Lưu ý: Hướng dẫn này chủ yếu hướng tới bảng Waterfall mà bạn thấy trong kết quả phân tích của GTmetrix – màu sắc, hình dáng, và thuật ngữ có thể khác ở những bảng Waterfall do các công cụ khác phân tích (như trong công cụ DevTools của Google Chrome), nhưng ý tưởng chủ đạo được nêu ở đây thì chung cho tất cả.

Waterfall là gì?

Nó chính là cái này:

bảng waterfall

Bảng Waterfall của GTmetrix

Bảng trên hiển thị hành vi tải về của từng yêu cầu (request-by-request) trên website của bạn. Từng thành phần mã (JavaScript, CSS), file media (ảnh, âm thanh, video), và/hoặc các nguồn của bên thứ ba (third-party) trên trang đều được hiển thị ở đây.

Waterfall có ích lợi gì?

Vì bảng Waterfall hình ảnh hóa hành vi tải về nên bạn nhìn được chi tiết cách các yêu cầu download về theo thứ tự. Thời gian thực thi của các yêu cầu cũng được hiển thị, với độ dài thanh thay đổi tương ứng với độ dài của từng yêu cầu, lượt tải, và/hoặc thời gian thực thi.

Tất cả dữ liệu này hướng đến việc hỗ trợ giải quyết các rắc rối về hiệu suất (tốc độ website) cũng như các vấn đề của trang nói chung.

Thực sự là tổng thể trang thì còn có rất nhiều thứ khác nữa, nhưng nếu bạn sắp xếp các thứ theo từng phần thì nó cũng không quá tệ đâu.

Tránh cảm thấy ngộp

Chúng ta sẽ bắt đầu với việc xem xét từng phần, dòng và màu sắc có ý nghĩa như thế nào.

Bảng Waterfall được chia thành các cột – ví dụ như hình bên dưới bạn thấy năm cột:

bảng waterfall chia cột

Các cột trong bảng Waterfall: tên file, mã trạng thái, file gốc, kích cỡ file, thời gian tải trong timeline (dòng thời gian)

Dưới đây là những gì bạn sẽ thấy, nhìn từ trái qua phải:

1. Tên file

Đây là tên của file hoặc tài nguyên được tải bởi trình duyệt web. Trong bảng Waterfall, nó bao gồm tiền tố HTTP – thường là GET hoặc POST (nói chung bạn không cần lo lắng đến tiền tố này).

cột filename trong GTmetrix

Tên file của các tài nguyên trên trang web của bạn được hiển thị trong cột đầu tiên

Đôi khi trông chúng khá bừa bộn và đáng sợ. Bạn cố gắng đừng quá bận tâm về nó. Trong thực tế, bạn có thể không nhất thiết phải biết từng file này là gì ngay lập tức.

Mẹo:

tên file trong bảng

Hover chuột qua tên file sẽ giúp bạn biết được đường dẫn đầy đủ (full path) của file. Ctrl + click sẽ tải file trên một tab khác. Điều này có ích trong trường hợp bạn muốn xem chính xác file đang được tham chiếu là gì.

Khi duyệt qua danh sách, bạn nên tập trung vào phần đuôi mở rộng của file. Nếu file có đuôi “.jpg” và “.png” sẽ là các tài nguyên ảnh, .css là tài nguyên stylesheets. File “.js” là JavaScript, vân vân.

Ngoài ra bạn nên để ý các từ khóa trong tên file, điều này giúp bạn phát hiện chúng có nguồn gốc từ đâu.

chú ý vào tên file

Bạn có thể phát hiện ra plugin nào đấy là nguyên nhân gây chậm website bằng cách nhìn vào tên file – trong trường hợp này là plugin JetPack.

Lấy ví dụ, nếu bạn sử dụng WordPress, bạn có thể nhận ra tên của plugin mà bạn đã cài, hoặc tên của giao diện bạn đang dùng.

2. Trạng thái phản hồi HTTP

Trạng thái phản hồi HTTP tạo thành mã trạng thái (status code) và thông báo mà bạn có thể đọc được (ví dụ lỗi 404 không tìm thấy trang). Trạng thái phản hồi được trả về từ máy chủ và nói cho trình duyệt biết liệu yêu cầu nhắm đến tài nguyên đó có thành công hay là không.

Yêu cầu thành công = Mã trạng thái 1xx/2xx/3xx

mã trạng thái

Mã trạng thái của website nên chủ yếu là 200

  • 1xx – Thông tin – bạn hiếm khi thấy nó trong bảng Waterfall
  • 2xx – Thành công – yêu cầu được xác nhận là đã thành công (hầu hết sẽ là mã 200)
  • 3xx – Chuyển hướng – yêu cầu được chuyển hướng (chuyển hướng 301 là phổ biến nhất)

Yêu cầu không thành công = Mã trạng thái 4xx/5xx

mã trạng thái 4xx, 5xx

Bảng Waterfall sẽ nhanh chóng phát hiện ra các yêu cầu bị lỗi trên trang

  • 4xx – lỗi client – đây là lỗi diễn ra khi thực hiện yêu cầu (lỗi 404 file không tìm thấy, lỗi 401 truy cập không được phép, lỗi 403 bị cấm, vân vân)
  • 5xx – lỗi server – máy chủ gặp thất bại khi xử lý yêu cầu (lỗi máy chủ nội bộ 500,  lỗi dịch vụ không khả dụng 503, vân vân)

3. File gốc

Đây là vị trí mà file được tải về. Nếu bạn sử dụng nhiều tài nguyên từ bên thứ ba (chẳng hạn mã nhúng YouTube, widget của Facebook, vân vân) thì ở phần này bạn sẽ thấy hostname của chúng không đến từ host gốc của bạn.

file gốc

File gốc cho bạn biết tài nguyên đến từ nơi nào

Nếu bạn sử dụng CDN, bạn có thể thấy nhiều file/tài nguyên đến từ cùng nguồn – đây cũng là một cách để biết CDN của bạn đã được cấu hình chính xác hay chưa.

Mẹo:

hover để biết địa chỉ IP

Hover qua file gốc sẽ cho bạn biết địa chỉ IP, điều này giúp bạn kiểm tra xem IP chính xác có đang được dùng hay không (ví dụ trong trường hợp bạn chuyển host hoặc hostname của bạn phân giải ra nhiều IP).

4. Kích cỡ file

Cái tên nói lên tất cả, ở phần này bạn sẽ biết được kích cỡ của file hoặc tài nguyên. Tổng kích cỡ file của tất cả các yêu cầu tạo thành Tổng dung lượng trang. Giá trị này càng nhỏ, trang của bạn càng tải nhanh hơn.

cột kích cỡ file trong GTmetrix

Cột kích cỡ file trong bảng Waterfall

Nếu bạn thấy file có kích cỡ lớn (thường hay xảy ra với ảnh, file âm thanh, video), bạn cần ưu tiên sửa nó trước, trước khi tìm hiểu các phần tiếp theo trong bảng Waterfall.

file có kích cỡ lớn

Bạn có thể tìm hiểu các plugin giúp tối ưu hóa ảnh trên trang Chim Cắt ở đây. Ngoài ra là phần lý thuyết về tối ưu dung lượng ảnh nếu bạn muốn tìm hiểu sâu hơn nữa.

Mẹo:

hover để biết kích cỡ file

Hover qua phần thông tin size để biết được kích cỡ thực / uncompressed và kích cỡ đã được nén (nếu nó có khả năng nén / compressed, trong trường hợp này chủ yếu là file CSS và JS).

5. Thời gian tải

Đây là phần trên bảng Waterfall cho biết thời gian tải cụ thể của từng thành phần, yêu cầu trên trang.

Đây sẽ là nơi bạn cần bỏ nhiều thời gian tìm hiểu nhất trong bảng Waterfall!

thời gian tải của từng thành phần trên trang

Mô hình thanh xếp dạng thác mô tả cách trang của bạn được tải về – các vấn đề về hiệu suất, tốc độ phần lớn được phát hiện trong khu vực này. Chúng ta sẽ tìm hiểu cụ thể hơn trong phần nói về Request timings.

Tiêu đề yêu cầu/phản hồi

Click vào yêu cầu sẽ tiết lộ thông tin tiêu đề yêu cầu/phản hồi (Request/Response header). Chúng bao gồm thông tin đa dạng, đầy đủ liên quan đến cách tài nguyên của bạn được phục vụ.

Chúng tôi dự định tìm hiểu chủ đề yêu cầu/phản hồi chi tiết hơn trong bài viết khác. Trong bài viết này, chúng tôi chỉ trình bày ngắn gọn một số mục chính trong mỗi phần:

Tiêu đề Yêu cầu

Chúng là các tiêu đề HTTP mà trình duyệt gửi đến server. Với người mới, thường bạn không có gì để làm trong phần tiêu đề Yêu cầu.

Tiêu đề yêu cầu

Tiêu đề yêu cầu là tiêu đề HTTP mà trình duyệt gửi đến server

Tiêu đề phản hồi

Phản hồi là những tiêu đề HTTP mà máy chủ gửi trở lại, và đôi khi là chìa khóa trong việc chẩn đoán các vấn đề về hiệu suất.

tiêu đề phản hồi

Tiêu đề phản hồi là các tiêu đề HTTP mà máy chủ gửi trở lại cho trình duyệt

Về cơ bản, chúng biểu thị cấu hình, cài đặt, hoặc thuộc tính của các yêu cầu.

Với tiêu đề phản hồi, bạn có thể biết được liệu tài nguyên đó có:

  • Được nén hay là không (ví dụ gzip)
  • Cache
  • Được phục vụ thông qua CDN (hit/miss/revalidated)
  • Keep-Alive được bật
  • Phục vụ thông qua HTTP/2
  • Chuyển hướng nội bộ (ví dụ HGST)

Mẹo:

Nếu báo cáo GTmetrix cho thấy bạn có điểm kém cho những khuyến nghị ở trên, kiểm tra tiêu đề phản hồi sẽ có khả năng tiết lộ nhiều chi tiết giúp bạn biết lý do vì sao.

Thời gian yêu cầu / Request timings

Hãy cùng quan sát bảng Waterfall tối giản dưới đây:

Waterfall dạng tối giản

Bạn sẽ ngay lập tức để ý thấy từng yêu cầu có một bộ thanh màu tương ứng ở bên phải.

Nói ngắn gọn thì từng màu đại diện cho một phần khác nhau trong quá trình tải của một nguồn cụ thể.

Chúng ta sẽ tìm hiểu ý nghĩa của từng màu ngay sau đây:

Màu nâu – chặn

Chặn (blocking) là thời gian mà yêu cầu phải đợi trong hàng chờ trình duyệt (browser’s queue) để có thể bắt đầu khởi động một yêu cầu.

chặn trong waterfall

Chặn ngăn các yêu cầu tiếp theo được xử lý

Những thứ có thể kết hợp cùng nhau gây ra thời gian chặn bao gồm:

  • Chờ đợi kết nối có sẵn.
  • Tải/thực thi JavaScript hoặc CSS (mặc dù các trình duyệt đã thông minh hơn trong việc tối thiểu hóa chúng).
  • Thời gian kết nối SSL (thường được bao gồm trong thời gian kết nối / connection time)
  • Xác thực HTTP (yêu cầu bổ sung cần thiết để thiết lập xác thực).

Màu xanh xám – Tra cứu DNS

Trước khi kết nối đến server được tạo thành, hostname cần phân giải thành IP – điều này được gọi là tìm kiếm/tra cứu DNS (lookup).

tìm kiếm DNS

Thời gian tìm kiếm DNS cho biết khoảng thời gian cần để phân giải tên miền thành địa chỉ IP

Các yêu cầu DNS được cache, vì thế thời gian tìm kiếm DNS có thể khác nhau giữa các lần kiểm tra kế tiếp – đây là lý do giải thích vì sao bạn thấy thời gian tìm kiếm DNS cao hơn trong lần kiểm tra đầu tiên. Bạn cần ghi nhớ điều này khi thực hiện so sánh bảng Waterfall.

Màu xanh lá cây – Kết nối

Đây là thời gian cần thiết để hình thành kết nối TCP giữa máy chủ và host/client.

thời gian kết nối TCP

Lưu ý: Thời gian kết nối SSL thường được bao gồm trong thời gian này, nhưng đôi khi nó nằm trong thời gian chặn (blocking)

Màu đỏ – Gửi

Đây là thời gian cần để trình duyệt gửi yêu cầu đến máy chủ. Nếu đó là yêu cầu PUT hoặc POST, thì điều này sẽ bao gồm cả thời gian tải lên bất cứ dữ liệu nào đi kèm với yêu cầu đó.

Thời gian gửi thường không phải là vấn đề

Màu tím – Đợi

Đây là thời gian phải bỏ ra để đợi máy chủ tạo ra phản hồi.

thời gian đợi

Thời gian chờ cho biết máy chủ của bạn phản hồi yêu cầu nhanh như thế nào

Có nhiều lý do giải thích vì sao thời gian đợi của bạn có thể bị dài quá mức.

Màu xám – Đang nhận

Đây là thời gian cần thiết để trình duyệt cần để tải yêu cầu từ máy chủ.

thời gian nhận

Thời gian nhận dài thường cho thấy kích cỡ file lớn

Những thứ sau có thể cùng nhau góp phần làm thanh nhận dài hơn:

  • Tải file lớn
  • Gặp phải giới hạn băng thông với nhiều file tải xuống đồng thời
  • Vấn đề về mạng

Thời gian sự kiện

thời gian sự kiện trong waterfall

Các đường sự kiện trên Bảng Waterfall

Các đường này đại diện cho thời gian cụ thể mà tại đó các mốc cụ thể đạt tới. Dưới đây là mô tả về ý nghĩa đại diện của từng màu:

Đường màu xanh lá cây – First Paint

First paint là thời điểm mà bất kỳ render nào được bắt đầu trên trang web. Điều này có thể là hiển thị logo, tải một ảnh – bất kỳ điều gì mà người dùng có thể thấy trên trang.

Đường màu xanh lá cây – First Contentful Paint

First Contentful Paint được kích hoạt khi bất kỳ nội dung nào được style – ví dụ, một cái gì đó được định nghĩa trong DOM (Document Object Model). Điều này có thể là render văn bản, ảnh hoặc canvas.

Đường màu xanh da trời – DOM đã được tải về

Điều này có nghĩa là khi Document Model Object (DOM) được xem như là sẵn sàng trong trình duyệt. Đừng lo lắng về điều này quá nhiều – nó cực kỳ kỹ thuật, cực kỳ nhanh.

Đường màu đỏ – Đang tải

Đang tải (Onload) nghĩa là trang và tất cả các yếu tố cấu thành của nó đã tải xong và đang được xử lý bởi trình duyệt.

Đường màu tím – Tải đầy đủ

Tải đầy đủ nghĩa là sự kiện Onload đã hoàn tất, và không có hoạt động mạng nào xảy ra trong vòng 2 giây.

Mẹo:

thời gian của GTmetrix

Trong báo cáo GTmetrix, một vài trong các dòng này được đại diện trong tab Timings.

Chúng được hình ảnh hóa để bạn dễ đọc hơn.

(Dịch từ bài viết: How to Read a Waterfall Chart for Beginners, website: GTmetrix)

0 bình luận

Khu vực bình luận

avatar