2013-02-25 29 views
5

Tôi quan tâm đến việc đo và ghi lại hiệu suất tải trang của chúng tôi SAU KHI cơ thể ban đầu được trả về từ máy chủ. Nói cách khác, một khi trình duyệt có HTML khi nó được thực hiện tải tất cả các hình ảnh, css và javascript trên trang và đã hoàn thành rendering và thực thi khối jquery sẵn sàng đầu tiên.Kiểm tra Hiệu suất Trang Web Kết thúc Trước

Cách tốt nhất để chạy thử nghiệm hiệu suất về điều này là gì? Hầu hết những gì tôi đã đọc có xu hướng tập trung vào phản hồi của máy chủ và tải xuống dữ liệu. Tuy nhiên, hầu hết thời gian người dùng chờ là sau này. Có bất cứ điều gì ngoài kia để giúp điều này một cách tự động không?

+0

Bạn có cần để tự động hóa hoạt động người dùng? Hoặc chỉ đo thời gian phía máy khách để hiển thị trang? – Brad

+0

'Tải thử nghiệm' không giống như 'hiệu suất thời gian tải trang web' ... chỉ cần nói, tiêu đề là khó hiểu ... – yoosiba

+0

Xin lỗi, bạn nói đúng. Tôi đã nghĩ "Tải trang" không phải là "Tải máy chủ". – chrishomer

Trả lời

3

Chrome có trình tạo hồ sơ được tích hợp sẵn trong các công cụ dành cho nhà phát triển. CTRL+SHIFT+I trên PC hoặc Cmd+option+J trên máy Mac.

Với jQuery, DOM sẵn sàng sẽ xảy ra trước khi tải cửa sổ. Vì vậy, một cái gì đó như thế này sẽ cho bạn biết vùng đồng bằng giữa DOM tải và tài sản tải:

// When the DOM is loaded 
$(function(){ 
    console.log('Start ' + new Date().getTime()); 
}); 

// When all the images are loaded 
$(window).load(function(){ 
    console.log('End ' + new Date().getTime()); 
}); 
+0

Cẩn thận với độ chính xác của thời gian JavaScript: http://ejohn.org/blog/accuracy-of-javascript-time/ – Brad

+1

Bất kỳ lúc nào bị mất hoặc tính toán sai lầm khi tìm nạp dấu thời gian hoặc chờ cho đến khi hàng đợi 15ms tiếp theo không đáng kể theo ý kiến ​​của tôi. Nếu bạn đang đi đến điểm chuẩn để cải thiện ít hơn 100ms khi tải trang, bạn sẽ không bao giờ có được ROI. – AlienWebguy

+0

Tất nhiên, nhưng tất cả phụ thuộc vào chính xác những gì bạn đang cố gắng để hồ sơ. Đó là lý do tại sao tôi chỉ ra. Tôi đã nhìn thấy rất nhiều trường hợp, nơi mọi người cố gắng để thời gian một cái gì đó trên mỗi lần lặp lại và tự hỏi tại sao dữ liệu của họ là tất cả các nơi. Bạn chỉ có thể nhìn vào bức tranh lớn hơn, hoặc với nhiều lần lặp lại, khi so sánh thời gian trong JavaScript. – Brad

1

Việc tối ưu hóa hiệu suất web (WPO) của ngành công nghiệp đi đến công cụ để theo dõi hiệu suất front-end là WebPageTest. Nó cung cấp cho bạn phân tích rất chi tiết về tải đầy đủ của một trang web bao gồm biểu đồ thác nước cho bạn thấy mỗi nội dung được tải bởi trình duyệt web và nơi bạn có thể gặp sự cố. Bạn cũng có được ảnh chụp màn hình về các sự kiện trình duyệt chính, phim ảnh và video. Nó thực sự là một công cụ mã nguồn mở tuyệt vời và nhà phát triển hàng đầu của nó được Google tuyển dụng.

http://www.webpagetest.org

WebPagetest không phải là giải pháp tự động. SpeedCurve là một dịch vụ thương mại chạy trên nền WebPagetest để tự động hóa quy trình thử nghiệm và giám sát hiệu suất đầu cuối của bạn. Nó cũng tiêu chuẩn trang web của bạn chống lại đối thủ cạnh tranh và cảnh báo bạn về các vấn đề với việc xây dựng trang web của bạn. Disclaimer: Tôi là người tạo ra SpeedCurve.

http://speedcurve.com

+0

Bạn có phải là người tạo ra SpeedCurve không? –

3

Bạn có thể thử sau dịch vụ giám sát người sử dụng thực cung cấp hình ảnh rõ ràng về cách người dùng của bạn đang gặp trang web của bạn hoặc ứng dụng web trong thời gian thực.

Các vấn đề liên quan