WebpageTest kiểm tra tốc độ Website trên desktop và mobile

GIANG

1110

25-05-2018

Khi tham gia một dự án về web, việc kiểm tra tốc độ load page và kiểm tra trên nhiều enviroment là những điểm quan trọng bạn cần chú ý tới trong quá trình test web này. Nếu bạn cần một công cụ đo tốc độ website hỗ trợ nhiều nơi nhất, đây có lẽ là sự lựa chọn vô cùng tối ưu dành cho bạn. Bizfly Cloud xin chia sẻ cách công cụ WebpageTest kiểm tra tốc độ Website trên desktop và mobile.

1. Tổng quan về Webpagetest 

Webpage chính là một website free cho phép bạn analyze website mà bạn muốn và ghi nhận lại tốc độ load của từng file, từng yếu tố trên web, qua đó bạn có thể biết được những yếu tố nào đang kéo tốc độ load website của bạn chậm lại và cho bạn một báo cáo đầy đủ tất cả các thông tin này. 

Báo cáo cũng có kèm theo thông tin liệt kê những gì bạn có thể điều chỉnh để cải thiện tốc độ website. Bạn có thể export report này ra và download về. Công cụ này không những sử dụng cho tester mà công cụ này còn hỗ trợ cho developer một cách thuận tiện và nhanh chóng.

2. Ưu điểm của Webpage test

- Sử dụng webpage free, nhanh chóng và thuận tiện không cần cài đặt. 

- Test độ tải page thuận tiện và nhanh chóng.

- Test web trên desktop và mobile.  

- Thuận tiện cho việc test trong nhiều môi trường và nhiều trình duyệt khá nhau.

3. Hướng dẫn cách test

Đầu tiên ta thực hiện truy cập vào link: http://www.webpagetest.org/

Giao diện webpage như sau:

Hình ảnh giao diện Webpage

Nhập url trang web muốn test vào textbox ''Enter a website URL'' sau đó chọn ''Test location'' nào bạn muốn test.

Nếu bạn muốn test trên môi trường nào thì bạn sẽ chọn browser cho môi trường bạn muốn test, ở đây webpage còn support cả mobile cho các loại device theo trình duyệt mà bạn muốn test.

Sau đó nhấn start test. trong thời gian thực hiện test trang web hiển thị như sau:

Sau khi testing thành công màn hình kết quả test được hiển thị như sau:

4. Hướng dẫn đọc thông số kết quả test

Load time: Là thời gian bắt đầu gửi request cho tới khi browser load thành công.

First byte: Thời gian cho đến khi server respond với byte đầu tiên

Start render: Thời gian cho đến khi bắt đầu hiển thị nội dung trên màn hình

DOM Elements: Number of elements trong document (ở đây elements là các thuộc tính class, id, name)

Document Complete

Time: Tương tự thời gian load page thành công

Requests: Số lượng request HTTP trước khi Load event, không bao gồm initial request

Bytes In: Total size của Document complete request phản hồi

Fully Loaded

Time: Thời gian từ khi request ban đầu cho đến khi WebPagetest xác định page hoàn thành việc load nội dung. Quá trình load nội dung có thể đợi cho sự kiện load để trì hoãn việc load nội dung tiếp theo. Thời gian để load các nội dung tiếp theo được tính vào thời gian Fully Loaded

Request: Tổng số lượng request HTTP trong lần chạy test không bao gồm request ban đầu.

Bytes In: Tổng số lượng byte nhận được trong lần chạy test

Waterfall: bảng như dưới đây.

Hình ảnh Waterfall

Waterfall là một sự hình dung về các hoạt động network, nó được chia nhỏ HTTP request đơn lẻ, mỗi một request được chia làm 5 phases chính như sau:

(1) DNS Lookup

Thời gian để giải quyết của host name như “http://www.example.com” tới địa chỉ Internet Protocol IP của nó.

(2) Initial Connection

Thời gian cho browser hoàn thành một kết nối tới server

(3) SSL Negotiation

Thời gian browser và server đồng ý một cách an toàn để giao tiếp

(4) Time to First Byte (TTFB)

Thời gian cho server chuẩn bị phản hồi tới request, đây là khi server muốn nhìn một điều gì đó trong database hoặc gọi đến một external API

(5) Content download

Thời gian mà server gửi toàn bộ nội dung của sự phản hồi. đây là thời gian tỷ lệ với độ lớn của sự phản hồi và tốc độ của kết nối.

Một ví dụ của 1 request với 5 phases: DNS lookup (teal), initial connection (orange), SSL negotiation (purple), TTFB (green), and content download (blue).

Ví dụ của 1 request với 5 phases

(6) Start Render (first paint)

Thời gian cho browser hiển thị first pixel đầu tiên của nội dung trên màn hình

(7) DOM Content Loaded handler

Sau khi trình duyệt đã nhận được các tải trọng HTML, nó phân tích nó vào DOM, DOM content Loaded handler để mô tả thời gian bao lâu page đó xử lý sự kiện DOM đã sẵn sàng.

Cache Optimized

Webpage hỗ trợ xác định thời gian load page khi không có cache và thời gian load page khi có cache.

Để thiết lập test, ở phần Advance setting ta phải lựa chọn radio button First view and repeat view.

View phần test report sau khi thực hiện test thành công. Ở đây First view: Chính là thời gian load page khi chưa có cache, và Repeat view là thời gian load page đã có cache trình duyệt.

History testing

Webpage cho phép bạn show lịch sử test trước đó theo thời gian, bạn có thể view lại lịch sử test của mình ngoài ra còn có thể so sánh được tốc độ load của 2 page khác nhau bằng cách chọn checkbox và sử dụng nút compare để so sánh tốc độ load của 2 trình duyệt.

Dưới đây là hình ảnh minh họa cho việc so sánh tốc độ load giữa 2 trình duyệt.

5. Kết luận

Webpagetest là website free và hữu ích kiểm tra tốc độ website

Webpagetest là công cụ website free và hữu ích giúp kiểm tra tốc độ website trên nhiều quốc gia khác nhau cũng như kiểm tra tốc độ website của phiên bản chưa có cache và đã có cache, so sánh tốc độ website trên các trình duyệt khác nhau. Ngoài ra nó còn được sử dụng để test cho cả mobile và support nhiều device, version khác nhau.

Theo Bizfly Cloud chia sẻ

>> Có thể bạn quan tâm: Lợi ích to lớn của CDN góp phần thúc đẩy doanh số cho doanh nghiệp