Request a Call Back
X
Fields marked with an * are required
Top 5 habits for optimization of Visualforce pages - Habilelabs

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.

What others say about us

quotes icon

"iSEEit has been closely working with Habilelabs team ever since our company needed to step up development efforts. Being a rapidly evolving software company, we have come across a multitude of challenges over time but Habilelabs has proactively solved issues impacting the business and handled the continuous releases of the applications without downtime. We are very satisfied and happy to have found Habilelabs as our offshore development partner as they have developed a good understanding of our own vision and work flows."

Rizan Flenner

"Amazing and skilled team we been learning from each other for quite some time, and still working together.
Always available and ready to make great results, or to improve unexpected problems."

Daniel White

https://www.siquo.com/

"I am very pleased with the work Habilelabs provides. Every time we have worked, projects were delivered on time. They provide great support and I would totally recommend Habilelabs to anyone that wants to get a project done on time and professionally."

Xenophon Kanarios

http://tableluv.gr/

"Habilelabs is an excellent and affordable programming team that delivers fast results."

Paiusa

Stephen Blaney

http://www.paiusa.com/

"Good mindset, good technical competence and skills, always fix problems when needed."

Arash Fard-Rahmani

"We have been extremely satisfied with the project that has been delivered by Habilelabs. They are very professional with great commitments. Quality of communication and problem solving skills were perfect."

Safak Korkut

"Very much satisfied the work. Team quickly understood the requirements and completed work on time. Would definitely recommend him. We will like to hire them again."

Stanislav M.

"Habilelabs is the definition of professional and friendly. They knew exactly what they are doing and never shy to share their knowledge. We will definitely consider hiring them for future projects! Great Work!."

Eben B.

"Great work, will hire team Habilelabs again. I appreciate the extra effort. Excellent work as always."

Saasmath

"Very fast and professional Team. They knows exactly what needs to be developed to achieve the project goal. We will hire them again"

Mediaroot

"Very good work, Little expencive for us but prefere to work with them because I'm sure the work will be done 100%"

ProwebMedia

"Team habilelabs is a pleasure to work with and we will work with them again. They are professional, easy to communicate with, and completes tasks on time and on budget."

"Really impressed with the high quality work and professionalism!"

Vaibhav Samadhiya

"We worked Habilelabs team and they are very professional, motivated and experienced developer. I would love to work with them in the future again!"

Mahdishahadat

"We had a great collaboration with Habilelabs. They are very communicative, extremely competent and responsive. We are looking forward to continuing our collaboration with Habilelabs. I recommend them with full confidence."

Safkutkorfak

"I'm very impressed with work quality. Habilelabs shows outstanding performance and knowledge in area needed for our project. I'm fully satisfied with Habilelabs's service. Will look for more opportunities to work with them"

AdramMedia

"Team habilelabs are truly great developers to work with, and ensure that the work is completed to the highest of standards. Real pleasure to work with would highly recommend for Node.js / React.js work."

Liamsm

"Habilelabs is a fabulous company. Excellent in quality and always available for communication. We hired Habilelabs team for doing the frontend of my application and they gave me some good tips about backend APIs as well, which tells a lot about their overall expertise. Really appreciate their sincerity, timely delivery and professionalism. Will definitely hire them again in future."

Atul Shrivastava

"very good very profasional, They did good job on time +++"

Moshe Levy

"Love the Company Habilelabs . Knew thier stuff and really came through for me."

Zehash

"5 stars work, very good communication, timely delivery."

Anthony Hu

"iSEEit has been closely working with Habilelabs team ever since our company needed to step up development efforts. Being a rapidly evolving software company, we have come across a multitude of challenges over time but Habilelabs has proactively solved issues impacting the business and handled the continuous releases of the applications without downtime. We are very satisfied and happy to have found Habilelabs as our offshore development partner as they have developed a good understanding of our own vision and work flows."

iSEEit

Rizan Flenner

"Amazing and skilled team we been learning from each other for quite some time, and still working together.
Always available and ready to make great results, or to improve unexpected problems."

Siquo

Daniel White

https://www.siquo.com/

"I am very pleased with the work Habilelabs provides. Every time we have worked, projects were delivered on time. They provide great support and I would totally recommend Habilelabs to anyone that wants to get a project done on time and professionally."

Tableluv

Xenophon Kanarios

http://tableluv.gr/

"Habilelabs is an excellent and affordable programming team that delivers fast results."

Paiusa

Stephen Blaney

http://www.paiusa.com/

"Good mindset, good technical competence and skills, always fix problems when needed."

Denthub

Arash Fard-Rahmani

"We have been extremely satisfied with the project that has been delivered by Habilelabs. They are very professional with great commitments. Quality of communication and problem solving skills were perfect."

Safak Korkut

"Very much satisfied the work. Team quickly understood the requirements and completed work on time. Would definitely recommend him. We will like to hire them again"

Stanislav M.

"Habilelabs is the definition of professional and friendly. They knew exactly what they are doing and never shy to share their knowledge. We will definitely consider hiring them for future projects! Great Work!"

Eben B.

"Great work, will hire team Habilelabs again. I appreciate the extra effort. Excellent work as always."

Saasmath

"Very fast and professional Team. They knows exactly what needs to be developed to achieve the project goal. We will hire them again"

Mediaroot

"Very good work, Little expencive for us but prefere to work with them because I'm sure the work will be done 100%"

ProwebMedia

"Team habilelabs is a pleasure to work with and we will work with them again. They are professional, easy to communicate with, and completes tasks on time and on budget."

KCRW

"Really impressed with the high quality work and professionalism!"

Vaibhav Samadhiya

"We worked Habilelabs team and they are very professional, motivated and experienced developer. I would love to work with them in the future again!"

Mahdishahadat

"We had a great collaboration with Habilelabs. They are very communicative, extremely competent and responsive. We are looking forward to continuing our collaboration with Habilelabs. I recommend them with full confidence."

Safkutkorfak

"I'm very impressed with work quality. Habilelabs shows outstanding performance and knowledge in area needed for our project. I'm fully satisfied with Habilelabs's service. Will look for more opportunities to work with them"

AdramMedia

"Team habilelabs are truly great developers to work with, and ensure that the work is completed to the highest of standards. Real pleasure to work with would highly recommend for Node.js / React.js work."

Liamsm

"Habilelabs is a fabulous company. Excellent in quality and always available for communication. We hired Habilelabs team for doing the frontend of my application and they gave me some good tips about backend APIs as well, which tells a lot about their overall expertise. Really appreciate their sincerity, timely delivery and professionalism. Will definitely hire them again in future."

Atul Shrivastava

"very good very profasional, They did good job on time +++"

Moshe Levy

"Love the Company Habilelabs . Knew thier stuff and really came through for me."

Zehash

"5 stars work, very good communication, timely delivery."

Anthony Hu