Habilelabs-Logo
Blog

Top 5 habits for optimization of Visualforce pages

October 22nd, 2018 . 6 minutes read
Blog featured image

Visualforce, an essential component-based user interface which is in the hot talks these days. It is very popular and frequently used for developing the custom pages in salesforce.com. In this blog, I will let you go through the concept of Visualforce and will make you understand its essential advance level features. Let’s just quickly know why Visualforce is important.

Importance of Visualforce

There is a much buzz about Visualforce for its implementation paradigms in the applications. But the real importance of the Visualforce stands in the following points:

  1. It provides the user-friendly development features.
  2. Healthy integration with other web-based user interfaces.
  3. Model-view-controller(MVC) style development support.
  4. Visualforce has data-driven
  5. It is automatically upgradable.
  6. Visualforce has a concise syntax.

These important points help in creating the awesome web and mobile applications. Now, let me brief you about what actually you will get to know in this blog:

  1. What is Visualforce?
  2. How can you improve the performance of existing Visualforce pages?

So, let’s just first eye upon what actually is Visualforce.

What is Visualforce?

If you are from the salesforce background then you must be in a habit of listening to this term very frequently. Isn’t it? If not, then no issues, here in this section I am going to let you know about it. Just stay there and read further.

Visualforce:

As described in the starting Visualforce is nothing but a web development framework that provides features to build the custom and sophisticated user interfaces. These interfaces are most frequently used for mobile and desktop applications that can be hosted on the lighter platforms.

Now, that you have enough overview of what Visualforce is and what is its importance, So, let’s just proceed further to know the extremely productive habits that can result in the highly optimized Visualforce page.

You should also check: 10 Reasons to Use Angular in Salesforce Visualforce Pages

Top 5 most productive habits for optimizing the Visualforce pages

There are always some methods in every programming language, frameworks, and tools to optimize the tasks and build the feature-rich application. So, same is the case with the Visualforce. You must adopt these 4 habits to make your application a feature-rich application.

Following is the list of these habits.

1. You should have Rock knowledge of HTML, CSS, and JavaScript

For building some great applications one must have sound knowledge of HTML, CSS, JavaScript etc. to make himself feel in a comfort zone. This will also help you in improving the request and response. Although there is always the chance to learn and build the app, knowledge to these will help you build an extra resourceful application. Here are some beneficial habits that you must adapt while building the app in these technologies separately:

HTML

Review the HTML that is generated by Visualforce components. Visualforce pages require valid HTML during compilation.

For example, if you have a <head> or <body> tag inside of your <apex: page> tag, the Visualforce page removes it at runtime.

Unnecessary HTML also increases the size of the component tree and the processing time for Ajax requests in Visualforce.

CSS

  1. Combine all the CSS files into a single file to reduce the number of HTTP requests.
  2. Remove comments and whitespace (spaces, newlines, and tabs), and compress the resulting file for faster downloads.
  3. Use static resources to serve CSS files, as well as images, JavaScript, and other non-changing files.
  4. For pages that don’t use Salesforce CSS files, set the <apex: page> tag’s show Headers and standardStylesheets attributes to false.

NOTE: This practice excludes the standard Salesforce CSS files from the generated page header.

JavaScript

  1. Always try to write individual JavaScript file. It will increase the number of initial HTTP requests. It also reduces the size of individual pages and takes advantage of initial page load and browser caching.
  2. Use custom versions of JavaScript libraries with only the functions you need. Avoid unnecessary JavaScript function execution and Combine all JavaScript files into a single file to reduce HTTP requests.

2. Improve the View State Size of Visualforce page

View State is the amazing feature that is provided by Salesforce for identifying and controlling the tree component of the Visualforce page.

Salesforce provides the 135 KB maximum size as per the governance limit. For Reducing the size of view state, your page should be quicker and stall less often. Following are the points that must be kept in mind:

  1. Try to use the transient keyword in your apex controller class for variables. This would help in maintaining the state and it wouldn’t store in view state during page refreshes.
  2. If your view state is affected to a large component tree, then at that time you can reduce the number of components that depend on your Visualforce

3. Focus on improving the Visualforce page Loading Time

The large size of the Visualforce page directly affects the page load time. So, to reduce the load time you can follow below best practices which are introduced by salesforce lazy load.

  1. You can store cache data that are used frequently. Like icons, read-only messages etc.
  2. Avoid SOQL Query in your apex controller for getter functions.
  3. Try to display minimum numbers of records as per requirements.

4. Avoid Multiple Concurrent Requests

Concurrent requests are long running tasks that tend to block the other pending tasks. So, to avoid this thing you may opt to do the following things:

  1. Try to use action methods used by <apex:actionPoller> which are lightweight. It’s a best practice to avoid performing DML and external service calls.
  2. Tasks are likely to be blocked when the method is used on a widely distributed, or continuously active page. So, try to avoid it.
  3. Increase the time interval for calling apex from your Visualforce page. For example, when using the <apex:actionPoller> component, you can adjust the interval attribute to 30 seconds instead of 15.
  4. You can use non-essential logic for an asynchronous code block using Ajax.

5. Prevent Field Values from Dropping Off the Visualforce page

Pages with many fields, including large text area fields, and with master-detail relationships to other entities, can sometimes fail to display all data. To improve on that, the following points can be considered:

  1. Data can be dropped due to limits on the size of data returned to Visualforce pages and batch At that time, you may get a warning: “requested too many fields to display. Consider removing some to prevent field values from being dropped from the display.”
  2. 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.

These were the top 5 habits that can really improve the Visualforce pages in terms of page loading and various other performance aspects.

Bottom Line

It’s the best practice which is recommended by the Salesforce to develop and customize the Visualforce pages.

Habilelabs is a premier software development company that provides professional services for the development of the Visualforce pages and their customization as per the standards of Salesforce development. It is rich with the resources to develop the feature-rich applications using Visualforce pages. Give us a call to find out more about our awesome services!

I hope this blog must have attracted you towards the Visualforce and its features. For any queries, you may feel free to comment in the comment section. You can also share views for the blog in the comments section below.

Author: Jignesh
Share: