Page Speed Insightstの使い方~Googleによるサイトの表示速度改善ツール

新着

Page Speed Insights-Google Developersの使い方を紹介しますね。

PageSpeed Insights は、無料で利用できるGoogleのツールです。

ウェブページのコンテンツを自動で解析し、

ページの読み込み時間を短くするための方法を提案してくれます。

とても便利なので、page speed insightsを紹介したいと思います。

私のブログも少し修正が必要ですね(^_^;)

Google側が、サイトの表示速度が遅いとSEOに不利になると発表していますが

(弊社運営のスマホサイト化していない表示が遅いサイトはこの間順位をかなり落とされてしまいました)

自分のホームページがどれくらいの速度で表示されるのか

そして ホームページのどの部分を改善すると

より早くホームページが表示されるのかを教えてくれる 便利なGoogleの無料サービスです。

今はスーマートフォンで見る方が多く、3G環境でホームページを見る時

表示が遅いとイライラしますよね、お客様のためにも 無料で使えるこのツールを使って

できる範囲からでいいので

ご自身のホームページの表示速度の改善をしてくださいね。

 

Google Developers ”PageSpeed Insights 2.0”

https://developers.google.com/speed/pagespeed/insights

 

まず、Googleのアカウントでログインします。

 

次に、「ウェブページのURLを入力」とうっすらグレーで書かれている欄に、測定したいURLを入力し

右の青い「分析」ボタンをクリックします。

(入力するURLは、トップページでなくても、カテゴリーや特定のページのURLでも構いません)

Googleのサイトの表示速度を測るツール

 

弊社運営のはっちゃんセミナーのURLを入力してみました。

表示されているのは、スマートフォンで見えている画面とGoogleからの

スマホサイト改善の提案箇所の内容です。

Googleのサイトの表示速度を測るツール でのスマホサイトの表示

 

上のタブで切り替えパソコンサイトで表示したものがこちら

パソコンサイトの表示速度

 

 

実際には、下記のように表示されました。

ひとつひとつ項目を修正していくと、表示速度が早くなり、お客様にもユーザービリティの向上と

SEO対策としても十分期待できます。

 

————————-<実際に表示された内容>—————————

速度

修正が必要:(この赤い項目から対応してください)
ブラウザのキャッシュを活用する
修正方法を表示

スクロールせずに見えるコンテンツのレンダリングブロック JavaScript/CSS を排除する
修正方法を表示

圧縮を有効にする
修正方法を表示

修正を考慮:(余力あればこちらも対応してください)
サーバーの応答時間を短縮する
修正方法を表示

画像を最適化する
修正方法を表示

JavaScript を縮小する
修正方法を表示

CSS を縮小する
修正方法を表示

HTML を縮小する
修正方法を表示

2 個のルールに合格(この緑のところはサイト制作のルールでOKもらった部分です)

——————————————————————————

 

ここからは前の英語バージョンの記載ですので飛ばしてください

High priority ,  Medium priority ,  Low priority ,  Experimental rules , Already done!

5つ表示されていますが

赤の「High priority 」の上から 「サイトで修正したほうがいい優先順位」の項目になっています。

 

High priority – (高い優先度) 必ず修正した方がいい項目

これらの読み込み時間の短縮方法は、

少ない開発努力で大きなパフォーマンスの効果を得る可能性があるものです。

まずこれらの項目に対処してください:

Medium priority – (中間の優先度)修正すれば今よりも早く表示される項目

これらの読み込み時間の短縮方法は、それほど大きな効果が得られないものか、

実装の作業量が多いものです。これらの項目は高い優先度の短縮方法の後で対処してください

Low priority – (低い優先度)その他の細かな修正したほうがいい項目

これらの読み込み時間の短縮方法は、効果が最も小さいものです。

より高い優先度の項目に対処してから、これらの項目を検討してください

Experimental rules – (試験的なルール)余力があれば参考としてみておいてください

これらの読み込み時間の短縮方法は試験的なものですが、

PageSpeed のスコア全体には影響しません。

これらの項目は調査を要する領域を指し示していますが、有用性は場合によって異なります

Already done! – (すでに対応済み、提案はもうありません)

このページは既にこれらのベスト プラクティスを順守しているため、

これらのルールに関する読み込み時間の短縮方法はありません。

 

実際の「修正が必要」の項目の一つを見てみましょう。

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

● 変更後のサイズで画像を提供する、

● 圧縮を有効にする

 

とありますので

● 変更後のサイズで画像を提供する、をクリックすると下記のように表示されました。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

変更後のサイズで画像を提供する

画像サイズを適切にすると、データ サイズを大きく削減できます。
詳細

このページに関する読み込み時間の短縮方法

以下の画像は HTML または CSS 内でサイズが変更されます。変更後のサイズで画像を提供すると 269.8 KB(85%)削減できます。

  • www.miyukiblog.com/…/600_26.jpg は HTML または CSS 内でサイズが 600 x 400 から 191 x 135 に変更されます。変更後のサイズで画像を提供すると 177.2 KB(89%)削減できます。

━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

上記の意味は、

まず、このWordPressのテーマは、アイキャッチ画像対応しています。

そのため、アイキャッチ画像を入れた時に

実際の大きさは、

アイキャッチ画像デモ

 

この600 x 400 ピクセルのサイズですが、

アイキャッチ画像にすることで WordPress側で テーマに合ったサイズに自動縮小しています。

サイト上で表示されている画像のサイズは、下記のように 191 x 135ピクセルとかなり小さいです。

 

アイキャッチ画像の表示サイズ

ですので こんな大きな画像は必要ないですので

最初から表示される191 x 135ピクセルでアイキャッチ画像を作って

登録すれば、 177.2 KB(89%)削減できます。

というの意味になります。

 

かなり、具体的な指示になっていますので

一つ一つ対応すれば大丈夫ですね!

 

最近弊社で使用している デザインは、スライダーといって

画像が横にビュン・ビュンと流れていくデザインを好んで使用してるため

画像が大きく、負担も大きくなるため 普通の静的なページよりも

表示速度は遅くなります。

 

ただ、見た目的には スライダーを使った方が今っぽいんですよね~(^ω^;)

ですので

サイトの表示速度の改善も やらないととは思っていましたが

他の事に時間を割いていて、後回しになっていて手付かずでした。

 

しかし、改善後のアクセス数を実際に見てみると、「後回しでなく、すぐにやらないとな~」と実感しました。

Google Developers ”PageSpeed Insights ” 一度、お試しくださいね。

 

 

プロフィール

MIYUKI
こんにちは、三重県四日市出身です。ネットショップやWordPressなどの制作やコンサルやセミナー講師等で教えています。このブログは最近雑多になってしまったため、備忘録として色々書いています。
■ はっちゃんセミナー
タイトルとURLをコピーしました