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

SCROLL

公開日:2020.04.19    更新日:2020.04.19

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のメソッドを調整

SEO対策

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

 

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

 

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

 

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

 

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

 

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

 

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

コンタクト CONTACT

WEB制作のご依頼はこちらから

このコラムを執筆している
ソラノデザインです
ホームページ制作をご検討中の方は
是非一度ご相談ください

Contact

まずは気軽にご相談から!

お問い合わせフォーム

石川県金沢市のホームページ制作会社

ソラノデザイン

〒920-0345
石川県金沢市藤江北4丁目395 ABOX3セパレーツ 106

営業時間: 平日10時〜19時

TEL: 076-209-0230 MAIL: sorano@kanazawa-homepage.jp プライバシーポリシーについて 会社概要
  • 石川県 - 概要

    石川県
    HP/http://www.pref.ishikawa.lg.jp/
    住所/石川県金沢市鞍月1丁目1番地
    金沢市
    HP/http://www4.city.kanazawa.lg.jp/
    住所/金沢市広坂1-1-1
  • 石川県 - メディア・芸能

    新聞
    北國新聞/北陸中日新聞
    テレビ
    NHK金沢放送局/北陸放送/石川テレビ放送/テレビ金沢/北陸朝日放送
    ラジオ
    エフエム石川/えふえむ・エヌ・ワン/FMかほく/ラジオかなざわ/ラジオこまつ/ラジオななお
  • 石川県 - 金融機関

    銀行
    北國銀行
    信用金庫
    金沢信用金庫/のと共栄信用金庫/北陸信用金庫/鶴来信用金庫/興能信用金庫
  • 石川県 - スポーツ

    サッカー
    ツエーゲン金沢
    バスケットボール
    金沢武士団
    野球
    石川ミリオンスターズ