One of the challenges of building for the web is the vast number of different devices and browsers that could access your site. But the challenge goes beyond just the sheer number of combinations. You also have no idea how many resources a user’s specific device/browser will have available, or what else it may be trying to do at the same time.
Because of this, sniffing for browsers, devices, or even browser features, only goes so far. Even higher-powered devices, with newer browsers, may still have issues at times—it all depends on what else they’re trying to do in any given moment.
So what do you do if you want to add some non-essential feature to a page (like an animation, for instance), that will work in most device/browser combinations, yet may be problematic on some—like lower-powered devices, or less performant browsers, or even higher-powered devices with limited resources available at that moment in time?
One route would be to add the feature for everyone—if it works for most users, those with less capable devices will just have to suffer. Another option would be to scrap it altogether—if it doesn’t work for everybody, don’t implement it at all.
Of course, you could limit what you try to do to only certain browsers by testing for specific functionality. And while this can be valuable, it also doesn’t guarantee what state the browser will actually be in when it hits the page, and whether it will be performant in a given moment.
An alternative approach would be to actually monitor the performance of the browser in real time, and then use those metrics to help determine whether you should continue to use, or to stop, the feature on that particular browser on that particular device at that particular moment in time.
Although you may be convinced of the importance of your website’s performance, there may be others who will need …
When lazyloading images, one question that often arises is, “What should we use as placeholders?” Ideally …