You are here:  Home » PHP » 如何在WordPress中轻松添加延迟加载视频

视频非常适合改善用户对您网站的参与度。但是,嵌入视频的一个缺点是它会减慢您的网站速度。在本文中,我们将向您展示如何为WordPress中的视频添加延迟加载并提高页面速度。

视频的延迟加载如何工作?

Lazy Loading for Videos

想知道什么是延迟加载,它是如何工作的?

当您在网站上嵌入视频时,您需要添加其他外部脚本和需要加载的文件。由于需要加载更多内容,因此您的网站加载速度较慢。

视频延迟加载会使用可点击的预览图像替换嵌入的Youtube和Vimeo视频。当访问者点击图像时,它会加载并播放视频。

由于图像的大小比视频小很多,因此延迟加载技术可以显着提高页面速度。

现在你了了解优势,让我们来看看如何在WordPress中加载YouTube和Vimeo视频。

视频教程

订阅WPBeginner

如果您不喜欢该视频或需要更多说明,请继续阅读。

如何在WordPress中为视频添加延迟加载

您需要做的第一件事就是安装并激活Lazy加载视频插件

这个插件开箱即用,你不需要编辑任何延迟加载的jQuery脚本或任何代码。

要看到你的延迟加载工作,所有你需要做的是查看包含YouTube或Vimeo视频的帖子或页面。您会注意到默认播放器被视频缩略图播放按钮取代。

A lazy load video with thumbnail and play button

当您单击图像时,它将加载视频并播放它。

加载视频时可能会有轻微的第二次(可忽略的)延迟,因此请不要认为延迟加载不起作用。

即使此插件开箱即用,仍然可以根据需要配置设置

在帖子编辑器屏幕上,您可以选择YouTube视频嵌入的缩略图质量。

Controlling YouTube thumbnail  quality for posts and pages

除了缩略图质量之外,如果您转到设置»视频的延迟加载,还有其他自定义选项可用。

Settings page for lazy load for videos WordPress plugin

在常规设置选项卡上,您可以自定义视频缩略图的外观。您可以启用响应模式,选择播放按钮样式,使用自定义CSS,甚至启用schema.org标记。

此插件同时支持YouTube和Vimeo。您可以通过单击相应的选项卡找到提供程序特定的设置。

在YouTube标签上,您可以选择颜色,缩略图质量,禁用相关视频和注释等。您甚至可以停用YouTube视频的延迟加载。

Lazy load for YouTube settings

同样,在Vimeo设置选项卡上,您可以选择控件颜色,隐藏或显示视频标题,以及禁用Vimeo视频的延迟加载。

Lazy load for Vimeo

就这样。我们希望这篇文章可以帮助您为WordPress中的视频添加延迟加载。

为了进一步提高网站的速度,您需要使用W3 Total Cache插件设置WordPress CDN解决方案。

如果您喜欢这篇文章,请订阅我们的YouTube频道WordPress视频教程。您也可以在Twitter和Google+上找到我们。