ヒーロー画像のレンダリング時間について　【中級】

目的：ヒーロー画像のレンダリング時間を特定し、各要素のタイミングを追加する方法

Written by Mark Zeman

SpeedCurve(スピードカーブ）が行う分析は、フィルムストリップの最後フレームをベースにしています。そのため視覚的なレンダリング時間をどのようにキャプチャーするかには、いくつかの制限があります。 レンダリング時間が予想よりも遅くなる場合もあります。

重ねられる要素

レンダリング時間の１つの制限は、イメージ画像に影響です。ビジュアル分析では、ページの最終状態として、 フィルムストリップの最後のフレームを使用します。SpeedCurveは、画像またはH１の領域を切り抜き、フィルムストリップ上を探し、いつページが最終状態になるかを見つけます。これは、各要素がトップページで重ね合わされているとき、取り込まれるレンダリング時間は、視覚的要素の組み合わせになります。

 

動く要素

レンダリング時間の視覚的な適合を見るには、スクリーン上での位置を考慮に入れます。そのため、ある要素が画面を移動すれば、レポート時間を遅らせることになります。レンダリング時にページ内を移動する要素は、ユーザーの気を散らす可能性があり、H1の動きを止めることで、キャプチャするレンダリング時間を改善します。

 

ヒーロー要素のタイミング

デフォルト指標は重要です。ユニバーサルなページ要素に基づいていますし、それらを使用することで競合他社と比較することができるからです。しかし、サイト、ページ、ユーザーに対して、ヒーロー要素の画像をもっと見極めたいと思う場合もでてきます。これがヒーロー要素のタイミングが表れる場所です。

Hero Element Timing（ヒーローエレメントタイミング） は、ヒーローエレメントタイミングAPIに基づいており、 検索ボックス、イメージカルーセル、テキストブロックなど、ページ上の特定のヒーロー要素を選択し、そこ注釈を付けることができます。API仕様の指示に従ってページに注釈を付けて、SpeedCurveで結果を確認してください。<div elementtiming=”foobar” class=”…” >