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
- 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).
- 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.
- 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
- 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.
- 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.
- 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.
- Use CDN (Content Delivery Network)
Third Level of Actions
- Remove unused CSS
- Minify HTML response - Also known as compressing the HTML response by removing unnecessary whitespaces and tabs.
- Delay advertising blocks - Advertising and marketing tags must be placed towards the bottom of the body & delayed execution.
Additional Reference(s):
- Website Optimization: Speed, Search Engine & Conversion Rate Secrets
- Professional Web Design, Techniques and Templates: 4th Edition
- High Performance Web Sites: Essential Knowledge for Front-End Engineers
- Enterprise AJAX: Strategies for Building High Performance Web Applications
- High Performance JavaScript
No comments:
Post a Comment