[wp-trac] [WordPress Trac] #47925: Twenty Nineteen: Size of style.css seems excessively large (225% larger than next largest theme's CSS)

[WordPress Trac]

#47925: Twenty Nineteen: Size of style.css seems excessively large (225% larger
than next largest theme's CSS)
---------------------------+------------------------------
 Reporter:  westonruter    |       Owner:  (none)
     Type:  defect (bug)   |      Status:  new
 Priority:  normal         |   Milestone:  Awaiting Review
Component:  Bundled Theme  |     Version:  5.0
 Severity:  normal         |  Resolution:
 Keywords:                 |     Focuses:  performance
---------------------------+------------------------------
Description changed by westonruter:

Old description:

> I just did a check of the size of each core theme's `style.css` and
> here's what I found (first column is byte size):
>
> {{{
>   221622 twentynineteen/style.css
>    98458 twentyfifteen/style.css
>    83559 twentyseventeen/style.css
>    81216 twentyfourteen/style.css
>    70311 twentysixteen/style.css
>    57356 twentyeleven/style.css
>    57106 twentythirteen/style.css
>    37606 twentytwelve/style.css
>    24688 twentyten/style.css
> }}}
>
> The `style.css` for Twenty Nineteen is 225% larger than the next-largest
> core theme stylesheet, for Twenty Fifteen.  Between 5.2.2 and 5.3-alpha,
> the size of Twenty Nineteen's CSS has grown yet another 9KB.
>
> Prior to Twenty Nineteen, themes primarily had their CSS hand-written, I
> believe. As of Twenty Nineteen, SASS was used for the first time.
> Depending on how SASS is written, a little bit of code can end up
> generating a lot of CSS. Is this the case here for Twenty Nineteen? It
> doesn't seem the large amount of CSS is directly due to styling blocks,
> since the other themes have also been updated to style blocks.
>
> A large amount of CSS has negative impact on performance. Not only does
> it increase the amount of time to render the page (as CSS is render-
> blocking) through increased data transfer time and CSS parsing time, it
> also hurts performance once the page has loaded, as there is more CSS in
> memory and more selectors to be evaluating.
>
> How can the amount of CSS in Twenty Nineteen be reduced to be more in-
> line with the other core themes?

New description:

 I just did a check of the size of each core theme's `style.css` and here's
 what I found (first column is byte size):

 {{{
   221622 twentynineteen/style.css
    98458 twentyfifteen/style.css
    83559 twentyseventeen/style.css
    81216 twentyfourteen/style.css
    70311 twentysixteen/style.css
    57356 twentyeleven/style.css
    57106 twentythirteen/style.css
    37606 twentytwelve/style.css
    24688 twentyten/style.css
 }}}

 The `style.css` for Twenty Nineteen is 225% larger than the next-largest
 core theme stylesheet, for Twenty Fifteen.  Between 5.2.2 and 5.3-alpha,
 the size of Twenty Nineteen's CSS has grown yet another 9KB.

 Prior to Twenty Nineteen, themes primarily had their CSS hand-written, I
 believe. As of Twenty Nineteen, SASS was used for the first time.
 Depending on how SASS is written, a little bit of code can end up
 generating a lot of CSS. Is this the case here for Twenty Nineteen? It
 doesn't seem the large amount of CSS is directly due to styling blocks,
 since the other themes have also been updated to style blocks.

 A large amount of CSS has negative impact on performance. Not only does it
 increase the amount of time to render the page (as CSS is render-blocking)
 through increased data transfer time and CSS parsing time, it also hurts
 performance once the page has loaded, as there is more CSS in memory and
 more selectors to be evaluating.

 How can the amount of CSS in Twenty Nineteen be reduced to be more in-line
 with the other core themes?

 ----

 A few resources related to CSS performance:

 * [https://developers.google.com/web/fundamentals/performance/rendering
 /reduce-the-scope-and-complexity-of-style-calculations Reduce the Scope
 and Complexity of Style Calculations]
 * [https://developers.google.com/web/fundamentals/performance/critical-
 rendering-path/render-blocking-css Render Blocking CSS]
 * [https://css-tricks.com/efficiently-rendering-css/ Efficiently Rendering
 CSS]

--

-- 
Ticket URL: <https://core.trac.wordpress.org/ticket/47925#comment:2>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform