\n It must be loaded before main page content to provide correct page rendering.\n <\/p>\n<\/li>\n
\n It can be loaded after the main page content.\n <\/p>\n<\/li>\n<\/ul>\n
\n In most cases, all styles are critical as you can see by default settings. But sometimes particular styles should be tuned individually.\n<\/p>\n
Note.<\/strong> To disable styles processing<\/strong>, the next options should be disabled: all top level’s settings in ‘General<\/a>‘ and ‘Fonts<\/a>‘ blocks, ‘Adaptation to screen sizes<\/a>‘ in ‘Images’ and all CDN items<\/a>.\n<\/p>\n \n \n Optimizing by inlining according to sub-options. Due to most styles are critical inlining increases page speed by decreasing request count to our server.\n <\/p>\n \n Insert style\u2019s body into \n Grouping increases page speed by decreasing server request count but not all styles are compatible with such operation. If non-critical auto mode<\/a> is active then critical grouping is always safe.\n <\/p>\n \n Combines styles into one block.\n <\/p>\n<\/li>\n \n Leaves each style in its own block.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n \n Extract and process styles that included in other styles by the \n Optimizes CSS code to have a smaller size.\n <\/p>\n<\/li>\n \n Correction of incorrectly nested blocks.\n <\/p>\n<\/li>\n<\/ul>\n \n Just adds CSS \n The font display strategy is defined by the user agent.\n <\/p>\n<\/li>\n \n Gives the font face a short block period and an infinite swap period.\n <\/p>\n<\/li>\n \n Gives the font face an extremely small block period and an infinite swap period.\n <\/p>\n<\/li>\n \n Gives the font face an extremely small block period and a short swap period.\n <\/p>\n<\/li>\n \n Gives the font face an extremely small block period and no swap period.\n <\/p>\n<\/li>\n<\/ul>\n \n Also, font names can be specified: empty (for all names), font name part or regular expression<\/a>.\n <\/p>\n<\/li>\n \n On some sites browser might incorrect render postponed fonts that declared in separate CSS file. It can be fixed by disabling this option.\n <\/p>\n \n Grouping increases page speed by decreasing server request count but not all styles are compatible with such operation. Combining<\/strong> is the same as for the main styles<\/a>.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n \n Deinlines large fonts from CSS to decrease size.\n <\/p>\n<\/li>\n \n Inserts the bodies of the fonts specified in the list to load them as quickly as possible. Usually needed when there is <\/span>CLS <\/span>due to font loading. Regular expressions are allowed. Examples additions: \n Non-critical styles part will be automatically separated from critical ones. Also, specified CSS selectors can be excluded to be part of critical styles.\n <\/p>\n<\/li>\n \n Includes all inline styles.\n <\/p>\n<\/li>\n \n Includes all internal (self-hosted, hosted on our site) styles.\n <\/p>\n<\/li>\n \n Includes all external (hosted on the other sites) styles.\n <\/p>\n<\/li>\n \n Styles with URLs, IDs, or bodies matching the specified regular expressions<\/a> will be treated as critical. It can be added multiple expressions at once by placing each on new line.\n <\/p>\n<\/li>\n \n Only styles with URLs, IDs, or bodies matching the specified regular expressions<\/a> will be treated as non-critical. It can be added multiple expressions at once by placing each on new line.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n \n Styles with URLs, IDs, or bodies matching the specified regular expressions<\/a> will not be loaded. It can be added multiple expressions at once by placing each on new line.\n<\/p>\n \n On some sites layout is depended on scripts. So when scripts loading are delayed<\/a>, then there may be necessary to adjust layout. It\u2019s a section for defining various styles to correct layout loading before main scripts loading<\/a>. There are some already predefined elements related to particular site components, that can be used as a samples.\n<\/p>\n \n This styles are added to particular page only if scripts delayed loading<\/a> is enabled, and page is not for AMP<\/a>.\n<\/p>\n \n It\u2019s a list of styles that will be added to the site by defined order. Each item has next options:\n<\/p>\n \n It allows to disable item instead of deleting it.\n <\/p>\n<\/li>\n \n Allows to recognize the goal of specified styles. E.g. what particular problem it solves.\n <\/p>\n<\/li>\n \n The style code. Special body\u2019s class can be used in selectors to control styles\u2019 scope:\n <\/p>\n \n This class is removed from \n See below about animation corrections<\/a>.\n <\/p>\n<\/li>\n \n This class is added to the \n There is a special class of \n Let’s take an example with <\/span>Elementor. Some of its elements have an initial style <\/span> \n But in this case, we determine its visibility for the entire time the page is opened. This may conflict with logic in scripts. Those,\u00a0we need to make it active only at the initial display, until non-critical scripts are loaded. That’s why let’s do so:\n<\/p>\n \n Now everything seems to be fine. But if an animation is tied to removing this class, then it will not work, because class <\/span> The duration<\/a> of <\/span>the class deletion <\/span>delay <\/span> Note.<\/strong> In rare cases to completely disable styles processing all top level checkboxes (in the first two sections), CDN settings<\/a> and images\u2019 adaptation to screen sizes<\/a> should be disabled.<\/p>\n","protected":false},"excerpt":{"rendered":" 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. Note. To disable…<\/p>\n","protected":false},"author":18,"featured_media":0,"parent":4812,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"rank_math_lock_modified_date":false},"categories":[816],"tags":[],"class_list":["post-4834","doc","type-doc","status-publish","hentry","category-accelerator"],"_links":{"self":[{"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/doc\/4834","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/doc"}],"about":[{"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/types\/doc"}],"author":[{"embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/comments?post=4834"}],"up":[{"embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/doc\/4812"}],"wp:attachment":[{"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/media?parent=4834"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/categories?post=4834"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/tags?post=4834"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"settings-Styles\"](\"\/data\/content\/doc\/wordpress\/accelerator\/settings-styles-accel\/settings-styles-en.png\" "\\"settings-Styles")
\n<\/p>\n<\/a>General
\n<\/h2>\n\n
\n
src<\/code> attribute instead of change it to style<\/code> tag.\n <\/p>\n<\/li>\n\n
@import<\/code> directive.\n <\/p>\n<\/li>\n<\/a>Fonts
\n<\/h2>\n\n
font-display <\/code>attribute with one of the next values to fonts that postpones their loading<\/a> and increase page content loading speed:\n <\/p>\n\n
\n
Helvetica Neue<\/code>, @^Helvetica@<\/code>, family:Helvetica Neue & weight:700<\/code>, family:@^Helvetica@ & weight:@[4-7]00@ & style:italic<\/code>.\n <\/p>\n<\/li>\n<\/ul>\n\n Non-critical
\n<\/h2>\n\n
\n
<\/a>Not needed
\n<\/h2>\n<\/a>Corrections for lazy loading scripts
\n<\/h2>\n\n
\n
body<\/code> tag when non-critical scripts<\/a> has been loaded and first click delay<\/a> is elapsed. So, it allows to apply styles only in scripts loading period plus enough time for their initialization.\n <\/p>\n<\/li>\nbody<\/code> tag when views<\/a> are active. So, it allows to apply styles only in particular view, e.g. on mobiles only. XXX<\/strong> can be cmn<\/code> (means common view, desktop) or particular slug like mobile<\/code> from the defined views<\/a>.\n <\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<\/a>Animation corrections
\n<\/h3>\nbody<\/code> named .seraph-accel-js-lzl-ing-ani<\/code>. It is added just after full content (DOM) is loaded and removed after specified time<\/a> after loading of a delayed non-critical scripts<\/a>. It allows to relay on that while creating correction styles.\n<\/p>\n.elementor-invisible<\/code>, when removed, the element appears smoothly on the screen. Because if this style is removed when non-critical scripts are running, then the appearance of the element occurs with a delay. To fix this, we can make an adjustment style like this:\n<\/p>\n.elementor-invisible {
\t<\/span>visibility: visible !important;
}<\/code>\n<\/p>\nbody.seraph-accel-js-lzl-ing .elementor-invisible {
\t<\/span>visibility: visible !important;
}<\/code>\n<\/p>\n.seraph-accel-js-lzl-ing<\/code> <\/span>on the <\/span>body<\/code> tag<\/span> added immediately. And this is where the class helps <\/span>.seraph-accel-js-lzl-ing-ani<\/code>, because it is not added immediately, but only after the entire page is loaded and the animation will be applied, because the corresponding elements will have their styles changed, which are included in the animation. Therefore, <\/span>we will correct so:\n<\/p>\nbody.seraph-accel-js-lzl-ing-ani .elementor-invisible {
\t<\/span>visibility: visible !important;
}<\/code>\n<\/p>\n.seraph-accel-js-lzl-ing-ani<\/code> set to prevent double application of animation styles so that, for example, the element does not disappear and appears again after loading non-critical scripts. Those, during this time, the main scripts should execute their animation logic, which is already redefined by us.\n<\/p>\n