在 GatsbyJS 项目中加载资产非常缓慢（Netlify 托管）答案

【问题标题】：Assets very slow to load in GatsbyJS project (Netlify hosted)在 GatsbyJS 项目中加载资产非常缓慢（Netlify 托管）
【发布时间】：2018-11-24 23:40:51
【问题描述】：

我正在开发我的第一个 GatsbyJS 项目（并托管在 Netlify 上），过去几周我注意到在开发过程中一切都非常迅速，但在构建和托管页面时非常加载缓慢（尤其是图片）。

这是一个非常简单的营销网站（只有 6 页左右，每页有几张图片），所以我认为我一定做错了，因为据说 Gatsby 是“极速”的，这绝对不是我在产品方面的经验。着陆页目前加载大约需要 40 秒，并且只有几张图片和一个导航栏。

我正在相当简单地加载图像per the docs，但是我还应该做一些优化步骤吗？还是将资产存储在特定位置供 Gatsby 优化？

感谢您提供任何信息！

【问题讨论】：

【解决方案1】：

使用 Netlify，您现在可以转到要优化的站点，然后：站点设置 > 构建和部署 > 后期处理。

我将它们全部打开，它们似乎与我的 GatsbyJS 网站完美配合，包括图像优化。

【讨论】：

【解决方案2】：

问题在于您提供的是缩放图像。缩放图像是经过缩放以匹配其显示尺寸的图像。

例如，在这个页面上：

This cityscape 在 HTML 或 CSS 中从 3840x1200 调整为 1366x600。提供缩放图像可以节省 5.0MiB（减少 82%）。
- 要对此进行跟踪：在 Mac 上打开 Chrome 开发者工具 (CMD + OPT + I)
- 导航到网络选项卡，CMD + R 刷新
- 您可以按大小、加载时间等进行排序。

另一个分析页面速度的好网站： https://gtmetrix.com/

改善页面加载时间：

图片压缩资源：

图像优化指南

最后一步：用新优化的图像替换未优化的图像。您应该会看到页面加载时间显着改善。

【讨论】：