perf: fix render-blocking CSS and font display#930
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
PR SummaryLow Risk Overview Both templates now load Reviewed by Cursor Bugbot for commit 09ba17a. Bugbot is set up for automated code reviews on this repo. Configure here. |
|
@moshams272 is attempting to deploy a commit to the OpenJS Foundation Team on Vercel. A member of the Team first needs to authorize it. |
![cursor[bot]](https://avatars.githubusercontent.com/in/1210556?s=60&v=4){kind=small}
There was a problem hiding this comment.
Cursor Bugbot has reviewed your changes using default effort and found 1 potential issue.
❌ Bugbot Autofix is OFF. To automatically fix reported issues with cloud agents, enable autofix in the Cursor dashboard.
Want fixes drafted automatically? Bugbot Autofix can create code changes for findings. A team admin can enable Autofix in the Cursor dashboard.
Reviewed by Cursor Bugbot for commit 09ba17a. Configure here.
| <link rel="preload" href="${root}styles.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> | ||
| <noscript> | ||
| <link rel="stylesheet" href="${root}styles.css"> | ||
| </noscript> |
There was a problem hiding this comment.
Async critical CSS causes FOUC
Medium Severity
The main stylesheets (styles.css / assets/style.css) are loaded with the non-blocking rel="preload" pattern, but no critical CSS is inlined. That pattern is meant for non-critical CSS; applying it to the sole layout stylesheet lets the page paint unstyled, then snap into place when CSS arrives. This undoes the existing theme FOUC guards and can also shift layout-dependent behavior such as sidebar scrolling.
Additional Locations (1)
Reviewed by Cursor Bugbot for commit 09ba17a. Configure here.
There was a problem hiding this comment.
We can use library critters, WDUT?!
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #930 +/- ##
=======================================
Coverage 84.89% 84.89%
=======================================
Files 193 193
Lines 17512 17512
Branches 1551 1551
=======================================
Hits 14867 14867
Misses 2639 2639
Partials 6 6 ☔ View full report in Codecov by Harness. 🚀 New features to boost your workflow:
|
| <link | ||
| rel="preload" | ||
| href="assets/style.css" | ||
| as="style" | ||
| onload=" | ||
| this.onload = null; | ||
| this.rel = 'stylesheet'; | ||
| " | ||
| /> | ||
| <noscript> | ||
| <link rel="stylesheet" href="assets/style.css" /> | ||
| </noscript> |
There was a problem hiding this comment.
IMO we shouldn't mix CSS and JavaScript in this way. CSS shouldn't rely on the JavaScript capabilities of a given machine.
Unfortunately, I think we need to just eat the perf issue. We might be able to reduce the size of CSS in doc-kit, perhaps, but I won't make you work on that, it's our fault, and not something that's particularly 'fun' or easy to fix.
There was a problem hiding this comment.
We can use library critters, It extracts the Critical CSS and inlines it directly into a <style> tag in the generated HTML. This means the initial render relies on zero client-side JS and has no render-blocking network requests, WDUT?!
There was a problem hiding this comment.
I searched on it since few hours, #930 (comment)
|
I think a better alternative to this is for us to look into improving our CSS at it's core, not ways around it's current state. Thank you anyway :-). We (doc-kit maintainers) can look into this. |
| onload=" | ||
| this.onload = null; | ||
| this.rel = 'stylesheet'; | ||
| " |
There was a problem hiding this comment.
we should preload the Google Fonts stylesheet obviously without any JavaScript, just using the standard preload/prefetch approach. I'm still surprised we're using Google Fonts instead of hosting them ourselves, but that's a separate discussion.
There was a problem hiding this comment.
Self-hosting the fonts would be the ideal solution 👀
NP, you're right, BTW. |
3 participants
Description
As shown in the attached Lighthouse performance reports, the generated HTML templates have Render-Blocking issues caused by the main
styles.cssand the Google Fonts CSS files. Furthermore, the Google Fonts lacked display=swap, causing a Flash of Invisible Text (FOIT).This PR improves performance (both web and legacy) by:
Implementing a high-performance
rel="preload"pattern: that instructs the browser to download the file with low priority. Theonloadscript flips the attribute back to stylesheet once downloading is complete, applying the styles smoothly.Using
display=swapon Google Fonts to ensure text is immediately visible with the default text till the font is downloaded, then apply that.Validation
Tested on
webpack/webpack-doc-kit.Before:
After:
Related Issues
None
Check List
node --run testand all tests passed.node --run format&node --run lint.