Thursday, 29 January 2015
Web performance is very importance for lots of reasons. In this article I'll summarise why it is important and how you can fix it
This article was published at GitHub. It is open source and you can make edits, comments etc.
These days it is fairly easy to build and publish a website. In fact, if you are using Visual Studio, ASP.net and Azure you can get a modern, responsive site published in less than 3 minutes. However that is only half of the story; the real challenge is tuning and optimising your site so that it is lightening fast, cross browser and backward compatible.
On Wednesday 4th January, my chum Bianca Furtuna and I will present a short talk at Tech Days Online called 'Tune, Modernise and Debug Web apps with IE'. In the talk, we'll cover lots of tips and tricks on how to make you website compatible, fast and well tuned, primarily using IE F12 developer tools but also looking at other tools and techniques too.
In this article, I'll aim to summarise some of the main points and resources, but if you are interested in this stuff, I recommend you attend the free online talk live as part of Tech Days Online.
Like most modern browsers, IE has a broad array of handy developer tools that you can use to explore and debug your site directly within the browser. You can access these tools by going to any site and hitting F12.
The IE dev tools are frequently updated and operate on a separate cadence from IE itself. This means that the tools are always up to date with the latest standard and developments.
The current version of the F12 developer tools have the following features
There is a big problem at the moment where websites look for specific versions of browsers and/or operating systems and serve up targeted content. The origins of this practice goes back several years to a time when the major browsers all behaved differently so you'd have to implement specific code for specific browser versions.
This JavaScript code is an example of how developers would do this sort of thing:
if (navigator.userAgent.indexOf(‘MSIE’) > 0) { //serve up an old version of your site //make your IE users sad //give IE a bad reputation }
Fortunately, there is a much better way to do this sort of thing and it is called 'feature detection'. Feature detection involves checking if a specific feature exists; if it does use it, if it does not use an alternative.
Modernizr is probably the standard and most common way to do feature detection. Modernizr is a JavaScript library that allows very easy feature detection in either JavaScript or CSS.
This is an example of Modernizr detecting SVG support and falling back to PNG if SVG's are not supported
<img id="logo" src="http://blogs.msdn.com/Content/logo.svg" />
<script>
//if SVG files are not supported, use a PNG instead
if (!Modernizr.svg)
{
document.getElementById('logo').src = '/Content/logo.png';
}
</script>
Modernizr also works in CSS. The framework adds a set of CSS classes to the HTML document indicating support or non-support of features. If a feature is not support you'll find a class with 'no-' as a prefix. For example 'no-opacity' indicates that opacity is not supported.
<style>
/*set the opacity if we can*/
.btn-lg {
opacity: 0.5;
}
/*if opacity is not supported, set the background colour to a light shade of blue*/
.no-opacity .btn-lg {
background-color: lightblue;
border-color: lightblue;
}
</style>
<div class="btn-lg"/>
A common technique for handling unsupported standard is to use Polyfills. A polyfills is a piece of JavaScript that implements a modern feature on older browsers. There are many polyfills available for just about every modern HTML standard, you can see a fairly comprehensive list here: https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills.
Polyfills are commonly used with Modernizr to implement alternative techniques if features are not supported.
Another great tool for helping you understand which features are supported (or not) in your target browsers is CanIUse.com.
CanIUse.com lists all current standard across HTML, CSS and JavaScript and tells you the level of support each major browser / browser version has. For example I can see that FormValidation is well supported across all major browser apart form IOS Safari and Opera Mini.
If you are targeting any version of IE, then Modern.IE is an invaluable resource. Modern.IE is a Microsoft operated website which has two main goals:
The tools section of Modern.IE contains some killer tools:
Performance is a really big deal and can make a massive difference to the usability of your site and even your search engine optimisation. The vast majority of websites are missing a few key tricks that will make a huge impact on how quickly the site renders on a range of devices.
Most performance gains can be made on the front end of a site (i.e. what happens after the response has been received by the server). There are certainly things you can do on the server side, but if you are time constrained, the font-end is where you'll make the biggest impact on your site's performance.
There are lots of great tools that will help you get insight to areas where your site can be improved. The 'site scan' tool in Modern.IE is a great place to look for IE-specific tips. There are two other key tools in this area:
For those of you lucky enough to be using ASP.net, I highly recommend the Performance Optimize Your ASP.NET Web App talk from Mads Kristensen at TechEd North America 2014. Mads is one of the key people behind Visual Studio Web Essentials and this talk is jam packed full of tips and trick for squeezing every last drop of performance form your ASP.net site.
The final technique for getting super speed performance on your website is to bring the data closer to the users. Depending on the target geography of your site, this may be as simple as making sure you are hosting your site in the best region for your users. With 16 data centres world-wide, hosting your site on Azure websites is a great way to do this.
If your site targets a multi region or global user base, then you can use Content Delivery Networks (CDNs) to distribute static content around the globe so that users can download from their nearest data centre. Azure Storage is a great, cost effective way to do this.
There are plenty of tools out there to help you make sure your website is tuned, lightening fast and compatible with as many browsers as possible, so stop reading this and get on with it! :)
The table styler app is great to layout website sections on the page!
Got a comment?
All my articles are written and managed as Markdown files on GitHub.
Please add an issue or submit a pull request if something is not right on this article or you have a comment.
If you'd like to simply say "thanks", then please send me a .