how to get A in Yslow and tune up your website

Introduction

in this tip I want to talk about website performance and how to tune up and speed up your website by only Observe some little things on both client and server side.

Problem:

I have very big issues around my new website AriaQuotes.
here are my problems:

• my target audience are in Asia with fa/IR culture(3country i guess Iran, Afghanistan and Tajikistan) and my problem is: my server is in canada and the delay to respond
  to clients is about 400ms!! (now guess for 20 http request how much it could be Painful!:| )
• I was using some social links that make my website so slow on loading progress!
• I have too many images and css and js files that all make too many http requests!

How I solve theme:

install firebug and then Yslow in firefox , then run it!
easily you can see you performance problems.
and I solve these issues with few steps:

• reduce the http request: I put may css files into one file and reduce its size with CSS Minifier . you can also put your icons into a sprite and use background-image property to set them as image, in this case for example if you have 10 icons and it means 10 http request, it reduce to only one http request.
  
  
• use a CDN: I sign Up in cloud flare CDN and change my nameservers of my domain into their nameservers with a free acount!
  cloudflare caches my images and css files. it also make my js files into a file that laods js files asynchronously( I love this guys , they are really awesome with their nice apps and bulit in security pipeline!)
  
• Reduce the size of images: I use Smush.it to do this!
  
  
• Expires headers: I go to IIS manager and connect to my website remotely and Add Expires headers to my http requests. now if you visit my website , my resources download only for one time , and then for other requests their would be read from your local storage.
  In Apache:Use this article
  warning!! : if you want to change the file just rename it to make browser understand that file has been changed!( if you remove Etags! )
   
• Etags : Etag or Entity tag is used to show to the browser the version of the resource that has been into cache, and checks it, if it was different form the cache version , downloads the new one!
  now the problem is: Etags make the size of http headers so heavy! and this is your solution in IIS: Remove ETags from the Http Response by setting a blank ETag header. In IIS Manager, right click Web Site (or any folder), click Properties, select HttpHeaders tab, add Custom Http Header called ETag but leave the value blank (a space is enough) !!
  Apache:Use this Article From !Yahoo
  
  
• Social links Problems: I solve it by deleting theme from my master page! but if you want to use it , this article is helpful for you! Adding the Facebook Like Button to a Website!
  in this case if you use it , no time wastes on page load for social links!

• There are too many pipelines that asp.net implements for you that if you don't need them you have to remove theme! use web.config file to do this:

<httpModules>
 <remove name="WindowsAuthentication" /> 
 <remove name="PassportAuthentication" /> 
<remove name="AnonymousIdentification" />
<remove name="UrlAuthorization" />
<remove name="FileAuthorization" /> 
</httpModules>   

• use caching on your datasource even their relay on a parameter , because caching is better than not to.
  
  
• if in your page life cycle , in postback , if you don't need a control value then disable the view state of that control , this work reduce your html size!
  
  
• if you use image tag or image control never never never and never gives it height and width!
   
• your web.config file caches in your server memory , so don't put too much info on it!
   
• if you use url routing don't use too much rout table because it save in server memory too!
  
  
• enjoy your life and coding and don't even think about my article!

Websites and tools that could help you:

CSS Minifier : minify your css with this amazing tool.

Minify JS : Online Javascript Compression Tool .

Sprite Cow : Generate CSS for sprite sheets.

Sprite and Image Optimization for asp.net : The ASP.NET Sprite and Image Optimization framework is designed to decrease the amount of time required to request and display a page from a web server by performing a variety of optimizations on the page’s images. This is the fourth preview of the feature and works with ASP.NET Web Forms 4, ASP.NET MVC 3, and ASP.NET Web Pages (Razor) projects.

NEAT : Neat is an open source fluid grid framework built on top of Sass and Bourbon using em units and golden ratios.
use these kind of framework specially if you are not a good designer(just like me:) ) these kind of frameworks are light weight and have a responsive design on mobile and tablet view!

CloudFlare  : The web performance & security company, sign up for free and use it as a CDN!

Yahoo !Smush.it : Smush.it uses optimization techniques specific to image format to remove unnecessary bytes from image files.

Glimpse : " What Firebug is for the client, Glimpse does for the server... in other words, a client side Glimpse into whats going on in your server."Glimpse could help you to figure out what's going on under the hood! 

Points of Interest

first I start building Aria Quotes Website , I think it is a legend to get 100 in Yslow , but as you start to fixing your performance problems , you figure it out that so easy to Suck less!
I hope this article is helpful for you!