13 Performance Test Tools for Client-Side

Nói đến Performance Testing, là nói đến server side – nơi mà sẽ xử lý rất rất nhiều requests từ khắp mọi nơi “đổ” về. Và chính vì phải xử lý nhiều như vậy, nên mới cần test performance. Trong quá trình làm performance test, Response Time là một thông số quan trọng để đánh giá performance của hệ thống. Response Time của một request được tính từ lúc nó được gửi từ phía client (ví dụ browser), gửi đến server, server nhận request, server xử lý request, và sau đó gửi trả response data ngược trở lại cho client. Khi Client nhận xong toàn bộ Response Data đó, thì coi như phía server “hết trách nhiệm”, và toàn bộ quãng thời gian này được gọi là Response Time.

Ở một khía cạnh khác, về mặt end user. Điều họ trông quan tâm, đó là từ lúc click button, cho đến khi action đó đã được thự hiện xong và hiển thị nội dung lên màn hình, tổng thời gian đó là bao nhiêu. Chính vì thế, nếu sử dụng định nghĩa Response Time như trên, thì sẽ có một sự thiếu sót rất là lớn. Đó là việc hiển thị dữ liệu cho end-user sau khi đã nhận đầy đủ các Response Data. Thông thường, client (browser) nhận response data xong, sẽ thực thi một số script (js – javascript chẳng hạn) để có thể “đổ” data lên UI theo ý muốn, hoặc dùng để vẽ biểu đồ (liên quan đến report chẳng hạn), cũng có thể là những chức năng khác. Thêm nữa, từ một Response Data chỉ toàn chữ là chữ (text), nhưng khi bạn xem trên UI, thì nó lại có đầy đủ màu sắc, được bố trí một cách ngay ngắn, font chữ, cỡ chứ, kiểu chữ không chê vào đâu được… Để làm được chuyện đó, thì cần sự trợ giúp của các file .css, browser sẽ thực thi các file .css này để “làm đẹp” cho application. Quá trình được xử lý trên client/browser như thế này, được gọi là Rendering Time. Và tất nhiên nó nhanh/chậm thì sẽ ảnh hưởng đến “feeling” của End-User liền. Vì thế, việc test performance cho Client-Side cũng là điều cần được xem xét.

Với đa số các tools/framework hiện nay, chủ yếu là support cho việc test performance của server-side. Vậy để làm tốt tương ứng cho client-side thì có tools nào hỗ trợ hay không? Cùng tham khảo 13 Tools bên dưới để có thể đưa ra sự lựa chọn phù hợp nhất cho bạn nến bạn đang cần làm Client-Side Performance Testing nhé.

1.Test your Mobile Speed with Google

Google’s Test My Site là công cụ trực tuyến do Google cung cấp và được hỗ trợ bởi công cụ hiệu suất cho web app phổ biến là WebPageTest.org.
Bạn có thể trực quan hóa báo cáo của mình trên trang web hoặc gửi báo cáo cho bạn qua địa chỉ email của bạn.

2. SiteSpeed.io

SiteSpeed.io là một phần mềm mã nguồn mở – thực ra là một bộ các công cụ – giúp bạn đo lường hiệu năng của trang web của bạn và qua đó có thể cải thiện các vấn đề về hiệu năng.

  • Coach: Đưa ra những lời khuyên về performance cũng như các cách khắc phục cho website của bạn giữa trên những best practices.
  • Browsertime: thu thập các thông số và HAR files (là HTTP request được archive, với định dạng JSON format) từ browser
  • Chrome-HAR: giúp so sánh các HAR files.
  • PageXray: trích xuất các thông số khác nhau (từ HAR files) như độ lớn của request, số lượng requests và nhiều thứ khác.

Example dashboard

3. Lighthouse by Google

Lighthouse là một phần mềm mã nguồn mở được sử dụng cho việc kiểm tra để cải thiện chất lượng của trang web. Nó được tích hợp vào Chrome’s DevTools (mà mình vẫn hay gọi là Inspect) và được cài đặt như là một Chrome extentions hoặc là thông qua các tool sử dụng command line (iTerm đồ chẳng hạn). Đây là một công cụ cần thiết cho việc đo lường, debug và cải thiện hiệu năng cho client-side apps.

A Lighthouse report in Chrome DevTools4. Lightcrawler

Lightcrawler là một công cụ hữu hiệu giúp thu thập thông tin từ trang web của bạn, sau đó sẽ kết hợp với Lighthouse để run, phân tích kết quả cho từng page đã được thu thập dữ liệu đó.

5. YSlow

YSlow là một JavaScript bookmarlet (một phần mềm JavaScript được lưu trữ như một bookmark trên web browser) mà có thể được cài đặt vào browser của bạn và sẽ được sử dụng cho bất kỳ trang web nào mà bạn truy cập. Công cụ này giúp phân tích trang web của bạn và giúp bạn tìm ra những lý do khiến nó trở nên chậm chạp dựa trên những quy tắc của Yahoo để website đạt hiệu năng cao.

6. GTmetrix

GTmetrix là một công cụ trực tuyến cung cấp cho bạn những thông tin chi tiết về hiệu năng trang web của bạn (với đầy đủ các thông số như thời gian tải trang, tổng độ lớn của trang, số lượng requests, v.v…) và cũng đưa ra những lời khuyến nghị thiết thực để cải thiện hiệu năng.

7. Page Performance

Page Performance là một Chrome Extension được sử dụng để kiểm tra và phân tích performance cho một trang web một cách nhanh chóng. Nếu bạn đang mở cùng lúc nhiều tabs, thì extention này sẽ áp dụng cho tab đang active (đang mở).

8. The APM Project

Dự án AMP (Accelerated Mobile Pages) là một dự án mã nguồn mở nhắm đến việc cải thiện giúp việc xây dựng web nhanh hơn. Dự án AMP cho phép nhóm những người phát triển tạo ra trang web của họ một cách nhanh chóng, với hiệu năng cao và với những trải nghiệm người dùng tuyệt vời trên tất cả các nền tảng (từ desktop browser cho đến mobile devices).

9. Dust Me Selectors

Dust Me Selector là một browser extension giúp bạn tìm và loại bỏ tất cả những CSS selector không được sử dụng trong trang web của các bạn. Nó quét hết toàn bộ tất cả các style sheets, sau đó sắp xếp và tìm ra tất cả những selector được sử dụng và không được sử dụng, và sẽ show cho bạn chính xác CSS nào đang được sử dụng và CSS nào không được sử dụng đối với page đã được quét (scan) đó.

10. Penthouse

Penthouse là một trình tạo đường dẫn CSS quan trọng, cho phép bạn lấy những CSS được yêu cầu cho việc render màn hình đầu tiên cho một page cụ thể nào đó. Bạn chỉ cần làm một điều duy nhất đó là chỉ định file CSS đầy đủ của website và trang web mục tiêu mà bạn muốn.

11. Critical

Critical là một công cụ được phát triển bởi Addy Osmani sử dụng Node.js, giúp bạn có thể trích xuất và inline các đường dẫn CSS quan trọng bên trong trang web HTML của bạn.

Preview

12. Optimize-js

You can use Optimize-js to optimize JavaScript code for faster initial load by wrapping immediately-invoked functions in parentheses.

13. Image Optimization Tools

You Might Also Like

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>