You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
(Reposting as an issue because I sent directly to discussions, forgetting that we want them to flow through issues first. TY for patience with all my recent PRs and feature requests.)
The current font optimization logic definitely saves the client a step when using Google Fonts—needing only to pull font data directly from fonts.gstatic.com, no need to load stylesheets from fonts.googleapis.com, which are injected directly into the page—but it still blocks the render because the embedded styles are not deferred.
The defer attribute should be applied to all embedded <style> attributes; <script> elements are properly marked defer and do not block render based on the output I have reviewed.
Default to lang="en" for <Html> component over undefined. Templates are English by default, so this is an appropriate default.
Resolve issues related to testing a local development version of the Next.js CLI.
I would implement these optimization changes myself and send a PR in (which I tried to get started on), except nondeterministic behavior occurs when running next build where "next": "/path/to/development/next" is set in package.json, and it was impossible to develop locally and live-test features related to production optimization.
Making these changes (currently by manually modifying the output, since a local dev version of the CLI cannot run next build on my machine, see 5 above), I was able to get a perfect Lighthouse score for the default starter (though there are design bugs present which break the viewport on small screens and could be fixed while we're "in the area", see #24709).
The text was updated successfully, but these errors were encountered:
Describe the feature you'd like to request
(Reposting as an issue because I sent directly to discussions, forgetting that we want them to flow through issues first. TY for patience with all my recent PRs and feature requests.)
The current font optimization logic definitely saves the client a step when using Google Fonts—needing only to pull font data directly from
fonts.gstatic.com, no need to load stylesheets fromfonts.googleapis.com, which are injected directly into the page—but it still blocks the render because the embedded styles are not deferred.The
deferattribute should be applied to all embedded<style>attributes;<script>elements are properly markeddeferand do not block render based on the output I have reviewed.Originally posted by @ctjlewis in #27866
Describe the solution you'd like
Remove unnecessary
<link data-href="...">tags following optimization.All
<style>tags, including those emitted by font optimization, should be markeddeferto avoid blocking the first paint.Nodes which render
<link>elements should also be optimized. Currently only direct<link>elements are modified.3.1. Add
<GoogleFont>component tonext/head: https://gist.github.com/ctjlewis/1a9ee9cac89b8b87fc97c02c28f0f2d0Default to
lang="en"for<Html>component overundefined. Templates are English by default, so this is an appropriate default.Resolve issues related to testing a local development version of the Next.js CLI.
I would implement these optimization changes myself and send a PR in (which I tried to get started on), except nondeterministic behavior occurs when running
next buildwhere"next": "/path/to/development/next"is set in package.json, and it was impossible to develop locally and live-test features related to production optimization.See: Contributing: Local
next buildfailing #27826Results
Making these changes (currently by manually modifying the output, since a local dev version of the CLI cannot run
next buildon my machine, see 5 above), I was able to get a perfect Lighthouse score for the default starter (though there are design bugs present which break the viewport on small screens and could be fixed while we're "in the area", see #24709).The text was updated successfully, but these errors were encountered: