Apex Page and Apex Component best practices

This page documents the impact and remediation activities which should be undertaken whenever Quality Clouds reports an issue on an Apex Pages and Components. Additional reference to Salesforce documentation is also provided.

Best PracticeConfiguration Element TypeIssue SeverityImpact AreaImpactRemediationSalesforce Reference
Include JavaScript files using a standard HTML <script> tag right before your closing </apex:page> tag instead of using <apex:includeScript>;.  Apex Component MEDIUM Manageability The <apex:includeScript> tag places JavaScript right before the closing </head>

 element, causing the browser to attempt to load the JavaScript before rendering any other content on the page. This may have unintended consequences and/or cause slower page loads.

Use the standard HTML <script> tag instead of <apex:includeScript>Optimizing JavaScript
 Unnecessary HTML increases the size of the component tree and the processing time for Ajax requests.   Apex Component MEDIUM PerformanceUnnecessary HTML increases the size of the component tree and the processing time for Ajax requests.  Remove from your source code tags which the Visualforce page would remove at runtime (such as <head> or <body> inside an <apex:page> tag
 Component id must be unique    Apex Page    HIGH    ScalabilityYour code can break if you use non-unique component ids and your page hierarchy changes.Make sure that you use ids which are unique at the whole page levelBest Practices for Accessing Component IDs
 Increase the time interval for calling Apex from Action Pollers Apex Page    HIGH    PerformanceHaving action pollers in your APEX pages with a polling interval of 15 seconds or less can hurt the performance of your Org.Make sure that any action pollers are configured with polling intervals greater than 15 seconds.
 Use the render attribute on Visualforce components to update the component without updating the entire page.    Apex Page    HIGH    PerformanceUnnecessary full page reloads create a poor user experience.Use the render attribute on Visualforce components to update the component without updating the entire page. Visualforce Developer Guide
 Use only one <apex:form> tag on a page Apex Page    MEDIUM Manageability Having multiple <apex:form> tags on a page means that a single page can be performing multiple unrelated data modification actions. This can make the page harder to maintain and understand.Refactor your pages or components to use a single <apex:form> tagVisualforce Developer Guide
 Avoid using data grids Apex Page    MEDIUM PerformanceData grids display many records with editable fields. Data grids frequently expand to thousands of input components on a page and exceed the maximum view state size, resulting in a Visualforce component tree that’s slow to process.If your Visualforce page needs a data grid:
  • Use pagination and filters.
  • Where possible, make data read-only to reduce the view state size.
  • Only display essential data for a given record, and provide a link for an Ajax-based details box or separate page to view the rest
Visualforce Performance: Best Practices
 Combine all CSS files into a single file   Apex Page    MEDIUM PerformanceWhile CSS styles can improve the appearance of Visualforce pages, they might also add significant weight.Combine all CSS files into a single file to reduce the number of HTTP requestsVisualforce Performance: Best Practices
 Combine all JavaScript files into a single file Apex Page    MEDIUM PerformanceInefficient JavaScript delivery to the client can result in slow page load times.

Combine all JavaScript files into a single file to reduce HTTP requests, and remove duplicate functions as they might result in more than one HTTP request and waste JavaScript execution.

Visualforce Performance: Best Practices
 Displaying the Content of a Static Resource   Apex Page    MEDIUM PerformanceInefficient delivery of page components to the client can result in slow page load times.Use static resources to serve JavaScript files, as well as images, CSS, and other non-changing files. JavaScript and other assets served this way benefit from the caching and content distribution network (CDN) built into Salesforce.Visualforce Performance: Best Practices
 Reduce the number of records displayed on the page Apex Page    MEDIUM PerformanceDispalying an unbound, full result set from a query on a page can degrade the performance of your User Interface.Use pagination to reduce the number or records displayed on the page.
 Use fewer images Apex Page    MEDIUM PerformanceImages are frequently the largest components of a Web page and thus significantly affect performance.

Use fewer images and smaller background textures, and use CSS instead of images whenever possible.

Visualforce Performance: Best Practices
 Use static resources to serve CSS files, as well as images, JavaScript, and other non-changing files. Apex Page    MEDIUM PerformanceInefficient delivery of page components to the client can result in slow page load times.Use static resources to serve JavaScript files, as well as images, CSS, and other non-changing files. JavaScript and other assets served this way benefit from the caching and content distribution network (CDN) built into Salesforce.Visualforce Performance: Best Practices
 Use a static resource to upload content that it can be referenced in a Visualforce page    Apex Page    MEDIUM Manageability Inefficient delivery of page components to the client can result in slow page load times.Use static resources to serve JavaScript files, as well as images, CSS, and other non-changing files. JavaScript and other assets served this way benefit from the caching and content distribution network (CDN) built into Salesforce.Visualforce Performance: Best Practices
 Create a custom component to show and hide data Apex Page    LOW Performance

The rule creates an issues for any Apex Page which does not include any custom components

To reduce or delay expensive calculations or data loading, use lazy loading, a technique in which a page loads its essential features first and delays the rest.

To lazy load parts of a Visualforce page, create a custom component to show and hide data according to user actions.

Visualforce Performance: Best Practices
 Page names should always begin with an upper case character.    Apex Page    LOW Manageability By convention, APEX page names should begin with an upper case character. Not following conventions can confuse new joiners to the team.Ensure that all your APEX pages use a capital letter as the first letter in their name.