January 20, 2012 05:55 by Scott
In this article, I will show you how to optimize your website performance. Yes, there are many ways to optimize your website performance. Ok, here we go, hope you enjoy this article.
Typical website may have the following architecture. We can do optimization in each layer but this post specifically talks about ASP.NET 4.5/IIS which is a presentation layer.
Page Request Tree when a page load in browser you will get page request tree as shown below. You can get this tree if you use Page Speed(web developer tool). This can be downloaded from here. You can also use the toll YSLOW to analyze your webpage, can be downloaded from here.
If you look at the Request tree of a test web page above, the top box which is actually the html. The more requests you get to your site then longer the tree and in-turn slows the site.
The HTML is not taking much time but other elements are taking time to load in to the browser.
The Typical ASP.NET web site might look like as below in Visual Studio. It may contain Scripts folder, Images Folder, Styles Folder and a Default aspx page.
Usually you refer them in your page as shown below
If you run the Page Speed tool on above page then you might get the below score
it also gives you the suggestion where else you can improve the site performance. If you look at the same page in Yslow then you might get the below statistics
There are 46 HTTP Requests, 5 Java Script files, 6 Style Sheet files and 8 images. Total weight of the page is 11.5K. Some of the browsers actually cache these images, we do not have a control on their logic.
We can use Bundling and Minifying the files to reduce those requests. In ASP.NET 4.5 you have the built-in features to these. Write one line of code in Global.asax to bring these HTTP Requests down. You can read more about bundling in ASP.NET 4.5 here
Basically this bundling technique looks at the folder and takes all the files inside and bundles them into one file, no matter how many are in the folder. This all happens at runtime. It only happens at once.
The order of bundling of your files goes as first it takes all Jquery scripts first and then it takes custom scripts alphabetically from your solution explorer.
Instead of doing the references to individual files, You can do this
Results of writing above lines of code are shown below which makes HTTP requests down to 37
Suppose if you want to bundle the files by taking from different directories in bundle into single file by using the below code
In above code we are registering our own bundle named mycss and then we are adding file styles.css and a directory styles.
Compress components with gZip. we can enables this on IIS. You tell the server everything that respond to client that text based zip it. You can do this by changing the couple of attribute values in web.config file
In IIS 7.5 it enables for you by default, if you running on windows server 2008 then you need to set the attribute values to true.
Encoding the Images to Base64 Images
Above code shows before and after encoding the image.
You may not want to encode all images in your project but if you want the images that you want to embed along with style sheets then you can write some regular expressions as shown below.
After doing the above steps then we are ending with 19 page requests
We can even transform your response further using coffee script as shown below
You can optimize the images in your folder by using Visual Studio extension tool named Optimize Images.
You can see the before and after percentage of optimization of images in output window
You can read more about this concept here
January 20, 2012 05:08 by Scott
Another major release in .NET Framework, .NET 4.5 which allows the developers to use Windows 8 technologies and windows runtime directly from .NET 4.5. It makes easy and natural to write Metro style applications using C# and VB. .NET 4.5 makes your applications run faster eg: Faster ASP.NET startup. .NET 4.5 gives you easy access to your data with entity framework code first approach and recent SQL Server features. This post discuss these features in detail.
You can download the .NET FW 4.5 Developer preview from here.
January 4, 2012 07:42 by Scott
When you start creating a new ASP.NET 2.0 site with Visual Studio 2005 or Visual Web Developer Express (VWD) and want to start using it you'll notice that a new file in the App_Data folder gets created besides your own database, namely the aspnetdb.mdf file. This extra database holds all the tables and stored procedures to let Membership, Roles, Profile etc run smoothly.
However a problem arises when you don't want to use that dedicated new database when you want to deploy to your live webserver, certainly not when you use a host that only offers one database and charges you extra for another database. Luckely you can control things more when using the dedicated aspnet_regsql tool that ships with the .NET 2.0 framework.
What I'm about to describe in this article is how to use that tool to generate a SQL script that you can use to run on your other database with a tool like SQL Server Management Studio (SSMS). In this example I'll be using the installed Northwind database on my localhost developer machine.
Just start up a new DOS box by going to Start | Run and type in cmd followed by enter. In Windows Vista you push the blue windows logo button and in the field with the text Start Search you type in cmd followed by ctrl + shift + enter. The reason for that combination is that you must run it under Admin privileges or else the to be generated file doesn't get writed to disk.
A new DOS box will appear and you just navigate to the following directory/folder:
If you're not used to using DOS you can navigate to it by typing this in the DOS box: cd \windows\Microsoft.net\framework\v2.0.50727 followed by enter.
Then you type in this line: aspnet_regsql.exe -E -S localhost -d Northwind -A all -sqlexportonly c:\membership.sql again followed by enter. At the location c:\ a new file gets generated: membership.sql.
The Northwind name in the parameter list is later on used to set the db name in the generated sql file: SET @dbname = N'Northwind'
Once generated you can use/tweak this file to be used in SSMS to get executed and to install everything needed in the database.
Ok, up untill now we focussed on getting everything ready on the database side but we also have to let our ASP.NET 2.0 application know that we're pointing out to another database than the default one. The solution for this is to override the default settings for the LocalSqlServer connectionstring which can be found in the machine.config file.
connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;
To override that you open the web.config file in your application which can be normally found in the root of the application. Go to the <connectionStrings> element.
<add name="LocalSqlServer" connectionString="The connection string to your
(new) database" providerName="System.Data.SqlClient" />
Notice the second line where you call the remove statement. This is needed in order to be able to override the LocalSqlServer connection string!
If you're in need of a little help to get your connection string right there's a dedicated site: http://www.connectionstrings.com/.
If you need ASP.NET hosting with SQL database, please visit our site at http://www.hostforlife.eu. If you have any questions, please feel free to email us at [email protected].
January 3, 2012 15:10 by Scott
Happy New Year 2012!!! Hope this year will bring happiness, success, and prosperiority.
In this tutorial, I will show how to making HTML 5 video work with IIS Express. Ok, first I created a simple MVC Application with “File – New - Project – ASP.NET MVC 3 Web Application” and left the defaults to create an Application. I added a videos folder and added a H.264 encoded mp4 video (one of the supported HTML5 Video formats) inside the folder.
Then, I added the following line of code in the “Index.cshtml” file.
<video src="@Url.Content("~/Videos/video.mp4")" id="myVideo" controls ></video>
All I got was the above. Basically a broken link. I verified that the path is right and the video is indeed playable on Windows Media Player etc.,
The issue was that, since by default Visual Studio uses the ASP.NET Development Server and the ASP.NET Development Server doesn’t have the flexibility to configure MIME types, It doesn’t understand the video format and hence could not play. When I ran the application on IE9 and checked the Network Tab of the Developer Toolbar, all I got was what you see below
I switched the Project to use IIS Express using “ProjectName” – Right Click – Properties – Web Tab
Still had the same result. Since IIS Express also doesn’t have the MIME Type to play video, configured by default, it couldn’t recognize the video and couldn’t play it.
The simple option is to configure it to use the “Actual IIS” (in the above screen, remove the check from “Use IISExpress”) which can play the video.
But, thankfully this blog post has steps on how to configure MIME types for IIS Express. Only thing is, I had to change it for configuring the MIME type for playing MP4 video.
So, the steps are
1. Click on Start button
2. Type CMD
3. Right click on the CMD that is listed and choose “Run as Administrator”
4. Do a cd to navigate to the IIS Express directory CD “Program Files (x86)”\”IIS Express”
5. And then run the following command
appcmd set config /section:staticContent /+[fileExtension='.mp4',mimeType='vieo/mp4']
That’s it. When I re-ran the application, it could play the video.
Please note, I was unable to configure or figure out how to do it for the ASP.NET Development Server. So, if we need to play HTML5 Video from Visual Studio we either need to use IIS Express or use the full fledged IIS. And from the performance and configuration perspective IIS Express offers a lot more than ASP.NET Development Server and hence it makes more sense to use IIS Express for local development.