How to reduce the # of HTTP requests / page load?

Major culprit that impacts the page performance for any website is the total # of HTTP requests that gets fired from the browser to the web server. So, exactly what results into the generation of HTTP requests is what we need to understand 1^st and figure out a way to measure and investigate the areas that need attention.

Each of the below request(s) from the browser to the server would result into a new HTTP request causing the need for request-response mechanism to kick-in:

1. CSS file(s)
2. JavaScript file(s)
3. Image file(s)
4. and, any other downloadable resource on page load

In order to view the total # of HTTP requests for your page, you can install one of the best free tools called “AOL Pagetest”.

AOL Pagetest is a completely free and open source tool for analyzing your Web pages. It is the only free tool for Internet Explorer that dissects all of the requests the browser makes and displays them in a waterfall view of the page load making it easy to spot bottlenecks. Included in the waterfall display are the DNS lookup times, Socket connect times as well as each http request. It also provides the full request and response headers for each request.

Additional information about AOL Pagetest can be found here:

1. Presentation(s) on AOL Pagetest
2. Video(s) on AOL Pagetest

Website Performance - What & how to prioritize?

In this session we will outline the most critical pieces to consider for performance enhancements and prioritize the same in 3 levels:

First Level of Actions

1. GZip / Compression (Enable HTTP compression) - you should plan to enable GZip compression "on-the-fly" thru .htaccess or PHP or thru a .Net Component in the front-end (ASP.NET code).
2. Optimize your images for the web (shrink) - You can use Adobe photoshop or one of several free tools to perform lossless image optimization. You can check out the article here.
3. Cache - Enable caching of objects on client-side and server-side as well. This helps the client browsers not to request the objects that are available locally and not set to expire.

Second Level of Actions

1. Combine CSS & JavaScript modules - Combining multiple CSS files into a single one. Apply same for JavaScripts as well. A word of caution, do not combine CSS with JS. You can even write modules that can perform this at run-time. We will discuss this in more details in future articles.
2. Minify CSS & JavaScripts - Compress CSS & JavaScripts so as it cleans up all whitespaces, tabs, and other types of characters that are not a part of language keywords and constructs.
3. Create CSS Sprites - Usually lot of HTTP requests are generated from browser to the server on image-savvy sites. A technique called "CSS sprites" is available that can help reduce the total # of images by combining small images into a single image. Then CSS rules can be written to read the pieces from the Sprite'd image.
4. Use CDN (Content Delivery Network) 

Third Level of Actions

1. Remove unused CSS
2. Minify HTML response - Also known as compressing the HTML response by removing unnecessary whitespaces and tabs.
3. Delay advertising blocks - Advertising and marketing tags must be placed towards the bottom of the body & delayed execution.

Additional Reference(s):

1. Website Optimization: Speed, Search Engine & Conversion Rate Secrets
2. Professional Web Design, Techniques and Templates: 4th Edition
3. High Performance Web Sites: Essential Knowledge for Front-End Engineers
4. Enterprise AJAX: Strategies for Building High Performance Web Applications
5. High Performance JavaScript

Facts about Website Performance

Research indicates that 80% of the end-users response time is spent on the front-end, remaining 20% includes all of database & other back-end activities such as web-services.

There are numerous factors that contribute towards the end-users response time on the front-end:

1. # of HTTP Requests
2. Whether or not if the site is using CDN (Content Delivery Networks)
3. Caching
4. Compression
5. Optimization
6. Minification
7. Placement of Stylesheets in the HTML
8. Placement of JavaScripts in the HTML
9. CSS expressions usage in the code
10. Are your JS and CSS internal to HTML or external
11. Redirects
12. Duplicate scripts
13. Are your AJAX cachable?
14. # of DOM elements
15. Are you using iFrames?
16. Do you have lot of 404s (Page not found errors) on your site?
17. Cookie size
18. Image size & optimization
19. CSS Sprites
20. Missing image size (height and width) in the code
21. Size of HTML
22. Size of Javascripts & CSS

We will discuss possibly each of the above in sufficient details in up-coming posts with examples, tools, suggestions, tips, techniques, and tricks to boost page performance.

Additional Reference(s):

1. Yahoo developer community - Performance Rules
2. Page performance - Things you need to know about

Website Response Time Rule: Eight Seconds, Plus or Minus Two

SPEED is @ the core of Utility, Usability & Likability for any website. This post highlights the key factors under each area that will help you understand the impact on website visitors and hence assist you in crafting appropriate course of action for your website/contents.

SPEED FACTORS
1. Load time of website
2. Standard visitor’s wait time for loading is 4 seconds
3. Visitor’s high perception of usability, likability, and utility could increase wait time
• 
  
USABILITY FACTORS
1. Visitor’s perceived ease of use
2. Simplistic and intuitive site/content navigation
3. Ease of performing desired task
4. Visitor’s level of comfort and familiarity to the site
UTILITY FACTORS
1. Visitor’s perceived usefulness of a website
2. Working order of a website
3. Working order of navigation
4. Relevant content
5. Search engine visibility
LIKABILITY FACTORS (One site v/s the other(s))
1. Visitor’s perceived attitude towards the website
2. Visual Layout
3. Messaging effectiveness
4. Ability to meet needs
5. Graphics & Text appropriateness
6. Visitor’s overall experience
Actions for Page Performance (Speed)
1. Reduce the # of HTTP requests
2. Minify the content/code (JS, CSS, HTML)
3. Compress the contents using GZIP/Deflat
4. Optimize Images (using lossless compression)
5. Use CSS Sprites to reduce the # of images and hence the # of HTTP requests
6. Enable HTTP compression on your web server
7. Use CDN – Content Delivery Networks like Akamai
8. Reduce the # of JS & CSS by combining the JS and CSS into single or less # of files respectively (never merge the contents of JS & CSS)
9. Force parallel browser requests using Multiple host names using CNAME setup
10. Specify dimensions for Images
11. Make sure JS are not in the <head> of your page, unless absolutely necessary
12. Order should be CSS 1st, then JS
• 
  
All of above will drive “Perceived performance” and improve stickiness of customers to your site/pages.
Free Website Performance Measuring Tool
Below tools will come handy for you to measure website page performance and also, get detailed analysis on which areas to focus to get better page response times
1. AOL PageTest Plug-in for IE
2. HTTP Watch
3. Fiddler 2
4. FireBug Addon for Firefox
5. YSlow Addon for Firefox (also needs FireBug)
6. Google PageSpeed
7. LORI addon for Firefox
All of above will drive “Perceived performance” and improve stickiness of customers to your site/pages.