ECサイトの運営だけでなく、サイトを運営するウェブマスターにとって重要なのはサイトの表示速度です。2018年7月からGoogleは「スピードアップデート」を実施し、ユーザーにとってあまりにも遅いサイトの評価を下げる発表をしています。
特にユーザーがランディングした際に表示されるファーストビューは特に重要とされ、コンバージョンや離脱率にも大きな影響を与える要素となっています。
ファーストビューの重要性
表示速度はモバイルではユーザー満足度に大きくかかわります。特に検索エンジンの最大手、Googleは2013年8月（約5年前！）、「1秒以内にAbove the foldを表示することが重要である」と言及されています。
参考：
もう遅いとは言わせない！Google推奨の「Above The Foldの1秒表示」とは？ | スマートフォン＆モバイルEC事例ノウハウ集｜モバイルファーストラボ
Google「PageSpeed Insights」でのルール
GoogleのPageSpeedInsightsでのルールで、この「ATF 一秒表示」に大きくかかわるのが、「Prioritize Visible Content（見える範囲を優先する）」です。
PageSpeed Insightsでは、
リクエストされたデータの量が初期の輻輳ウィンドウを超える場合、サーバーとユーザーのブラウザ間で追加の往復が必要になります。
スクロールせずに見える範囲のコンテンツのサイズを削減する – PageSpeed Insights — Google Developers
とあり、ファーストビュー表示までの通信回数が指標として採用されているようです。つまり、ファーストビュー表示範囲までの読み込み量を減らすことが重要になってきます。。
なお、このルールに合格していると、PageSpeed Insightsでは、
このように表示されます。このルールに不合格となるサイトは実は多くなく、例えば表示されたと思った後にガラッと表示が変わってしまうような、後方に設置されたJavaScript等によって新たにレンダリングが発生し表示が大きく変わるようなサイトが対象となっているようです。
このルールに反すると以下のような表示となります。
実装方法
PageSpeed Insightsでは、ファーストビュー内の読み込み量を減らすために、大きく以下の2つの方法が挙げられています。
１：スクロールせずに見える範囲の重要なコンテンツを最初に読み込むように HTMLを構成する
２：リソースで使用されるデータの量を減らす
１：スクロールせずに見える範囲の重要なコンテンツを最初に読み込むように HTMLを構成する
こちらは、HTMLの記述の順番を変更し、ファーストビュー内のコンテンツを前方に、それ以外は後方に記述することでファーストビュー内の読み込み容量を削減するという考え方です。
具体的方法
・CSSの分割/インライン化
CSSのうちファーストビュー範囲の表示に関わるものとそれ以外を分割し、<head>内の<style>タグ内と後方</body>の直前に設置します。なお、後方に設置したスタイルシート読み込み部分にJavaScriptで<head>と<link>を付加することで、スタイルの優先順位を保つという方法もあります。
・ファーストビュー範囲表示に関わらないJSを</body>直前に設置
こちらもファーストビューに関係ない<script>を</body>の直前に設置するという方法。こちらはCSSに比べれば容易に実施できます。
・サイドバーやナビゲーションを後方に設置
レスポンシブWebデザインでのサイドバー部分等はメインコンテンツの後方に設置。その他、例えばスマホ表示のスライドメニューなど、見えないコンテンツは後方に設置します。
２：リソースで使用されるデータの量を減らす
こちらは、そもそもの読み込み容量を減らすという考え方です。
・CSS/JS/HTMLの圧縮
コーディング時にコードを書きやすいように設置しているインデントやスペースは、サーバで読み出す際には必要のないものなので、すべて消去してしまいます。
参考：WEBサイトを軽量高速化。便利な圧縮系サービスまとめ【 JEPG,PNG,HTML,CSS,JS 】（WPプラグイン含む） | Stronghold
・画像の圧縮
こちらは基本ですね。画像の圧縮についても無料のツールが充実していますので積極的に活用していきましょう。数MBの画像が画質を劣化させることなく数百KBまで圧縮することも十分可能です。
【無料ツール】レスポンシブサイトで画像サイズを悩むならロスレス圧縮を！ | スマートフォン＆モバイルEC事例ノウハウ集｜モバイルファーストラボ
画像の圧縮は容量を減らすためにサイト全体を通じて重要ですが、工数が確保できない場合は特にファーストビュー内の画像圧縮を優先するべきでしょう。
おまけ：PageSpeed Insightsで高得点
ページの読込速度になると必ずと言っていいほど話が出て来る、俳優の阿部寛さんのホームページ。見た目非常にレガシーですが、速度に絞って話をすると非常に優秀で、PSIの数値も、、、
めったに出ない「Fast」の評価。シンプルイズベストなのかもしれません。
