Sitecore SXA – Best Practices and Tips. Create a new custom SXA module. Power of Snippet and Page content. Power of composite component and extension Search Relevancy – make it more relevant.

1. Sitecore SXA
Best Practices
and Secrets!
(V10.1)
J I T E N D R A S O N I
– S I T E C O R E M V P 2 0 2 1
2 9 T H J U N E 2 0 2 1
S I T E C O R E U S E R G R O U P C H E N N A I
• Sitecore SXA –Best Practices and Tips.
• Create a new custom SXA module.
• Power of Snippet and Page content.
• Power of composite component and extension
• Search Relevancy – make it more relevant.

2. WHO IS YOUR PRESENTER TODAY?
• 13 + years of IT experience.
• 7+ years Sitecore.
• 8 Sitecore XP and XC new project.
• Search (Solr, Azure, Coveo and
Fusion).
• Living in Sydney with family.
• Awarded by President of India -2000
• State level winner for Genius
student
SOFTWARE DEVELOPMENT PERSONAL
2
• Sitecore certified
• Microsoft Technology Specialist-
• Coveo Certified Platform Developer
• Google GTM and GA Certified
CERTIFICATIONS

3. AGENDA
3
Sitecore SXA – Best Practices and Tips.
Create a new custom SXA module.
Power of Snippet and Page content.
Power of composite component and extension
Search Relevancy – make it more relevant.

4. Use partial design inheritance

5. Configure shared site properly
T E N AN T S E T T I N G E X AM P L E O F D U P L I C AT E
S T Y L E

6. Working with data sources and media
Do not put media items directly under the site's Media folder
Never put custom items in SXA-controlled branches of the tree
Do not modify OOTB SXA items – If required you can create the extension
Create an SXA module for your custom renderings
Helix is everywhere - when adding functionality to your solution
Consider using existing renderings before building a new one
Consider cloning existing renderings before building a new one

7. If possible, configure Consider defining your
rendering variants, Page Design, Partial Design
in the shared site

8. Share content as a delegated area

9. Working with data sources and media
When renderings are placed on partial designs and assigned to a page through page designs,
editors need to perform fewer operations when creating generic pages, such as articles.
Place an empty Container rendering or another rendering with an empty placeholder on your
partial design to give your editors well-defined extension points. Set placeholder restrictions on
those placeholders to indicate which components are allowed in those areas.
Leverage Snippets and page branches where local customization is needed. Partial designs
improve performance.
Do not put media items directly under the site's Media folder

10. Set placeholder restrictions in the Content
Editor

11. Remove unnecessary renderings from your
site

12. Do not use Standard Values to set
presentation details for your pages

13. Prioritize changing the grid settings of a
rendering over using splitters to change the
layout of a rendering
• Source - https://doc.sitecore.com/developers/sxa/18/sitecore-experience-accelerator/en/recommendations--using-renderings.html
https://www.screencast.com/t/BwGRM8h3cb

14. Enhancing SXA performance -Consider
configuring the rendering's HTML caching

15. Enhancing SXA performance –Site level caching

16. Caching Options
Cacheable – select to enable HTML caching. If your rendering has only one view, this is the only
check box that you must select.
Clear on Index Update – select to clear the HTML cache of renderings when the index is updated.
Vary By Data – select to cache a separate version of the HTML based on the data source of the
rendering.
Vary By Device – select to cache copies of the output for each device that is used.
Vary By Login – select if the rendering is displayed differently for logged in users.
Vary By Parm – select to cache the output for each parameter accepted by the rendering. Used to
distinguish different instances of the same rendering.
Vary By Query String – select to cache the output for each unique combination of query string
parameters.
Vary By User – select if the rendering displays user-specific information.

17. Enhancing SXA performance – Limit number of
rendering on the page.
Do not use too many renderings on a page;
we recommend absolutely no more than 30.
Having too many editable renderings on a
single page can slow down the Experience
Editor. Consider putting all common elements
used across multiple pages in partial designs.
Source - https://doc.sitecore.com/developers/sxa/18/sitecore-experience-
accelerator/en/recommendations--enhancing-sxa-performance.html

18. Enhancing SXA performance – Verify that you have
enabled the Asset Optimizer.
In a production environment, the SXA Asset Optimizer improves the end user
experience by optimizing CSS styles and JavaScript, and reducing the amount of data
that needs to be transferred.
Path - /sitecore/system/Settings/Foundation/Experience Accelerator/Theming/Optimiser
Source - https://doc.sitecore.com/developers/sxa/18/sitecore-experience-accelerator/en/recommendations--
enhancing-sxa-performance.html

19. Do not modify the OOBT SXA items and use the custom
style for the rendering

20. Clean up your styles folder
Remove unused styles from the styles folder. It can be
frustrating for a editor of your site to apply a style only to find
out that it made no change to the style of their rendering.
SXA includes a number of PowerShell scripts to automate
the most common tasks. Right-click the Styles item, and
then click Scripts to find a clean-up script.

21. Rendering best practices
Provide a meaningful name so that content editor can
easily understand
User Snippet for the group rendering
Don’t use plan HTML rendering for the content which
is edited by the author
Rich Text Editor should be fully functional with all style
and css options, If required add the custom css etc.

22. How to manage the development content
• Exclude content at the tree
level
• Setup a separate home node
• Setup a complete new site
A few
options

23. Consider creating a master site to clone for a rollout
to new markets
To speed up rolling out the site you
are creating to new regions and
users, consider creating a master
site that has all the basic
functionality and stub content
required by new projects. After the
site creation, leverage the SXA’s
site cloning functionality to speed
up the process of the rollout for
new users.
https://doc.sitecore.com/developers/sxa/18/sitecore-experience-
accelerator/en/recommendations--sharing-content.html

24. Create a new custom SXA module.
• Add an appropriate Icon for the rendering and folder and set the insert options
• Consider using existing renderings before building a new one
• Navigate to sitecore/System/Settings, right-click Features or Foundation, click Insert,
and then click Module.
• Do not place your custom modules in the Experience Accelerator folder. This folder
is overwritten during updates.
• When building a new rendering, the Sitecore developer must decide which category
a new custom rendering falls into, so the rendering can be properly configured.
https://www.screencast.com/t/VIkXCekOgGMs

25. New SXA rendering – Type - Simple
• Example – Promo or Banner Rendering
https://www.screencast.com/t/VIkXCekOgGMs

26. New SXA rendering – Type - Simple
• Sitecore.XA.Foundation.RenderingVariants.Controllers.VariantsController,Sitecore.XA.Foundati
on.RenderingVariants
• User Reference and pass through fields

27. Scriban – Sample Scenario and Best
Practices

28. New SXA rendering – Type - Simple
• Add proper messages - OOTB

29. Scriban – Editor

30. Scriban – Editor
• https://scribanonline.azurewebsites.net/
https://scribanonline.azurewebsites.net/
https://github.com/scriban/scriban

31. New SXA rendering – Type – Composite
(Tab)
• Tab – Page content variant settings and configuration

32. New SXA rendering – Type – Composite
(Tab)
• Editorial button and options – Core Settings

33. New SXA rendering – Type – Composite
(Tab)
• Editorial button and options – Core Settings
• Make sure to have the same name in the core – like Tab and Tabs Empty

34. New SXA rendering – Type – Composite
(Tab)
• Provide multiple options within the tab component if it’s required

35. Power of Snippet and Page content.
• Define all the compositions and can be used as the alternate of partial design

36. Power of Page content.
• Can define the complete partial design structure and place a few placeholder so that content
author can add the options and the options can be restructured through the placeholder
settings

37. Search Relevancy – make it more relevant
• Setup a sample search page
• Show search result option - shows the search results, rendered by rendering variants. The user
is redirected to the clicked item.

38. Search Relevancy – make it more relevant
• Setup a sample search page
• Show search results as predictions: clicked text will be put in the search box and a search is
performed.

39. Search Relevancy – make it more relevant
• Request URL:
• https://sc101sc.dev.local//sxa/search/suggestions/?q=arte&v={87A9B066-4E33-4AC5-9506-CF
C6804A8ABD}&p=5&s={E7D97176-4CAB-4CC9-9DB2-5455646E7C2C}&itemid={E569DF91-8
D3C-460C-B2C7-1765A6E0FDE1}
Request URL:
https://sc101sc.dev.local//sxa/search/suggestions/?q=arte&v={87A9B066-4E33-4AC5-9506-CFC6804A8ABD}&
p=5&s={E7D97176-4CAB-4CC9-9DB2-5455646E7C2C}&itemid={E569DF91-8D3C-460C-B2C7-1765A6E0FDE1}

40. Search Relevancy – make it more relevant
• Setup a sample search page
• Show predictions: shows search
phrase predictions provided by the
search engine. This mode is
supported for Solr only.
<requestHandler name="/suggest"
class="solr.SearchHandler" startup="lazy" >
<lst name="defaults">
<str name="suggest.dictionary">sxaSuggester</str>
<str name="suggest">true</str>
<str name="suggest.count">10</str>
</lst>
<arr name="components">
<str>suggest</str>
</arr>
</requestHandler>
<searchComponent name="suggest"
class="solr.SuggestComponent"> <lst name="suggester">
<str name="name">sxaSuggester</str>
<str name="lookupImpl">BlendedInfixLookupFactory</str>
<str
name="dictionaryImpl">DocumentDictionaryFactory</str>
<str name="field">title_t</str>
<str name="suggestAnalyzerFieldType">text_general</str>
<str name="buildOnStartup">true</str>
</lst>

41. Search Relevancy – Auto suggestion with
weight (Priority) field
• <searchComponent name="suggest" class="solr.SuggestComponent">
• <lst name="suggester">
• <str name="name">mySuggester</str>
• <str name="lookupImpl">FuzzyLookupFactory</str>
• <str name="dictionaryImpl">DocumentDictionaryFactory</str>
• <str name="field">cat</str>
• <str name="weightField">price</str>
• <str name="suggestAnalyzerFieldType">string</str>
• <str name="buildOnStartup">false</str>
• </lst>
• </searchComponent>
https://solr.apache.org/guide/8_0/suggester.html

42. Search Relevancy – make it more relevant
– How to configure?
• Request URL:
• https://sc101sc.dev.local//sxa/search/suggestions/?q=arte&v={87A9B066-4E33-4AC5-9506-CF
C6804A8ABD}&p=5&s={E7D97176-4CAB-4CC9-9DB2-5455646E7C2C}&itemid={E569DF91-8
D3C-460C-B2C7-1765A6E0FDE1}
• Update the config and Perform the reindexing
JaspellLookup: a tree-based
representation based on Jaspell.
TSTLookup: a ternary tree-based
representation that is capable of
immediate data structure updates.
FSTLookup: an automaton-based
representation; slower to build, but
consumes far less memory at runtime .
WFSTLookup: a weighted automaton
representation; an alternative to
FSTLookup for more fine-grained ranking.
https://doc.sitecore.com/developers/90/platform-administration-and-
architecture/en/using-solr-auto-suggest.html

43. Search Relevancy – Searchable item from
the data folder?
• Request URL:
• https://sc101sc.dev.local//sxa/search/suggestions/?q=arte&v={87A9B066-4E33-4AC5-9506-CF
C6804A8ABD}&p=5&s={E7D97176-4CAB-4CC9-9DB2-5455646E7C2C}&itemid={E569DF91-8
D3C-460C-B2C7-1765A6E0FDE1}

44. Any questions?
44

45. THANK YOU!
JITUSONIJK@GMAIL.COM
HTTPS://WWW.LINKEDIN.COM/IN/JITENDRA-SONI-58985317/