使用 Netlify 和 Gatsby 减少初始服务器响应时间
Posted
技术标签:
【中文标题】使用 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 一次。添加云端并测试响应。我认为这个问题会得到解决。以上是关于使用 Netlify 和 Gatsby 减少初始服务器响应时间的主要内容,如果未能解决你的问题,请参考以下文章
部署在 Netlify 上的 Gatsby 站点未更新来自 graphcms 的数据
Gatsby 和 Netlify CMS 预览错误与渲染 StaticQuery
在 Netlify 上部署 gatsby 站点时响应错误的大小图像
Gatsby + contentful + Netlify 的私人/登录部分