CMS Connect Recommendations for Optimal Usage

Read these tips and gotchas to get the most out of CMS Connect.

Your Experience Builder site pages can have CSS. Your CMS connections can have CSS. To avoid rule collision on your site’s pages, we recommend scoping your CSS.

Scoping involves adding a DIV class in the code to “tag the tags,” which prevents rule collision by marking the CSS from your CMS with a prefix so that it’s given a higher priority.

For example, your site page specifies 10-point font, while your CSS has 14-point font. Use a scope prefix on your CSS to determine which rule gets priority.

The downside of scoping your CSS is that it increases your code’s file size by 10–20%, which translates to longer download time for your viewers. But you can make up for this performance hit by minifying and reminifying your code. Plan to include this work as part of your build time for your CMS website. It’s worth doing so that you can reap the benefits of scoping without degrading performance.

If the content on your pages looks too large, it’s possible that your CSS is using REM with the old technique of 62.5%. The root page of Salesforce uses REM at 100%. Recode your CSS at 100%.

Parsing CSS and JavaScript files takes time. For optimal performance on your site pages, link only to CSS and script files tailored for the pages that you plan to display them on. Your efforts to plan ahead result in faster load times for your audience viewing the content.

You can use JavaScript for content such as a carousel or a menu system on your site pages. But make sure that this JavaScript runs after the HTML loads on a page and not before.

Typically, you define the libraries, like jQuery and jQuery plugins such as a carousel, as part of the CMS Connect configuration to make sure that they:

• Load early
• Are always present on the page
• Are ready to be used by multiple fragments

Include the initialization code specific to each HTML fragment, such as the JavaScript that created the instance of a carousel, in a script tag at the bottom of that fragment.

Don’t include fragment-specific initialization code in the JavaScript files of your CMS Connect configuration. Those files are executed as early as possible to emulate head scripts, and the page body isn’t ready. Instead, make the initialization code part of your HTML, much like local JavaScript is part of the Lightning component. Sometimes you must adjust your existing code because the initialization code of all widgets on a page can be grouped together or placed in a different location on the page.