What is browser monitoring? Why it matters to developers, tools, and examples

Ben HardingCommunity, Provider Updates, Resource, Tech Stuff5 Comments

increase your ChatOps productivity

Browser monitoring matters. Remember this?


In the later days of Internet Explorer 6, this was a phrase which brought developers much misery.

Not only did we have to work around not having display inline-block but you also had to deal with PNG alpha transparency issues.

And that doesn’t cover security issues. Luckily enough there were dedicated individuals whose posts saved many hours debugging.

Fast forward to the present and now IE6 is no longer supported you can be forgiven for thinking browser monitoring (knowing which browser a user views your site with) isn’t important anymore. Well think again!

Browser monitoring can still save you valuable development time. And of course, time is money.

1. Use Java, Flash, Silverlight?

In the past, if you wanted to add something interactive to your website such as:

  • A piece of audio
  • How-to video
  • Game attracting more users

Then it would have required development using a browser plugin like Flash, Java, or Silverlight.

Adobe Flash Player icon

The once popular Flash Player

These plugins, at the time, were wonderful since they not only added additional interactive functionality to the web, but they also had cross-browser support. The downside of these plugins are that users had to download the plugins before they could view the content.

Not very nice to someone who just wanted to quickly find a tutorial!

Since the introduction of HTML 5, many of the plugins are now obsolete as the features can be done natively without the user downloading the plugin. But should you use it?

Well that depends.

Knowing how many users need a plugin to support your functionality will determine the best approach to take. Whether you’re building a new feature using a HTML 5 with a fallback using a plugin, or the more likely scenario of whether to remove the old plugin dependency (and upgrade a feature using the latest technology instead).

2. Utilizing the latest CSS

When it comes to creating a stylesheet, some choices, like deciding to change the box model using box-sizing: border-box have seemingly become a valid, (yet trivial) choice since it’s now widely supported.

But not all the latest and greatest CSS features are such as:

  • Calc function
  • Masks
  • 3d transformations
  • Grid layout

Now you wouldn’t need to use these properties in day to day development (I know I haven’t) and we have made do without them for years. But what they offer is a way to create effects without requiring the download of an external image, which in turn reduces the amount a user needs to download.

Or, in other cases, a way to create a web page with less markup. And if that brings less div spam, then I’m all for it!

3. Keep those Polyfills?

Sites are large, complicated beasts, composed of multiple images, fonts, stylesheets, and more. With all these in mind, it’s easy to forget about just how many scripts are included in a website. While it may seem trivial keeping or removing a polyfill, (or a no longer needed script) will impact how fast your website loads at least to the initial viewer.

And as a previous post outlines page speed matters!

4. Upgrading your version of jQuery

While the title specifically mentions jQuery, this is more of a reference to that generic library we all have included in a project.

You know the library. The one that adds cross-browser support. The one that fixes browser quirks. The same one that speeds up our development process by providing easy-to-use APIs.

These libraries, just like our websites, support particular browsers. And so should be upgraded to match the browsers of your users. It is pointless having fixes for IE6 when noone browses your websites on versions less than Internet Explorer 9.

Knowing when you can upgrade to use the latest version of that library brings benefits such as:

  • File size reductions as required browser hacks, and polyfills are removed
  • New features and APIs to speed up development tasks
  • Speed improvements as faster ways of doing tasks are found
  • Bug fixes

5: Browser monitoring for mobile devices

In our world, almost everyone has a mobile device.

Browser monitoring is vital if you need to know which devices your mobile users use

In this age every website should have a mobile alternative, ideally.

But sadly there is only so much time in the day. Which I totally understand. You get busy working on a new product, or feature, or page for the website, and with a deadline looming there isn’t much time to do much else.

And just because users can browse to your site on a mobile device, it doesn’t mean to say they do. Which is why knowing how many people browse your website on a mobile device helps you when prioritizing tasks.

We aren’t saying that the mobile site doesn’t matter.

Just that tasks that need to be organised depending on priorities.

6. Codebase cleanup

As projects wear on it’s easy to become oblivious to the reductant code that is being kept.

Workarounds, browser hacks, fallbacks for features now widely supported, “one-off” lines to deal with a particular quirk, they build up quicker than expected.

And this is where paying attention to the browsers of your userbase can help you out.

Removing needless code for unsupported browsers not only reduces the file-size, but helps increase the maintainability of the codebase.

Which in turn can help out new developers first being introduced to your codebase.

Browsers have come a long way

With less compatibility issues, more standardization, new features, and faster release times in latter years, browsers are moving at a fast pace. But, sadly, not all users have the knowledge, or the ability to update their browsers to make use of these new features.

Which is why browser monitoring is important, and will continue to be so in the future. Browser monitoring will help us make informed choices about what we are going, or should, do. That way you can ensure all your visitors get the most out of your site.

Next level software intelligence across your entire stack.

5 Comments on “What is browser monitoring? Why it matters to developers, tools, and examples”

  1. Pingback: How To Create Your Own Browser Detection Script - The Raygun Blog

  2. Pingback: Slice and dice your Real User Monitoring data with Pulse filters

  3. Pingback: Track Facebook browser activity in Crash Reporting and Real User Monitoring

  4. Pingback: How I improved our public site performance by 31.3% using Chrome Dev Tools and Raygun

  5. Pingback: What is synthetic testing? Definition and comparisons

Leave a Reply

Your email address will not be published. Required fields are marked *