使用 Netlify 和 Gatsby 减少初始服务器响应时间

Posted 2023-03-08

【中文标题】使用 Netlify 和 Gatsby 减少初始服务器响应时间

【英文标题】：Reduce initial server response time with Netlify and Gatsby

【发布时间】：2020-11-03 18:10:51

【问题描述】：

我在我的网站上运行PageSpeed Insights，有时我遇到的一个大错误是

减少初始服务器响应时间

保持主文档的服务器响应时间短，因为所有 其他请求取决于它。了解更多。

React 如果您在服务器端渲染任何 React 组件，请考虑 使用renderToNodeStream() 或renderToStaticNodeStream() 允许 客户端接收和水合标记的不同部分 而不是一次全部。了解更多。

我查了renderToNodeStream() 和renderToStaticNodeStream()，但我真的不明白它们如何与 Gatsby 一起使用。

看起来像problem others are having also

域名是https://suddenlysask.com如果你想看的话

我的 DNS 记录

【问题讨论】：

我认为gatsby-plugin-offline 实际上可能对此有所帮助。如果服务器可以离线响应，那么它可以尽快响应，但如果它不能，那么这将导致一些延迟。只是猜测。

This is a useful post 对于任何试图提高盖茨比灯塔分数的人

你在哪里得到了这个？

@JohnathanCoker 我从未解决的问题之一

【参考方案1】：

在非***域上使用 CNAME 记录。通过使用裸/顶点域，您可以绕过 CDN 并强制所有请求通过负载均衡器。这意味着您最终会使用一个 IP 地址来服务所有请求（同时连接较少），服务器在没有缓存的情况下代理内容，并且与用户的距离可能更远。

编辑：另外，您的 html 文件超过 300KB。那是淫秽。看起来你在其中包含了两次 Bootstrap，你一遍又一遍地重复相同的内联 <style> 标记，选择器哈希略有不同，并且你有大量（未使用的）实用程序类。如果可能，您只想内联关键 CSS；如果您不能对其进行 treeshake，则从外部文件中提供其余部分。

【讨论】：

我其实不知道为什么会有那么多重复的课程，基本上都是一样的，我一直以为他们真的很烦人，但我觉得他们只是因为盖茨比什么的而不得不在那里。这两个引导程序可能是因为我有 React-bootstrap，我不确定我是否也有常规引导程序，但我会检查一下。

您能否改写“如果可能，您只想内联关键 CSS”。我不确定您是要使用内联 css 还是不要使用内联 css

在 CSS in JS 解决方案之前，大多数网站都将 CSS 放在外部文件中。这有利于缓存，因为任何共享样式都可以跨页面使用，而无需将任何额外数据传输到浏览器，但这意味着浏览器必须在第一个页面视图上加载所有 CSS。为了进行优化，初始绘制所需的样式（想想折叠内容）可以直接放入 HTML 文件中的样式标记中，使它们在浏览器解析文件时立即可用。

对于其他阅读此插件的人来说，插件gatsby-plugin-purgecss 几乎可以毫不费力地摆脱未使用的 css，尽管如果您使用包 react-bootstrap 那么这将摆脱一些类您实际上是在使用样式。

你能解释一下如何做到这一点Use a CNAME record on a non-apex domain 吗？

【参考方案2】：

这个行为是出乎意料的，我运行了您网站的 pagespeed 洞察，它在第一次测试时给了我一个警告，初始响应时间为 0.74 秒。然后我使用我的开发工具查看文档根目录的初始响应时间，大约在 300 到 400 毫秒之间。于是我又做了一次pagespeed测试，响应是140ms。测试通过了。之后是 120 毫秒。 见附图。

我完全认为网站没有问题。不过，如果您想尝试，我会建议您更改服务器或主机一次，尝试不同的东西。我不知道您现在部署站点的服务器类型。你可以试试 AWS S3 和 CloudFront，对我来说效果很好。

【讨论】：

我使用 Netlify 和 Github。 Netlify 做 s-s-r，文件都存储在 Github 上

一次尝试切换到 S3。测试它是如何工作的，不要完全切换。只需将您的构建部署到 s3 一次。添加云端并测试响应。我认为这个问题会得到解决。