Hướng dẫn sử dụng Pingdom để kiểm tra tốc độ website

Tốc độ website là yếu tố rất quan trọng, đặc biệt là với các website thương mại điện tử, khi mà chỉ nửa giây hoặc một giây giảm được có thể khiến bạn có lời thay vì lỗ vốn.

Hôm nay mình sẽ hướng dẫn các bạn sử dụng Pingdom để kiểm tra tốc độ website, nó nằm trong nhóm công cụ hàng đầu về lĩnh vực này. Trước tiên bạn vào trang web sau: https://tools.pingdom.com/

nhập URL và chọn địa điểm kiểm tra
Nhập URL và chọn địa điểm

Ở phần URL bạn nhập địa chỉ website muốn kiểm tra, hoặc trang cụ thể mà bạn muốn. Còn ở phần Test from nên chọn Asia – Japan – Tokyo (tức là địa chỉ dùng để giả lập vị trí địa lý của người dùng, tốt nhất là Việt Nam, nhưng vì họ không có lựa chọn này, nên bạn sẽ chọn địa chỉ thay thế gần Việt Nam nhất, trong trường hợp này là Nhật Bản. Nếu người dùng chủ yếu của bạn ở nơi khác, hãy chọn vị trí gần đó nhất có thể). Cuối cùng bạn nhấn START TEST để bắt đầu tiến hành kiểm tra.

Kéo xuống bạn sẽ thấy kết quả như thế này:

kết quả pingdom

Trong đó:

  • Performance gradeđiểm hiệu suất tổng quan của trang web. Trong đó A thì tốt hơn B, B tốt hơn C, C tốt hơn D, và cứ như vậy. Trang càng được tối ưu hóa tốt thì điểm số càng cao.
  • Page sizedung lượng toàn trang, như trang trên có dung lượng 221,2 KB, khá là nhẹ.
  • Load time chỉ thời gian cần để tải toàn bộ trang, trang này có tốc độ tải 1,17s tại thời điểm kiểm tra. Không giống các chỉ số khác, con số này có thể thay đổi vào lần kiểm tra khác, dù trang của bạn không thay đổi gì, vì tốc độ trang không chỉ phụ thuộc vào website của bạn mà còn phụ thuộc vào hệ thống mạng.
  • Requests là số lượng kết nối trong trang (các link ảnh, CSS, JS, vân vân). Trang này cũng ít, khi nó chỉ có 12 kết nối.

Những trang không được tối ưu tốt, điểm số có thể khá tệ, thí dụ như trang dưới đây (một web khác của mình):

trang có điểm số thấp

Nó có điểm hiệu suất chỉ 77, xếp hạng C, và thời gian tải trang lên đến hơn 4 giây.

Có một điểm lưu ý là load time (thời gian tải toàn bộ trang) thấp không đồng nghĩa với performance grade (hiệu suất) cao. Đây là hai khái niệm khác nhau. Một trang có rất nhiều ảnh chắc chắn có thời gian tải trang lớn nhưng nếu nó được tối ưu tốt thì vẫn có điểm hiệu suất cao, như ví dụ sau:

Nó cũng giống như chuyện cân nặng và trí thông minh là hai chuyện khác nhau…

Kéo tiếp xuống bên dưới, bạn sẽ thấy phần đánh giá điểm số và xem mình đang gặp vấn đề ở đâu:

đánh giá điểm số hiệu suất

Như hình trên cho thấy hầu hết mọi thứ đều ổn (điểm A), có 2 cái có thể cải thiện có điểm D và B.

Còn Response codes/mã phản hồi là 200 cho thấy trang đang truy cập bình thường.

Không phải lúc nào điểm số cũng đẹp như mơ như vậy, điểm số tốt của trang trên dĩ nhiên một phần do được tối ưu, nhưng không thể không nhắc đến lý do quan trọng khác là nó có kết cấu đơn giản. Một trang khác của mình cũng được tối ưu, nhưng điểm số thì kém hơn khá nhiều:

điểm số không tốt

Có đến 3 điểm F và một điểm D. Điểm F gồm không nén gzip, quá nhiều yêu cầu (requests), và không bổ sung thời gian hết hạn. Điểm D liên quan đến việc thời gian tìm kiếm DNS quá dài.

Đôi khi Pingdom đánh giá điểm số nén không chính xác, vì trang trên của mình tuy không có nén gzip nhưng nó lại có nén Brotli còn tốt hơn gzip nhưng Pingdom lại không nhận ra.

Phần thú vị hơn ở bên dưới nữa. Đầu tiên là Content size by content type / Kích cỡ nội dung theo kiểu nội dung:

nội dung và kích cỡ tương ứng

Với thông tin này bạn sẽ thấy thành phần nào trên trang đang chiếm nhiều dung lượng nhất, chẳng hạn ở trên JavaScript chiếm nhiều nhất, sau đó là CSS, rồi HTML và cuối cùng là ảnh. Nói chung trong đa số các trang, dung lượng tuyệt đối (tính theo KB) của JS và CSS tương đối ổn định (vì nó thường là bộ khung chung của cả trang web), còn HTML và Image sẽ thay đổi nhiều, đặc biệt là ảnh.

Ví dụ về một trang khác cũng nằm trong cùng tên miền trên:

nội dung, kích cỡ trang khác

Kết quả trên cho thấy JS và CSS vẫn giữ nguyên nhưng ảnh thì chiếm nhiều dung lượng nhiều nhất (đây là điều thường xuyên xảy ra trong đa số các trang) và HTML ít nhất (đây cũng là hiện tượng phổ biến).

Ngay bên tay phải là thống kê về số lượng request theo kiểu nội dung:

số lượng request theo kiểu nội dung

Vì đây là trang đơn giản nên số lượng request ít. Còn khi trang phức tạp hơn, số lượng request cũng tăng theo:

rang có nhiều request

Nói chung bạn càng sử dụng nhiều plugin (nếu bạn dùng WordPress), nội dung dài, nhiều ảnh thì khả năng số lượng yêu cầu sẽ càng lớn.

Tiếp theo là phần kích thước nội dung theo tên miền

kích thước nội dung theo tên miền

Như hình trên, chúng ta có thể thấy tên miền chimcat.r.worldss.net chiếm đến 72,32% dung lượng của toàn trang web (cũng dễ hiểu vì đây là tên miền CDN của trang Chim cắt). Sau đó là của Google tag, tiếp đến mới là của tên miền gốc, cuối cùng là Google Analytics.

Chúng ta sẽ xem ví dụ khác của một tên miền khác:

kích cỡ nội dung theo tên miền khác

Các vị trí từ trên xuống dưới theo dung lượng như sau:

  1. Từ CDN của tên miền
  2. Từ Facebook
  3. Từ Youtube
  4. Từ font của Google
  5. Từ trang ytimg.com (ảnh đại cho video của Youtube, nhưng khác tên miền nên nó vẫn tính là tên miền khác)
  6. Bây giờ mới đến tên miền gốc
  7. Tập hợp những thứ khác được đưa vào trong nhóm khác

Phần cuối trong nhóm này là nó thống kê số lượng request theo tên miền:

số lượng request theo tên miền

Ví dụ về một tên miền khác:

số lượng request theo tên miền khác

Tiếp đến là phần cuối cùng, nơi bạn có khả năng tìm được nhiều vấn đề liên quan đến tốc độ nhất. Nó làm được như vậy vì phần này thống kê chi tiết thời gian liên quan đến từng thành phần của website.

từng thành phần tải về

Ở phần Sort by bạn sẽ lựa chọn được tiêu chí thống kê:

Ví dụ về một số kiểu:

  • Load order: thứ tự tải về – nó sẽ sắp xếp các bộ phận trang web theo thứ tự tải về
  • Load time: thời gian tải – nó sẽ sắp xếp các bộ phận trang web theo tổng thời gian tải về
  • DNS Time: thời gian truy vấn DNS
  • Content Type: kiểu nội dung

Còn Rising theo mặc định nghĩa là từ nhỏ đến lớn, từ trước đến sau, bạn bỏ tick nó sẽ sắp xếp ngược lại.

Filter được dùng để lọc, chẳng hạn bạn muốn lọc riêng xem CSS tải thế nào thì gõ .css vào đấy, xem JS tải thế nào thì gõ .js vào. Bạn cũng có thể muốn xem một tên miền cụ thể tải thế nào thì cũng gõ vào đó để xem thống kê.

Ví dụ mình muốn xem trang tải ảnh PNG như thế nào, mình gõ .png vào:

ảnh PNG tải như thế nào, nhanh chậm ra sao

Ảnh trên cho thấy có ảnh có dung lượng khá nhỏ nhưng lại mất nhiều thời gian nhất để tải về…

Còn ở phần Legend, thời gian của từng nhiệm vụ được định nghĩa như sau:

  • DNS: Thời gian Trình duyệt web tìm kiếm thông tin DNS
  • SSL: Thời gian Trình duyệt web đang thực hiện bắt tay SSL
  • Connect: Thời gian Trình duyệt web kết nối với máy chủ
  • Send: Thời gian Trình duyệt web gửi dữ liệu cho máy chủ
  • Wait: Thời gian Trình duyệt web đợi dữ liệu từ máy chủ
  • Receive: Thời gian Trình duyệt web nhận dữ liệu từ máy chủ
  • Blocked: Thời gian Trình duyệt web chưa sẵn sàng gửi

Các biểu tượng bên trái ngoài cùng bảng file được giải nghĩa như sau:

giải nghĩa các biểu tượng
  • HTML Document: Tài liệu HTML
  • JavaScript: file JavaScript
  • CSS: file CSS
  • Image: file ảnh
  • Text/Plain: Tài liệu văn bản thuần
  • Other: Tất cả kiểu nội dung không rõ khác
  • Warning: Các yêu cầu nhận được phản hồi 4XX, 5XX hoặc không thể tải về
  • Redirect: Các yêu cầu nhận được phản hồi 3XX và thực tế được chuyển hướng

Tại sao phần này lại quan trọng?

Đặc điểm của WordPress là nó giống lego lắp gắp. Trang của bạn được tạo từ nhiều plugin và bạn không hiểu người tạo ra plugin đó thiết kế như thế nào. Điều đó dẫn đến hệ quả là trang của bạn có thể tải về nhiều thứ mà bạn không ngờ tới! Ngay cả khi bạn dùng các plugin tối ưu hóa như:

Thì vẫn có những chi tiết lắt léo mà trang web giấu kín. Phần cuối của Pingdom giúp chúng ta tìm ra các chi tiết đó.

Chẳng hạn nhờ phần này mà mình biết được có plugin làm website phải tải font không cần thiết khá nặng, một số tài nguyên không tải từ CDN mà vẫn tải từ tên miền gốc, hóa ra công cụ tìm kiếm tùy chỉnh của Google tải rất nhẹ nhàng (chỉ khoảng 0,2 giây).

Nhờ những thông tin như vậy bạn có thể tùy chỉnh sâu hơn nữa nhằm tối đa hóa khả năng tối ưu.

Chúc website của bạn nhanh như Chim cắt.

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top