Understanding about performance optimization

I am working on performance optimization task for a web application for few months, here I am trying to summarize my understanding about performance optimization.

1. Performance optimization needs culture
• Coding Honor says: Performance is a feature
• Fred Wilson's 10 Golden Principles say: speed is more than a feature
• Design with performance in mind
2. Performance optimization needs tools and guidelines
• High Performance Web Site (Steve Sounders)
• Yahoo Best Practices for Speeding Up Your Web Site
• Lots of tools from WPO companies and open source communities
3. Performance optimization needs 80/20 rule
• Find top issues and fix them
• Put small things on hold
4. Performance optimization needs data
• Measurement (problem) -> Analysis (root cause) -> Optimization (solution) -> Measurement (new problem)
• Google says: Every millisecond counts
5. Performance optimization needs passion
• Do extensive research
• Repeat the optimization loop (It is a heuristic loop instead of dead loop)
• Evangelist performance optimization
• Make faster web and better life

IE8 CSS file 4096 rule limit

Recently I asked front-end developers to try to merge small CSS files into one, and then use CSS compressor or optimizer to minify CSS file size. There are many tools there to improve CSS quality (csslint, validators), or minify CSS (YUI compressor, cssmin, and many online tools). In my mind, we should not have more than 3 CSS files per module (one common, one project global, one module specific). This rule not only benefits web performance, but also modularizes CSS cascading coding.

However, one web developer rejects this request and says IE cannot take CSS files with 5000 rules. I don't know this, so test it using IE8, FF8 and Chrome15, and the result reveals that Internet explorer 8 does not take the 4096 rule from one CSS file.

This blog (CSS size limit in Internet Explorer 8) also explains the similar problem and includes more IE related CSS limit. However, please note 4096 is not file size, but rule numbers. About the file size, the blog also mentioned IE6/IE7: Limit for CSS file size around 285KB (depends on specific stylesheet)


CSS best practices

1. Write succinct CSS - don't forget CSS stands for Cascading Style Sheets, so avoid redundancy in your CSS. Use shorthands, use cascading codes
2. Write correct CSS - don't forget validate your CSS using validators, csslint
3. CSS compressor/optimizer - for performance using tools
• CSS Drive
• CSS Compressor
• CSS Optimizer
• Clean CSS
• Pingates
• PHP Insider
• SevenForty
• Arantius
• Lottery Post
• Page Column
4. Gzip CSS - save more than 70% size
   

strangeloop cyber Monday tips

Recently I got a series of emails with tips from strangeloop regarding web site optimization before cyber Monday. Each tip has the core basic about WPO, and also introduces their Site Optimizer. Here I want to summarize the email series and their optimizer.

In my mind, WPO always starts with measurement (testing) to understand the performance problem, then find tools, solutions to solve the problem, then measure again. This is an iteration process, and focus on top 3 issues in each iteration will make your WPO more efficient. I blogged my understanding of core practices or Fundamentals of WPO 2 month ago. From  strangeloop tips, another key word I find very suitable is "simplify". What we are trying to achieve is to simplify the web site, less http request and less data.

Let's look at the tips from strangeloop.
http://www.strangeloopnetworks.com/cyber-monday-2-weeks/

1. Test your site, using tools (webpagetest.org)
2. Make sure your site follows core best practices
   
   • Text compression: The easiest way to reduce your page sizes 
   • Keep-alives: Control your TCP connections
3. Identify and fix your sluggish third-party content
   
   • Audit your 3rd-party content
   • Use the latest version of your widgets
   • load asynchronously wherever possible

Then let's look at how Site Optimizer works
http://www.strangeloopnetworks.com/products/overview/how-it-works/

1. Simplify the page
2. Recognize different browsers
3. Preload relevant page elements
4. Optimize for repeat visits and flows
5. Start loading fasterOptimize third-party content