Webサイトを高速化する時のディレクションのポイント

最近、Webサイトの高速化を検討することが多いので、ポイントをまとめてみました。

高速化は目的ではなく手段である

高速化自体はあくまでサイトの目的を達成するための手段です。「どう高速化すれば意味があるのか」クライアントや制作チームと擦り合わせずに、「最速目指そうぜ！」と高速化を優先して始めると途中で色々悩むポイントが出てきます。

サイト内での画像の重要性を検討する

画像は表示速度に及ぼす影響が大きいので、ファイルサイズを減らす工夫を色々試したいのですが、広告系やコーポレートサイトなど写真の画質を担保すべき場合は要注意です。例えば、画像のファイル形式にWebPを採用すると非常に軽くなるのですが、画質劣化がどれぐらい許容できるかはクライアント、デザイナー含めて検証してから採用することがおすすめです。

高速化に適した画面設計を擦り合わせる

高速化するために制限されるポイントをクライアント、制作チームと事前に擦り合わせた方がスムーズです。例えば異なるページで似たような画像を使う場合は、なるべく同じ画像ファイルを用いてキャッシュを活用できるように内容やトリミングを設計します。

高速化に適したデザイントンマナを擦り合わせる

デザイン時も同様です。グラデーションや影の表現、マウスホバー時の挙動、Webフォントの採用などは、比較的レンダリングコストが高い処理になるので、制限されるポイントをクライアント、デザイナーと擦り合わせながらトンマナを検討していく必要があります。

エンジニアとファイルの読み込み順を検討する

ランディング時のファーストビューの最適化がちゃんと優先されるように、エンジニアとファイルの読み込み順を検討します。スクロールしないと見えない位置にある画像などは優先度を下げて遅延ロードにし、その分ファーストビューなどの重要度の高いリソースのダウンロードを検討します。

関連技術の採用を検討する

HTTP2やServiceWorker、AMPなどの技術は後から導入検討になると影響が大きいので、対象サイトのビジネスモデルと工数を検討しながら、何を採用するか最初にクライアントと制作チームと判断します。

まとめ

最初に書きましたが、高速化自体はあくまで手段です。サイトにとって何が重要なのかをしっかり見極めながら、バランスを取って高速化に取り組んでいきましょう！