Boost page loads for Sitecore Authors by skipping the header
I’m always looking for ways to optimize page load. On a recent project the experience editor was taking an uncomfortably long time to load for content authors. We narrowed it down to the header and footer, both packed full of heavy navigation. The header had a 3 tiered fly-out mega menu nesting hundreds of links. In experience editor mode components bypass their output-cache settings so authors can view their edits without delay. Normally this is a good thing, but with a peripheral header and footer adding an additional 10 seconds every minor edit, save, reload, we needed an intervention!
I saw SXA had a toggle to show/hide the SXA toolbox, and that gave me the idea. Content authors don’t need to see the Header and Footer while editing page content, so let’s gift them with a speed boost and provide a feature to skip them.
Adding a custom checkbox is a bit tricky, but not too bad. Items are the fabric of Sitecore. The Experience Editor “View” ribbon is defined by items in the Core database.
This next part uses Sitecore Rocks for display purposes, but you can follow along using Content Editor as an alternative.
Using the Visual Studio add-on, Sitecore Rocks, (or optionally Sitecore Content Editor) navigate to this area in the Core database content tree:
Either add a new chunk or pick an existing one. SXA adds an “Editing” chunk which felt like a good spot to me since it had open screen space.
Duplicate an existing “Small Check Button” item (any existing View ribbon control).
Field values aren’t terribly important. Here are example values:
- Header: Header/Footer
- This is the text displayed in the ribbon next to the checkbox
- Click: community:SpeedToggle
- This is the key, some unique click-event identifier. More on this next.
- The convention is [group/entity]:[command]
- Other experience editor ribbon elements use the prefix "webedit:"; I think it is good to use something obviously custom.
- Tooltip: Toggle Header / Footer
- This is the text shown on mouseover
- ID: ShowHeaderFooterRibbonButton
The important piece is the presentation parameters.
If you are following along without Sitecore Rocks, Just paste the value from the link below into the Shared Layout Field:
With Sitecore Rocks use context menus to choose “Tasks > Design Layout” then “Edit” component.
Make these edits to the SmallCheckButton component properties:
- RegistryKey: /Current_User/Page Editor/Show/headerfooter
This is the cache key Sitecore will use to store our value (user checked it? yes/no)
- Command: ToggleHeaderFooter
- PageCodeScriptFileName: /sitecore/shell/client/Sitecore/Custom/ExperienceEditor/Commands/ToggleHeaderFooter.js
Great, so we’ve got a new checkbox appearing in the Experience Editor’s View ribbon, and it saves the user’s selection. Now what?
I decided to implement this at the placeholder level. Generally headers and footers get their own placeholder. The plan became skip all processing of certain placeholders when user setting is toggled to hide. Since we are using MVC there is a nice Sitecore pipeline extension point called “mvc.renderPlaceholder”. We can inject a processor at the first step and abort the pipeline, skipping all querying and rendering for that placeholder’s layout definition, saving that valuable time for our Authors.
Here is the logic for the processor. Update the namespace as desired.
Here is the config patch; update the namespace and assembly to match above code.
Happy authors, happy project.
Contact Us Today!