Blog Banner

Header-less Headline

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.

Header-Footer

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:

/sitecore/content/Applications/WebEdit/Ribbons/WebEdit/View

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).

Header-Footer Editor

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
    • Some unique identifier for Sitecore's javascript layer
The important piece is the presentation parameters.
Sitecore Rocks

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.

Context Menu

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)

More about Sitecore Registry here: https://www.studert.com/about-the-sitecore-registry

  • Command: ToggleHeaderFooter
    • This is the javascript command this check box component will call when clicked. We'll define it next.
  • PageCodeScriptFileName: /sitecore/shell/client/Sitecore/Custom/ExperienceEditor/Commands/ToggleHeaderFooter.js
    • Path to javascript file to include. This is where we will define our new JS command.

For the contents of the javascript file, I used an existing checkbox’s script and stripped it down. I’m only interested in storing the checkbox value, so I kept the registry piece. I added the line to refresh the page on execute (after the processor commits the new value to registry). Notice the name of the command object matches the Command parameter above.

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!

James is an NIU grad with a major in computer science, theoretical emphasis, and math minor. He's been developing websites since 2001. After gaining experience designing custom platforms, e-commerce, and automation solutions James joined AmericanEagle.com in 2013, focusing on Sitecore.

When not tinkering with tech, James enjoys playing a good Eurogame with friends.

Write a review