0

我们在我们的网站 (ucraft.com) 上使用标签作为动画 GIF 替代品。

在页面的顶部屏幕上有一个背景图像，上面有文本和一个号召性用语按钮。之后是另一块内容，左边是视频，右边是文字……

在该块之后，还有其他两个具有相同场景的块：标签和文本。

在移动设备（iOS 和 Chrome）上，浏览器正在等待视频自动播放，之后它只会在第一个（顶部）屏幕中显示背景图像。

因此，Lighthouse 给出了一个问题，即渲染没有很好地组织。

另一方面，网站上的用户体验很糟糕，因为用户并不真正了解该做什么，因为在加载页面的所有视频之前，图像没有被加载（这很重要）。

因此，Google 的 pagespeed 给我们的移动设备评分为 30，而台式机评分为 90。

请在此处查看 pagespeed 结果：https ://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.ucraft.com

或者您也可以在设备上打开主页并查看...

这是我们用于视频的代码：

<video  class="lazy" width="100%" height="100%" webkit-playsinline="true" autoplay muted playsinline="true" data-status="loaded" loop>
<source data-src="https://storage.googleapis.com/ucraft.com/videos/domain-homepage.mp4">
<source data-src="https://storage.googleapis.com/ucraft.com/videos/domain-homepage.webm">
</video>

我们将这段代码放入延迟加载视频中：

<script type="text/javascript">
    document.addEventListener("DOMContentLoaded", function() {
        var lazyVideos = [].slice.call(document.querySelectorAll("video.lazy"));
        lazyVideos.forEach(function(video){
            for (var source in video.children) {
                var videoSource = video.children[source];
                if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
                    videoSource.src = videoSource.dataset.src;
                }
            }

            video.load();
            video.classList.remove("lazy");
        });
    });
</script>

在视频准备好播放之前，我们是否缺少任何东西来告诉浏览器加载所有内容，包括标签和显示海报？

4

1 回答 1

0

首先，您应该按顺序使用背景颜色、背景图像和视频。用户不必等待图像或视频就能看到一些文本。

接下来，停止延迟加载您的视频！浏览器在延迟视频加载方面已经做得很好。改变它不是你的责任。

最后，您的视频中没有海报。不确定您是否打算在那里使用一个，但既然您在问题中提到了它，我想我会指出它。

于 2018-11-29T14:36:40.813 回答