私たちのウェブサイト (ucraft.com) では、アニメーション GIF の代替としてタグを使用しています。
ページのトップ画面には背景画像があり、その上にテキストと行動喚起ボタンがあります。その後、コンテンツの別のブロックがあり、左側にビデオ、右側にテキストがあります...
そのブロックの後に、同じシナリオの他の 2 つのブロック (タグとテキスト) があります。
モバイル (iOS および Chrome) では、ブラウザはビデオが自動再生されるのを待っています。その後、最初の (トップ) 画面に背景画像のみが表示されます。
このように Lighthouse は、レンダリングがうまく整理されていないという問題を引き起こしています。
一方で、ページのすべての動画が読み込まれるまで画像が読み込まれない (これは重要です) ため、ユーザーは何をすべきかを本当に理解していないため、Web サイトの UX は良くありません。
このため、Google のページ速度はモバイルでは 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>
ビデオを再生する準備が整う前に、タグを含めてすべてを読み込み、ポスターを表示するようにブラウザに指示する何かが欠けていますか?