Sunday, August 1, 2010

Asp.net MVC Website Speed Optimization Series – Text Compression

With our movie booking/reservation website www.go4cinema.com being released, it is now time to ensure that the website runs at the maximum speed possible. Since i will be optimizing the website in steps and if my plans of documenting each step into a blog goes fine then this will be a series of blogs. Hope someone finds this useful.
I analyzed the website speed using pagespeed which is a firefox addon from google, ps. this also requires the Firebug addin to be installed. I also used YSlow from yahoo. The analysis left me with the some issues. The issue i am solving now is:
Issue:
With YSlow we get:

Grade C on Compress components with gzip There are 2 plain text components that should be sent compressed
With Page speed we get:
image
Now where does compression come in the web?
Speed Optimization can be done by compressing the html, css files, however the browser must be capable of decompressing the file too. A popular file compression is GZip and its widespread popularity means that 90% of browsers support GZip.
Implementation:
A quick flowchart into the steps that need to be implemented.
image
Let us implement this and then dissect it later.
Create the basic code
Create a new Asp.net MVC Application. Now If we run it we will find the default home page will be opened. Now if we open this page in firefox and run the pagespeed analyser.
Now in the pagespeed plugin, take the Resources tab you will find the following
image
We are going to make use of the portion marked in Red. This denotes that the web browser supports gzip and deflate compression techniques.
Implemented the gzip compression using the the following code in the HomeController.
image
Now after running the application, pagespeed gave the following result:
image
We now see that the response contains the content-encoding value as gzip.
Now running the analysis again we find the following result. The optimization point “Enable Compression” still exists but if we look within we find that the compression point for the webpage has been removed but the compression for css remains. so our next task will be to clear this. View a screen shot of pagespeed analysis after the previous code implementation.
image
This can be solved by serving the css file through a controller action as below:
image
and in the master page where this css is referenced we point to this action.
image
Now if we run the application and check it through pagespeed we will see that the issue has been resolved.
Page speed gives us this confirmation.
image
while YSlow gives this confirmation:
image

No comments:

Post a Comment