CMS Connect Recommendations for Optimal Usage

Scope Your CSS

Your Salesforce community pages can have CSS. Your CMS connections can have CSS. To avoid rule collision on your community’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 community 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.

Minify and reminify your CSS

The downside of scoping your CSS is that it increases your code’s file size by 10 to 20%, which translates to longer download time for your viewers. But you can more than 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 you can reap the benefits of scoping without degrading performance.

CSS should use REM at 100%

If the content on your pages looks too big, 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%.

Include only relevant CSS and JavaScript

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

Serve JavaScript libraries with initialization

You can use JavaScript for content such as a carousel or a menu system on your community 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, that they are always present on the page, and that they are ready to be used by multiple fragments. Include the initialization code specific to each HTML fragment (the JavaScript that created the instance of a carousel, for example) 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 because those files are executed as early as possible to emulate head scripts, and the page body won’t be ready. Instead, make the initialization code part of your HTML, much like local JavaScript is part of the Lightning component. You might need to adjust your existing code because sometimes the initialization code of all widgets on a page is grouped together or placed in a different location on the page.