Styles are separated into two categories:
- Critical
It must be loaded before main page content to provide correct page rendering.
- Non-critical
It can be loaded after the main page content.
In most cases, all styles are critical as you can see by default settings. But sometimes particular styles should be tuned individually.
General#
- Optimize loading
Optimizing by inlining according to sub-options. Due to most styles are critical inlining increases page speed by decreasing request count to our server.
- Inline as source
Insert style’s body into
src
attribute instead of change it tostyle
tag. - Group critical, group non-critical
Grouping increases page speed by decreasing server request count but not all styles are compatible with such operation. If non-critical auto mode is active then critical grouping is always safe.
- Separate imports
Extract and process styles that included in other styles by the
@import
directive. - Minify
Optimizes CSS code to have a smaller size.
- Fix structure
Correction of incorrectly nested blocks.
Fonts#
- Optimize loading
Just adds CSS
font-display: swap
attribute to fonts that postpones their loading and increase page content loading speed. - Include to critical styles
On some sites browser might incorrect render postponed fonts that declared in separate CSS file. It can be fixed by enabling this option.
Non-critical#
- Automatically
Non-critical styles part will be automatically separated from critical ones. Also, specified CSS selectors can be excluded to be part of critical styles.
- Manual
- Inlined
Includes all inline styles.
- Internal
Includes all internal (self-hosted, hosted on our site) styles.
- External
Includes all external (hosted on the other sites) styles.
- Exclude
Styles with URLs, IDs, or bodies matching the specified regular expressions will be treated as critical. It can be added multiple expressions at once by placing each on new line.
- Include only
Only styles with URLs, IDs, or bodies matching the specified regular expressions will be treated as non-critical. It can be added multiple expressions at once by placing each on new line.
- Inlined
Not needed#
Styles with URLs, IDs, or bodies matching the specified regular expressions will not be loaded. It can be added multiple expressions at once by placing each on new line.
Corrections for lazy loading scripts#
On some sites layout is depended on scripts. So when scripts loading are delayed, then there may be necessary to adjust layout. It’s a section for defining various styles to correct layout loading before main scripts loading. There are some already predefined elements related to particular site components, that can be used as a samples.
This styles are added to particular page only if scripts delayed loading is enabled, and page is not for AMP.
It’s a list of styles that will be added to the site by defined order. Each item has next options:
- Enable
It allows to disable item instead of deleting it.
- Optional description to identify
Allows to recognize the goal of specified styles. E.g. what particular problem it solves.
- Style code
The style code. Special body’s class can be used in selectors to control styles’ scope:
- seraph-accel-js-lzl-ing
This class is removed from
body
tag when non-critical scripts has been loaded. So, it allows to apply styles only in loading period. - seraph-accel-view-XXX
This class is added to the
body
tag when views are active. So, it allows to apply styles only in particular view, e.g. on mobiles only. XXX can becmn
(means common view, desktop) or particular slug likemobile
from the defined views.
- seraph-accel-js-lzl-ing