Мы используем тег для замены анимированного GIF на нашем сайте (ucraft.com).
В верхней части страницы есть фоновое изображение, на котором у нас есть текст и вызовк действию кнопка.После этого есть еще один блок контента, где у нас есть видео слева и текст справа ...
После этого блока есть еще 2 блока с таким же сценарием: тег и текст.
На мобильных устройствах (iOS и Chrome) браузер ожидает автозапуска видео, после чего ТОЛЬКО он показывает фоновое изображение на первом (верхнем) экране.
Таким образом, Lighthouse выдает проблему, котораярендеринг не очень хорошо организован.
С другой стороны, UX на сайте плохой, потому что пользователи не совсем понимают, что делать, так как изображение не загружается (что важно) до ВСЕХ видео на странице
Из-за этого скорость страниц Google дает нам оценку 30 для мобильных устройств, но 90 для настольных компьютеров.
Пожалуйста, посмотрите результат скорости страниц здесь: 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>
И этот код, который мы помещаемв lazyload видео:
<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>
Не хватает ли нам чего-либо, чтобы сказать браузеру загрузить все, включая тег и показать плакат, прежде чем видео будет готово к воспроизведению?