A | B | C | D | E | F | G | H | I | J | K | L | M | N | O | P | Q | R | S | T | U | V | W | X | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
1 | At Filament Group, we were curious about the relative performance of popular MVC frameworks such as Angular, Ember, Backbone, and Polymer. Fortunately, the TodoMVC project implements the same Todo application implemented in most of the popular JavaScript MV* frameworks of today. | |||||||||||||||||||||||
2 | To benchmark each, we pulled down the TodoMVC code then concatenated files, applied minification, and serve each with gzip to make these closer to 'production ready' so we can measure performance via webpagetest.org. For each framework, we ran five test runs each for Chrome/Cable, Chrome/3G, and Android/3G - each test run is a row in the data set below. | |||||||||||||||||||||||
3 | The Render Start (Column D) time maps closely to when the Todo UI appears in the test's filmstrip view so that is the primary number to watch for perceived speed. The render start time cells are color-coded into 4 buckets: Dark Green (under 1 second), Green (under 2 seconds), Yellow (under 4 seconds), Red (more than 4 seconds). | |||||||||||||||||||||||
4 | Read the article: http://www.filamentgroup.com/lab/mv-initial-load-times.html | |||||||||||||||||||||||
5 | ||||||||||||||||||||||||
6 | Framework and Device/Network | Web Page Test Results URL (5 runs per) | TTFB (ms) | Render Start (ms) | Visually Complete (ms) | Load TIme (ms) | Speed Index | |||||||||||||||||
7 | Angular 1.3.6 (50.9k of JS) | http://104.131.64.176:3000/angularjs/ | ||||||||||||||||||||||
8 | Test runs: | |||||||||||||||||||||||
9 | Chrome - Cable | http://www.webpagetest.org/result/141211_58_8V8/ | 84 | 891 | 900 | 432 | 909 | |||||||||||||||||
10 | Chrome - Cable | http://www.webpagetest.org/result/141211_GV_8V9/ | 84 | 792 | 1400 | 387 | 811 | |||||||||||||||||
11 | Chrome - Cable | http://www.webpagetest.org/result/141211_ZK_8VA/ | 92 | 792 | 800 | 385 | 810 | |||||||||||||||||
12 | Chrome - Cable | http://www.webpagetest.org/result/141211_FV_8VB/ | 88 | 894 | 1400 | 433 | 915 | |||||||||||||||||
13 | Chrome - Cable | http://www.webpagetest.org/result/141211_NC_8VC/ | 86 | 794 | 1400 | 369 | 813 | |||||||||||||||||
14 | Chrome - Cable | http://www.webpagetest.org/result/141211_7J_8VD/ | 90 | 894 | 900 | 434 | 914 | |||||||||||||||||
15 | Chrome - Cable | http://www.webpagetest.org/result/141211_D7_8WM/ | 87 | 890 | 900 | 437 | 914 | |||||||||||||||||
16 | Chrome - Cable | http://www.webpagetest.org/result/141211_J0_8WN/ | 87 | 893 | 900 | 428 | 909 | |||||||||||||||||
17 | Chrome - Cable | http://www.webpagetest.org/result/141211_90_8WP/ | 97 | 891 | 1300 | 392 | 909 | |||||||||||||||||
18 | Chrome - Cable | http://www.webpagetest.org/result/141211_4T_8ZD/ | 88 | 988 | 1000 | 452 | 1011 | |||||||||||||||||
19 | Chrome - Cable | http://www.webpagetest.org/result/141211_4H_8WR/ | 87 | 793 | 1300 | 366 | 820 | |||||||||||||||||
20 | Chrome - Cable | http://www.webpagetest.org/result/141211_36_8WS/ | 85 | 893 | 1500 | 446 | 917 | |||||||||||||||||
21 | Chrome - Cable | http://www.webpagetest.org/result/141211_Z1_8WT/ | 86 | 792 | 1500 | 405 | 821 | |||||||||||||||||
22 | Chrome - Cable | http://www.webpagetest.org/result/141211_92_8ZE/ | 88 | 794 | 800 | 410 | 810 | |||||||||||||||||
23 | Chrome - Cable | http://www.webpagetest.org/result/141211_TS_8ZF/ | 85 | 895 | 900 | 399 | 911 | |||||||||||||||||
24 | Chrome - Cable | http://www.webpagetest.org/result/141211_2B_8ZG/ | 84 | 795 | 1300 | 365 | 810 | |||||||||||||||||
25 | Chrome - Cable | http://www.webpagetest.org/result/141211_EV_8ZH/ | 85 | 892 | 1400 | 447 | 909 | |||||||||||||||||
26 | Chrome - Cable | http://www.webpagetest.org/result/141211_K3_8ZJ/ | 89 | 1093 | 1100 | 429 | 1111 | |||||||||||||||||
27 | Chrome - Cable | http://www.webpagetest.org/result/141211_X5_8ZK/ | 106 | 989 | 1000 | 523 | 1016 | |||||||||||||||||
28 | Chrome - Cable | http://www.webpagetest.org/result/141211_WK_8ZM/ | 82 | 993 | 1000 | 482 | 1009 | |||||||||||||||||
29 | mean | 882.4 | ||||||||||||||||||||||
30 | stdev | 84.55 | ||||||||||||||||||||||
31 | 99% conf. interval | 48.70 | ||||||||||||||||||||||
32 | ||||||||||||||||||||||||
33 | Chrome - 3G | http://www.webpagetest.org/result/141211_JQ_92V/ | 630 | 3095 | 3100 | 1991 | 3115 | |||||||||||||||||
34 | Chrome - 3G | http://www.webpagetest.org/result/141211_AV_92W/ | 630 | 2993 | 3600 | 2043 | 3016 | |||||||||||||||||
35 | Chrome - 3G | http://www.webpagetest.org/result/141211_VD_92X/ | 629 | 3091 | 3600 | 2047 | 3115 | |||||||||||||||||
36 | Chrome - 3G | http://www.webpagetest.org/result/141211_SB_92Y/ | 633 | 3190 | 3200 | 2162 | 3211 | |||||||||||||||||
37 | Chrome - 3G | http://www.webpagetest.org/result/141211_3K_92Z/ | 631 | 3094 | 3600 | 2048 | 3114 | |||||||||||||||||
38 | Chrome - 3G | http://www.webpagetest.org/result/141211_X8_932/ | 628 | 3090 | 3700 | 2031 | 3117 | |||||||||||||||||
39 | Chrome - 3G | http://www.webpagetest.org/result/141211_96_933/ | 637 | 2994 | 3500 | 2050 | 3016 | |||||||||||||||||
40 | Chrome - 3G | http://www.webpagetest.org/result/141211_PC_934/ | 665 | 3104 | 3100 | 2091 | 3110 | |||||||||||||||||
41 | Chrome - 3G | http://www.webpagetest.org/result/141211_D9_9SM/ | 638 | 2993 | 3000 | 2010 | 3017 | |||||||||||||||||
42 | Chrome - 3G | http://www.webpagetest.org/result/141211_NF_9SN/ | 629 | 2990 | 3500 | 2031 | 3016 | |||||||||||||||||
43 | Chrome - 3G | http://www.webpagetest.org/result/141211_3V_9SP/ | 637 | 3195 | 3700 | 2002 | 3215 | |||||||||||||||||
44 | Chrome - 3G | http://www.webpagetest.org/result/141211_ZA_9SQ/ | 629 | 3094 | 3600 | 2039 | 3115 | |||||||||||||||||
45 | Chrome - 3G | http://www.webpagetest.org/result/141211_7E_9SR/ | 653 | 3290 | 3700 | 2071 | 3314 | |||||||||||||||||
46 | Chrome - 3G | http://www.webpagetest.org/result/141211_3G_9VR/ | 633 | 3094 | 3500 | 2009 | 3115 | |||||||||||||||||
47 | Chrome - 3G | http://www.webpagetest.org/result/141211_JD_9VS/ | 647 | 2993 | 3500 | 2019 | 3016 | |||||||||||||||||
48 | Chrome - 3G | http://www.webpagetest.org/result/141211_T2_9VT/ | 628 | 2994 | 3600 | 1994 | 3016 | |||||||||||||||||
49 | Chrome - 3G | http://www.webpagetest.org/result/141211_6B_9VW/ | 630 | 2894 | 2900 | 1990 | 2917 | |||||||||||||||||
50 | Chrome - 3G | http://www.webpagetest.org/result/141211_W0_9VX/ | 631 | 3094 | 3600 | 2071 | 3115 | |||||||||||||||||
51 | Chrome - 3G | http://www.webpagetest.org/result/141211_J9_9VY/ | 642 | 3094 | 3600 | 2065 | 3116 | |||||||||||||||||
52 | Chrome - 3G | http://www.webpagetest.org/result/141211_ZY_9VZ/ | 632 | 2995 | 3500 | 1985 | 3015 | |||||||||||||||||
53 | mean | 3068.55 | ||||||||||||||||||||||
54 | stdev | 90.68 | ||||||||||||||||||||||
55 | 99% conf. interval | 52.23 | ||||||||||||||||||||||
56 | ||||||||||||||||||||||||
57 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_EE_9X9/ | 664 | 3729 | 3729 | 2321 | 3729 | |||||||||||||||||
58 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_Y5_BC9/ | 761 | 4451 | 4451 | 3264 | 4451 | |||||||||||||||||
59 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_K0_9YP/ | 694 | 3802 | 3802 | 2313 | 3802 | |||||||||||||||||
60 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_RD_BH4/ | 664 | 4130 | 4130 | 3073 | 4130 | |||||||||||||||||
61 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_F2_9YS/ | 662 | 4230 | 4230 | 2653 | 4230 | |||||||||||||||||
62 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_TR_B9N/ | 661 | 4078 | 4078 | 2616 | 4078 | |||||||||||||||||
63 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_4W_BCB/ | 658 | 4166 | 4166 | 2874 | 4166 | |||||||||||||||||
64 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_7B_ACQ/ | 657 | 4029 | 4029 | 2676 | 4029 | |||||||||||||||||
65 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_AZ_ACR/ | 895 | 3593 | 3593 | 2582 | 3593 | |||||||||||||||||
66 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_82_ACS/ | 661 | 3842 | 3842 | 2632 | 3842 | |||||||||||||||||
67 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_C6_ACT/ | 663 | 3509 | 3509 | 2508 | 3509 | |||||||||||||||||
68 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_AC_ACV/ | 658 | 3975 | 3975 | 2898 | 3975 | |||||||||||||||||
69 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_CY_ACW/ | 686 | 3534 | 3534 | 2581 | 3534 | |||||||||||||||||
70 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_VA_AJ2/ | 915 | 4375 | 4375 | 2909 | 4375 | |||||||||||||||||
71 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_ME_AJ3/ | 783 | 4209 | 4209 | 2782 | 4209 | |||||||||||||||||
72 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_F2_AJ4/ | 666 | 3777 | 3777 | 2611 | 3777 | |||||||||||||||||
73 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_MP_AJ5/ | 670 | 4155 | 4155 | 2890 | 4155 | |||||||||||||||||
74 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_QV_AJ6/ | 663 | 4274 | 4274 | 3000 | 4274 | |||||||||||||||||
75 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_3G_BCC/ | 788 | 3849 | 3849 | 2777 | 3849 | |||||||||||||||||
76 | Nexus 5 Chrome - 3G | http://www.webpagetest.org/result/141211_NY_AJ8/ | 678 | 4123 | 4123 | 3135 | 4123 | |||||||||||||||||
77 | mean | 3991.5 | ||||||||||||||||||||||
78 | stdev | 275.24 | ||||||||||||||||||||||
79 | 99% conf. interval | 158.53 | ||||||||||||||||||||||
80 | ||||||||||||||||||||||||
81 | Backbone 1.1.2 (42.7k of JS) | http://104.131.64.176:3000/backbone/ | ||||||||||||||||||||||
82 | Test runs: | |||||||||||||||||||||||
83 | Chrome - Cable | http://www.webpagetest.org/result/141210_GM_BTE/ | 85 | 388 | 500 | 522 | 420 | |||||||||||||||||
84 | Chrome - Cable | http://www.webpagetest.org/result/141210_2G_BTF/ | 90 | 290 | 500 | 385 | 335 | |||||||||||||||||
85 | Chrome - Cable | http://www.webpagetest.org/result/141210_3Q_BTG/ | 85 | 293 | 800 | 342 | 329 | |||||||||||||||||
86 | Chrome - Cable | http://www.webpagetest.org/result/141210_DW_BTH/ | 111 | 392 | 800 | 390 | 434 | |||||||||||||||||
87 | Chrome - Cable | http://www.webpagetest.org/result/141210_B7_BTJ/ | 82 | 293 | 600 | 409 | 345 | |||||||||||||||||
88 | Chrome - Cable | http://www.webpagetest.org/result/141210_ET_BTK/ | 87 | 194 | 400 | 329 | 228 | |||||||||||||||||
89 | Chrome - Cable | http://www.webpagetest.org/result/141210_N0_BTM/ | 88 | 290 | 500 | 403 | 329 | |||||||||||||||||
90 | Chrome - Cable | http://www.webpagetest.org/result/141210_X6_BTN/ | 85 | 290 | 500 | 451 | 330 | |||||||||||||||||
91 | Chrome - Cable | http://www.webpagetest.org/result/141210_XS_BTP/ | 93 | 296 | 500 | 472 | 331 | |||||||||||||||||
92 | Chrome - Cable | http://www.webpagetest.org/result/141210_98_BTQ/ | 84 | 291 | 800 | 400 | 344 | |||||||||||||||||
93 | Chrome - Cable | http://www.webpagetest.org/result/141210_12_BTR/ | 86 | 290 | 500 | 374 | 334 | |||||||||||||||||
94 | Chrome - Cable | http://www.webpagetest.org/result/141210_HV_BTS/ | 97 | 294 | 500 | 380 | 330 | |||||||||||||||||
95 | Chrome - Cable | http://www.webpagetest.org/result/141210_KJ_BTT/ | 86 | 194 | 800 | 391 | 246 | |||||||||||||||||
96 | Chrome - Cable | http://www.webpagetest.org/result/141210_E1_BTV/ | 88 | 388 | 500 | 412 | 423 | |||||||||||||||||
97 | Chrome - Cable | http://www.webpagetest.org/result/141210_79_BTW/ | 85 | 193 | 400 | 339 | 237 | |||||||||||||||||
98 | Chrome - Cable | http://www.webpagetest.org/result/141210_YD_BTX/ | 85 | 194 | 800 | 340 | 237 | |||||||||||||||||
99 | Chrome - Cable | http://www.webpagetest.org/result/141210_PB_BTY/ | 98 | 293 | 600 | 383 | 342 | |||||||||||||||||
100 | Chrome - Cable | http://www.webpagetest.org/result/141210_TE_BTZ/ | 86 | 289 | 500 | 444 | 331 |