Best Practices for VisualForce pages

Static resources

Static resources have an in-built caching feature and use the content distribution network built into Salesforce. The following are the advantages of using static resources to refer to CSS files, images, and JavaScript:

• Use a static resource to display the content of another static resource with the action attribute of the <apex:page> tag. By doing this we can redirect from a Visualforce page to a static resource. Suppose we have a PDF as a static resource (named as helpPdf) and we use that static resource in the action attribute of the <apex:page>tag as follows:
• <apex:page sidebar=”false” showHeader=”false” standardStylesheets=”false”
  action=”{!URLFOR($Resource.helpPdf)}” > </apex:page >
• The URLFOR function plays a major role here. The redirection will not work properly without the URLFOR function. This is not limited to PDF; we can use any static resource to redirect.
• <apex:page sidebar=”false” showHeader=”false” standardStylesheets=”false”
  action=”{!URLFOR($Resource.helpStaticResource, ‘index.htm’)}” ></apex:page >

Using component facets

The <apex:facet> component is used to specify content in an area of a Visualforce page and it provides information about the data in the parent component. For example, we can use a facet component in the header or footer of a <apex:dataTable>. We can override the default facet of a Visualforce component by using the <apex:facet>component. The advantages and disadvantages of the facet component are as follows with an example:

The <apex:facet> component cannot be used directly in Apex; it must be a child component of another Visualforce component. We can use that in a dynamic component.

Facets only allow a single child within the start and close tags.

The following is an example of the <apex:facet> component that is used with the <apex:dataTable> component:

<apex:page standardController=”Item__c”>
  <apex:pageBlock>
    <apex:dataTable value=”{!item}” var=”i”>
      <apex:facet name=”caption”><h1>This is {!item.Item_Name__c}</h1></apex:facet>
      <apex:column>
      <apex:facet name=”header”>Name</apex:facet>
      <apex:outputText value=”{!i.Item_Name__c}”/>
      </apex:column>
      <apex:column>
      <apex:facet  name=”header”>Unit Price</apex:facet>
      <apex:outputText value=”{!i.Unit_Price__c }”/>
      </apex:column>
    </apex:dataTable>
  </apex:pageBlock>

Resolution

Visualforce was designed to provide developers with the ability to match the functionality, behavior, and performance of standard Salesforce pages. If your users experience delays, unexpected behavior, or other issues specifically around Visualforce, there are several actions you can take to not only improve their experience, but to also make for improved coding.

First, determine whether Visualforce is the problem by ensuring that:

The problems aren’t confined to a single user’s computer by testing expected Visualforce functionality on other machines as well as using different browsers.

Slow load times are not the result of a network issue by checking the load time of other Salesforce pages. If they are also slow, it could be the result of bandwidth or latency issues to Salesforce. To check on the status of the Salesforce servers, visit trust.salesforce.com. You should also check the status of your network connections and ensure they are functioning properly.

You are following general Web design best practices, such as the minification of JavaScript and CSS, optimizing images for the Web, and avoiding iframes whenever possible.

You’ve used the Developer Console to step through the request and determine which items in the request used the most system resources. See ”the Developer Console” in the Salesforce online help.

The following is a list of commonly encountered Visualforce performance issues and their possible solutions:

View State Size:

The view state size of your Visualforce pages must be under 135KB. By reducing your view state size, your pages can load quicker and stall less often.

You can monitor view state performance through the View State tab in the development mode footer and take the following actions:

Use only one <apex:form> tag on a page. Each <apex:form> adds a copy of the view state to the page, so extra forms multiply the data that needs to be loaded. You can also use the <apex:actionRegion> tag to submit form data from specific sections of the Visualforce page.

Use the transient keyword in your Apex controllers for variables that aren’t essential for maintaining state and aren’t necessary during page refreshes.

If you notice that a large percentage of your view state comes from objects used in controllers or controller extensions, consider refining your SOQL calls to return only data that’s relevant to the Visualforce page.

If your view state is affected by a large component tree, try reducing the number of components your page depends on.

Load Times:

Large page sizes directly affects load times. To improve Visualforce page load times:

Cache any data that is frequently accessed, such as icon graphics

Avoid SOQL queries in your Apex controller getter methods

Reduce the number of records displayed on a page by:

Limiting the data coming back from SOQL calls in your Apex controllers. For example, using AND statements in your WHERE clause, or removing null results

Taking advantage of pagination with a list controller to present fewer records per page

“Lazy load” Apex objects to reduce request times

Consider moving any JavaScript outside of the <apex:includeScript> tag and placing it into a <script> tag right before your closing <apex:page> tag. The <apex:includeScript> tag places JavaScript right before the closing <head> element; thus, Visualforce attempts to load the JavaScript before any other content on the page.
However, you should only move JavaScript to the bottom of the page if you’re certain it doesn’t have any adverse effects to your page.

For example, JavaScript code snippets requiring document.write or event handlers should remain in the <head> element.

In all cases Visualforce pages must be under 15 MB.

Multiple Concurrent Requests:

Concurrent requests are long running tasks that could block other pending tasks. To reduce these delays:

Increase the time interval for calling Apex from your Visualforce page. For example, when using the <apex:actionPoller component, you could adjust the interval attribute to 15 seconds instead of 5.

Move any non-essential logic to an asynchronous code block using Ajax

Queries and Security:

By using the with sharing keyword when creating your Apex controllers, you have the possibility of improving your SOQL queries by only viewing a data set for a single user.

Preventing Field Values from Dropping off the Page:

If your page contains many fields, including large text area fields, and has master-detail relationships with other entities, it may not display all data due to limits on the size of data returned to Visualforce pages and batch limits. The page displays this warning: “You requested too many fields to display. Consider removing some to prevent field values from being dropped from the display.”

To prevent field values from being dropped from the page, remove some fields to reduce the amount of data returned. Alternatively, you can write your own controller extensions to query child records to be displayed in the related lists.