フロントエンド改善の取り組み - EatSmartシステム部ブログ

もぐナビではサイトの閲覧を快適にするために、フロントエンドの改善を継続して行っています。

今回は今まで行ったフロントエンド改善の取り組みを振り返りたいと思います。

サイトを高速化するため、まずは以下の本を読みました。

この本に書かれたルールを元に、改修と計測を繰り返しました。

www.oreilly.co.jp

また、改修を行った後の確認には、以下を利用しています。

もぐナビでは商品画像を初め、クチコミ画像など大量の画像が表示されます。また、ロゴ画像やUIで利用する画像もあります。

HTTPリクエストを減らすため、このうちUIで利用する画像をCSSスプライトにしました。合わせて画像の最適化を行い、容量の低減も行いました。

CSSスプライトの作成にはCSS Sprite Generatorというサイトを利用しました。

画像の最適化にはTinyPNG – Compress PNG images while preserving transparencyというサイトを利用しました。

それ以外の商品画像やクチコミ画像は、jpegtranを利用して最適化を行っています。

これにより、最大60%程度の容量を削減する事が出来ました。

画像と同様にHTTPリクエストの数を減らすため、JS/CSSの最適化も行いました。

こちらはYUI Compressorをantを利用したビルドプロセスへ組み込み自動化しています。

これにより、読み込むJS/CSSが最大10個以上ありましたが、半分以下に減らすことが出来ました。

ページの最上部に記述していたJavaScriptの読み込みを、ページの一番下へ移動しました。また、一部はasyncを追加することで非同期にしました。

これにより、ページの読み込みがブロックされる事が無くなり、ページが表示されるまで待たされる時間を短くすることが出来ました。

注意点として、単純にページの下へ移動してしまうと、<head>タグで記述したスクリプトでエラーが発生する事があります。

このため、DOMContentLoadedでの実行するように変更するなどの対応が必要となりました。

HTMLやJS/CSSの容量を低減を行うため、Apacheでmod_deflateを利用するようにしました。

gzipでコンテンツを圧縮することにより、最大75%程度の容量を削減する事が出来ました。

クライアント側でキャッシュを有効活用するため、画像/JS/CSSに180日の有効期限を設定しました。

これと合わせ、コンテンツの内容を変更した場合にクライアントが再度ダウンロードを行えるよう、「?ts=xxxx」のようなパラメータを追加しています。

以上の改修を行い、Google Analyticsの「サイトの速度」は9秒台から5秒前半まで改善することが出来ました。

実際には上に挙げた以外の改修も行っています。しかし効果が無かったり、逆に悪くなってしまったものもありました。このため、改修を行ったあとは必ず計測を行い、元に戻す事も必要です。