Subscribed unsubscribe Subscribe Subscribe

Google Page Speedでページを解析してみる

PageSpeed Insights

サイトの性能に関しては様々な要因が関係してきますが、
その中でもフロントエンドを解析してくれるGoogleツールを使って改善してみます。

一旦あるページを解析した結果を見てみます。

f:id:keiwt:20150311213337p:plain

モバイル

速度(71点)

  • 修正が必要
・スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
↓
スクロールせずに見える部分のcssのみインライン化します
  • 修正を考慮
・表示可能コンテンツの優先順位を決定する
↓
大きな画像のサイズを圧縮すると優先順位が変わるようです

・画像を最適化する
↓
画像を圧縮すれば解決します

・ブラウザのキャッシュを活用する
↓
画像に対するHTTPリクエストヘッダー内で有効期限を設定すれば解決します

・圧縮を有効にする
↓
Nginxの場合はHttpGzipModuleを使用すれば解決します。

[http://wiki.nginx.org/HttpGzipModule:title]

PCも同様の対応を行えば大丈夫です。

f:id:keiwt:20150311213535p:plain

結論からすると以下を実施していれば問題ないです。

これさえすればWEBのパフォーマンスは90点超え

・js,cssの圧縮
・js,cssでスクロールしなくても見れる箇所のものはインライン化する
・画像は圧縮する
・WEBサーバーにおいてリソースの圧縮モジュールを使用する
・静的リソースのHTTPリクエストヘッダーに有効期限を設定する

当たり前のことを当たり前にすることが重要なようです。

画像の圧縮はgruntやgulpのプラグインを使用すればいいです。

WEBサーバーの環境構築手順のひとつに圧縮モジュールの設定も含めます。