资产在GatsbyJS项目中加载速度非常慢（Netlify托管）

Question

我正在开发我的第一个GatsbyJS项目（并在Netlify上托管），并且在过去几周内已经注意到在开发过程中一切都非常快速，但是当构建和托管时，页面非常加载速度慢（特别是图像）。

这是一个非常简单的营销网站（每页只有6个页面，每页只有几张图片），所以我认为我必须做错事，因为Gatsby据说是“超快”，这绝对不是我的生产经历。登陆页面目前需要大约40秒才能加载，并且只有少量图像和导航栏。

我正在简单地加载图片https://musing-goldstine-2f7024.netlify.com/，但是我还应该做一些优化步骤吗？或者将资产存储在Gatsby的特定位置以进行优化？

最新版本：drawing vertical line with factor levels in ggplot2

感谢您的任何信息！

Answer 1

问题是您正在提供缩放图片。缩放图像是已缩放以匹配其显示大小的图像。

例如，在此页面上：

• 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

图像优化指南

• Google Page Speed Recommendations for Optimizing Images

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

Answer 2

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

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