Webサイトを高速化するためのポイント
実際にどのような対策が必要なのか全体像を把握しましょう。
この連載ではこれらのポイントについて、技術的解説を踏まえながら実際の対策方法を紹介します。
リクエスト・レスポンスの削減
- 読み込むCSSファイル数の削減
- 読み込むJavaScriptファイル数の削減
- 読み込む画像数の削減
- リクエストをまとめる
- リソースをローカルにキャッシュさせる
- ソーシャル系ボタンなどの無駄な読み込みを減らす
非同期で読み込む
- JavaScriptの非同期読み込みを利用する
- ブラウザの同時接続数制限を回避する
レンダリングの邪魔をしない
- レイアウトに関わるCSSのパースを優先させる
- レイアウトに関係ないJavaScriptは読み込み優先度を下げる
- CSSセレクタの解析時間を短くする
- HTMLの解析とレンダリング時間を短くする
- 画像の読み込みを待たずに全体をレンダリングさせる
- CSSのレンダリング負荷を減らす
応答速度と負荷の軽減
- すべての読み込みファイルサイズを小さくする
- サーバー側のキャッシュを有効にする
- 静的なファイルは高速なWebサーバーやCDNを利用する
- DNS Lookupを高速にする
- 低スペックな共有レンタルサーバーは極力利用を避ける
結構ポイントは多く、クライアントサイドからサーバーサイド、ネットワークに至るまで多岐にわたります。
職種ごとに必要な高速化に対する視点
上記に挙げたポイントを1人でこなすのは大変かもしれません。まずは、自分の作業範囲に関連する項目を押さえてみましょう。
また、高速化を行うにあたり各職種に必要な視点について紹介します。
Webデザイナー
WebサイトやWebアプリケーションのユーザーに見える表面部分を担当するWebデザイナーですが、主にビジュアルデザインをどの程度画像化するかが重要になります。
画像は変更の手間もかかりますし、何よりサーバーへのリクエスト数を増やしてしまいます。Webフォントやアイコンのフォント化、角丸やシャドウなどCSS3前提としたデザインにするなど、ファイルの数とサイズをできるだけ減らせるよう心がけましょう。
ただし、パフォーマンスに注意しすぎて本来のビジネス目標を忘れたデザインにしてしまっては本末転倒です。
フロントエンドエンジニア・コーダー
フロントエンドエンジニア・コーダーはWebデザイナーと協力しつつ、サイトが表示される際に読み込まれるリソースファイルの数とサイズの削減に努めましょう。また、サーバーサイドエンジニア・プログラマーと連携して、ローカルにファイルをキャッシュさせることもチェックが必要です。
さらにレンダリングの速度についても考えられるとすばらしいと思います。
サーバーサイドエンジニア・プログラマー
プログラマー・サーバーサイドエンジニアはフロントエンドエンジニア・コーダーと連携しリクエストに対していかに速くレスポンスを返すかを重視しましょう。
さらにクライアント・サーバー共にキャッシュを利用することも重要です。
動的なサイトの場合、非常に難しく重要な役割を担います。
ディレクター・プロジェクトリーダー
ディレクター・プロジェクトリーダーは細かな方法を知る必要はありませんが、どのような確認項目があり、環境に合わせどういった高速化対策が行えるのか把握しましょう。
コストと手間を考え、それぞれの担当者に指示をだせるとよいのではないかと思います。
Web担当者
Web担当者にとって、Webサイトの評価は自身の評価に大きく影響します。
自社・業者どちらに依頼するとしても、高速化のポイントを把握する必要があります。より高い成果を出すために高速化のポイント、対策を施した際の影響など広く把握して成果をだしましょう。
終わりに
第1回「これから身につけるWebサイト高速化テクニック：高速化対策の現状」はいかがでしたか？
具体的な対策方法を紹介する前に、もう少し事前に必要な知識を解説します。
今回の内容をまとめると……
- 高速化対策は必須
- 自社サイトの現状を知ろう
- 高速化対策のポイントは多く、多岐にわたる
- まずは自分の担当箇所を押さえよう
第1回から読み応えのある量ですが、次回も非常に濃い内容になります。有益な情報を提供していきますので、挫けずに読んでいただけると嬉しいです。
最後に宣伝ですが「対策方法が紹介されるまで待てない！」という方は、ぜひ弊社にご相談ください。Webサイト高速化チューニングサービス「tutah（チューター）」を提供しています。
それでは、第2回をお楽しみに。
