俳優の名前を検索して人物紹介を開いたのに、見出しだけが表示され、肝心の本文がなかなか出てこない。経歴を読み始めたところで写真が入り、読んでいた行が下へずれることもある。読者が感じる「遅さ」は、ページの表示が終わるまでの時間だけではない。知りたい情報にたどり着き、落ち着いて読めるようになるまでの時間でもある。
速さには、異なる三つの側面がある
表示速度は、「本文が見え始めるまで」「画面がずれずに読めるまで」「タップに反応するまで」に分けて考えると分かりやすい。人物記事で名前や略歴がすぐに見えても、写真が後から入って段落が動けば、読者は同じ箇所を読み直すことになる。関連記事のボタンの反応が遅ければ、押せなかったと思ってもう一度タップするかもしれない。
Core Web VitalsのLCPは大きな要素が表示されるまでの時間、INPは操作への反応、CLSは表示のずれを捉える指標だ。ただし、数値が良くても、肝心の経歴が広告や長い前置きの後ろにあれば、読者は目的の情報になかなか着けない。測定値を見るだけでなく、実際の記事をスマートフォンで読み進めて確かめたい。
最初の表示を遅らせるもの
サーバーからの応答と外部サービス
ブラウザーは、ページのデータを受け取るまで本文を表示できない。サーバーの応答が遅ければ、画像を軽くしても最初の待ち時間は残る。話題の記事にアクセスが集中したときは、キャッシュが適切に働くかどうかも効いてくる。
コメント欄やSNS投稿の埋め込みは、外部サービスの応答にも左右される。読み込みの遅い要素があっても、読者に必要な本文まで表示を待たせていないかを確認したい。
大きな写真と表示の優先順位
芸能記事に写真は欠かせないが、冒頭の大きな画像は転送に時間がかかりやすい。掲載枠より大きすぎる画像を配信していないか、スマートフォンにも同じ大きさの画像を送っていないかを確認する。画質を下げすぎると表情や資料の細部が見えなくなるため、表示サイズに合う画像を用意し、形式と圧縮を選ぶほうがよい。
画面の下にある写真や関連記事の画像は、表示位置に近づいてから読み込む方法が有効な場合もある。ただし、最初に見える重要な写真まで後回しにすると、かえって遅く感じられる。優先順位は、そのページで読者が最初に必要とする情報を基準に決める。
読んでいる途中のストレスは別の要因から生まれる
レイアウトのずれ
写真や広告、動画の枠の高さが読み込み前に決まっていないと、後から現れた要素が本文を押し下げる。年表の一行を読んでいる最中に画面が動けば、出来事の順番を見失いかねない。画像の縦横比を指定し、埋め込みにもあらかじめ場所を確保しておけば、表示の前後で本文の位置が変わりにくい。意図しないタップを防ぐうえでも大切だ。
スクリプトと操作への反応
アクセス解析、広告、共有ボタン、画像ギャラリーは、それぞれ動作に処理を要する。処理が重なると、目次をタップしても移動しない、写真の切り替えが遅れるといったことが起きる。機能ごとに必要性を見直し、記事を読むのに不要な処理を最初から一斉に動かさない。読者の操作を妨げない配置や表示は、文化ニュースサイトのアクセシビリティを高めるために大切なこととも関わる。
端末と通信環境で体感は変わる
編集部の高速回線と新しい端末では快適でも、通勤中の不安定な通信や処理能力の低い端末では同じように動くとは限らない。写真の多い人物紹介、過去記事へのリンクが並ぶ特集、動画を含むインタビューでは、とくに差が出やすい。動画が再生を選ぶ前から大量のデータを取得していないか、埋め込みが本文の表示を妨げていないかを確認する。通信量を抑えることも、外出先で記事を開きやすくするために必要だ。
数値はページ別、体験は動線別に確かめる
トップページだけを測っても、検索から直接開かれる人物記事の状態は分からない。写真中心の記事、本文中心の記事、埋め込みのある記事をそれぞれ調べ、まずはモバイルでの表示を確認する。測定ツールによる一定条件下のテストは原因を探しやすく、実際の訪問者のデータは多様な端末や回線で起きている問題を捉えやすい。ただし、アクセス数の少ないページでは、訪問者のデータが十分に集まらないこともある。
速度の数値だけを追うと、本文や写真を減らす判断に傾きがちだ。だが、経歴の理解に必要な情報まで削っては本末転倒。写真付き年表が遅いなら、年表をなくす前に画像の容量、読み込み順、表示枠の指定を見直したい。公開前にはスマートフォンで人物記事を一つ開き、名前と最初の段落が読めるまでの時間、写真が入ったときの画面の動き、目次を押した後の反応を順に記録する。そうすれば、どこを直すべきか具体的に伝えられる。