<body><script type="text/javascript"> function setAttributeOnload(object, attribute, val) { if(window.addEventListener) { window.addEventListener('load', function(){ object[attribute] = val; }, false); } else { window.attachEvent('onload', function(){ object[attribute] = val; }); } } </script> <div id="navbar-iframe-container"></div> <script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script> <script type="text/javascript"> gapi.load("gapi.iframes:gapi.iframes.style.bubble", function() { if (gapi.iframes && gapi.iframes.getContext) { gapi.iframes.getContext().openChild({ url: 'https://www.blogger.com/navbar.g?targetBlogID\x3d8211560\x26blogName\x3dTech+Tips,+Tricks+%26+Trivia\x26publishMode\x3dPUBLISH_MODE_BLOGSPOT\x26navbarType\x3dBLUE\x26layoutType\x3dCLASSIC\x26searchRoot\x3dhttp://mvark.blogspot.com/search\x26blogLocale\x3den\x26v\x3d2\x26homepageUrl\x3dhttp://mvark.blogspot.com/\x26vt\x3d-5147029996388199615', where: document.getElementById("navbar-iframe-container"), id: "navbar-iframe" }); } }); </script>

Tech Tips, Tricks & Trivia

by 'Anil' Radhakrishna
An architect's notes, experiments, discoveries and annotated bookmarks.

Search from over a hundred HOW TO articles, Tips and Tricks


35+ Ways To Speed Up Your Web Site

One of the oldest and most authoritative resource on improving front-end performance is the list of 35 best practices identified by the Yahoo Exceptional Performance team. The main contributor of that list is Steve Souders who also went on to write books on Web Performance Optimization and possibly contributed to PageSpeed Rules while he was at Google.

The original 35 best practices are neatly structured into 7 categories. There are additionally some best practices identified by other Web Performance Analysis & Optimization tools. I plan to consolidate them all (points other than those in the original list will be italicized & linked) so that I have a single list which is easy to refer. I'll keep looking out for newer findings from the WPO community and add them here as & when I find them.

So here goes my custom list:

Content    
1. Make Fewer HTTP Requests
2. Reduce DNS Lookups
3. Avoid Redirects
4. Make Ajax Cacheable
5. Postload Components
6. Preload Components
7. Reduce the Number of DOM Elements
8. Split Components Across Domains
9. Minimize Number of iframes
10. Avoid 404s

Server
1. Use a Content Delivery Network (CDN)
2. Add Expires or Cache-Control Header
3. Gzip Components
4. Configure ETags
5. Flush Buffer Early
6. Use GET for Ajax Requests
7. Avoid Empty Image src
8. Specify a character set [PageSpeed]
9. Serve resources from a consistent URL [PageSpeed]

Cookie
1. Reduce Cookie Size
2. Use Cookie-Free Domains for Components
3. Serve static content from a cookieless domain [PageSpeed]

CSS
1. Put Stylesheets at Top
2. Avoid CSS Expressions
3. Choose <link> Over @import
4. Avoid Filters
5. Remove unused CSS  [PageSpeed]
6. Use efficient CSS selectors  [PageSpeed]

JavaScript
1. Put Scripts at Bottom
2. Make JavaScript and CSS External
3. Minify JavaScript and CSS
4. Remove Duplicate Scripts
5. Minimize DOM Access
6. Develop Smart Event Handlers
7. Defer loading of JavaScript [PageSpeed] 
8. Avoid document.write [PageSpeed] 

Images
1. Optimize Images
2. Optimize CSS Sprites
3. Do Not Scale Images in HTML
4. Make favicon.ico Small and Cacheable
5. Specify image dimensions [PageSpeed] 

Mobile
1. Keep Components Under 25 KB
2. Pack Components Into a Multipart Document
3. Defer parsing of JavaScript  [PageSpeed]
4. Make landing page redirects cacheable  [PageSpeed]

work in progress..

Labels: , ,

Tweet this | Google+ it | Share on FB

« Home | Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »
| Next »

Posted by Blogger Direnk | 6/18/2014 03:35:00 AM

Hey Anil, thanks for the useful tips. I just wanted to add MaxCDN Tools - http://tools.maxcdn.com/ to the comments. It offers variety of performance tools which can be added to several categories of yours.    



»

Post a Comment