Include “critical styles” in SSR output #392
Comments
|
Why isn’t css pushed?
…Sent from my iPhone
On Oct 19, 2017, at 9:27 PM, Adam L Barrett ***@***.***> wrote:
I see a significant delay from when the HTML is sent to the client, and when the CSS arrives (when artificially throttling the network with Chrome tools at least).
The render is blocked until the CSS arrives, which undoes a big portion of the super performance gains of SSR.
*Is there a way, to determine the CSS needed to render, and push it in with the HTML in a style tag?
Maybe as an MVP we could just put the whole stylesheet in a style tag, see what that looks like?
Possible tools to look at for implementation ideas:
https://github.com/addyosmani/critical-path-css-tools
—
You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub, or mute the thread.
|
|
My example was not using HTTP/2. Yeah, maybe it's a non-issue if using PUSH and HTTP/2. I guess we can close this. |
|
Need to configure steal-bundle-manifest with your app to use push. |
|
This is a valid optional enhancement though. Not sure how to really do it, you wouldn't want to inline the entire main css bundle most likely. |
chasenlehara
changed the title
|
In the following video @matthewp mentions that style https://youtu.be/kx-JxYSWlEc?t=1510 However, I recently read this article that explains the blocking is when any async JavaScript comes after a style https://csswizardry.com/2018/11/css-and-network-performance/ So that might be what you're actually seeing. Just thought I'd add this here. EDIT: The same article goes into more depth than I realized and talks about new browsers optimizing for
<html>
<head>
<link rel="stylesheet" href="core.css" />
</head>
<body>
<link rel="stylesheet" href="site-header.css" />
<header class="site-header">
<link rel="stylesheet" href="site-nav.css" />
<nav class="site-nav">...</nav>
</header>
<link rel="stylesheet" href="content.css" />
<main class="content">
<link rel="stylesheet" href="content-primary.css" />
<section class="content-primary">
<h1>...</h1>
<link rel="stylesheet" href="date-picker.css" />
<div class="date-picker">...</div>
</section>
<link rel="stylesheet" href="content-secondary.css" />
<aside class="content-secondary">
<link rel="stylesheet" href="ads.css" />
<div class="ads">...</div>
</aside>
</main>
<link rel="stylesheet" href="site-footer.css" />
<footer class="site-footer">
</footer>
</body>And links to this other article about it: https://jakearchibald.com/2016/link-in-body/ BTW, here's Google's recommendations on implementing critical path: |
I see a significant delay from when the HTML is sent to the client, and when the CSS arrives (when artificially throttling the network with Chrome tools at least).
The render is blocked until the CSS arrives, which undoes a big portion of the super performance gains of SSR.
Is there a way, to determine the CSS needed to render, and push it in with the HTML in a style tag?
It might look something like:
<link>tag and added to the browser. Some browsers won't block rendering for link tags inside of the body.Possible tools to look at for implementation ideas:
https://github.com/addyosmani/critical-path-css-tools
The text was updated successfully, but these errors were encountered: