How to boost performance of my ASP.NET Website ? Part -II

Dear Friends,
As we have shared earlier how to optimize image (part1) to improve site performance to continue with that topic. I have going to share one more useful topic how to minimize the CSS & JS used in your project.
If you remember Microsoft Ajax minifier (AjaxMinifier) which I have shared earlier in my post we can utilize that tool to

minimize size of the JS & CSS.

So earlier I have explained how to use command prompt to minimize the CSS & JS.
Today I am going to share how to minimize the all the JS & CSS in your project while doing rebuild it.
So here we go just follow below steps.
1)    Go to web solution and unload it  as show in below fig

Boost perfromance of website
2)    Once you have unload the project you will get below screen

Edit project file
3)    Edit the unload project file

Add minifier in project file
4)    Your file will be open in  IDE now add the below lines in project files

<Import Project="$(MSBuildExtensionsPath)\Microsoft\MicrosoftAjax\ajaxmin.tasks" />
<Target Name="AfterBuild">
<ItemGroup>
<JS Include="**\*.js" Exclude="**\*.min.js;" />
</ItemGroup>
<ItemGroup>
<CSS Include="**\*.css" Exclude="**\*.min.css" />
</ItemGroup>
<AjaxMin JsSourceFiles="@(JS)" JsSourceExtensionPattern="\.js$" JsTargetExtension=".min.js" CssSourceFiles="@(CSS)" CssSourceExtensionPattern="\.css$" CssTargetExtension=".min.css" />
</Target>


5)    Now reload the project and build the project. Now refresh the solution and click on show all files. You will some extra files for JavaScript (JS) & CSS file which have same name  and “min” word added in the file.
Like suppose earlier you have Site.css then now you will find site.min.css also.

minimized css & JS

So it is clear now.

Now we can use this compress “minimized” CSS or JS file.
In this way we can use minimized CSS & JS improve the website performance.

So enjoy the New Year with fast performance of the site.
Happy New Year
Thanks & Best Regards,
Rajat Jaiswal

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s