Geek asks and answers

How can I recognize slow devices on my website?

When adapting a webpage for mobile, I always rely on css media requests.

Recently, I no longer worry only about screen size, as well as the javascript engine of many mobile devices. Some common javascript effects that rely on window scrolling or fast DOM transform sequences work very poorly on slow devices.

Is there a way to guess the performance of the device so that I can enable / disable elements that look bad on slow devices?

So far, I can only think of bad decisions:

  • Screen size. a narrow screen “may” means a slow device.
  • user agent information . I might be looking at a device, browser, or processor, but this does not seem to be a stable long-term solution due to the number of devices that need to be considered.

UPDATE: My question has been fixed to focus on one problem. The comments have a good solution to the touch interface problem.

+5
source share
3 answers

, , ( , , ). , UA, , , , . / :

  • Progressive Enhancement. , , . , , : - ,

  • . , UX , , . , , Function.prototype, , . , , , , , . , , . (, ). , , .

, , , . cookie UA .

+2

, , - - JS . , - , , /. , , , .

var speedtest = function(){
  /// record when we start
  var target = new Date().getTime(), count = 0, slow = 0;
  /// trigger a set interval to keep a constant eye on things
  var iid = setInterval(function(){
    /// get where we actually are in time
    var actual = new Date().getTime();
    /// calculate where we expect time to be
    target += 100;
    /// 100 value here would need to be tested to find the best sensitivity
    if ( (actual - target) > 100 ) {
      /// make sure we aren't firing on a one off slow down, wait until this
      /// has happened a few times in a row. 5 could be too much / too little.
      if ( (++slow) > 5 ) {
        /// finally if we are slow, stop the interval
        clearInterval(iid);
        /// and disable our fancy resource-hogging things
        turnOffFancyAnimations();
      }
    }
    else if ( slow > 0 ){
      /// decrease slow each time we pass a speedtest
      slow--;
    }
    /// update target to take into account browsers not being exactly accurate
    target = actual;
    /// use interval of 100, any lower than this might be unreliable
  },100);
}

, , , . , , .

, , , , setIntervals, , . , , , - - .

+2

-. . , , , .

You can also simply make a link available to go to a more basic site if the user is experiencing performance issues.

Turning off screen size is not a good idea. Many modern phones have small screens with fast processors.

+1
source

More articles:


All Articles