javascript - 如何最小化登陆页面的加载时间

Question

老实说，我很困惑从哪里开始才能最大限度地减少我正在构建的网站的加载时间 - https://projectrhea.herokuapp.com/ .目前需要大约 9 秒来加载我想尝试的网站，并将其缩短到不到 3 秒。

我已经完成了诊断测试，如图所示 https://www.webpagetest.org/result/171113_T2_851758db144ac117ab4e986a3798b1b5/1/details/#waterfall_view_step1 .

据我所知，加载需要一段时间的主要原因有以下三个。

• 首先是javascript。

  我只需要少量它来运行网站，但我非常对如何将我需要的代码与我不需要的代码分开感到困惑需要。我将它用于横幅以在下方显示多个短语我宁愿保留的旗帜。

• 第二部分是我从中绘制的 CSS 文件的剪切量。

  我使用了一个模板来开始这个网站(这是我学习的好方法如何设计网站)。现在我认为这意味着也有办法许多 css 和其他文件连接到此着陆页。

• 第三部分是我的视频文件。

  我很想保留这个视频，因为我喜欢它适合网站的方式。我会尽量减少解决上述问题后的文件大小。

这是我第一次实时尝试解决这样的问题，我真的很感激更有经验的编码人员可以为此提供知识。谢谢!

Answer 1

使用以下自动化工具:

• https://developers.google.com/speed/pagespeed/
• https://gtmetrix.com/
• Chrome 的灯塔

---

1. 优化图片尺寸和质量。 (上面的自动化工具为您提供优化的图像)
2. 将您的 CSS 文件放在引导文件的开头，例如 index.html
   • 压缩 CSS 文件(删除格式)
3. 将您的 JS 文件放在文件的底部。
   • 压缩 JS 文件(去除格式)