网页嵌入youtube视频后打开速度变慢怎么办?

有时候我们需要将youtube视频嵌入到网页中来丰富的我们的网站内容，但随之也会出现网页加载速度变慢的问题。

导致网页打开速度变慢的原因是因为当我们打开网站页面时，嵌入的youtube视频资源也会同时进行加载，这就不可避免的拖慢了整个网页的打开速度，尤其是当视频资源太大时，会严重影响到我们网页的加载速度。此时，我们可以通过延缓youtube视频加载的方法来降低其对网页打开速度的影响。

解决方法：使用Facade延迟加载youtube视频

Facade采用的是一种交互式的延迟加载策略，主要分为三个阶段：

① 当页面加载时，youtube视频资源不会直接被加载，而是被Facade静态代码所替代，直观上看网页没有任何变化，但实际上视频并没有被加载，而是被一张静态图片替代。

② 当鼠标移动到youtube视频上面时，Facade会链接到youtube视频资源。

③ 当鼠标点击视频画面时，Facade会被youtube视频资源所代替，并开始加载视频。

即在用户需要观看视频的时候才进行加载，这样不仅可以降低网站内部损耗，提升网页打开速度，而且也不会影响到用户的体验。

Facade延迟加载youtube视频操作方法：

将原有的youtube视频嵌套代码替换成以下代码：

<link rel="stylesheet" href="https://paulirish.github.io/lite-youtube-embed/src/lite-yt-embed.css" />
<lite-youtube videoid="youtube视频ID" playlabel="Play: Keynote (Google I/O ’18)"></lite-youtube>
<script src="https://paulirish.github.io/lite-youtube-embed/src/lite-yt-embed.js"></script>

如果我们栏目中需要添加视频的频率比较高，比如视频栏目，我们可以将css和js代码直接添加到公共头部，这样每次新增的页面需要添加视频时直接需要添加中间那行代码即可。

通过Facade方式操作之后，我们再来看下页面的打开速度。

延伸：除了嵌入youtube视频之外，像其它的一些第三方资源比如社交媒体，聊天工具等也可以使用Facade模式来提升网站打开速度,在了解其工作原理之后，我们也可以自己编写Facade，当然技术方面要求会比较高一些。