Designing for Faster Page Load Times| Salesforce

Trailblazer Sakshi Nagpal was after speed. In the world of load times for Lightning Experience pages, every fraction of a second counts. When users want “instant” results, shaving seconds off the load time means they’re less likely to abandon the page. So when she redesigned a home-rentals app with Experience Cloud, this design-minded pro drew on her UX skills. Ultimately, she reduced the load time of the app by 50 percent. How did she do it? Prioritizing.

Her secret to designing lighter, faster loading pages began with a precise edit of the critical pages, requirements, and design elements. This is why the app now loads in just three seconds. It meets the average page-loading time (per HTTP Archive) and surpasses most Lightning Experiences, which have an Experienced Page Time (EPT) of four seconds and sometimes longer.

In this case, when the goal is to prevent users from abandoning the page, less is more. “This made the work easier and faster for users,” she said. Here’s how prioritization drives the solutions she designs:

Identify the pages that matter most

To determine the architecture, Sakshi Nagpal focused first on the most used pages. She decided that the homepage and payment page were essential. These needed to load fast to engage vacationers and convert them into customers, without an obstacle. 

Certainly, she wanted all four of the app pages to load instantly. However, she invested her time and energy into the ones with the highest potential business impact. Then, she moved her attention to each page’s requirements. 

“A well-designed page in Salesforce provides just the right amount of information your users need,” she said.

Ask what’s most necessary

Her advice for other Trailblazers is to avoid large complex layouts. This reinforces the Lightning Page Performance help tips, including considering the components on the page: how many, what type, and where they are placed. Additionally, she aims to reuse the components wherever possible. On the home-rental app, she applied Lightning Web Components (LWC) because they use modern web development standards, including HTML and JavaScript. “LWC creates powerful and reusable components for Lightning Experience and other websites,” she said.

However, not all components are equal. For the home-rental app, some components were must-haves (e.g. container components with child components) and others were nice to haves (e.g. more than 100 related lists). Anything that wasn’t necessary didn’t make the cut. If there wasn’t a strong use case for heavy related lists with multiple-object relationships, then they were out. This systematic assessment applied even at the field level: fewer fields equals a lighter load.

Sakshi Nagpal went to lengths to gain time, including selecting an indexed field to sort the list to get a more responsive record retrieval. “Multiple requests for data from the browser kills performance,” she said. “I decided to execute one logical query and return all the data I needed to host my app.” 

With her requirements clear, she looked at how to optimize the app layout for speed.

Trending Articles

3 Ways Generative AI Will Help Marketers Connect With Customers

3 min read

Skill Up on AI with Trailhead

4 min read

Move heavy components ‘below the fold’

Visual design can help initial page load. Related lists help provide sufficient detail so that users have enough information to navigate their work process. But, they can weigh down a page. The same is true of news or social feeds. Moving all of these “below the fold” helps. 

If it isn’t critical to a user’s work, then adding a link instead of a design element is better. For example, you can link to a custom report of related records. Other times, it might make sense to keep an element on the page but enable it to load asynchronously. “Always remember: Thinking about scalability and performance prior to writing code will help you anticipate challenges and allow you to mitigate them,” Sakshi Nagpal said.

Design is key to faster page load times

This upfront strategy, careful prioritization, and design thinking helped to deliver a fast, user-friendly app. 

Everyone from the users to partners experienced benefits. The developers no longer had to take care of the infrastructure and platform issues that they had to spend time on for the previous Java application now that it was handled by Lightning. Plus, the business owners saw leads convert faster and contribute to increased revenue. 

One Trailblazer’s expertise showcases that a fast-loading Lightning app is worth prioritizing.