Website Performance - What & how to prioritize?

Website Performance

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

No comments:

Post a Comment