Preventing poor Help Center load times by following templating best practices

Note: This is not a comprehensive list, but a few tweaks you can make to improve load time in your custom Help Center theme.

Issue Symptoms

A Help Center page is taking a long time to load even for anonymous users (those who have not logged in). This is most commonly observed on the home page.

Conditions

Load times for a Help Center page have become longer than expected after customizations have been made to a theme and/or lots of content has been added to the Help Center over time. This is dependent on the content being retrieved based on the Help Center templating (Curlybars) being used.

Resolution

Avoid redundant requests

One of the more resource intensive requests in the Help Center is the job which renders the Help Center content (categories, sections, and articles) on the home page. On the home page in particular, and possibly in some other similar locations, it is theoretically possible to call upon the knowledge base content more than once.

Here is an example where the template is performing the same job twice. The circled {{category_tree_with_articles}} helper retrieves the same type of content as the code highlighted with the arrows:

To avoid slow performance, try to use only one of these methods to make the request. You may have to use some custom code if you want to duplicate this content somehow, but that will likely be much more performant than the request to the Help Center back end.

Don't use HTML commenting

Sometimes a customization is in progress, or you'd like to keep some code around in case you need to reference it in the future. In normal HTML settings, the HTML comment (<!-- -->) is perfect for the job. In the Help Center, thanks to the Curlybars theming language, we can instead use an alternative form of code comments ({{! Code comment}}) which will completely ignore the contained content so that it does not render for an end-user. If you need to comment out multiple lines of code/text, you can use the longer expression syntax like this:

{{!-- Ignore this part - work in progress
  {{category_tree_with_article}}
--}}

Follow commenter practices above instead of using display: none;

Another common workaround to hide something temporarily is to use the CSS property of display:none; within the Help Center template. If you really have no desire to show that particular element, it is encouraged to comment out that code as mentioned above so that it never reaches your Help Center user's web browser.