如何最小化着陆页的加载时间答案

【问题标题】：How to minimize load time of a landing page如何最小化着陆页的加载时间
【发布时间】：2017-11-13 07:34:34
【问题描述】：

我真的很困惑从哪里开始最小化我正在构建的网站的加载时间 - https://projectrhea.herokuapp.com/。目前加载我想尝试的网站大约需要 9 秒，并将其缩短到 3 秒以下。

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

首先是javascript。

我只需要少量它来运行该网站，但我非常对如何将我需要的代码与我不需要的代码分开感到困惑需要。我将它用于横幅以在下面显示多个短语我宁愿保留的横幅。
第二部分是我从中绘制的 CSS 文件的剪切量。

我使用模板开始网站（这是我学习的好方法如何设计网站）。现在我认为这意味着也有办法许多 css 和其他文件连接到这个登录页面。
第三部分是我拥有的视频文件。

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

这是我第一次实时尝试解决此类问题，我非常感谢更有经验的编码人员可以为此提供的知识。谢谢！

【问题讨论】：

我想，这个问题太宽泛了。尝试使用谷歌速度洞察并遵循其建议developers.google.com/speed/pagespeed/insights/… 首先，您应该将 css 和 js 组合成两个缩小文件。
@shukshin.ivan 我不明白为什么这会被认为是一个过于宽泛的问题，他清楚地陈述并给出了他的加载组件的统计数据。
@MichaelHolborn 是什么让您的网站如此缓慢主要是加载了两个JS 文件：mc-validate.js 和plugins.js。现在，如果您不需要 mc-validate.js，我会删除它，因为 6 秒的加载时间很长......关于 plugins.js 尝试移动到您的 <body> 标签的 END 处，将首先加载您的页面，然后开始下载。
谢谢。 MC-Validate 用于获取站点的订阅者。我将不得不找出如何让它工作而不需要 6 秒加载！

【解决方案1】：

使用以下自动化工具：

【讨论】：

【解决方案2】：

试图解决您提出的具体问题。

首先是javascript。

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

您的 JS 文件未缩小。请确保按照 Ante Jablan Adamović 的建议缩小 js 文件和顺序。

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

我使用模板开始网站（这是我学习的好方法如何设计网站）。现在我认为这意味着也有办法许多 css 和其他文件连接到这个登录页面。

您应该合并并缩小所有 CSS 文件。

为了缩小和组合 JS 和 CSS，你可以使用 gulp。 https://github.com/gulpjs/gulp

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

我很想保留这个视频，因为我喜欢它在地点。在我解决完之后，我会尝试最小化文件大小以上问题。

我可以看到您正在通过 S3 提供一些资源。看看您是否可以将视频也移动到 S3 并通过云端提供。

【讨论】：

我会尝试做这些事情。感谢您的帮助！
当然。很想知道在这些步骤之后您可以减少多少延迟。
我使用了一个 CDN，它具有 bootstrap 和 jquery 的缩小版本，已经节省了大约 2 秒。下一步是修复 mailchimp jquery 表单 - 它需要大量的加载时间，所以接下来要控制它！

【解决方案3】：

将您的 css 导入放在页面顶部，并在您的 html 正文结束后导入您的 javascript。

【讨论】：

【解决方案4】：

开始吧——

将 css 放在顶部，考虑使用 js 加载器在页面加载后加载 js。

如果您显然可以删除不需要的所有内容，那么它们是执行此操作的工具，但实际上这是一项艰巨的任务，尤其是如果它是模板

最后通过视频获取第一帧的图像，在页面加载时显示图像而不是视频。

【讨论】：

【解决方案5】：

【讨论】：