X
Closing this message and/or accessing our website tells us you are happy to receive all cookies on the ClearPeople website.
However, if you would like to, you can change your cookies settings at any time.
As part of the development of our new website with Sitecore 9, one of the goals we wanted to achieve is to deliver a really performant frontend website. These are the most important tips to optimise your Sitecore website.

Website performance is key to a site's overall success. We can consider the following factors to take performance seriously during the process of building a new website:

  1. User experience: Some studies claim that a visitor will leave a website if it does not load within 4 seconds. Even Amazon estimates that every second slower their page is, they may lose 1.6 billion dollars (src: https://www.fastcompany.com/1825005/how-one-second-could-cost-amazon-16-billion-sales). So, it's crucial to minimize waiting times so you can keep  your visitors on your website for the longest period.
  2. Google rank: Page speed is one of the parameters in Google's algorithm. So, having a high score here will also positively affect your SEO. Google provides the PageSpeed service (https://developers.google.com/speed) that provides best practices. Another useful third party tool is GTMetrix (https://gtmetrix.com) which also includes scores from Yahoo's YSlow guidelines (http://yslow.org/)
  3. Service costs: Reducing the number of requests that hit your servers will also reduce your hosting bill and even your carbon footprint!

To achieve these goals, web developers can apply a set of guidelines/best practices, commonly known as Web Performance Optimization (WPO) techniques, that will help speed up your website.

 

How do we apply this to Sitecore?

First things first, we are using Sitecore Experience Accelerator (SXA) on this website, which comes with a few useful features that will help us with this:

 

Cache settings

Components cache is a must-have setting that needs to be configured on any Sitecore project. Before SXA, we defined the cache settings at component level or overwriting them in the presentation details for a specific page.

Now, with SXA, we can define a bunch of common settings that will apply to several components at once, which is quite helpful.

Cache Settings 

Also, cache can be invalidated now on Index rebuilt, which happens after publishing an item. This way, we make sure the latest content is available right after publishing.

Side tip: Make sure your "publish:end:remote" event is properly configured with the right site names in a scaled environment.

 

JS and CSS files optimization

SXA provides a service that will minimise and combine all your JS and CSS assets automatically. This can be globally defined, or overridden per site.

Assets Optimization 

The global items to define this setting (applied to the "default" values) are located below "/sitecore/system/Settings/Foundation/Experience Accelerator/Theming/Optimiser". The default functionality can be overridden per project at "/sitecore/content/<tenant>/<site >/Presentation/Page Designs" item.

Side tip: disable the service on the development environment to help with debugging, but make sure this is enabled on your testing environment, to make sure minimization is not breaking your code.

 

Serve responsive images

Images are the weakest point of a content page, as you cannot trust editors will upload the most optimized images and with the right dimensions and weight.

With SXA 1.7, the Responsive Image variant was introduced. This one will use the HTML5 responsive images ability, so that the browser requests from Sitecore the image at the right size, depending on the viewport defined (desktop, tablet, mobile, etc.), and Sitecore will resize it. So, if the editor uploads a 4K image, that's fine, Sitecore gets you covered and your site will not be delivering a 15MB image on every request.

So, a responsive variant with the following settings:

Responsive Image Settings

Will render the following code for the image, and the browser will request the right size for the current view port:

Responsive Image code

 

Optimize images

Apart from serving the images at the right dimensions, image formats like PNGs or JPGs may have some metadata info and other stuff that increases their size in bytes, while the user will not appreciate any difference visually. It is recommended to optimize all the images to their minimum possible size.

Again, as we don't trust editors nor do this manually ourselves, we recommend using automated and transparent tools like Dianoga (https://github.com/kamsar/Dianoga). We are now using it by default in all our Sitecore projects.

Images will be automatically optimized during the upload and then stored in the MediaCache, so it's not likely the end user may appreciate any delay.

As a sample, this is the result of optimizing one of the images in this blog post, after I uploaded it, right from the logs:

INFO  Dianoga: optimized /Project/Clearpeople/Images/Blog Posts/ResponsiveImageSettings png.png [original size] (final size: 5767 bytes) - saved 4321 bytes / 42.83 %. Optimized in 86ms.

The image size has been reduced almost to its half.

 

Is there anything else we can do to improve speed?

The answer is yes, because as Sitecore is no more (and no less) than a ASP.Net web application, there are other generic techniques that we can apply.

 

Caching

By default, IIS is not sending the "Accept-Encoding" header in the responses, which is used by some browser for static content caching. To avoid this, we can add it to the web.config file:

<httpProtocol>
    <customHeaders>
        <remove name="Vary"/>
        <add name="Vary" value="Accept-Encoding"/>
    </customHeaders>
</httpProtocol>

 

Compression

It is highly recommended to Enable Dynamic compression on IIS (https://docs.microsoft.com/en-us/iis/configuration/system.webserver/httpcompression/). Once enabled, we can add the mime types to be compressed to the <httpCompression> section in web.config:

<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files">
    <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" />
    <dynamicTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="message/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="application/x-javascript" enabled="true" />
        <add mimeType="application/json" enabled="true" />
        <add mimeType="image/jpeg" enabled="true" />
        <add mimeType="image/jpg" enabled="true" />
        <add mimeType="image/gif" enabled="true" />
        <add mimeType="image/png" enabled="true" />
        <add mimeType="application/vnd.ms-fontobject" enabled="true" />
        <add mimeType="application/x-font-truetype" enabled="true" />
        <add mimeType="image/svg+xml" enabled="true" />
        <add mimeType="*/*" enabled="false" />
    </dynamicTypes>
    <staticTypes>
        <add mimeType="text/*" enabled="true" />
        <add mimeType="message/*" enabled="true" />
        <add mimeType="application/javascript" enabled="true" />
        <add mimeType="application/x-javascript" enabled="true" />
        <add mimeType="image/jpeg" enabled="true" />
        <add mimeType="image/jpg" enabled="true" />
        <add mimeType="image/gif" enabled="true" />
        <add mimeType="image/png" enabled="true" />
        <add mimeType="application/vnd.ms-fontobject" enabled="true" />
        <add mimeType="application/x-font-truetype" enabled="true" />
        <add mimeType="image/svg+xml" enabled="true" />
        <add mimeType="application/json" enabled="true" />
        <add mimeType="application/x-woff" enabled="true" />
        <add mimeType="*/*" enabled="false" />
    </staticTypes>
</httpCompression>

 

Unfortunately, not all the mime types can be set on the web.config, like SVGs, so we need to edit the applicationHosts.config file, located at "C:\Windows\System32\inetsrv\config" and include them there, for both dynamic and static types:

<add mimeType="image/svg+xml" enabled="true" />
<add mimeType="application/json" enabled="true" />

You need to run "iisreset" for changes to take effect.

 

CSS Imports

Using @import in a CSS file blocks browser rendering as it needs to parse the external file before continuing to render the css file, so try to avoid them, normally used to load fonts. It's better to include font links in the layout.

 

CDN

Although Sitecore does not officially support CDN, it is perfectly possible to make use of it to deliver static resources, as Media items usually are. Based on this post from Kam Figy (https://jammykam.wordpress.com/2017/02/13/sitecore-azure-cdn), we added a CDN endpoint to deliver Media items from the CDN. This way, requests are paralleled through different domains, the server receives less request which saves bandwidth and processing, and content is closer to the end user, which all together helps speeding up the page load.

Side tip: add some rewrite rules and redirect all traffic to HTTPS. Then specify "https" as the protocol for the value to "Media.MediaLinkServerUrl". There is an issue with MediaLinkManager that is generating the wrong secured hash with a protocol-less url setting, and that's preventing images being rescaled.

The only caveat on this is that file downloads analytics may be affected, as downloadable items will be hosted at the CDN, not Sitecore. But if this is not a great loss for you, or not using Analytics, the CDN is a good option to consider.

 

Results

So, once we have applied all these settings, we can see the results, in this case, from GTMetrix:

Website performance score

Note that we make use of some external resources (Google Analytics, Typekit, Google fonts, etc.), which are out of our control and are penalising the final score. Also, YSlow is specially impacted by this.

But overall, we are quite satisfied with the results and, apart from the metrics, the user experience is really good in terms of visual speed. Goals achieved!

Do you apply some other techniques? Did you find this list useful? Let us know in the comments!

Author bio

Sergi Gisbert
Sergio Gisbert
Technical Architect
I'm primarily focused on the delivery of successful projects with Sitecore CMS. When I’m not at work, I’m running a side project started back in 2009 called “Fatherhood," which takes up most of my non-working hours. I'm always keen to escape to snowy mountains and ski down them!

Comments


comments powered by Disqus

Related Articles

Sign up to our Newsletter

Every now and then, we'd like to send you information that delivers, develops and promotes our products and services that are relevant to you. Submitting your details tells us that you're OK with this and you also agree to our Privacy & Cookies policy. You can, of course, opt out of these communications at any time.