WEBサイトの表示速度を計測するPageSpeed Insights

PageSpeed Insightsを使って表示速度を計測しよう

こんにちは、金沢でホームページ制作を行うソラノデザインです。

以前少し他の記事でも触れたんですが、「ホームページの表示速度が遅いと、検索順位に悪影響がある」という事実をご存知でしょうか？

「表示速度」については体感でも遅い速いはある程度わかりますが、細かく計測したいとき、ツールがないと不便ですよね。

その「WEBサイトの表示速度計測」ツールこそが、今回ご紹介するPageSpeed Insightsというものです。

PageSpeed Insightsの使い方

Page Speed Insights（ページスピードインサート）

まずは上のリンクを開いて、PageSpeed Insightsを開きましょう。

使い方は本当に簡単で、トップページに表示されている入力ボックスに、計測したいサイトのURLを入力するだけです。

試しにソラノデザインのホームページを計測してみましょう。

計測中は、下記のような画面が表示されます。

そして、下記が、計測完了画面ですね。

モバイル・PCどちらかが50点以下になってしまうと、 ホームページの評価が下がってしまいます。 少なくとも65点以上はモバイル版・PC版ともにクリアしているのが理想です。

Googleの公式見解で、「ホームページの表示速度に3秒以上かかってしまうと、40%のユーザーがページを見るのを断念してしまう」というものがあります。

この結果に基づいた評価基準なんですね。

ちなみにあの有名なAmazonさんも、「表示速度が0.1％低下すると、売り上げが1%下がる」という調査結果を出しています。

WEBサイトから売上を上げている場合は特に、表示速度には気をつけましょう。

表示速度を向上させるには、具体的にどうしたらいいの？

表示速度向上には、プログラマーの作業が不可欠です。

もしプログラマー無しで何かできることがあるとすれば、サーバーを今より高性能のものに変えることくらいでしょう。

では、速度向上のためにプログラマーが具体的に何をするのかチェックしてみましょう！

画像の圧縮と調整

画像データの中には、表示されるデータ以外に、撮影日や撮影者など、見えない無駄なデータ（メタデータ）が多く入っています。

適切な画像サイズ、拡張子の選定、無駄なデータの削除を行い、できる限り画像を最適化させましょう。

ホームページを見たときに、「png形式の画像のピントがぼやけている」というのはよく見かけますが、適切に画像を処理すればそういった事故は防げます。

pngの場合はサイズが大き過ぎても小さ過ぎても画像のピントがぼやけるので、

パスで描画できる画像はSVGで表示させ、pngの場合はページ内のコンテンツに合ったサイズにトリミングしましょう。

もちろん、前述の「無駄なデータ（メタデータ）の削除」も大切です。

JavaScriptのメソッドを調整

これはプログラマーのセンスや技術も問われますが、まずはアニメーションやメニューの表示に使われているメソッドを調整しましょう。

私もまだまだですが、見た目は同じ動きでも、「無駄な動きをできる限り省いた」コードを目指すべきです。

技術的に可能であれば、できる限りjQueryやプラグインを使用せずにコードを書くのが理想です。

またどのメソッドがどのタイミングで着火しているのか、javascriptの読み込みタグに「async」を付与できるものはないか、head内で読み込まなくて良いスクリプトをhead内で読み込んでいないか….など、チェックすべき要素はまだまだありますね。

html、cssに比べ、javascriptはブラウザのレンダリングを遅延させる事が多いです。

どういったJSが書かれているかしっかり見直し、見た目に関係のない部分で、ホームページをブラッシュアップするのもプログラマーの醍醐味と言えます。

見た目も中身も最高のホームページを目指し、私も努力を続けようと思います。