Use new font loading strategy #726
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-726
36degrees
force-pushed
the
new-font-loading-strategy
branch
from
bbb0ff0 to
4ae8977
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-726
36degrees
force-pushed
the
new-font-loading-strategy
branch
from
4ae8977 to
856ab18
Compare
govuk-design-system-ci
temporarily deployed
to
govuk-frontend-review-pr-726
NickColley
approved these changes
May 29, 2018
There was a problem hiding this comment.
Excellent! And thank you again @Nooshu @steventux.
I've tested the review application, and looks great.
Just need to add a CHANGELOG entry.
|
Will wait for #725 to merge and rebase to avoid conflicts before adding CHANGELOG entries. |
We need to handle two types of assets now – images and fonts, so having one generic ‘file’ function for images is even more misleading. Rename the file-url function to govuk-image-url, update the two components that use it, and rename the image path variable whilst we’re at it.
This is mirroring the work done by @Nooshu and @steventux in GOV.UK Template (alphagov/govuk_template#341): > This PR has been raised to solve one of the major frontend performance issues that is currently live on GOV.UK. Four WOFF compressed web-fonts are base64 encoded and are sitting on the browsers critical path. This 200KB CSS file must be downloaded and parsed before page rendering can start. This single download is approximately 82% of the render blocking assets which stop the browser showing any content to the user. > > Base64 encoding into a CSS file is now considered an anti-pattern so the font loading method is being revisited. > > This PR removes the Base64 encoded font and reverts to a standard HTTP request to load the font files. This gives us the added advantage of being able to offer multiple font sources. The browser can then choose the most appropriate supported font format. > > The fonts being used are unchanged. We have created a new WOFF2 version of the font which offers approximately 25% better compression and no change in quality. > > This PR is also taking advantage of a new CSS property that is available in modern browsers: font-display. This property defines how the browser behaves during the font download. Browsers that don't support this property will ignore it. Further details including an overview of the performance impact can be found in the original PR.
When rasterizing media queries (when `$mq-responsive` is false) sass-mq was incorrectly rasterizing the print styles as well. This has been raised against the upstream sass-mq as well: sass-mq/sass-mq#111
36degrees
force-pushed
the
new-font-loading-strategy
branch
from
856ab18 to
83b9e53
Compare
|
@NickColley happy with 83b9e53? |
|
@36degrees excellent, great notes 👍 |
3 tasks
NickColley
added a commit
that referenced
this pull request
May 29, 2018
Changes from [govuk_template](https://github.com/alphagov/govuk_template): Breaking changes: - Removed stylesheets relating to `govuk_template.css`, we now recommend people bundle stylesheets in their application. - Removed stylesheets relating to `print`, we do this at a component level. - Removed stylesheets relating to `font`, we now have a [new font loading strategy](#726) that does not require a different bundle. - Removed `ie8` specific class being added to the `html` element, since we don't require functionality - Remove `ie.js`, used to shim HTML5 files, add JSON2 support, we now recommend people bundle in their application. - Removed functionality to remove `js-enabled` class if `window.GOVUK` is not defined, at the moment we can't guarantee that this global will be set with GOV.UK Frontend. See alphagov/govuk_template#248 for details on this feature. Features: - Added a main block, now skip link works by default, this block can be overridden. Patch: - Moved Skip link into it's own block, calling the [Skip link component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/skip-link) by default instead of being inlined. - Moved footer into it's own block, calling the [Footer component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/footer) by default instead of being inlined. - Moved header into it's own block, calling the [Header component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/header) by default instead of being inlined. - Changed the default `main` `id` to be `#main-content` to avoid being [styled by GOV.UK Elements](https://github.com/alphagov/govuk_elements/blob/8216538c1d2efb8b33372a22f28e1ea81d879ecd/assets/sass/elements/_layout.scss#L9).
|
Awesome work @36degrees! Very happy to see this in Frontend! |
NickColley
added a commit
that referenced
this pull request
May 31, 2018
Changes from [govuk_template](https://github.com/alphagov/govuk_template): Breaking changes: - Removed stylesheets relating to `govuk_template.css`, we now recommend people bundle stylesheets in their application. - Removed stylesheets relating to `print`, we do this at a component level. - Removed stylesheets relating to `font`, we now have a [new font loading strategy](#726) that does not require a different bundle. - Removed `ie8` specific class being added to the `html` element, since we don't require functionality - Remove `ie.js`, used to shim HTML5 files, add JSON2 support, we now recommend people bundle in their application. - Removed functionality to remove `js-enabled` class if `window.GOVUK` is not defined, at the moment we can't guarantee that this global will be set with GOV.UK Frontend. See alphagov/govuk_template#248 for details on this feature. Features: - Added a main block, now skip link works by default, this block can be overridden. Patch: - Moved Skip link into it's own block, calling the [Skip link component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/skip-link) by default instead of being inlined. - Moved footer into it's own block, calling the [Footer component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/footer) by default instead of being inlined. - Moved header into it's own block, calling the [Header component](https://github.com/alphagov/govuk-frontend/tree/master/src/components/header) by default instead of being inlined. - Changed the default `main` `id` to be `#main-content` to avoid being [styled by GOV.UK Elements](https://github.com/alphagov/govuk_elements/blob/8216538c1d2efb8b33372a22f28e1ea81d879ecd/assets/sass/elements/_layout.scss#L9).
Merged
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
This is mirroring the work done by @Nooshu and @steventux in GOV.UK Template (alphagov/govuk_template#341):
Further details including an overview of the performance impact can be found in the original PR.
Additionally, this PR also:
govuk-file-urlhelper togovuk-image-url, and adds a newgovuk-font-urlhelper.$govuk-global-imagesto$govuk-images-pathand adds two new variables –$govuk-fonts-pathand$govuk-assets-path, which is used as the base for both$govuk-images-pathand$govuk-fonts-path.https://trello.com/c/X57aAcmP/960-2-adopt-the-same-font-loading-strategy-as-for-template