スマートフォンサイトの読み込み速度は最初に見える範囲から改善する

スマートフォンサイトの読み込み速度を改善するときは、ページ内のすべてを同じ優先順位で読み込ませません。利用者がスクロールせずに見られる範囲を先に表示し、残りの画像や処理はそのあとに読み込みます。

最初に見える範囲を表示するためのHTML、CSS、JavaScriptは、クリティカルレンダリングパスと呼ばれます。ここへ不要な転送や外部ファイルの待ち時間が入ると、ページ全体の容量が小さくても最初の画面はなかなか現れません。

1秒以内を目指すのはページ全体ではなく最初の表示である

Googleのスマートフォンサイト向け速度ガイドは、above the foldと呼ばれる最初に見える範囲を、1秒以内に表示することを目標にしています。ページの残りは、最初の範囲を表示したあとも読み込みと描画を続けます。

したがって、確認する時間を一つにまとめてはいけません。

ページ全体の読み込み完了だけを短くしようとすると、最初の表示に不要な画像まで先に圧縮し、肝心のCSSやJavaScriptの待ち時間を残すことがあります。先に、画面上部を表示するために必要な処理を分けます。

サーバー応答とリダイレクトで時間を使い切らない

Googleのガイドは、サーバーが200ミリ秒以内に応答することを目安にしています。サーバー応答が遅ければ、ブラウザーはHTMLを受け取れず、CSSや画像の取得にも進めません。

URLのリダイレクトも、最初のHTMLを受け取る前の待ち時間になります。説明用の仮例として、スマートフォンからアクセスするたびに、別URL、言語判定用URL、正規URLの順で転送する構成では、その回数だけ要求と応答が増えます。必要な転送まで外すのではなく、同じ目的の転送が重なっていないかを確認します。

最初に見るのは、サーバー製品名や契約プランではありません。一つのURLについて、最終的なページへ着くまでの転送回数と、最初のHTMLが返るまでの時間を記録します。問題がサーバー応答にあるのか、転送経路にあるのかを分けてから、担当者へ修正を依頼します。

最初の表示までの通信回数を減らす

HTMLを受け取ったブラウザーは、そこから必要なCSS、JavaScript、画像などを取得します。最初の表示に必要なファイルが互いを待つ構成では、一つのファイルが小さくても通信の往復が積み重なります。

最初の範囲を表示するために、どのHTML、CSS、JavaScriptが必要かを一覧にします。次に、その中で外部ファイルの取得を待たなければ表示できないものを確認します。Googleのガイドは、最初に見える範囲の表示を妨げる外部JavaScriptとCSSを避けるよう案内しています。

すべてのCSSとJavaScriptをHTMLへ詰め込むという意味ではありません。最初の表示に必要な分と、表示後に読み込める分を分けます。大きな外部ファイルをそのまま埋め込めば、最初のHTMLが重くなるため、問題の場所を移すだけです。

ブラウザーの描画時間も1秒の中へ含める

通信が終われば、すぐ画面が表示されるとは限りません。ブラウザーには、レイアウトを決め、要素を描画し、JavaScriptを実行する時間が必要です。Googleのガイドは、レイアウトと描画に200ミリ秒を確保し、JavaScriptの実行と描画時間を最適化するよう示しています。

通信だけで時間を使い切ると、ブラウザーが内容を組み立てる余地がなくなります。サーバー応答、転送、通信回数、CSSとJavaScript、レイアウトと描画を別の区間として記録します。

JavaScriptを削除するかどうかは、用途を確認して決めます。問い合わせボタン、メニュー、入力補助など、最初の画面で必要な操作まで止めてはいけません。表示後に実行してよい処理だけを後ろへ回します。

一つのURLで変更前後を比べる

最初からサイト全体のファイルをまとめて変更すると、どの変更が初回表示へ効いたのか分からなくなります。次の順で、一つのURLを確認します。

1. スマートフォンからの訪問が重要なページを一つ選ぶ。
2. 最終URLまでのリダイレクトと、サーバー応答時間を記録する。
3. 最初に見える範囲へ必要なHTML、CSS、JavaScriptを分ける。
4. 表示を待たせる外部CSSとJavaScript、通信の往復を確認する。
5. 一項目だけ変更し、同じ端末と回線で最初の表示を比べる。
6. PageSpeed Insightsで改善候補を確認する。

PageSpeed Insightsの提案は、変更箇所を探す材料です。提案を実施したことだけを成果にせず、利用者が最初の内容を早く読めるようになったかを同じ条件で確かめます。

画面上部の内容を削る前に読み込み順を直す

最初に見える範囲を軽くするために、会社名、ページの見出し、主要な説明、問い合わせへの入口まで削れば、表示は早くても役割を果たしません。残す内容を決めたうえで、最初の表示に不要な読み込みを後ろへ回します。

制作会社へ依頼する場合は、「スマートフォンを高速化する」という作業名だけで発注せず、対象URL、最初に表示する内容、変更前の転送回数、サーバー応答、必要なCSSとJavaScript、確認端末を渡します。作業が終わったら、変更後の値と表示をサイト側でも保存します。

まず一ページをスマートフォンで開き、内容が現れる前に発生する転送と外部ファイルの待ち時間を確認してください。ページ全体を作り替えるのは、その原因を確かめたあとです。