如何最小化目标网页的加载时间

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文件放在bootstrapping文件的开头，例如index.html
   • 压缩CSS文件（删除格式）
3. 将您的JS文件放在文件的底部。
   • 压缩JS文件（删除格式）

Answer 2

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

Answer 3

好好开始 -

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

如果你显然可以删除所有你不需要的工具来做这件事，但实际上这是一项艰巨的任务，特别是如果它是一个模板

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

How to make a loading image when loading HTML5 video?

Answer 4

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

  

第一个是javascript。

     

我只需要少量它来运行网站，但我非常   混淆了如何从我不需要的代码中分离出我需要的代码   需要。我用它来横幅显示下面的多个短语   我宁愿保留的横幅。

你的JS文件没有缩小。请确保按照AnteJablanAdamović的建议缩小您的js文件和订单。

  

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

     

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

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

对于JS和CSS的缩小和组合，您可以使用gulp。 https://github.com/gulpjs/gulp

  

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

     

我很想保留这段视频，因为我喜欢它的视频   现场。在我解决之后，我会尽量减小文件大小   以上问题。

我可以看到你通过S3提供一些资源。看看您是否可以将视频移动到S3并通过cloudfront提供服务。

Answer 5

1. 您的css越大，页面加载的时间就越长。因此，尝试减少/缩小css并尝试在单个文件中使用css。与JS相同

2. 对图像使用延迟加载，以便在不调用图像的情况下快速显示网页。

3. 确保服务器正在使用keep-alive，因为它可以真正影响服务器满足请求的方式。

4. 启用gzip压缩

5. 最小化页面重定向，因为它会影响页面速度

6. 启用浏览器缓存，以便您的浏览器可以加载页面，而无需向服务器发送其他HTTP请求。