This repository has been archived by the owner on Oct 17, 2020. It is now read-only.
Make css-loader use "preload" when available #631
Comments
wincent
added a commit
that referenced
this issue
Aug 28, 2020
As described in the related ticket, the idea is to have the css-loader
emit:
<link as="style" rel="preload" />
tags instead of:
<link rel="stylesheet" />
ones.
As noted in:
https://www.smashingmagazine.com/2016/02/preload-what-is-it-good-for/
> On top of that, preload **does not block the window’s `onload`
> event**, unless the resource is also requested by a resource that
> blocks that event.
In practice, we don't expect this to make page loads perceptibly faster,
but it should at least avoid Lighthouse reporting onload events as
delayed.
The `try`/`catch` is so that we can do feature detection for
the "preload" attribute and only use it on browsers that support it.
Without this, the `onload` event may not fire on IE which would lead to
breakage.
See: https://stackoverflow.com/questions/49136399/onload-on-link-element-event-doesnt-fire-on-ie11-preload-fallback-for-ie
Related: https://issues.liferay.com/browse/LPS-115876
Related: https://liferay-community.slack.com/archives/CB2QQ3M5F/p1598598237007500
Closes: #631
wincent
added a commit
that referenced
this issue
Aug 28, 2020
feat(css-loader): use preload when available (#631)
wincent
added a commit
that referenced
this issue
Sep 17, 2020
This reverts commit 1423ca3, because the feature doesn't work as expected, as described here: liferay-frontend/liferay-portal#345 (comment) In short, our testing showed the loader producing code that correctly inserted `preload` links in the `head`, and the network pane showed the corresponding resources being fetched, and in the right order. But the associated styles were not being applied to the DOM, leading to visual inconsistencies, as well as undesirable console spew of the form: > The resource .../css/ApplicationsMenu.css was preloaded using link > preload but not used within a few seconds from the window's load > event. Please make sure it has an appropriate `as` value and it is > preloaded intentionally. To fix this, we might be able to add a second, non-`preload`-ing `link` tag, but that would defeat the purpose of our original change, which was to improve our Lighthouse metrics. So, reverting this for now. We might revisit `preload` for this or some other purpose in the future. Original PR: #632
wincent
added a commit
that referenced
this issue
Sep 17, 2020
revert: feat(css-loader): use preload when available (#631)
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
In service of LPS-115876, the idea is to have the css-loader emit:
tags instead of:
ones.
As noted here:
In practice, we don't expect this to make page loads perceptibly faster, but it should at least avoid Lighthouse reporting onload events as delayed.
Related community Slack discussion: https://liferay-community.slack.com/archives/CB2QQ3M5F/p1598598237007500
The text was updated successfully, but these errors were encountered: