中価格帯Android端末における記事ページの表示性能

調査の目的

ヘッドレスCMSを使った記事サイトでは、表示側の構成によって最初の表示までの時間が大きく変わる。本調査では、本誌のサイトの構成を決めるために、同じ記事ページを4つの方法で実装し、実機で比較した。

方法

低価格帯3台、中価格帯3台のAndroid端末を計測台に並べ、回線速度を固定した状態で各構成を20回ずつ読み込んだ。計測したのは最大コンテンツの表示時間（LCP）で、端末の価格帯ごとに75パーセンタイル値を算出した。

比較した構成

CSRのみ：空のHTMLを返し、JavaScriptでAPIから記事を取得して描画

CSR＋スケルトン：上記に読み込み中の仮表示を追加

事前生成HTML：記事本文を含むHTMLをビルド時に書き出す

事前生成＋画像最適化：上記に加え、画像をWebPに変換し、幅に応じたサイズを配信

結果

事前生成HTMLは、CSRのみと比べてLCPを約半分に短縮した。JavaScriptの実行とAPIの応答を待たずに本文を表示できるためだ。スケルトン表示はLCPの数値をほとんど変えなかったが、別途行った聞き取りでは「待たされている感じが少ない」という評価が多かった。

本誌での適用

本誌では記事・特集・研究の詳細ページを事前生成し、画像はWebPで複数サイズを用意している。一覧ページはCSRのまま、読み込み中にスケルトンを表示する。