The Lightning Community Builder enables you to easily build out beautiful, pixel-perfect digital experiences for your customers and partners using all clicks or a combination of clicks and code.
While the Lightning Platform is already very fast, there are several things that you can do to optimize your community load times for your users. Optimizing the performance of your community becomes especially important when you begin to build image rich pages or complex pages with lots of Lightning components, or your community members are geographically dispersed around the world. However, all of us want our Lightning community to load as quickly as possible and even the most basic community will load even faster with the following five tricks!
Use a content delivery network (CDN)
Out-of-box, all of the assets used to develop your community (CSS files, JavaScript libraries, images, etc.) are stored on your company’s Salesforce instance. For example, if your Salesforce instance is on NA1, your server is located in North America. The further your customers are from your Salesforce server, the longer it takes to get assets over to their computer and thus, the longer the page load time is for your community. This is why you should use a CDN.
A CDN is essentially a service that will cache your assets on servers around the world, so those assets load quickly no matter where in the world people access your community. We are happy to set you up with a Community Cloud CDN for no additional cost, or you can use your own CDN. Follow these steps to set up the Community Cloud CDN.
Turn on progressive rendering
There are two options for how your community pages load. One option is to load components in a serial fashion. If your pages load quickly, this is a good option for you. However, if you are seeing your pages take a while to load and discover that certain components are taking longer than others to load using the Community Page Optimizer, you might consider turning on progressive rendering. This effectively allows components to load in parallel and for you to prioritize the order in which they load on a given page. It is recommended to prioritize the items that are visible when the page loads over those that are only visible when scrolling down on the page for the best user experience. This is all set up through clicks — no coding required!
Enable browser caching
Rather than loading the same images over and over, you can enable browser caching, which will store a copy of the asset on your community user’s computer. This is enabled by default, so unless you’ve unchecked it, it should be set up and ready to go. Note: this feature is global and applies both to your internal org and all of your communities.
Use smaller image files
The more images that you have on each community page and the larger the image files are, the longer it takes for your computer or mobile phone to download and render those files. Ensure that your marketing department provides you with asset files that are optimized for web. There is no hard and fast rule around the maximum size of an image, but a good guideline would be to keep it under 200KB for best performance.
Use Lightning Data Service in custom components
There are two ways to query data in Lightning components: one is using Lightning Data Service (LDS, which is the new-and-improved Lightning counterpart of the standard Visualforce controller) and the other is using a custom Apex class. As a rule of thumb, you will want to use Lightning Data Service as often as possible because it can return data faster and has built-in caching of data. This is especially important if you have multiple custom components on the same page that would be interacting with the same data. Rather than running custom queries using Apex for a component, LDS will only run the query once per page, without writing any server-side code. It also reuses that data for all the components on that page and even others, improving performance. If you cannot use Lightning Data Service due to your use case (learn more), you can use a custom Apex class paired with storable actions to make use of improved caching.
Before you get started, be sure to download our Community Page Optimizer on the Google Chrome Web Store. Our Community Page Optimizer, a Chrome plug-in, will help you understand the order in which your components are rendering and how long they are taking to render, helping you figure out what might need optimizing in your community. For more in-depth information, check out our developer guide below in the Additional Resources section.
Additional resources
- Developer Guide: Improve Community Performance
- Trailhead: Lightning Data Service Basics
About the author
Kara Allen is a Principal Solution Engineer on the Community Cloud team at Salesforce. Prior to joining Salesforce, she was the Community Cloud practice lead at a consulting firm, where she worked with customers to roll out partner, customer and employee communities. Follow her on the Trailblazer community.