Visualforce Developer Guide

Introducing Visualforce
Tools for Visualforce Development
Getting a Quick Start with Visualforce
Customizing the Appearance and Output of Visualforce Pages
Standard Controllers
Standard List Controllers
Custom Controllers and Controller Extensions
Advanced Examples
Override Buttons, Links, and Tabs with Visualforce
Using Static Resources
Creating and Using Custom Components
Dynamic Visualforce Bindings
Dynamic Visualforce Components
Integrate Email with Visualforce
Visualforce Charting
Creating Maps with Visualforce
Render Flows with Visualforce
Templating with Visualforce
Developing Salesforce Apps with Visualforce
Adding Visualforce to a Salesforce AppExchange App
Using JavaScript in Visualforce Pages
Communicating Across the DOM with Lightning Message Service
Visualforce Best Practices
Best Practices for Improving Visualforce Performance
Investigate Performance Issues
Follow Visualforce Design Guidelines
Control Data Size
Cache Frequently Accessed Data
Lazy Load Page Components
Handle Multiple Concurrent Requests
Write Efficient Apex and SOQL
Write Efficient Getter Methods
Optimize Lists and Tables
Optimize the View State
Optimize HTML
Optimize CSS
Optimize JavaScript
Optimize Images
Prevent Fields from Dropping Off the Page
Use the immediate Attribute Carefully
Visualforce Performance Case Study
Best Practices for Accessing Component IDs
Best Practices for Static Resources
Best Practices for Controllers and Controller Extensions
Best Practices for Using Component Facets
Best Practices for Page Block Components
Best Practices for Rendering PDF Files
Best Practices for <apex:panelbar>
Documentation Typographical Conventions
Standard Visualforce Component Reference
Appendices
PDF

Newer Version Available

This content describes an older version of this product. View Latest

Optimize JavaScript

To ensure efficient delivery to the client, optimize the JavaScript in Visualforce pages Optimized JavaScript also improves caching and reduces load times.

To improve the JavaScript in a Visualforce page:

  • Externalize JavaScript files. This process increases the number of initial HTTP requests, but it also reduces the size of individual pages and takes advantage of browser caching.
  • Build custom versions of JavaScript libraries with only the functions that you need. This process significantly reduces the size of a JavaScript file. Many open-source JavaScript libraries, such as jQuery, provide this option.
  • Reduce HTTP requests by combining all JavaScript files into a single file. Remove duplicate functions that can result in more than one HTTP request.
  • Remove comments and whitespace. Compress the resulting file for faster downloads.
  • Use static resources to serve JavaScript files. JavaScript served this way benefits from the caching and the content distribution network (CDN) built into Salesforce.
  • Put scripts at the bottom of the page. If the scripts load directly before the closing </body> tag, the page can download other components first and render the page progressively.

    Only move JavaScript to the bottom of the page if you’re certain that it doesn’t have any adverse effects. For example, don’t move JavaScript code snippets that require document.write or event handlers from the <head> element.

    Note

  • Instead of using the <apex:includeScript> tag, consider using a standard HTML <script> tag directly before your closing </apex:page> tag. The <apex:includeScript> tag places JavaScript right before the closing </head> element, which causes the browser to attempt to load the JavaScript before rendering any other content on the page.