Some notes on steps applied to improve the speed of the font end site.
Home Page:
Previously we used one ‘Main Layout’ for all pages across the site, as a result – the majority of all resources need to run the site are downloaded to client on first page load. We need to identify high volume pages and attempt to only download what is needed for that page.
Action: create new layout specifically for the Home Page and apply the following techniques to reduce page load time:
- Change JavaScript to load Asynchronously – First JQuery, then Common JS bundle
- Inline Critical CSS (that is required for “Above the fold” content) into the main document and then load main CSS document Asynchronously (discussed further in new page).
- Set “Version Cookie” and then only display “Inline critical CSS” if not current
- Change Homepage CTA buttons to use Chevron from sprite, rather than importing a full font.
General improvements:
- Set Common HTTP Response Headers to Expire web content after 30 days. Currently done via IIS → HTTP Response Headers → Set Common → Expire After 30 days (could be longer). Need to change this to be set via Web config.
- Use Cache Busting to add versioning to resources and force updated content to be downloaded. This is done by passing the build version into web config (via octopus) and then appending the version as a parameter to resources. i.e. style.min.css?v=20180606
- Collate all common images into one Image Sprite and use CSS Background Positioning to display the image. This reduces the number of requests/responses made (by 20-30 in some cases)
- Add additional JavaScript files to “Common” Web bundle. This reduces web requests and also minifies the content.
- Remove Home page Bundle from Main Layout
- Minify the response from SiteCore. This is done by adding an additional processor to the HTTPBegin Pipeline and intercepting the response, then removing white space and comments
- Detect if environment and only display Google Tag Manager if production (thus speeding up test environments)
- Enable Language Fallback across site and change Language Resolving process to use preferred Language from Browser
- Add Country and Language as a comment at bottom of source. Note: added lots of additional try/catch and null checking to avoid any possible chance of Null Refs (as main high level page)
- Detect if country is China (note: various tests determined china ISPs blocked certain URLS from social chanells etc – so this was causing massive delays in page load):
- Apply Reduced JS Bundle.
- Remove Social meta tags from main layout
- Remove Sharing Widgets
- Remove all custom scripts from site wide node, as these were necessarily adding additional overhead to every single page on the website.
Replace this with ‘script snippet’ component has been added to the solution that will be controlled via data source and enable scripts to be added by Template and also by Item. These components can also then be controlled using Sitecore Personalization. - GZIP Dynamic response (i.e. generated HTML document) from Sitecore. This is done by enabling Dynamic Compression module in IIS (IIS provides a warning stating it has impact on server CPU – currently untested at load)
- Export images for web – in some cases files can be reduced by as much as 95% – thus dramatically reducing the bytes required to show a page and thus page load time
- If using TypeKit Kit – ensure only font being used are included – this reduced download by 100K +