Using modern.IE to Identify Common Coding Problems

Share this article

This article was sponsored by modern.IE. Thank you for supporting the sponsors who make SitePoint possible!

By now, many of you are probably familiar with modern.IE and many of the testing tools it offers. One of the lesser-known features of this project is the Site Scan feature that, according to the modern.IE team, allows you to scan your website “for common coding problems to make sure users get the best possible experience”.

You’ll definitely want to check out this tool and in this post I’ll describe exactly what it does.

You can access the tool by entering a URL in the appropriate field on the modern.IE home page, highlighted below:

Site Scan on modern.IE

Or by going to the Browser Testing Report page, which is the main page for the Site Scan feature where you’ll see the results of your scan:

Browser Testing Reports page

For this article I’ll be using my own website, Impressive Webs. I haven’t redesigned or recoded it in almost two years, and it’s a WordPress site, so I think it’s a good candidate to allow us to see some interesting results.

After entering my URL and allowing the scan to take place, I get the results shown in the image below. You can go directly to my results page here, which will allow you to poke around the various options.

Site Scan results

As you can see, the results are divided into four main sections:

  • Common problems from supporting old versions of IE
  • Cross-browser and cross-device issues
  • New features in Windows 8
  • Accessibility improvements

The nice thing is that even for the sections where your site passes the test, there is a description given for what was scanned, along with a green check mark. Stuff that the scanner finds that doesn’t pass its tests are indicated with an orange exclamation point along with some suggestions on how to improve.

Let’s examine a couple of the ones that failed on my site scan. First, you’ll notice my website could use some improvements in image optimization:

Optimize images

The test tells me how many bytes I can save by optimizing my images correctly, why this is important, and even offers a third-party tool that I can consider to help in this area.

Another suggestion the report offers is that I use the prerender + prefetch features available in modern browsers like IE11 to improve the perceived speed of the site, and thus enhance the user experience:

Prerender + prefetch suggested

In brief, using the <link> tag with the rel="prerender" feature allows you to preload an entire web page, while rel="prefetch" lets you preload specific resources.

As you can see, this testing report isn’t just a run-of-the-mill validator but an advanced site scan that offers cutting-edge suggestions to help you make your applications that much more effective. And hey, you might even be introduced to some features you haven’t heard of or tried before (like I was when I saw prerender and prefetch).

Compat Inspector

Another testing report that modern.IE offers is something called “Scan for code no longer supported in modern IE”, which uses something called Compat Inspector:

Compat Inspector

Running this scanner on my website produced the following results:

Compat Inspector Results

From what I can tell, all of these are warnings about browser sniffing techniques that I shouldn’t be using. In my case, all the examples are in third-party scripts, so not too big a deal. With each warning given, as with the Site Scan report, you have the option to drill down and view more info on that particular problem with suggestions on how to fix it.

Use the Reports Offline

Finally, another great feature of the Site Scan tool is the fact that it is open-source and it’s available for download on GitHub:

Download on GitHub

This allows you to grab the tool, install it locally, and run the tests on your local websites offline.

The Site Scan and Compat Inspector features are great options to consider adding to your testing workflow, in addition to the usual validation, linting, and other processes that are likely already part of your development roadmap.

Louis LazarisLouis Lazaris
View Author

Louis is a front-end developer, writer, and author who has been involved in the web dev industry since 2000. He blogs at Impressive Webs and curates Web Tools Weekly, a newsletter for front-end developers with a focus on tools.

browser compatibilitybrowser testingcross platformIE11modern.iesponsored
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week
Loading form