[wp-trac] [WordPress Trac] #47925: Twenty Nineteen: Size of style.css seems excessively large (225% as large as the next largest theme's CSS)
WordPress Trac
noreply at wordpress.org
Wed Jul 31 18:04:19 UTC 2024
#47925: Twenty Nineteen: Size of style.css seems excessively large (225% as large
as the next largest theme's CSS)
---------------------------+-------------------------------
Reporter: westonruter | Owner: (none)
Type: enhancement | Status: new
Priority: normal | Milestone: Future Release
Component: Bundled Theme | Version: 5.0
Severity: normal | Resolution:
Keywords: needs-patch | Focuses: css, performance
---------------------------+-------------------------------
Comment (by westonruter):
For
[https://github.com/WordPress/WordPress/blob/af6e4904af4bce0526a65de435ec3806eaf5a879
/wp-content/themes/twentynineteen/style.css#L83-L1879 all the non-latin
fonts section] (105 KB), there is a lot of duplication.
There are 31 separate rules, each which have the same selectors aside from
the `:lang()`. For the properties, the difference is in the `font-family`,
which there are also duplicates:
{{{
10 font-family: "Helvetica Neue", Helvetica, "Segoe UI",
Arial, sans-serif;
7 font-family: Tahoma, Arial, sans-serif;
5 font-family: Arial, sans-serif;
1 font-family: "Sukhumvit Set", "Helvetica Neue", helvetica,
arial, sans-serif;
1 font-family: "Libre Franklin", sans-serif;
1 font-family: "Helvetica Neue", Helvetica, Arial, sans-
serif;
1 font-family: "Arial Hebrew", Arial, sans-serif;
1 font-family: -apple-system, BlinkMacSystemFont, "PingFang
TC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif;
1 font-family: -apple-system, BlinkMacSystemFont, "PingFang
SC", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif;
1 font-family: -apple-system, BlinkMacSystemFont, "PingFang
HK", "Helvetica Neue", "Microsoft YaHei New", STHeiti Light, sans-serif;
1 font-family: -apple-system, BlinkMacSystemFont, "Hiragino
Sans", Meiryo, "Helvetica Neue", sans-serif;
1 font-family: "Apple SD Gothic Neo", "Malgun Gothic",
"Nanum Gothic", Dotum, sans-serif;
}}}
So over two-thirds (22) of the `font-family` properties are duplicated. It
turns out that `:lang()` [https://developer.mozilla.org/en-
US/docs/Web/CSS/:lang#formal_syntax allows] for ''multiple'' languages to
be specified (but see caveat below!), so the duplicated styles for 22 of
the rules could be reduced to 3. If each rule is about 3.3KB, this would
reduce 72 KB down to ~10KB.
So instead of there being 10 instances of:
{{{#!css
body:lang(be), button:lang(be),
input:lang(be),
select:lang(be),
optgroup:lang(be),
textarea:lang(be), .author-description .author-link:lang(be),
.comment-metadata:lang(be),
.comment-reply-link:lang(be),
.comments-title:lang(be),
.comment-author .fn:lang(be),
.discussion-meta-info:lang(be),
.entry-meta:lang(be),
.entry-footer:lang(be),
.main-navigation:lang(be),
.no-comments:lang(be),
.not-found .page-title:lang(be),
.error-404 .page-title:lang(be),
.post-navigation .post-title:lang(be),
.page-links:lang(be),
.page-description:lang(be),
.pagination .nav-links:lang(be),
.sticky-post:lang(be),
.site-title:lang(be),
.site-info:lang(be),
#cancel-comment-reply-link:lang(be),
h1:lang(be),
h2:lang(be),
h3:lang(be),
h4:lang(be),
h5:lang(be),
h6:lang(be), .page-title:lang(be), blockquote cite:lang(be),
table:lang(be), .button:lang(be),
input:lang(be)[type="button"],
input:lang(be)[type="reset"],
input:lang(be)[type="submit"], .comment-navigation .nav-previous:lang(be),
.comment-navigation .nav-next:lang(be), .comment-list .pingback .comment-
body:lang(be),
.comment-list .trackback .comment-body:lang(be), .comment-list .pingback
.comment-body .comment-edit-link:lang(be),
.comment-list .trackback .comment-body .comment-edit-link:lang(be),
.comment-form .comment-notes:lang(be),
.comment-form label:lang(be), .widget_archive ul li:lang(be),
.widget_categories ul li:lang(be),
.widget_meta ul li:lang(be),
.widget_nav_menu ul li:lang(be),
.widget_pages ul li:lang(be),
.widget_recent_comments ul li:lang(be),
.widget_recent_entries ul li:lang(be),
.widget_rss ul li:lang(be), .widget_tag_cloud .tagcloud:lang(be),
.widget_calendar .calendar_wrap .wp-calendar-nav:lang(be), .entry .entry-
content .wp-block-button .wp-block-button__link:lang(be), .entry .entry-
content .wp-block-archives li > a:lang(be),
.entry .entry-content .wp-block-categories li > a:lang(be),
.entry .entry-content .wp-block-latest-posts li > a:lang(be), .entry
.entry-content .wp-block-latest-posts .wp-block-latest-posts__post-
date:lang(be), .entry .entry-content .wp-block-verse:lang(be), .entry
.entry-content .has-drop-cap:lang(be):not(:focus):first-letter, .entry
.entry-content .wp-block-pullquote cite:lang(be), .entry .entry-content
.wp-block-cover-image .wp-block-cover-image-text:lang(be),
.entry .entry-content .wp-block-cover-image .wp-block-cover-text:lang(be),
.entry .entry-content .wp-block-cover-image h2:lang(be),
.entry .entry-content .wp-block-cover .wp-block-cover-image-text:lang(be),
.entry .entry-content .wp-block-cover .wp-block-cover-text:lang(be),
.entry .entry-content .wp-block-cover h2:lang(be), .entry .entry-content
.wp-block-audio figcaption:lang(be),
.entry .entry-content .wp-block-video figcaption:lang(be),
.entry .entry-content .wp-block-image figcaption:lang(be),
.entry .entry-content .wp-block-gallery .blocks-gallery-image
figcaption:lang(be),
.entry .entry-content .wp-block-gallery .blocks-gallery-item
figcaption:lang(be), .entry .entry-content .wp-block-file:lang(be), .entry
.entry-content .wp-block-file .wp-block-file__button:lang(be), .entry
.entry-content .wp-block-latest-comments .wp-block-latest-
comments__comment-meta:lang(be), .wp-caption-text:lang(be), .gallery-
caption:lang(be) {
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-
serif;
}
}}}
We could instead have:
{{{#!css
body:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
button:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
input:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
select:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
optgroup:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
textarea:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .author-description
.author-link:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.comment-metadata:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.comment-reply-link:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.comments-title:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.comment-author .fn:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.discussion-meta-info:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry-meta:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry-footer:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.main-navigation:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.no-comments:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.not-found .page-title:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.error-404 .page-title:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.post-navigation .post-title:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.page-links:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.page-description:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.pagination .nav-links:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.sticky-post:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.site-title:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.site-info:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
#cancel-comment-reply-link:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
h1:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
h2:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
h3:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
h4:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
h5:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
h6:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .page-
title:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), blockquote
cite:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
table:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.button:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
input:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk)[type="button"],
input:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk)[type="reset"],
input:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk)[type="submit"], .comment-
navigation .nav-previous:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.comment-navigation .nav-next:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.comment-list .pingback .comment-
body:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.comment-list .trackback .comment-
body:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .comment-list .pingback
.comment-body .comment-edit-link:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.comment-list .trackback .comment-body .comment-edit-
link:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .comment-form .comment-
notes:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.comment-form label:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .widget_archive
ul li:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.widget_categories ul li:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.widget_meta ul li:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.widget_nav_menu ul li:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.widget_pages ul li:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.widget_recent_comments ul li:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.widget_recent_entries ul li:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.widget_rss ul li:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .widget_tag_cloud
.tagcloud:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .widget_calendar
.calendar_wrap .wp-calendar-nav:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-button .wp-block-
button__link:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .entry .entry-content
.wp-block-archives li > a:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-categories li >
a:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-latest-posts li >
a:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .entry .entry-content .wp-block-
latest-posts .wp-block-latest-posts__post-
date:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .entry .entry-content .wp-
block-verse:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .entry .entry-content
.has-drop-cap:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk):not(:focus):first-
letter, .entry .entry-content .wp-block-pullquote
cite:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .entry .entry-content .wp-
block-cover-image .wp-block-cover-image-
text:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-cover-image .wp-block-cover-
text:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-cover-image
h2:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-cover .wp-block-cover-image-
text:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-cover .wp-block-cover-
text:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-cover
h2:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .entry .entry-content .wp-block-
audio figcaption:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-video
figcaption:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-image
figcaption:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-gallery .blocks-gallery-image
figcaption:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk),
.entry .entry-content .wp-block-gallery .blocks-gallery-item
figcaption:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .entry .entry-content
.wp-block-file:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .entry .entry-content
.wp-block-file .wp-block-
file__button:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .entry .entry-content
.wp-block-latest-comments .wp-block-latest-comments__comment-
meta:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .wp-caption-
text:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk), .gallery-
caption:lang(be,bg,kk,mk,mn,ru,sah,sr,tt,uk) {
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-
serif;
}
}}}
'''However''', this is currently only supported by Firefox. But, there is
another alternative which we could refactor yet further using `:is()` to
combine the selectors and work around the lack support for multiple
languages in `:lang()`:
{{{#!css
:is(
body, button,
input,
select,
optgroup,
textarea, .author-description .author-link,
.comment-metadata,
.comment-reply-link,
.comments-title,
.comment-author .fn,
.discussion-meta-info,
.entry-meta,
.entry-footer,
.main-navigation,
.no-comments,
.not-found .page-title,
.error-404 .page-title,
.post-navigation .post-title,
.page-links,
.page-description,
.pagination .nav-links,
.sticky-post,
.site-title,
.site-info,
#cancel-comment-reply-link,
h1,
h2,
h3,
h4,
h5,
h6, .page-title, blockquote cite, table, .button,
input[type="button"],
input[type="reset"],
input[type="submit"], .comment-navigation .nav-previous,
.comment-navigation .nav-next, .comment-list .pingback .comment-body,
.comment-list .trackback .comment-body, .comment-list .pingback
.comment-body .comment-edit-link,
.comment-list .trackback .comment-body .comment-edit-link, .comment-
form .comment-notes,
.comment-form label, .widget_archive ul li,
.widget_categories ul li,
.widget_meta ul li,
.widget_nav_menu ul li,
.widget_pages ul li,
.widget_recent_comments ul li,
.widget_recent_entries ul li,
.widget_rss ul li, .widget_tag_cloud .tagcloud, .widget_calendar
.calendar_wrap .wp-calendar-nav, .entry .entry-content .wp-block-button
.wp-block-button__link, .entry .entry-content .wp-block-archives li > a,
.entry .entry-content .wp-block-categories li > a,
.entry .entry-content .wp-block-latest-posts li > a, .entry .entry-
content .wp-block-latest-posts .wp-block-latest-posts__post-date, .entry
.entry-content .wp-block-verse, .entry .entry-content .has-drop-
cap:not(:focus):first-letter, .entry .entry-content .wp-block-pullquote
cite, .entry .entry-content .wp-block-cover-image .wp-block-cover-image-
text,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image h2,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover .wp-block-cover-text,
.entry .entry-content .wp-block-cover h2, .entry .entry-content .wp-
block-audio figcaption,
.entry .entry-content .wp-block-video figcaption,
.entry .entry-content .wp-block-image figcaption,
.entry .entry-content .wp-block-gallery .blocks-gallery-image
figcaption,
.entry .entry-content .wp-block-gallery .blocks-gallery-item
figcaption, .entry .entry-content .wp-block-file, .entry .entry-content
.wp-block-file .wp-block-file__button, .entry .entry-content .wp-block-
latest-comments .wp-block-latest-comments__comment-meta, .wp-caption-text,
.gallery-caption
):is(
:lang(be),
:lang(bg),
:lang(kk),
:lang(mk),
:lang(mn),
:lang(ru),
:lang(sah),
:lang(sr),
:lang(tt),
:lang(uk)
) {
font-family: "Helvetica Neue", Helvetica, "Segoe UI", Arial, sans-
serif;
}
}}}
This is only 2.5 KB minified.
--
Ticket URL: <https://core.trac.wordpress.org/ticket/47925#comment:14>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform
More information about the wp-trac
mailing list