Note: Scott Gu reckons the helper will probably be called Html.Bundle in the future.
Using HTML helpers gives you the advantage of adding a unqiue hash based upon the contents of the directory structure on the server for the script resource e.g.
ASP.NET will then cache the output for a year which means it will be served from the cache.
Should any files in a resource directory change the generated hash will also change and user will get an updated version of the file.
So how does ASP.NET MVC 4.5 bundling and minification perform?
This is Chrome resource graph for loading the page without any bundling or minification
and here’s the resource graph for a ASP.NET MVC app using the new bundling or minification tools.
In this post we’ll see how easy it is to use CSS Sprites to improve the performance of you mobile web application.
As discussed in the post ‘Mobile Web Optimisation Using CSS Sprites’, CSS sprites can reduce the time it takes to load a web page by combining multiple images into a single image.
The video below shows the steps used in this post in action
Change the horizontal and vertical offset to 5px, and check the box for ‘Compress Image with OptiPNG’ as these options reduce the size of the image containing the CSS sprite.
Click the button ‘Create Sprite Image & CSS’
Download the sprite image but don’t close the page because you’ll need the CSS Rules for the positions in the next step.
Copy and paste the ‘CSS Rules’ and the ‘background rule’ into a style section in your web page or an external CSS stylesheet which your web page references.
<style> li img { background: url(http://dl.dropbox.com/u/24023585/jQueryMobile/CssSprites/flags.png) no-repeat top left; }
The image element requires the src attribute and it needs to reference an image that exists (otherwise the alt text will be shown). So we use a tiny transparent image as the src for all of the flag icons.
Now when you load the page you’ll see the six requests to load the images have been reduced to one that is a smaller size than the total size of the six images.
So we’ve managed to reduce six image requests down to two.
The good news is if you use you another CSS sprite for another page the browser will have cached the transparent gif and won’t request it again.
Are CSS sprites worth all the effort?
Let’s have a look at Google’s PageSpeed reports for the two pages.
The page that makes six image requests and doesn’t use a CSS sprite gets a score of 72 and medium priority warning to combine images
The page that uses a CSS sprite gets a score of 89
In a future post we’ll see how to get this score even higher.
Continuing in the series looking at mobile web performance optimisation, CSS sprites combine multiple images and reduce the number of HTTP requests required by the browser to show images on your page.
In this post we’ll see how easy it is to optimise the performance of your mobile ASP.NET MVC site with the excellent SquishIt framework.
Excited you should be.
SquishIt can reduce the chatter between the browser and the server by combining your css or JavaScript scripts into single files.
This is important because there is a limit on the number of simultaneous connections that can be opened to a hostname (sub-domains count as different hostnames).
So the more scripts you have the longer it could take for a page to load.
In addition to reducing the number of scripts SquishIt can also compress files using a minifier of your choice including the YUI compressor.
What’s even more impressive is even if you’re already using minified versions of your favourite JavaScript libraries, SquishIt can still improve the performance of your ASP.NET MVC site.
So how do you make ASP.NET MVC mobile site faster using SquishIt?
Here’s a razor layout file which uses three CSS and four JavaScript files.
