Website Performance Testing: What is the Best Assessment of Computer Performance?

Question

I have some browser CSS and animations on my web page, and I would like to determine if the user has a fast computer or not, so I can scale things accordingly to provide a better experience.

I am using the http://detectmobilebrowser.com script to detect all mobile devices, and I'm going to include the /android|ipad|ipod|playbook|silk/i.test(a) sentence to enable all tablet devices.

However, this is not so and cannot really address the actual equipment. Not quite far to paint a picture of what I'm looking for.

The iPhone 4S, for example, will be much more capable than many of the devices matching the detector of a mobile user agent, and this does not allow it to detach itself. Someone can run Google Chrome on a Pentium II computer (one way or another) and see my page. (This person probably doesn't have an iPhone 4S)

Obviously, in order to actually get an idea about this, I will need to do some actual performance testing, and, like when testing performance with any kind of application, it makes sense to only check the performance of the type of tasks it performs.

Even with this in mind, I feel that it would be difficult to get any reasonably accurate numbers before the performance testing procedure takes too long and the user becomes impatient. Therefore, this probably means going forward if I do not want the first initial impression to be perfect. Well, actually it is. Therefore, I can’t get away with measuring the performance “after the first run” and adjust the parameters later.

So, what remains for me is to try to perform a similar task when loading the start page, so that it depends on the speed of rendering and processing the browser, not presenting anything to the user (so that they still think that the page is loading), and then preferably within seconds or two get accurate enough numbers to set parameters for a real page, to bring it to life and present in a pleasant manner that does not look like a slide show.

Perhaps I can place a full-page white <div> on top of my test case so that I can’t see what is happening and hope that the browser is not smart, avoiding doing all the work.

Has anyone ever done this?

I know that people are going to say “you probably don't need to do this”, or “there should be a better way” or “reduce the number of effects”.

The reason I'm doing on the page is because it looks good. It's all. If I didn’t care, there wouldn’t be such a question. The goal is to give javascript the ability to define sufficient parameters to provide a terrific experience on a powerful computer, as well as tradable experience on a less efficient computer. When more energy is available, it should be used. Therefore, I hope this can explain why such proposals are not valid answers to the question.

Answer 1

Instead of measuring the performance of the user CPU once and determining how many fantastic visual effects to use from this, I would measure the amount of time spent by the bits of the intensive processor each time they are executed (using new Date() ), compare this to the expected minimum and maximum values ​​(which you will have to determine) and dynamically adjust the "effect level" up and down as necessary.

Tell me if the user runs a program in the background that eats a lot of processor time. If you use this idea, your page will automatically reduce visual effects to save CPU cycles. When the background program ends, the fantastic effects will return. I don’t know if your users will like this effect (but I’m sure they will like that their browser will respond when the processor is overloaded).

Answer 2

I think this is a great question because it puts the user in the first place.

Several ideas come to mind:

• Microsoft has published many tests demonstrating the performance of IE 9 and 10. Many of these tests focus on graphics performance, such as this one , which appears to use this JavaScript file to measure performance. There may be some codes / concepts that you can use.

• In any case, a resource uploaded to the media may take a few seconds, so you have a small room for respite if you start the tests while the rest of the content is loading. For example, initiate AJAX requests / images, run your tests and process the responses.

• To check graphics performance, how about using load graphics as a performance test? I'm usually not a fan of loading screens, but if it may take a few seconds to load the site and the end result is the best UX, then this is not a bad idea.

• An idea with a white screen can work if you draw a bunch of white shapes on it (I'm not sure that any engines are smart enough to optimize this, because it's the same color).

Ultimately, I would be mistaken on the side of better performance and lower accuracy, and a less accurate (but fast) test against the user waiting too long.

Answer 3

This is a bad solution, but it worked at that time: I used to create two random matrices about 100x100 in size, multiplying them (the way of a school boy) 100 times and by the time. It took less than 1 second on regular machines and a little more than 2 seconds on the slowest machine I could find (EeePC 1000H). After that, I could say “it’s good that this processor can perform X floating point operations per second”, which is very inaccurate and probably incorrect, but the results were very stable and with very low standard deviations, so I think you can call it a bad measure of javascript math performance that can tell you about the CPU of this computer.

You can also check if it is enabled for WebGL and it will not contain all Windows operating systems that are older than Vista. Since they do not have hardware to work with Vista or higher, these are slower PCs. You can check it as follows:

 function hasWebGL () { if (typeof window.WebGLRenderingContext !== 'undefined') { var canvas = document.createElement('canvas'); var gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl') || canvas.getContext('webkit-3d') || canvas.getContext('moz-webgl'); if(gl) { return(true); } else { return(false); } } }