27/06/2019

Giới thiệu 4 cách test tốc độ Website mình ưa dùng

Có 2 lập trường trong thiết kế web hiện nay là giữa tính năng và tốc độ nên chọn 1 cái. Có nghĩa là website nhiều nội dung, tính năng thì tốc độ sẽ giảm lại.

Do vậy bạn cần suy xét tính năng nào cần thiết và không cần thiết nhằm loại bỏ để tránh ảnh hưởng đến tốc độ website.

Các công nghệ lập trình Web mới xử dụng Ajax jquery get để gọi dữ liệu HTML thay vì load lại toàn bộ trang giúp website có vẻ tải nhanh hơn!

Dưới đây là 4 cách test tốc độ website ưa thích nhất của mình để test tốc độ cho 1 trang web!

Trước khi đến với các nội dung trong bài viết bạn cần xem trước bài: Tốc độ tải Website phụ thuộc vào gì? DNS, Hosting cũng như Sự thật về tối ưu Test my site (Tốc độ Web trên di động 3G).


Giới thiệu 4 cách test tốc độ Website mình ưu dùng


1. Pingdom và Gtmetrix

Đây là 2 trang web test tốc độ website dạng Request tức là trả về thời gian của từng Request!

Quá trình diễn ra từ 
Phân giản DNS ↦ Mã hóa SSL ↦ Kết nối máy chủ (Server/Hosting) ↦ Chờ máy chủ xử lí ↦ Nhận HTML và phân giải ra trình duyệt.

Nếu bạn thấy Request nào chậm có vấn đề thì có thể xóa hoặc tìm Request mới để thay thế.



Ngoài ra 2 trang trên còn phân ra các mục như:

  • Hình ảnh
  • Javascript
  • HTML
  • CSS
  • Font chiếm size là bao nhiêu để bạn có thể tiến hành nén hoặc tối ưu lại
Lưu ý: Khi chọn vị trí người dùng tải thì bạn chọn gần Việt Nam nhất!

Ví dụ mình test website từ Blogger, máy chủ tại Canada (Mỹ) thì người truy cập tại Mỹ sẽ nhanh hơn tại Việt Nam. Trong khi người dùng của bạn tại Việt Nam thì bạn chọn người dùng tải tại Việt Nam

Pingdom có cho test từ Asian - Janpan - Tokyo thì bạn chọn nhé!

2. Google Pagespeed Insights

Rất nhiều bạn nhầm lẫn Google Pagespeed Insights là trang test tốc độ Website! thì chỉ đúng 50% thôi. Ví dụ các website test bằng Google Pagespeed Insights đạt 100 điểm không có nghĩa là tốc độ website bằng nhau!



Tốc độ website phải tính bằng giây chứ ai tính bằng điểm!!! Nên đừng hỏi tại sao Web tải nhanh mà điểm Google Pagespeed lại thấp. Vì bạn đã vi phạm 1 hoặc nhiều trong 22 yếu tố kể dưới đây mà thôi.

Thực ra Google Pagespeed Insights test mức độ tối ưu hóa của website và gần đây đã đưa Lighthouse vào để phân tích nữa! Hiện nay mới đúng nghĩa vừa test tốc độ website và test tối ưu hóa code!

Nếu bạn có muốn tư vấn và tối ưu có độ website có thể liên hệ: ⇛ Dịch vụ tối ưu tốc độ website

Có 22 yếu tố của Google PageSpeed Insights đưa ra

  1. Reduce server response times (TTFB): xác định thời gian máy chủ của bạn gửi phản hồi.
  2. User Timing marks and measures: cân nhắc việc thiết kế ứng dụng của bạn với User Timing API để đo lường hiệu suất trong thực tế của người dùng.
  3. Minimize Critical Requests Depth: cho bạn thấy những tài nguyên nào được tải với mức độ ưu tiên cao. Cân nhắc giảm độ dài của chuỗi, giảm kích thước tải xuống của tài nguyên hoặc trì hoãn việc tải xuống các tài nguyên không cần thiết để cải thiện thời gian tải trang.
  4. Eliminate render-blocking resources: loại bỏ các tài nguyên như CSS, JS, Web Fonts… chặn hiển thị nội dung.
  5. Properly size images: sử dụng hình ảnh có kích thước phù hợp để tiết kiệm dữ liệu di động và cải thiện thời gian tải.
  6. Defer offscreen images: cân nhắc việc tắt màn hình chờ và hình ảnh ẩn sau khi tất cả các tài nguyên quan trọng đã tải xong để giảm thời gian tương tác.
  7. Minify CSS: nén và giảm dung lượng file CSS.
  8. Minify JavaScript: nén và giảm dung lượng file JS.
  9. Defer unused CSS: trì hoãn việc tải các file CSS không thực sự cần thiết.
  10. Efficiently encode images: nén và tối ưu hóa hình ảnh một cách hiệu quả.
  11. Serve images in next-gen formats: sử dụng các định dạng hình ảnh như JPEG 2000, JPEG XR và WebP thường có khả năng nén tốt hơn PNG hoặc JPEG, giúp tải xuống nhanh hơn và tiêu thụ ít dữ liệu di động hơn.
  12. Enable text compression: tài nguyên dựa trên văn bản phải được truyền tải bằng kỹ thuật nén dữ liệu (gzip, deflate hoặc brotli) để giảm thiểu dung lượng.
  13. Preconnect to required origins: sử dụng kỹ thuật preconnect và dns-prefetch để thiết lập kết nối ban đầu cho các tài nguyên quan trọng của bên thứ 3 (tài nguyên tải từ server bên ngoài).
  14. Avoid multiple page redirects: tránh các chuyển hướng sẽ tạo ra sự chậm trễ không nên có trước khi trang có thể được tải.
  15. Preload key requests: sử dụng <link rel=preload> để ưu tiên tìm nạp tài nguyên hiện sẽ được sử dụng sau này, trong khi tải trang.
  16. Use video formats for animated content: ảnh GIF với dung lượng lớn không hiệu quả trong việc phân phối nội dung động. Cân nhắc sử dụng video MPEG4/ WebM cho hình ảnh động và PNG/ WebP cho hình ảnh tĩnh (thay vì dùng GIF) để tiết kiệm dữ liệu di động.
  17. Avoids enormous network payloads: giảm page-size để tiết kiệm dữ liệu di động và giảm thời gian tải trang.
  18. Uses efficient cache policy on static assets: thiết lập thời gian cache dữ liệu dài có thể tăng tốc độ truy cập lặp lại vào website của bạn.
  19. Avoids an excessive DOM size: các kỹ sư trình duyệt đề xuất trang web nên chứa ít hơn 1.500 DOM nodes. Điểm tối ưu là tree depth dưới 32 phần tử và ít hơn 60 phần tử con/ mẹ. Một DOM lớn có thể tăng mức sử dụng bộ nhớ, gây ra các phép tính style dài hơn và tạo ra các bản vẽ bố cục tốn kém.
  20. JavaScript execution time: giảm thời gian phân tích cú pháp, biên dịch và thực thi JS. Bạn có thể thấy việc cung cấp các file JS với tải trọng nhỏ hơn sẽ giúp ích cho điều này.
  21. Minimizes main-thread work: giảm thời gian phân tích cú pháp, biên dịch và thực thi JS. Bạn có thể thấy việc cung cấp các file JS với tải trọng nhỏ hơn sẽ giúp ích cho điều này.
  22. All text remains visible during webfont loads: Tận dụng tính năng font-display CSS để đảm bảo văn bản hiển thị với người dùng trong khi webfont đang tải.

3. Chrome Control Dev Tools

Nếu bạn mở Chrome Control Dev Tools (F12) chuyển sang phần Network để test thì thực sự cùng không chính xác lắm!!!!

Vì tốc độ đó ảnh hưởng trực tiếp từ Mạng, máy tính của bạn!
Nếu máy tính bạn cấu hình thấp và mạng bạn đang kết nối chậm thì quá là chậm rồi!

Lúc này chỉ test được tốc độ website của chính bạn chứ không test được Khách hàng của bạn!

4. Webpagetest

Mình đã có bài giới thiệu về Webpagetest trước đây rồi nhé.

Cách test chính xác nhất là gì?!!

Lúc này bạn cần thiết chính xác nhất tốc độ mạng và trình duyệt của người dùng Website bạn!

a) Lấy thông tin thiết bị

  • Truy cập Google Analytic -> Công Nghệ -> Trình duyệt và hệ điều hành
  • Truy cập Google Analytic -> Thiết bị di động -> Thiết bị
  • Truy cập Google Analytic -> Công -> Mạng

=> Chrome và Apple iPhone và nhà mạng Viettel là sử dụng trên website toilaquantri.com nhiều nhất! (Dữ liệu để làm nguồn tham khảo Demo)

b) Lấy thông số mạng 3G/4G

Để biết tốc độ mạng 3G/4G điện thoại của bạn bạn dùng app Speedtest (Nếu dùng Smartphone, Mobile) hoặc https://www.speedtest.net (Nếu dùng trình duyệt). App có sẳn trên cửa hàng CH Play và Apple Store của rồi nhé!

P/s Để chính xác nhất bạn phải có thông số mạng, thiết bị, trình duyệt (Browser), vị trí của đa số người dùng!


Chuyển đổi Mbps thành Kbps bạn nhân giá trị trên với x1024 và điền thông tin như ảnh dưới

c) Cấu hình Webpagetest

Thiết lập như ảnh dưới ↠ Start test


Kết quả:


[Video tải lần đầu]

[Video Reload]


Chúc bạn thành công!