kigoulab ウェブページの表示に時間がかかってしまうと、読者は、他のページに逃げていってしまいます。消費者の47％はウェブページが２秒以下で表示されることを望んでいるという調査報告もあります。Googleは検索順位アルゴリズムの１つにページスピードを加えています。大きなウエイトではありませんが、微妙な検索順位に影響があるのは事実です。この記事では、サイトを高速化するための施策について、簡単にまとめてみました。
高速化のためにまずはチェックすること
Googleはウェブページの読み込みを高速化するために、どんな点が問題になっているかを調査して報告してくれるサイトを開設しています。
このサイトで指摘されたことを参考に、高速化の施策を実施していけばよいのです。サイトに調査したいURLを入力して「分析」ボタンを押すと、修正が必要な個所と、修正方針の概要が表示されます。これを参考にして、高速化をしていくとよいでしょう。
高速化の施策を行う場所
高速化の施策を行う個所は次の２つの個所に集約されます。
- フロントエンドの高速化
- バックエンド（サーバーサイド）の高速化
PageSpeed Insightsで指摘されるのは、フロントエンドの高速化についてです。バックエンドの高速化は、主にデーターベース周りに集約され、そのチューニングにはそれなりの技術力が必要です。ここでは、フロントエンド周りの高速化について、その具体例をあげ、バックエンドの高速化については、こういうモノがあるという風に触れる程度でまとめたいと思います。
フロントエンドの高速化
フロントエンドの高速化をするポイントは、いくつもありますが、その代表的なものは以下のようなものです。
- CSSやJSのキャッシュ化
- CSSやJSの圧縮（gzip や deflate）
- CSSやJSの縮小（minify）
- 画像の最適化
- CSSスプライトなどの導入
- WebフォントやSVGの導入
- JSの記載個所の調整
これらは、全て、以下の３つのポイントを達成するための対策です。
- サーバーへの通信回数を減らす
- サーバーへの通信量を減らす
- レンダリングの速度を低下させない
それでは、施策が具体的にどのポイントに寄与するのかに注目しながら、簡単に解説してみましょう。
1.CSSやJSのキャッシュ化
CSSやJSをなんどもサーバー側から取得しないよう、ブラウザー側で確実にキャッシュしてもらうように、有効期限を明記する施策です。具体的には、hoge.css?date=日付＋シリアル番号のような、パラメーターを付与することでブラウザー側は、その日付までファイルをキャッシュしてくれます。
注意しないといけないのは、運用したばかりで、頻繁にCSSの変更が発生する場合は、キャッシュがきいていることで、CSSの変更が反映されないことがありますので、シリアルをまめに変えるか、一時的にパラメーターの記述をやめるなど対策が必要です。
2.CSSやJSの圧縮（gzip や deflate）
CSSやJSファイルを、サーバーサイドで圧縮して、通信量を減らす対策です。サーバーが対応していれば、.htaccessに設定を記述して、自動的に圧縮することが可能です。サーバー側が対応していない場合、ローカルで圧縮して、ファイルを設置することも可能です。
gzipの場合、以下のような記述で実現できます。
SetOutputFilter DEFLATE
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico)$ no-gzip dont-vary
Header append Vary User-Agent env=!dont-vary
１行目ですべてのファイルを有効にし、５行目で画像ファイルを除外しています。2〜4行目は古いブラウザーへの対応です。（Apache公式サイトより）
3.CSSやJSの縮小（minify）
CSSやJSにふくまれる、無駄な改行やスペースなどを取りのぞき、ファイルサイズの低減することで、通信量を減らす方法です。タスクランナーのプラグインで自動的に行う、ウェブサービスを利用して縮小する、WordPressを使っていればプラグインで自動的に縮小するなど、何らかのツールを使って縮小します。
これも、縮小後のCSS・JSファイルはメンテナンス性が低い（不可能）ですので、もともファイルを取っておく、頻繁に更新する場合は、縮小しないなどの判断が必要です。
・Online JavaScript/CSS/HTML Compressor
4.画像の最適化
画像ファイルは、画像データ以外に、撮影したカメラのデータやレンズの情報、カラーパレットやアルファチャンネルなど、画面表示に不要なデータを保持しています。これらを削除して画像サイズを大幅に低減することで通信量をへらすのが、画像の最適化です。
オンラインサービスで、その処理をしてくれるところが結構ありますので、そういうモノを利用するとよいでしょう。
5.CSSスプライトなどの導入
CSSスプライトとは、複数の画像を１枚の画像にまとめ、CSSで座標指定することで、あたかも１枚ずつの画像として利用できる、サーバーとの通信回数を減らす方法です。アイコンや約物など、なんども繰り返し出現する画像は、CSSスプライトの導入を検討しましょう。
ただし、アクセシビリティとの兼ね合いもありますので、画像に明らかに固有の意味があるようなものは、対象としないほうがよいでしょう。CSSスプライトの制作は、手作業でもできないことはないですが、タスクランナーを使って制作したほうが効率的です。
6.WebフォントやSVGの導入
画像で作成していた、見出しの文字や、アイコンなどを、WebフォントやSVGに置き換えることで、通信量を減らすことができます。いままで欧文のみだったWebフォントも日本語が本格的につかえるようになり、その利用価値は広まっています。SVGも見た目はベクター画像ですが、中味はテキストですので、大幅な容量削減に寄与します。積極的に利用しましょう。
7.JSの記載個所の調整
JSの記述位置といえば、その昔は、</head>タグの直前でしたが、今のトレンドは</body>の直前に記述するのが主流です。その理由は、</head>タグの直前だと、HTMLのレンダリングが始まる前にJSを読み込んでしまい、レンダリングの速度が低下するからです。スクリプトの都合で</head>直前に書かないといけないモノ以外は、</body>の直前に記述するようにしましょう。
バックエンド（サーバーサイド）の高速化
バックエンド（サーバーサイド）を高速化するのは、Webサーバーそのものの高速化（CPUやメモリー）などを潤沢に投資するほか、ロードバランサーなどをつかって複数台で運用するなど、いろいろな方法が考えられますが、一番のボトルネックとなるのはデーターベースとのやりとりの部分に集約されます。とくにWordPressのような、表示の度にデーターベースに問い合わせがいくタイプのプログラムは、データーベースのチューニングで大幅にパフォーマンスが向上します。
以下に、簡単ですが、対策をすべき点を上げます。
- 動的出力のシステムでなく、静的出力のシステムを使う
- データベースを使わなくて良い場合は使わない。
- データベースのキャッシュを活用する
- SQL（データーベースとの通信言語）を最適化する
- データベースのインデックスを最適化する
- 非同期でデータを処理し、データベースからのレスポンスを待たない
- 必要なデータだけ保存する（データーベースを肥大化させない）
- 肥大化したデーターベースは分割できるよう設計する
等々です。すべてエンジニアに頑張ってもらわないといけない部分ですが、WordPressなどの常時問い合わせ型の動的処理プログラムは、できるだけプラグインを少なくすることで、本体からのデーターベースへの問い合わせと、プラグインからの問い合わせと、２重３重のデーターベースへのアクセスが軽減されて、表示速度が速くなります。その辺は注意して構築するとよいでしょう。
まとめ
サイト高速化について、簡単にまとめてみましたが、いかがでしたでしょうか？内容的に初心者のフロントエンドエンジニア向けの記事のようになりましたが、おそらくフロントエンドエンジニアであれば常識の知識。むしろデザイナーやディレクターに知ってもらいたいと思って書きました。
キャッシュやminify化など、プロジェクト初期には導入しづらい対策もありますが、できるところから段階的に導入すればよいと思います。これを機にまずは、PageSpeed Insightsで何点とれるか、その評価を主要ページで調べてみてください。
(担当：小山智久)