Webサイト表示を高速化 Google PageSpeed Insightsを理解しよう

  • このエントリーをはてなブックマークに追加

Googleが発表したMFI(モバイルファーストインデックス)への対応だけでなく、UXの向上、コンバージョンへの影響など、スマートフォンなどのモバイル端末の普及により、サイトの表示スピードは年々重要になってきています。

本記事では、GoogleのWebパフォーマンス改善ツールの1つである「PageSpeed Insights」を使用してWebサイトの表示スピード最適化の基本を紹介します。

Google PageSpeed Insightsについて

Google PageSpeed Insights(以下PageSpeed Insights)はGoogleが提供するWebページのコンテンツを解析して、ページの読み込み時間を短くするための方法を提案してくれるツールです。

モバイル、パソコンの両方のデバイスに対応しており、それぞれに評価スコアと最適化の方法を提示してくれます。

■画面1

習うより慣れろということで、早速PageSpeed Insightsでページの測定をしてみましょう。

 Google PageSpeed Insightsの基本的な使い方

PageSpeed Insightsの使い方はいたってシンプルです。

「WebページのURLを入力」欄に測定したいページのURLを記入して「分析」ボタンを押します。

■画面2

すると、「分析しています」のメッセージとプログレスバーが表示されますので、分析が終わるまでしばらく待ちましょう。

■画面3

分析が完了すると分析結果が表示されます。

PageSpeed Insightsは1度の分析でモバイルユーザエージェントとPCユーザエージェントを1回ずつ取得するため、ページ上部のタブを切り替えることでモバイル(画面4)とパソコン(画面5)両方の分析結果を確認することができます。

■画面4(モバイルの分析結果)

■画面5(パソコンの分析結果)

■スコア

画面4(モバイルの分析結果)と画面5(パソコンの分析結果)の、それぞれのタブ下のグレーの背景で囲まれている部分(「Poor」と表示されている赤数字)がスコアです。

スコアは0~100 ポイントの範囲で採点され、スコアが大きいほど良好なパフォーマンスになります。85ポイント以上のスコアはパフォーマンスの高いページと評価されるので、できる限り85ポイント以上を目指しましょう。スコアは解析するタイミングによって多少上下するので、時間を分けて複数回測定することで、より偏りの少ない解析結果を得ることができます。

なお、PageSpeed Insights は継続的にアップデートされているので、Googleの方で新しいルールの追加や分析の改良があった場合、スコアが変わることがあります。

■適用可能な最適化

PageSpeed Insightsは現在、

  • 画像を最適化する
  • スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
  • JavaScript を縮小する
  • CSS を縮小する
  • HTML を縮小する
  • リンク先ページのリダイレクトを使用しない
  • 表示可能コンテンツの優先順位を決定する
  • 圧縮を有効にする
  • ブラウザのキャッシュを活用する
  • サーバの応答時間を短縮する

の10項目について、ページがきちんと最適化されているか分析・評価します。

「適用可能な最適化」には十分に最適化されていない項目が、重要な順番に表示されます。

ここに表示されている項目を修正していくことで、ページの表示スピードが改善され、PageSpeed Insightsのスコアも上がっていきます。

■適用済みの最適

十分に最適化がなされている項目は「適用済みの最適化」としてここに表示されます。

それでは、それぞれの項目について詳細と代表的な修正方法を見ていきましょう。

 PageSpeed Insightsの評価項目と各項目の最適化方法

1.画像を最適化する

この項目は、ページで使用されている画像のフォーマットや圧縮率が適正かどうかを評価します。

もし、適正な画像フォーマットや圧縮率でないと評価された場合は、「適用可能な最適化」の項目に表示されます。

何も考えずにPhotoshopなどの画像加工ソフトからJPEG、PNG、GIFなどに書き出した場合、圧縮率が低かったり余計なメタデータが入ってしまっている場合があり、最適化が十分でないとみなされる場合があります。

【修正方法】

・簡単な方法

画像を一番簡単に最適化する方法、PageSpeed Insightsの測定完了画面(画面6)の下にある「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」のリンク部分から最適化されたリソースをダウンロードすることです。

リンクをクリックすると「optimized_contents.zip」というZIPファイルがダウンロードできるので、そのファイルを展開すると最適化された画像やHTML、CSS、JavaScriptファイルを入手することができます。

■画面6

・オンライン画像圧縮ツールを使う

オンラインの画像圧縮ツールを使って画像を最適化できます。ここでは代表的なツールとして「Optimizilla(画面7)」と「TinyPing(画面8)」(をご紹介します。

両方ともJPEG、PNG両方のフォーマットの圧縮ができるオンラインツールで、「Optimizilla」は手動で圧縮率を調整することもできます。

自分の目でクオリティを確認しながら最適化したい場合は「Optimizilla」、圧縮作業の手間を減らして手軽に最適化したい場合は「TinyPing」を使うなど、状況に応じて使い分けるのが良いでしょう。

■画面7 Optimizilla

■画面8 TinyPNG 

・デスクトップツールを使う

Windows、Mac用の圧縮専用ソフトを使って画像を最適化します。

Windowsでは「Caesium(画面9)」や「Antelope(画面10)」Macでは「ImageOptim(画面11)」などが有名です。

ソフトによって、圧縮でエッジが少し甘くなるものや色が少し浅くなるなど、傾向が違うので、実際に使ってみて自分の好みのツールを選びましょう。

■画面9  Caesium 

■画面10 Antelope 

■画面11 ImageOptim

・タスクランナーを使う

GulpやGruntなどのタスクランナーを使っている方は、それぞれのプラグインを導入して最適化するのが便利で効率が良いでしょう。Gulpだとgulp-imagemin、Gruntだとgrunt-imageminを導入することで画像を圧縮できます。

2. JavaScript/CSS/HTML を縮小する

「JavaScript/CSS/HTMLの縮小」とは、余分なスペース、改行、インデントなどの不要なバイトを取り除いて、ファイルの容量を小さく(minify)することです。HTML、CSS、JavaScript を圧縮することでダウンロード、レンダリングまでの速度を向上することができます。

縮小することで表示スピードは改善されますが、可読性は著しく損なわれるため、運用面を考慮して最適化を実施する必要があります。

 

【修正方法】

・簡単な方法

JavaScript/CSS/HTMLを一番簡単に最適化する方法は、画像と同じくPageSpeed Insightsの測定完了画面の下にある「このページ向けに最適化された画像、JavaScript、CSS リソースをダウンロードできます。」のリンク部分から最適化されたリソースをダウンロードすることです。

ダウンロードしたZIPファイルを展開すると最適化されたHTML、CSS、JavaScriptファイルを入手することができます。

・オンライン縮小ツールを使う

JavaScript/CSS/HTMLもオンラインツールを使って縮小することができます。

■画面12 Compress HTML Source Code 

HTMLの縮小ができるオンラインツールです。HTML内のJavaScriptは縮小されないので縮小によるJavaScript関連(特に解析や広告タグ)のトラブルを回避できます。

 

■画面13 HTML Minifier 

こちらもHTMLの縮小ができるオンラインツールです。JavaScriptも縮小されるので、縮小結果や用途によってCompress HTML Source Codeと使い分けるとよいでしょう。

■画面14 Online JavaScript/CSS/HTML Compressor  

ファイルをドラッグすることで、JavaScript/CSS/HTMLを縮小してくれる便利なオンラインツールです。JavaScript/CSS/HTMLの3形式に対応しているので、基本的なファイルの縮小はこのオンラインツールで完結できます。

 

 

・エディタのプラグインを使う

VisualStudioCode、Atom、SublimeTextなどのエディタでは圧縮の機能がプラグインとして提供されているものがあります。自分のお気に入りのエディタのプラグインを探してみてください。

・タスクランナーを使う

タスクランナーを使用している方はプラグインを使っての導入をお勧めします。特にCSSをSassやLessで書いている方は、コンパイルやベンダープレフィックスの自動付与と同時に縮小するのがスタンダードな使い方です。主なプラグインは次の通りです。

●Grunt

grunt-contrib-htmlmin(HTML縮小)

grunt-contrib-cssmin(CSS縮小)

grunt-contrib-uglify(JavaScript縮小)

●Gulp

gulp-minify-html(HTML縮小)

gulp-clean-css(CSS縮小)

gulp-uglify(JavaScript縮小)

3.リンク先ページのリダイレクトを使用しない

これはサイトの移転や、URLの変更、モバイルページへの転送などで、リダイレクトが複数設定されている場合に検出されます。

無駄・無意味なリダイレクトが行われていないか定期的にチェックしましょう。

モバイルページへの転送など、どうしてもリダイレクトが必要な場合は、次の施策を行ってください。

  • HTTP リダイレクトを使用して、モバイルユーザエージェントを持つユーザを、モバイルの対応する URL に中間リダイレクトなしで直接送信する。
  • パソコン向けのページに <link rel=”alternate”> マークアップを含めて、モバイル対応する URL を指定し、Googlebot がモバイルページを検出できるようにする。

4.表示可能コンテンツの優先順位を決定する

ファーストビューを表示するために必要なデータ量が大きすぎるときに表示される項目です。

【修正方法】

例えば、複数カラムで構成されたサイトでは、重要でない情報が入っているサイドカラムよりもメインの情報が記載されているメインカラムから先に読み込むようHTMLの構成を変更しましょう。

前述した画像の最適化やHTML、CSS、JavaScriptの圧縮を行うこともファーストビューのデータ量を抑える有効な方法です。

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

こちらも上記と同じくファーストビューの表示スピードに関連する項目です。

場合によってはサイトの構成から見直さなければいけないため、運用面までも含めて慎重に検討して修正しましょう。

【修正方法】

・CSS

ファーストビューの表示に必要なCSSはすべてHTML内にインラインで記述しましょう。

そのほかの必要なコンテンツはJavaScriptを使って、ページが読み込まれた後で読み込むように実装します。

もし、CSSがそれほど重くないなら、すべてのCSSをHTML内にインラインで記載するという手もあります。

実装の詳細はこちらで確認できます。

 

・JavaScript

JavaScriptもCSSと同じく、ファーストビューの表示に必要なものをHTML内にインライン化することで改善できます。それほど重くなければ、すべてインラインで記述しても問題にならないでしょう。

また、外部ライブラリを使用しているときや運用面などで、外部ファイルを読み込まないといけない場合は、scriptタグにHTML の async属性を使用することで、ページの表示を邪魔することなく、非同期でJavaScriptファイルを読み込むことができます。

ただし、JavaScript を非同期的に読み込むとき(例えばJqueryとJqueryのプラグインなど依存している、複数のスクリプトを読み込む場合)は、適切な依存関係の順序でスクリプトを読み込むようにJavaScriptファイル内で調整することが必要になります。

その他、実装の詳細などはこちらで確認できます。

 

6.圧縮を有効にする

ここからはサーバサイドでの最適化作業になります。

Webサーバ上でHTMLやCSS、JavaScript、SVGなどのリソースが圧縮されているか評価する項目です。この項目にかかわらず、サーバでの表示スピード最適化施策は、サーバのスペックによっては逆に表示スピードが遅くなってしまう場合があります。

インフラエンジニアやバックエンドエンジニアとよく相談して施策を行ってください。

【修正方法】

Apacheならmod_deflate、NginxならHttpGzipModule、IISならHTTP圧縮を設定することで修正可能です。(各サーバでの詳細な設定は省きますが、もし、サーバスペックなどが問題になるのならAmazon CloudFrontなどのCDNを使うのも選択肢の1つになるでしょう)

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

この項目はサーバ側でブラウザのキャッシュ期間が明示的に設定されているか評価されます。サーバ側でキャッシュ期間が明示されることによってブラウザはリソースをキャッシュから取得するので、ページの表示時間が短縮されます。

【修正方法】

サーバ側でExpiresを設定することで修正できます。Googleはキャッシュ期間を一週間以上設定することを推奨しています。

ページの性質や運用面などを考えて、画像ファイル、CSSファイル、JavaScriptファイルなど、ファイルの種類ごとに、それぞれ適切なキャッシュ期間を検討して設定してください。

HTMLファイルについては一般的に静的ではないため、キャッシュしないように設定するのが通例です。

8.サーバーの応答時間を短縮する

HTMLをサーバーから読み込むのにかかる時間を評価します。

【修正方法】

PageSpeed Insightsの該当ページにも記載されているように、サーバースペックの問題やCMSの問題、フレームワーク、ライブラリの問題など、サーバの応答が遅くなる要因は様々なことが考えられます。

インフラエンジニアに調査・修正を依頼して、適切な処置・対策をしてください。

まとめ

ここまでざっとPageSpeed Insightsを使った、ページの表示スピードの最適化について解説してきました。表示スピードの最適化には、フロントエンドやバックエンド、サーバまで様々な要因が絡んできます。一番大切なことは、これまで紹介した最適化を念頭に入れること。また、新規でもリニューアルでもまずサイトを制作する際は、最初にきちんとしたガイドラインを策定して制作することだと考えています。

今後、少しでもユーザが快適に閲覧できるWebサイトやサービスが増えてくれると嬉しいです。

  • このエントリーをはてなブックマークに追加