サイトの表示スピードを爆速にする為にWebマーケティング担当者ができることを考える
1.はじめに
もともとオウンドメディアや
広告ランディングページの
表示スピードが気になっていました。
競合サイトはなぜあんなにサクサク動くのか？
自社サイトはなぜ動きが鈍いのか？
今回は、Webページ表示の仕組みを理解した上で、爆速なサイトにする為にWebマーケティング担当者ができることをまとめてみたいと思います。
2.Webページが表示されるまでのプロセス
クライアント（Webブラウザを見ている人）がURLを指定してからページが表示されるまで、Webブラウザの中では多くの処理が行われる。下記は流れを表した図。
3.Webブラウザのコンポーネント
Webブラウザをコンポーネント（ソフトウェアを構成する要素）視点から説明すると下記になります。
ブラウザのコンポーネント
ブラウザのコンポーネント 用語解説
4.Webブラウザが表示されるまでの動作
続いてクライアント（Webブラウザを見ている人）がURLを指定してからページが表示されるまでの動作をRendering Engine（画面表示を司る部分）を起点に整理してみる。
5.パースについて
パースとは、プログラムのソースコードやXML文書など、一定の文法に従って記述された複雑な構造のテキスト文書を解析し、プログラムで扱えるようなデータ構造の集合体に変換すること。
ブラウザはWebサーバとTCP3wayハンドシェイクでTCPコネクションを確立した後、GETメソッドを使ってhtmlファイルをダウンロードします(POST メソッドでブラウザから Web サーバへデータを送るときもありますが、その際も html ファイルが返ってきます)。
ブラウザは、ネットワークから受信したhtml ファイル (もしくはディスクに配置された html ファイル) をパース (解析)することにより、ブラウザに割り当てられたメモリ上にDOMという形式にして配置します。
6.DOM/CSSOMについて
DOM
DOMとは「Document Object Model」の略。
DOMはWeb上のコンテンツを記述する為の言語htmlや、データ記述用の言語xmlファイルを扱うアプリケーションプログラミングインタフェース。
DOMというAPIが、HTMLをオブジェクト化（意味と役割を持たせる）させる。
オブジェクト化だと分かりずらいので、シンプルに言うと、DOMがhtml/xmlファイルをPCのメモリ上にどのような形式で格納するのか定義する。
上記の定義を行うことで、例えばjavascriptで操作したいときにどのタグを狙って操作するかを一意に定めることができる。
CSSOM
CSSOMは、CSS Object Modelの略。
DOMツリーと同じようにツリー状のデータ構造を取る。その為、CSSOMツリーとも呼ばれる。css は html のような入れ子構造ではありませんが、CSSOM という似たような形式でどのようにパースされるべきか定義されている。
7.サイトスピードに関するパフォーマンス計測指標
Page Speed Insightsで確認できるパフォーマンス指標
サイトスピードの実績を見る場合は、Googleが提供する
Page Speed Insightsを利用することが多い。
同ツールを利用すると、Webサイトの表示速度を分析できます。Page Speed Insightsで見ることができるパフォーマンス指標は下記。
では、各パフォーマンス指標の速度目安はどれくらいでしょうか。下記にまとめてみました。
0.1秒単位のスピード改善が重要であることがこの表から分かります。
ちなみに、1ミリ秒が1000分の1秒。100ミリセコンド＝0.1秒です。
8.計測指標ごとのパフォーマンス低下要因
Page Speed Insightsの中でも重要度が高いと想定される下記4つのパフォーマンス低下要因を整理してみる。
First Contentful Paint（最初のコンテンツ表示にかかるまでの時間）
FCPのパフォーマンス低下要因は主に画像、Javascript、CSS、サーバー、Webフォントによるもの。
Largest Contentful Paint （メインコンテンツの読み込み時間）
LCPのパフォーマンス低下要因はFCPとほぼ同じ。主に画像、Javascript、CSS、サーバー。
First Input Delay （Webページユーザーが最初に行った操作に対する応答性）
FIDのパフォーマンス低下要因は基本Javascript。
Cumulative Layout Shift（Webページコンテンツの意図しないレイアウトの「ずれ」を数値化したもの）
CLSのパフォーマンス低下要因は主に画像、Webフォントが該当する。
9.パフォーマンス計測指標ごとの改善案
Web.devの記事や他支援会社のノウハウ系記事を参考にしつつ、主要な改善案をまとめてみました。
First Contentful Paint（FCP）の改善案
Largest Contentful Paint （LCP）の改善案
First Input Delay （FID）の改善案
Cumulative Layout Shift（CLS）の改善案
ほとんどの改善案はWebマーケティング担当だけでは進めることができない内容。開発側との連携が重要になる。
10.フロントエンド関連以外の施策について
本note上では主にフロントエンド関連の
表示スピード改善案について触れています。
「サーバー性能を見直す」といったインフラ関連の施策（パフォーマンス指標はTTFB）や、「LP速度改善ツールの導入」のような外部パートナーの力を借りるものは十分に調査できていません。
どのような施策があるかのか、引き続き勉強していきたいと思っています。
11.最後に
このnoteの作成に関して、下記記事が大変勉強になりました。今後も技術観点の解像度を上げて、仕事に活用していきたいと思います。