Html 加快网站视频加载时间的技巧

我正在完成一个网站，为我的业务，并坚持在这个视频加载部分。我的文件大约是70mb，是背景视频。它需要一个良好的15-30秒加载后，进入网站，这是非常令人沮丧的，然后一旦它确实加载它滞后的大部分时间。在电话里，我根本无法让它播放

这是一个HTML模板，我加入了网站附带的视频（10mb），它可以立即播放和加载。然而，当搜索大小时，大多数人说100-200MB应该没问题，没有问题

有人有什么建议吗

这是我的网站：

这是我的视频嵌入代码

'''

---

''

您头版上的图像和视频重量为170MB！ 这对于快速加载页面来说太过分了

缩小图像大小 我以photo001.jpg为例：它的重量为1.62MB，分辨率为2686x2850px

考虑到它在网站上以510x541px的速度显示，您可以将其还原为此大小，并对其进行压缩。我使用了很多应用程序，但是很多应用程序都可以完成这项工作。调整/优化后，此图像的权重仅为24KB

服务器带宽问题 关于视频，存在带宽问题。即使使用1GBps光纤连接，您的服务器也将以最高500kbps的速度传送视频（我在法国，如果您住在离服务器较近的地方，速度可能会更快）

让我们来看看你的Quickreel视频：重量57MB，持续23秒。以500kbps的速度传输大约需要两分钟。这就是为什么你有这么多的滞后：你正在使用的服务器无法跟上

压缩视频 您可以降低分辨率（考虑到页面上视频的大小，720p应该足够了），然后使用类似于的软件进行压缩。我能够将这个视频的大小减少到~3MB

使用正确的图像格式

---

您的一些图像（例如nick.png）使用png格式。这是一种非常好的格式，可以保存插图或任何一种以纯色为主的图像，但是太重了，无法保存照片。使用JPG、调整大小和压缩来缩小它们的大小。

阅读更多论坛，我没有读到关于大小合适的自相矛盾的说法。其他人会建议使用5-10mb的文件而不是40+的文件吗？这会有多大帮助？

<section id="home" class="notoppadding text-light videobg-section"
                     data-videofile="files/uploads/coffee"
                     data-videowidth="1280"
                     data-videoheight="720"
                     data-videoposter="files/uploads/1690x1100.jpg"
                     data-videoparallax="true"
                     data-videooverlaycolor="#000000"
                     data-videooverlayopacity="0.6"
                    data-sound="false">
    <div class="section-inner">