如何最小化登陆页面的加载时间
How to minimize load time of a landing page
老实说，我很困惑从哪里开始才能最大限度地减少我正在构建的网站的加载时间 - https://projectrhea.herokuapp.com/。目前需要大约 9 秒来加载我想尝试的网站，并将其缩短到 3 秒以下。
我已经完成了诊断测试，如图所示 https://www.webpagetest.org/result/171113_T2_851758db144ac117ab4e986a3798b1b5/1/details/#waterfall_view_step1。
据我所知，加载需要一段时间的主要原因有以下三个。
第一个是javascript。
我只需要少量的 运行 这个网站，但我非常
对如何将我需要的代码与我不需要的代码分开感到困惑
需要。我将它用于横幅以在下方显示多个短语
我宁愿保留的旗帜。
第二部分是我从中绘制的 CSS 个文件的剪切量。
我使用模板开始了网站（这是我学习的好方法
如何设计网站）。现在我认为这意味着也有办法
许多 css 和其他文件连接到此登录页面。
第三部分是我有的视频文件。
我很想保留这个
视频，因为我喜欢它适合网站的方式。我会尽量减少
我解决了上述问题后的文件大小。
这是我第一次实时尝试解决这样的问题，我非常感谢更有经验的编码员可以为此提供知识。谢谢！
将您的 css 导入放在页面顶部，并在 html 正文结束后导入您的 javascript。
开始吧 -
将 css 放在顶部，考虑在页面加载后使用 js 加载器加载 js。
如果您显然可以删除不需要的所有内容，他们是执行此操作的工具，但实际上这是一项艰巨的任务，尤其是如果它是模板的话
最后通过视频获得第一帧的图像，在页面加载时显示图像而不是视频。
How to make a loading image when loading HTML5 video?
正在尝试解决您提出的具体问题。
The first is the javascript.
I only need a small amount of it to run the site but I am very
confused about how to separate the code I need from the code I don't
need. I use it for the banner to show multiple phrases underneath the
banner that I would rather keep.
您的 JS 文件没有缩小。请确保您按照 Ante Jablan Adamović 的建议缩小您的 js 文件和顺序。
The second part is the shear amount of CSS files I'm drawing from.
I used a template to begin the site (it was a good way for me to learn
how to design the site). Now I think this has meant there is way too
many css and other files connected to this landing page.
您应该合并并缩小所有 CSS 个文件。
对于 JS 和 CSS 的缩小和组合，您可以使用 gulp。
https://github.com/gulpjs/gulp
The third part is the video file I have.
I would love to keep this video as I just like how it fits in the
site. I'll try and minimize the file size after I have worked out the
above issues.
我看到您正在通过 S3 提供一些资源。看看您是否可以将您的视频也移动到 S3 并通过云端提供。
使用以下自动化工具：
- 优化图像尺寸和质量。 （以上自动化工具为您提供优化后的图片）
- 将您的 CSS 文件放在引导文件的开头，例如 index.html
- 压缩 CSS 个文件（删除格式）
- 将您的 JS 文件放在文件的底部。
- 压缩JS文件（去掉格式）
您的 css 越大，页面加载时间就越长。所以尝试 reduce/minify css 并尝试在单个文件中使用 css 。 JS也一样
对图片使用延迟加载，无需调用图片即可快速显示网页。
确保服务器正在使用 keep-alive，因为它会真正影响服务器完成请求的方式。
启用 gzip 压缩
尽量减少页面重定向，因为它会影响页面速度
启用浏览器缓存，这样您的浏览器就可以加载页面，而无需向服务器发送另一个 HTTP 请求。
老实说，我很困惑从哪里开始才能最大限度地减少我正在构建的网站的加载时间 - https://projectrhea.herokuapp.com/。目前需要大约 9 秒来加载我想尝试的网站，并将其缩短到 3 秒以下。
我已经完成了诊断测试，如图所示 https://www.webpagetest.org/result/171113_T2_851758db144ac117ab4e986a3798b1b5/1/details/#waterfall_view_step1。
据我所知，加载需要一段时间的主要原因有以下三个。
第一个是javascript。
我只需要少量的 运行 这个网站，但我非常 对如何将我需要的代码与我不需要的代码分开感到困惑 需要。我将它用于横幅以在下方显示多个短语 我宁愿保留的旗帜。
第二部分是我从中绘制的 CSS 个文件的剪切量。
我使用模板开始了网站（这是我学习的好方法 如何设计网站）。现在我认为这意味着也有办法 许多 css 和其他文件连接到此登录页面。
第三部分是我有的视频文件。
我很想保留这个 视频，因为我喜欢它适合网站的方式。我会尽量减少 我解决了上述问题后的文件大小。
这是我第一次实时尝试解决这样的问题，我非常感谢更有经验的编码员可以为此提供知识。谢谢！
将您的 css 导入放在页面顶部，并在 html 正文结束后导入您的 javascript。
开始吧 -
将 css 放在顶部，考虑在页面加载后使用 js 加载器加载 js。
如果您显然可以删除不需要的所有内容，他们是执行此操作的工具，但实际上这是一项艰巨的任务，尤其是如果它是模板的话
最后通过视频获得第一帧的图像，在页面加载时显示图像而不是视频。
How to make a loading image when loading HTML5 video?
正在尝试解决您提出的具体问题。
The first is the javascript.
I only need a small amount of it to run the site but I am very confused about how to separate the code I need from the code I don't need. I use it for the banner to show multiple phrases underneath the banner that I would rather keep.
您的 JS 文件没有缩小。请确保您按照 Ante Jablan Adamović 的建议缩小您的 js 文件和顺序。
The second part is the shear amount of CSS files I'm drawing from.
I used a template to begin the site (it was a good way for me to learn how to design the site). Now I think this has meant there is way too many css and other files connected to this landing page.
您应该合并并缩小所有 CSS 个文件。
对于 JS 和 CSS 的缩小和组合，您可以使用 gulp。 https://github.com/gulpjs/gulp
The third part is the video file I have.
I would love to keep this video as I just like how it fits in the site. I'll try and minimize the file size after I have worked out the above issues.
我看到您正在通过 S3 提供一些资源。看看您是否可以将您的视频也移动到 S3 并通过云端提供。
使用以下自动化工具：
- 优化图像尺寸和质量。 （以上自动化工具为您提供优化后的图片）
- 将您的 CSS 文件放在引导文件的开头，例如 index.html
- 压缩 CSS 个文件（删除格式）
- 将您的 JS 文件放在文件的底部。
- 压缩JS文件（去掉格式）
您的 css 越大，页面加载时间就越长。所以尝试 reduce/minify css 并尝试在单个文件中使用 css 。 JS也一样
对图片使用延迟加载，无需调用图片即可快速显示网页。
确保服务器正在使用 keep-alive，因为它会真正影响服务器完成请求的方式。
启用 gzip 压缩
尽量减少页面重定向，因为它会影响页面速度
启用浏览器缓存，这样您的浏览器就可以加载页面，而无需向服务器发送另一个 HTTP 请求。