08 Development Mode

The following documentation is not relevant for versions v10 and later.

---

For development mode you can find the critical generation node script in /scripts/Critical.js

• On the command line run "npm install" in the folder \src\Foundation\Speedy\code\ of this repository once checked out.
• Update the setting file \src\Foundation\Speedy\code\Scripts\Critical.json -- itemid = Set the Sitecore item ID of the page in Sitecore -- host = Set this to your local development environment URL -- width = The viewport width of the Critical CSS you require -- height = The viewport height of the Critical CSS you require -- fontmap -- The critical generator sometimes makes a mess of the font paths. Once you have done a first critical Generation you can fix these by supplying an array of find and replace objects. See the default examples.
• From the same folder (\src\Foundation\Speedy\code) on the command line run

  "node ./Scripts/Critical.js main"

• Now login to Sitecore to verify the Critcal CSS field has been populated. The field with the title "Generated Critical HTML" under the Critical section.
• Make sure your development environment configuration role is set to standalone otherwise the development mode will not function properly.

Node Settings (Standalone Developer Mode)

All these setting can be found and set in /scripts/Critical.json

Setting Name	Example Values	Notes
itemid	{B87F9889-A779-4E39-80F7-474E76F25CCA}	This is the ID of the Sitecore page that the critical CSS will be generaed for
host	https://mysite.dev.local/	Set this to your local development environment URL
api	critical/api/get/	This is the API endpoint that the speedy module installs and uses get the page URL from Sitecore belonging to the Item ID that you specify in the 'itemid' setting.
apisave	critical/api/put/	This is the API endpoint that the speedy module installs and uses to write the Critical CSS into the Sitecore field.
timeout	30000	Critical generation will timeout in 30 seconds if it doesn't get a response from your URL
width	1800	Width in pixels that Critical will use to generate the critical viewport CSS for
height	1100	Height in pixels that Critical will use to generate the critical viewport CSS for
fontmap	See /scripts/Critical.json for example JSON	Critical has issues dealing with Font Paths. So after we have generated with a first pass/run we inspect the generated Critical CSS. You can then create an array of values to find and replace invalid paths so that the issue is corrected.
removeduplicates	See /scripts/Critical.json for example JSON	Critical may produce duplicates for some items. Use this to cleanup the duplicates in the CSS produced.
fontFaceSwitch	See /scripts/Critical.json for example JSON	Find and replace fonts. This allows you to prevent Flash of unstyled text (FOUT) by replacing fonts in the critical CSS with a font name only used in the critical section of the page. It seems that loading a font in critical and having it reload in the deferred stylesheets also causes some flashing. This setting allows you to fix these cases.