资产在 GatsbyJS 项目（Netlify 托管）中加载速度非常慢
Assets very slow to load in GatsbyJS project (Netlify hosted)
我正在处理我的第一个 GatsbyJS 项目（并托管在 Netlify 上），在过去的几周里，我注意到开发过程中的一切都非常快，但是在构建和托管时，页面 非常 加载缓慢（尤其是图像）。
这是一个非常简单的营销网站（只有 6 页左右，每页有几张图片），所以我想我一定是做错了什么，因为据说 Gatsby 是 "blazing-fast"，那就是绝对不是我在产品方面的经验。着陆页目前需要大约 40 秒才能加载，并且只有几张图片和一个导航栏。
我加载图像相当简单 per the docs，但是我还应该做一些优化步骤吗？或者将资产存储在特定位置以供 Gatsby 优化？
最新版本：https://musing-goldstine-2f7024.netlify.com/
感谢您提供任何信息！
问题是您提供的是缩放图像。缩放图像是经过缩放以匹配其显示尺寸的图像。
例如，在这个页面上：
This cityscape 在 HTML 或 CSS 中从 3840x1200 调整为 1366x600。提供缩放图像可以节省 5.0MiB（减少 82%）。
- 要跟踪这个：在 Mac
上打开 Chrome 开发者工具（CMD + OPT + I）
- 导航到网络选项卡，CMD + R 刷新
- 您可以按大小、加载时间等排序
Chrome Developer Tools Network Tab on this site
另一个分析网页速度的好网站：
https://gtmetrix.com/
要缩短页面加载时间：
使用照片编辑器（Photoshop、GIMP 等）并将照片尺寸调整为最大显示尺寸。
调整大小后，压缩图像以进一步缩短页面加载时间。
图片压缩资源：
- NPM 包如sharp
- 命令行工具：ImageMagick
- 在浏览器中：Optimizilla
图像优化指南
最后一步： 用新优化的图像替换未优化的图像。您应该会看到页面加载时间有了显着改善。
使用 Netlify，您现在可以转到要优化的站点，然后：站点设置 > 构建和部署 > Post 处理。
我将它们全部打开，它们似乎与我的 GatsbyJS 网站完美配合，包括图像优化。
我正在处理我的第一个 GatsbyJS 项目（并托管在 Netlify 上），在过去的几周里，我注意到开发过程中的一切都非常快，但是在构建和托管时，页面 非常 加载缓慢（尤其是图像）。
这是一个非常简单的营销网站（只有 6 页左右，每页有几张图片），所以我想我一定是做错了什么，因为据说 Gatsby 是 "blazing-fast"，那就是绝对不是我在产品方面的经验。着陆页目前需要大约 40 秒才能加载，并且只有几张图片和一个导航栏。
我加载图像相当简单 per the docs，但是我还应该做一些优化步骤吗？或者将资产存储在特定位置以供 Gatsby 优化？
最新版本：https://musing-goldstine-2f7024.netlify.com/
感谢您提供任何信息！
问题是您提供的是缩放图像。缩放图像是经过缩放以匹配其显示尺寸的图像。
例如，在这个页面上：
This cityscape 在 HTML 或 CSS 中从 3840x1200 调整为 1366x600。提供缩放图像可以节省 5.0MiB（减少 82%）。
- 要跟踪这个：在 Mac 上打开 Chrome 开发者工具（CMD + OPT + I）
- 导航到网络选项卡，CMD + R 刷新
- 您可以按大小、加载时间等排序
Chrome Developer Tools Network Tab on this site
另一个分析网页速度的好网站： https://gtmetrix.com/
要缩短页面加载时间：
使用照片编辑器（Photoshop、GIMP 等）并将照片尺寸调整为最大显示尺寸。
调整大小后，压缩图像以进一步缩短页面加载时间。
图片压缩资源：
- NPM 包如sharp
- 命令行工具：ImageMagick
- 在浏览器中：Optimizilla
图像优化指南
最后一步： 用新优化的图像替换未优化的图像。您应该会看到页面加载时间有了显着改善。
使用 Netlify，您现在可以转到要优化的站点，然后：站点设置 > 构建和部署 > Post 处理。
我将它们全部打开，它们似乎与我的 GatsbyJS 网站完美配合，包括图像优化。