{"id":6468,"date":"2021-10-28T19:41:24","date_gmt":"2021-10-28T19:41:24","guid":{"rendered":"https:\/\/www.s-sols.com\/?post_type=doc&#038;p=6468"},"modified":"2022-09-07T17:34:03","modified_gmt":"2022-09-07T17:34:03","slug":"styles-optimization-accel","status":"publish","type":"doc","link":"https:\/\/www.s-sols.com\/docs\/wordpress\/accelerator\/how-does-it-work-accel\/styles-optimization-accel","title":{"rendered":"Splitting loading styles into 3 steps Accelerator for WordPress"},"content":{"rendered":"<p style=\"text-align:justify\">\n  The smaller the size of the styles and the smaller the number of them at each stage of loading, the <strong>higher<\/strong> the<strong> speed<\/strong> of page display.\n<\/p>\n<p style=\"text-align:justify\">\n  Styles are<span style=\"font-size:12pt\"> <\/span><a href=\"#opt\">optimized<\/a><span style=\"font-size:12pt\"> <\/span>and loaded in 3 groups.\n<\/p>\n<h2>\n  3 groups<br \/>\n<\/h2>\n<ul>\n<li>\n<div style=\"text-align:justify\"><strong>Critical<\/strong>\n    <\/div>\n<p style=\"text-align:justify\">\n      This includes everything that <a href=\".\/settings-styles-accel#general\">should be loaded before<\/a> the main content of a page, because it directly depends on these styles.\n    <\/p>\n<\/li>\n<li>\n<div style=\"text-align:justify\"><strong>Fonts<\/strong>\n    <\/div>\n<p style=\"text-align:justify\">\n      Delayed\u00a0loading of fonts has a positive effect on speed. To\u00a0complete this, all fonts are placed in this group during the <a href=\"#opt_crit\">separation of critical parts<\/a>. If for some sites this separation has the opposite effect, then it can be <a href=\".\/settings-styles-accel#fonts\">turned off<\/a>.\n    <\/p>\n<\/li>\n<li>\n<div style=\"text-align:justify\"><strong>Non-critical<\/strong>\n    <\/div>\n<p style=\"text-align:justify\">\n      Everything that can be <a href=\".\/settings-styles-accel#not_critical\">loaded after<\/a> the main content of page with a delay determined by the <a href=\".\/settings-scripts-accel#general\">loading time of non-critical scripts<\/a>. The group is formed in the process of <a href=\"#opt_crit\">separation of critical parts<\/a>.\n    <\/p>\n<\/li>\n<\/ul>\n<h2><a id=\"opt\"><\/a>Style optimization (CSS)<br \/>\n<\/h2>\n<ul>\n<li>\n<div style=\"text-align:justify\"><a id=\"opt_crit\"><\/a><strong>Separation of\u00a0critical parts<\/strong>\n    <\/div>\n<p style=\"text-align:justify\">\n      This\u00a0strongly affects the <a href=\"https:\/\/web.dev\/first-contentful-paint\" rel=\"nofollow noopener\" target=\"_blank\">First Contentful Paint (FCP)<\/a>\u00a0indicator. Because, the faster the initial page data is loaded, the faster it will be drawn. Usually, sites have a lot of non-critical styles that can be delayed loading. According to experience, it adds an average of 10<span style=\"font-size:12pt\"> <\/span>-15<span style=\"font-size:12pt\"> <\/span>points to the indicator.\n    <\/p>\n<p style=\"text-align:center\">\n      <img decoding=\"async\" src=\"\/data\/content\/doc\/wordpress\/accelerator\/styles-optimization-accel\/css-split-scheme-en.png\" alt=\"css-split-scheme\" title=\"css-split-scheme - Splitting loading styles into 3 steps\" \/>\n    <\/p>\n<\/li>\n<li>\n<div style=\"text-align:justify\"><strong>Inlining<\/strong>\n    <\/div>\n<p style=\"text-align:justify\">\n      Because critical styles should always be loaded before the main content, it is better to embed them at the top of the page to avoid unnecessary calls to the server. But since this can greatly increase the size of the stored data, then it is effective only in combination with <a href=\".\/fragmented-cache-accel\">fragmented cache<\/a>.\n    <\/p>\n<\/li>\n<li>\n<div style=\"text-align:justify\"><strong>Grouping <\/strong>\n    <\/div>\n<p style=\"text-align:justify\">\n      Reduces the number of requests to the server, thereby reducing the page load time. According to experience, it adds an average of 5-10 points to the rating, affecting the <a href=\"https:\/\/web.dev\/lighthouse-total-blocking-time\" rel=\"nofollow noopener\" target=\"_blank\">Total Blocking Time (TBT)<\/a> indicator, the importance of which was increased from 25% to 30% in <a href=\"https:\/\/googlechrome.github.io\/lighthouse\/scorecalc\/\" rel=\"nofollow noopener\" target=\"_blank\">version 8 of PageSpeed<\/a>.\n    <\/p>\n<\/li>\n<li>\n<div style=\"text-align:justify\"><strong>Delayed\u00a0loading fonts<\/strong>\n    <\/div>\n<p style=\"text-align:justify\">\n      It\u00a0is done as standard way by adding <a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/CSS\/@font-face\/font-display\" rel=\"nofollow noopener\" target=\"_blank\">font-display: swap<\/a> attribute. Plus, they\u00a0aren\u2019t included\u00a0into critical styles, which reduces page size, especially when huge<span style=\"font-size:12pt\"> <\/span>Google Fonts is used. It\u2019s configurable <a href=\".\/settings-styles-accel#fonts\">here<\/a>.\n    <\/p>\n<\/li>\n<li>\n<div style=\"text-align:justify\"><strong>Minification<\/strong>\n    <\/div>\n<p style=\"text-align:justify\">\n      It is processed together with the <a href=\"#opt_crit\">separation of critical parts<\/a>, which saves time.\n    <\/p>\n<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>The smaller the size of the styles and the smaller the number of them at each stage of loading, the higher the speed of page display. Styles are optimized and loaded in 3 groups. 3 groups Critical This includes everything that should be loaded before the main content of a page, because it directly depends&#8230;<\/p>\n","protected":false},"author":18,"featured_media":0,"parent":6456,"menu_order":0,"comment_status":"open","ping_status":"closed","template":"","meta":{"rank_math_lock_modified_date":false},"categories":[816],"tags":[163,870,871,165,818,869,154,689,872,692,92],"class_list":["post-6468","doc","type-doc","status-publish","hentry","category-accelerator","tag-cache","tag-css","tag-javascript","tag-minify","tag-optimize","tag-pagespeed","tag-performance","tag-plugin","tag-site","tag-speed","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/doc\/6468","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=6468"}],"up":[{"embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/doc\/6456"}],"wp:attachment":[{"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/media?parent=6468"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/categories?post=6468"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.s-sols.com\/api\/wp\/v2\/tags?post=6468"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}