GoogleSpeedInsightsを利用してWEBページをチューニングする

こんにちはでらぽんです。 先日、管理しているWEBページの速度を少しでも早くしてほしいという依頼があり、時間をかけずに行いたかったのでGoogleが提供する GoogleSpeedInsights というサービスを利用してチューニングを行いました。今回はその備忘録もかねての投稿です。

スキャンする

GoogleSpeedInsights
https://developers.google.com/speed/pagespeed/insights/ f:id:Derabon:20150929220919p:plain:w600

ページにアクセスすると、大きなテキストボックスと分析ボタンがあり、テキストボックスにチューニングをしたいページのURLを入力して分析ボタンを押します。とても簡単です!

結果を見る

f:id:Derabon:20150929220803p:plain:w600

結果ページは大きなタブでモバイルとパソコンの2種類に分けられています。「修正が必要」、「修正を考慮」、「x個のルールに合格」という分類わけされて、改善点の詳細があります。修正方法を表示 から修正案まで教えてくれます。Google先生は甘々ですね!

今回チューニングを行ったページでは「ブラウザのキャッシュを活用する」「圧縮を有効にする」「画像、CSS、JS、HTMLを縮小する」「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する」という結果が出たのでそれを見てみましょう。

・ブラウザのキャッシュを活用する

1度読み込んだページをブラウザが覚えていて再度同ページを開いた時にブラウザに残っている情報を使う設定です。設定する事により通信料を減らすことができます。沢山のファイルや期間に設定を行うと閲覧者に最新状態が提供されるのが遅くなってしまうのでバランスが大事です。

f:id:Derabon:20150929220541p:plain:w500

・圧縮を有効にする

サーバーと閲覧者のブラウザ間の通信するデータを圧縮して小さくする方式です。WEBサーバーに設定を書き込むだけで実現可能です。デメリットは通信の度に圧縮を行うのでWEBサーバーのCPU使用率が増加する事です。CPUに余裕がある場合に大きな効果がありますが効果が薄い場合もあり、コレもバランスが大事です。

f:id:Derabon:20150929220554p:plain:w500

・画像、CSSJavascript、HTMLを縮小する

画像の容量を減らせば通信量が減少するので早くなります。当たり前ですね。同じ様にHTML、CSSJavascriptもスペースや改行を省けば容量が少なくなります。デメリットは圧縮をしてしまうとファイルが読みにくくなり、管理しづらくなってしまう事。圧縮する場合、ツール等を使って圧縮しますが、ファイルを書き換えてしまうので再テストが必要だったりします。うまく運用するには開発時から圧縮してテストしたりする工夫や仕組みが必要で、コレもバランスが大事です。圧縮ファイルはGoogleSpeedInsightsからダウンロードする事もできます。Google先生さすがですね。

f:id:Derabon:20150929220611p:plain:w500

・スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

これはブラウザが画面の表示するときに邪魔しているJavascript/CSS がありますという内容ですね。小さなJavascriptはHTMLに含ませてしまい、読み込みをスムーズにする。非同期でJavascriptを読み込む方法があります。

f:id:Derabon:20150929220629p:plain:w500

適用時の注意

サーバーの設定などは変更により何が変わるのかちゃんと理解したら適用してください。上にも書きましたが、ツールやWEBサービスを利用して圧縮等を行う場合、全く別のファイルを管理サーバーに入れる事になるので、テストやウイルスのチェックなどを行ってから適用する様にしましょう。

まとめ

表示と操作がサクサクできると途中での離脱も少なくなるのでSEO的にも有効ですし、何より表示が速いと気持ちがいいです。細かいチューニングは気にしだすとキリがありませんが大きな所を調べてつぶすのに GoogleSpeedInsights はとても有効でした。