Skip to content

Expand externalization of data: URLs in @font-face rules#2079

Merged
westonruter merged 4 commits intodevelopfrom
fix/font-face-rule-processing
Apr 7, 2019
Merged

Expand externalization of data: URLs in @font-face rules#2079
westonruter merged 4 commits intodevelopfrom
fix/font-face-rule-processing

Conversation

@westonruter
Copy link
Copy Markdown
Member

@westonruter westonruter commented Apr 7, 2019 •
edited
Loading

Twenty Nineteen has quite a bit of CSS, and part of it is due to the NonBreakingSpaceOverride font which is inlined as a data: URL. While this font was temporarily removed from the frontend styles in WordPress/twentynineteen#623 it was added back in WordPress/twentynineteen#670 as @kjellr notes in WordPress/twentynineteen#623 (comment):

@allancole — It's possible you didn't see the PR, but @jasmussen and I merged that into the front end in WordPress/twentynineteen#585 the other day. While not definitely required, it does fix some little quirks like the menu spacing noted in the PR. Since the custom font only covers one character, it should add just a couple kilobytes to the site's load. I'd prefer to keep it in, but not a huge deal either way.

In AMP it turns out to be a big deal, because of the 50KB budget for style[amp-custom]. The data:-URL inlined WOFF2 and WOFF files account for 3KB, which is 6% of the budget. This is a lot especially for something that definitely not required, per above.

The AMP plugin already has built-in support for externalizing data: URLs for font files in the case of Dashicons. That externalization depended on one of the font src URLs to be an external file so that it could guess where to find the external file version of the data:-encoded font. For example, dashicons.css has:

@font-face {
	font-family: dashicons;
	src: url("../fonts/dashicons.eot?50db0456fde2a241f005968eede3f987");
	src: url("../fonts/dashicons.eot?50db0456fde2a241f005968eede3f987#iefix") format("embedded-opentype"),
		url("data:application/x-font-woff;charset=utf-8;base64,d09GR....") format("woff"),
		url("../fonts/dashicons.ttf?50db0456fde2a241f005968eede3f987") format("truetype");
	font-weight: 400;
	font-style: normal;
}

Based on this, the plugin can successfully guess that woff font encoded in the data: URL would probably be located at ../fonts/dashicons.woff since the TrueType version is located at ../fonts/dashicons.ttf.

That's all well and good. But what if there are no non-data: URLs defined? This is the case for Twenty Nineteen. It contains:

@font-face {
    font-family: "NonBreakingSpaceOverride";
    src: url("data:application/font-woff2;charset=utf-8;base64,d09GM...") format("woff2"),
         url("data:application/font-woff;charset=utf-8;base64,d09GR...") format("woff");
}

The AMP plugin doesn't know where to locate the woff2 and woff files.

It turns out that even though Twenty Nineteen doesn't reference these files externally, they are present in the theme at:

  • fonts/NonBreakingSpaceOverride.woff2
  • fonts/NonBreakingSpaceOverride.woff

With this in mind, the plugin can expand its guessing of the external file locations based on the name in the font-family.

As an added touch for performance, when a data: URL is converted to an external URL, the @font-face gets a font-display: swap. This prevents the font's loading from blocking the rendering of the text.

Before: style.css at 42KB

<!--
The style[amp-custom] element is populated with:
     0 B: style[amp-custom=]
    81 B: style
    73 B (57%): link#amp-default-css[rel=stylesheet][id=amp-default-css][href=https://example.com/wp-content/plugins/amp/assets/css/amp-default.css?ver=1.1-beta1-20190406T044858Z-28b70b03][type=text/css][media=all]
  4348 B (37%): link#wp-block-library-css[rel=stylesheet][id=wp-block-library-css][href=https://example.com/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1554612185][type=text/css][media=all]
   857 B (72%): link#wp-block-library-theme-css[rel=stylesheet][id=wp-block-library-theme-css][href=https://example.com/wp-content/plugins/gutenberg/build/block-library/theme.css?ver=1554612185][type=text/css][media=all]
 41583 B (72%): link#twentynineteen-style-css[rel=stylesheet][id=twentynineteen-style-css][href=https://example.com/wp-content/themes/twentynineteen/style.css?ver=1.0][type=text/css][media=all]
   417 B: style#twentynineteen-style-inline-css[id=twentynineteen-style-inline-css][type=text/css]
  2487 B (99%): link#twentynineteen-print-style-css[rel=stylesheet][id=twentynineteen-print-style-css][href=https://example.com/wp-content/themes/twentynineteen/print.css?ver=1.0][type=text/css][media=print]
   119 B: div.wp-block-cover has-background-dim alignwide amp-wp-d28a8c9[class=wp-block-cover has-background-dim alignwide amp-wp-d28a8c9]
Total included size: 49,965 bytes (67% of 73,555 total after tree shaking)

The following stylesheets are too large to be included in style[amp-custom]:
   122 B: style[type=text/css]
    80 B: p.has-large-font-size amp-wp-13076d9[class=has-large-font-size amp-wp-13076d9]
    79 B: p.amp-wp-f6e3d7f[class=amp-wp-f6e3d7f]
    80 B: p.amp-wp-13076d9[class=amp-wp-13076d9]
    80 B: p.amp-wp-13076d9[class=amp-wp-13076d9]
    80 B: p.amp-wp-13076d9[class=amp-wp-13076d9]
Total excluded size: 521 bytes (100% of 521 total after tree shaking)

Total combined size: 50,486 bytes (68% of 74,076 total after tree shaking)
-->
/*...*/
@font-face {
    font-family: "NonBreakingSpaceOverride";
    src: url("data:application/font-woff2;charset=utf-8;base64,d09GMgABAAAAAAMoAA0AAAAACDQAAALTAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAP0ZGVE0cGh4GYACCahEICjx3CywAATYCJANUBCAFhiEHgWwbXQfILgpsY+rQRRARwyAs6uL7pxzYhxEE+32b3aeHmifR6tklkS9hiZA0ewkqGRJE+H7/+6378ASViK/PGeavqJyOzsceKi1s3BCiQsiOdn1r/RBgIJYEgCUhbm/8/8/h4saPssnTNkkiWUBrTRtjmQSajw3Ui3pZ3LYDPD+XG2C3JA/yKAS8/rU5eNfuGqRf4eNNgV4YAlIIgxglEkWe6FYpq10+wi3g+/nUgvgPFczNrz/RsTgVm/zfbPuHZlsuQECxuyqBcQwKFBjFgKO8AqP4bAN9tFJtnM9xPcbNjeXS/x1wY/xU52f5W/X1+9cnH4YwKIaoRRAkUkj/YlAAeF/624foiIDBgBmgQBeGAyhBljUPZUm/l2dTvmpqcBDUOHdbPZWd8JsBAsGr4w8/EDn82/bUPx4eh0YNrQTBuHO2FjQEAGBwK0DeI37DpQVqdERS4gZBhpeUhWCfLFz7J99aEBgsJCHvUGAdAPp4IADDCAPCEFMGpMZ9AQpTfQtQGhLbGVBZFV8BaqNyP68oTZgHNj3M8kBPfXTTC9t90UuzYhy9ciH0grVlOcqyCytisvbsERsEYztiznR0WCrmTksJwbSNK6fd1Rvr25I9oLvctUoEbNOmXJbqgYgPXEHJ82IUsrCnpkxh23F1rfZ2zcRnJYoXtauB3VTFkFXQg3uoZYD5qE0kdjDtoDoF1h2bulGmev5HbYhbrjtohQSRI4aNOkffIcT+d3v6atpaYh3JvPoQsztCcqvaBkppDSPcQ3bw3KaCBo1f5CJWTZEgW3LjLofYg51MaVezrx8xZitYbQ9KYeoRaqQdVLwSEfrKXLK1otCWOKNdR/YwYAfon5Yk8O2MJfSD10dPGA5PIJJQMkah0ugMJiv6x4Dm7LEa8xnrRGGGLAg4sAlbsA07sAt76DOsXKO3hIjtIlpnnFrt1qW4kh6NhS83P/6HB/fl1SMAAA==") format("woff2"),
         url("data:application/font-woff;charset=utf-8;base64,d09GRgABAAAAAAUQAA0AAAAACDQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABGRlRNAAAE9AAAABwAAAAchf5yU0dERUYAAATYAAAAHAAAAB4AJwAbT1MvMgAAAaAAAABJAAAAYJAcgU5jbWFwAAACIAAAAF4AAAFqUUxBZ2dhc3AAAATQAAAACAAAAAgAAAAQZ2x5ZgAAApAAAAAyAAAAPL0n8y9oZWFkAAABMAAAADAAAAA2Fi93Z2hoZWEAAAFgAAAAHQAAACQOSgWaaG10eAAAAewAAAAzAAAAVC7TAQBsb2NhAAACgAAAABAAAAAsAOQBAm1heHAAAAGAAAAAHQAAACAAWQALbmFtZQAAAsQAAAF6AAADIYvD/Adwb3N0AAAEQAAAAI4AAADsapk2o3jaY2BkYGAA4ov5mwzj+W2+MnCzXwCKMNzgCBSB0LfbQDQ7AxuI4mBgAlEAFKQIRHjaY2BkYGD3+NvCwMDBAALsDAyMDKhAFAA3+wH3AAAAeNpjYGRgYBBl4GBgYgABEMnIABJzAPMZAAVmAGUAAAB42mNgZlJhnMDAysDCKsKygYGBYRqEZtrDYMT4D8gHSmEHjgUFOQwODAqqf9g9/rYwMLB7MNUAhRlBcsxBrMlASoGBEQAj8QtyAAAAeNrjYGBkAAGmWQwMjO8gmBnIZ2NA0ExAzNjAAFYJVn0ASBsD6VAIDZb7AtELAgANIgb9AHjaY2BgYGaAYBkGRgYQSAHyGMF8FgYPIM3HwMHAxMDGoMCwQIFLQV8hXvXP//9AcRCfAcb///h/ygPW+w/vb7olBjUHCTCyMcAFGZmABBO6AogThgZgIUsXAEDcEzcAAHjaY2BgECMCyoEgACZaAed42mNgYmRgYGBnYGNgYAZSDJqMgorCgoqCjECRXwwNrCAKSP5mAAFGBiRgyAAAi/YFBQAAeNqtkc1OwkAUhU/5M25cEhcsZick0AwlBJq6MWwgJkAgYV/KAA2lJeUn+hY+gktXvpKv4dLTMqKycGHsTZNv7px7z50ZAFd4hYHjdw1Ls4EiHjVncIFnzVnc4F1zDkWjrzmPW+NNcwGlzIRKI3fJlUyrEjZQxb3mDH2fNGfRx4vmHKqG0JzHg6E0F9DOlFBGBxUI1GEzLNT4S0aLuTtsGAEUuYcQHkyg3KmIum1bNUvKlrjbbAIleqHHnS4iSudpQcySMYtdFiXlAxzSbAwfMxK6kZoHKhbjjespMTioOPZnzI+4ucCeTVyKMVKLfeAS6vSWaTinuZwzyy/Dc7vaed+6KaV0kukdPUk6yOcctZPvvxxqksq2lEW8RvHjMEO2FCl/zy6p3NEm0R9OFSafJdldc4QVeyaaObMBO0/5cCaa6d9Ggyubxire+lEojscdjoWUR1xGOy8KD8mG2ZLO2l2paDc3A39qmU2z2W5YNv5+u79e6QfGJY/hAAB42m3NywrCMBQE0DupWp/1AYI7/6DEaLQu66Mrd35BKUWKJSlFv1+rue4cGM7shgR981qSon+ZNwUJ8iDgoYU2OvDRRQ99DDDECAHGmGCKmf80hZSx/Kik/LliFbtmN6xmt+yOjdg9GztV4tROnRwX/Bsaaw51nt4Lc7tWaZYHp/MlzKx51LZs5htNri+2AAAAAQAB//8AD3jaY2BkYGDgAWIxIGZiYARCESBmAfMYAAR6AEMAAAABAAAAANXtRbgAAAAA2AhRFAAAAADYCNuG") format("woff");
}
/*...*/

After: style.css at 39KB

<!--
The style[amp-custom] element is populated with:
     0 B: style[amp-custom=]
    81 B: style
    73 B (57%): link#amp-default-css[rel=stylesheet][id=amp-default-css][href=https://example.com/wp-content/plugins/amp/assets/css/amp-default.css?ver=1.1-beta1-20190407T055539Z-9c273505][type=text/css][media=all]
  4348 B (37%): link#wp-block-library-css[rel=stylesheet][id=wp-block-library-css][href=https://example.com/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1554616748][type=text/css][media=all]
   857 B (72%): link#wp-block-library-theme-css[rel=stylesheet][id=wp-block-library-theme-css][href=https://example.com/wp-content/plugins/gutenberg/build/block-library/theme.css?ver=1554616748][type=text/css][media=all]
 38893 B (71%): link#twentynineteen-style-css[rel=stylesheet][id=twentynineteen-style-css][href=https://example.com/wp-content/themes/twentynineteen/style.css?ver=1.0][type=text/css][media=all]
   417 B: style#twentynineteen-style-inline-css[id=twentynineteen-style-inline-css][type=text/css]
  2487 B (99%): link#twentynineteen-print-style-css[rel=stylesheet][id=twentynineteen-print-style-css][href=https://example.com/wp-content/themes/twentynineteen/print.css?ver=1.0][type=text/css][media=print]
   122 B: style[type=text/css]
   119 B: div.wp-block-cover has-background-dim alignwide amp-wp-d28a8c9[class=wp-block-cover has-background-dim alignwide amp-wp-d28a8c9]
    80 B: p.has-large-font-size amp-wp-13076d9[class=has-large-font-size amp-wp-13076d9]
    79 B: p.amp-wp-f6e3d7f[class=amp-wp-f6e3d7f]
Total included size: 47,556 bytes (66% of 71,146 total after tree shaking)
-->
/*...*/
@font-face {
    font-family: "NonBreakingSpaceOverride";
    src: url("https://example.com/wp-content/themes/twentynineteen/fonts/NonBreakingSpaceOverride.woff2") format("woff2"),
         url("https://example.com/wp-content/themes/twentynineteen/fonts/NonBreakingSpaceOverride.woff") format("woff");
    font-display: swap;
}
/*...*/

See #1492.

@westonruter westonruter added this to the v1.1 milestone Apr 7, 2019
@googlebot googlebot added the cla: yes Signed the Google CLA label Apr 7, 2019
@westonruter westonruter requested a review from amedina April 7, 2019 16:27
amedina
amedina reviewed Apr 7, 2019
View reviewed changes
amedina
amedina approved these changes Apr 7, 2019
View reviewed changes
Copy link
Copy Markdown
Member

@amedina amedina left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

6% reduction in CSS size is a good gain. Ship it.

@westonruter
Copy link
Copy Markdown
Member Author

westonruter commented Apr 7, 2019

Good gain or good loss? 😉

@westonruter westonruter merged commit 4a0e736 into develop Apr 7, 2019
@westonruter westonruter deleted the fix/font-face-rule-processing branch April 7, 2019 19:54
@westonruter westonruter mentioned this pull request Apr 9, 2019
Merged
3 tasks
@westonruter westonruter mentioned this pull request Dec 2, 2019
Merged
3 tasks
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@amedina amedina amedina approved these changes

Assignees

No one assigned

Labels

cla: yes Signed the Google CLA

Projects

None yet

Milestone

v1.1

Development

Successfully merging this pull request may close these issues.

3 participants

@westonruter @amedina @googlebot