Visualforce coding best practices

Visualforce is a markup language for building user interface in Salesforce. It has some build in tags starting with “<apex:”. But these tags are finally rendered as HTML tags in UI. So if you have a good understanding in HTML, CSS and JavaScript, you can easily manipulate visualforce to give look and feel of anything possible in pure HTML. All HTML coding best practices are valid for visualforce pages also. In addition to that, please find below some best practices that are usually followed while coding visualforce pages.

• Try to keep the view state of the page at minimum. Viewstate is basically an encrypted hidden field in the page, which contains the state of controller instance in salesforce server. It is useful for maintaining state between stateless http calls. Viewstate is created when there a form tag is present in the page. It can slow down page, if not taken care properly. Declare variables that are not needed between server calls(where state does not need to be maintained) as transients. It will not be counted against your view state limit of 135kb.
• Never  hard code drop down values in page. Use it from controller. Also if the values are corresponding to a picklist field in the backend try retrieving, it from metadata so that in future also if some new values are added to it, it will reflect in page automatically. 
• Render css in the page head and JavaScript at the end of the page to improve page load time.
• Follow generic HTML web designing best practices like minifying css and JavaScript, optimizing images for web etc. Use sprites (Single big image consolidating multiple single images for css to decrease number of requests)
• Use Cache, CDN capabilities to improve performance. If your page is not delivering dynamic content, you can increase cache value so that more data is retrieved from cache.
• Never iterate over large collections. If collection size will exceed 1000, implement pagination. Trying to display more than 1000 will cause visualforce error. If at any time there is need to iterate over large data volume use pagination.
• Try to decrease queries in constructor and getter methods to improve page load time. Use Ajax to load additional data.
• If any apex controller variable/property is used in JavaScript in visualforce, encode it using {!JSENCODE(variable)}, to avoid breaking of JavaScript. Otherwise if single quotes are there in the property string, it will cause JavaScript to fail.
• Try to use AJAX rerendering wherever applicable, instead of posting the full page content to sever. I will give faster response.
• If page load is taking too long, try to execute some logic asynchronously using AJAX.
• When using wrapper classes or inner classes for getting UI enhancements, post all content only if needed. For partial effects in the page if entire list of wrapper classes are passed to the controller methods, it will affect performance. Consider using action functions in such cases.
• Implement complex and highly interactive pages using JavaScript remoting/ visualforce remoting. It will take more time in development but page will be fast as there is not viewstate. Also you can make it more flexible.