【Google推奨ツール】サイト表示速度をチェック・改善する方法

執筆者

おじま はやと(お兄さん)
このは屋のお兄さん。茨城出身のおばあちゃん子で、持ち味は皆を幸せにする笑顔。相撲には目がなく、朝青龍のモノマネを得意とする。趣味は料理で得意料理は祖母直伝「きんぴらごぼう」

普段ネットで情報収集をしている時、こんな経験ありませんか?

気になるサイトを発見して、クリック!
ページがなかなか表示されない・・・
「何だよ、おせーな!!」とイライラする
ページを閉じて、他のサイトに行く

実は私も頻繁にあります^^;

今やネットで何でも情報は手に入りますよね。しかし、情報がありすぎるというのも、また問題です。
無料での情報がありふれている分、ユーザーから選んでもらうのも大変なんですね。

そんな中、上記のようなサイトがあると、ユーザは一刀両断でサイトを去ってしまいます。
今の時代、「待つ」ことに対する耐性は益々弱くなっているんですね。

「え!うちのサイトもやばいんじゃない?」と思ったそこのあなた。

そうなんです。これは決して他人事ではないんですね。
自社でブログやメディアを運営しているのであれば、自分事として捉えることが必要です。

しかし、

「え、でもどうやって調べよう?」となりますよね。

そこで今回は、

・自社のサイトの表示速度を確認できて
・さらに改善策までわかる

そんなツールのご紹介をしたいと思います。

Webサイトの表示速度の重要性

実際にツールを紹介していく前に、SEOも絡んでくる表示速度の重要性について見ていきます。

冒頭で触れました通り、サイトの表示速度が遅いことで

・ユーザーをイライラさせ
・ページの離脱を増やす

といったことはご理解いただけたかと思います。

これは理論というよりも、実体験として多くの人の中にあることなでの自明ですよね。

実際にGoogleもページの読み込み時間は検索順位を決める要素の1つとして明言しています。
参照:ウェブマスター向け公式ブログ

じゃ、サイトの表示速度って相場はどれくらいなんでしょうか。

それは、2秒が目安値となります。

魔の2秒です。

2秒を超えてくると、急激に離脱者が増えていくと言われています。

といっても、急激に表示速度を向上させるもの無理があるので着実にやっていくのが得策ですね。

そこで良いお知らせがあります。

ページの表示速度について考えたい時に有効な方法については・・

実はGoogleが教えてくれているんですよ。
Google自体も、ページの表示速度が重要ということで明言しているので、その解決策を示してくれているんですね。

そのGoogleが示してくれる解決策が、PageSpeed Insights というツールなんです。

PageSpeed Insightsとは?

pagespeed

https://developers.google.com/speed/pagespeed/insights/?hl=ja

上画像が、Googleが提供する無料ツールPageSpeed Insightsになります。
とてもシンプルなデザインですよね。

使い方もとても簡単で、今日初めていじる人でも、何のハードルを感じること無く使うことができます。

さらに、このツールの優れた点は

表示速度の改善方法を提案までしてくれる

ということです。本当に至れりつくせりといったところですね。

その提案のとおりに、改善策を講じていけば着実にサイトの成績は向上するってわけです。

Google Analyticsと聞くと、すこし身構えてしまう方も多いですよね。
しかし、このPageSpeed Insightsであれば、そんな必要はないんです。

Google Analyticsほどの詳細分析とまではいきませんが、ある程度のサイトの状態は確認することができます。

実際にPageSpeed Insightsで測定してみる

では実際にサイトの表示速度を測定してみましょう。

まずは、PageSpeed Insightsにアクセスしましょう。

pagespeed1そうすると、上のような画面に移動します。

使い方は簡単で、黄色で囲った検索窓に調査したいWebサイトのURLを貼り付けます。そして「分析」を押すだけです。
今回はこのは屋のデモサイトにて分析を行っていきます。

pagespeed2

分析を行うと、次に上のような画面が表示されます。
非常にシンプルで見やすいですよね^^

URLの下に大きく、モバイルとパソコンという表記があります。
上画像はモバイルについての分析結果です。

pagespeed3

そしてこちらが、パソコンでの表示速度の分析結果です。

微妙の結果が異なっているのがお分かりでしょうか。

まずはここまで

●URLを入力を行い
●分析結果画面が表示された

という流れはよろしいでしょうか。

続いては具体的な見方についてです。

pagespeed4

具体的な見方については、以下の2ステップになります。

1.速度の点数を確認する
2.評価を確認し、修正方法を参照する

速度の点数は、一番上に表示されている数字ですね。
このは屋デモサイトであれば、72点ということになります。

70点を超えているとそこそこの点数かと思います。
中には30点、40点のサイトもありますのが、その場合はまずは50点を目指してみて下さい。

偏差値と大体一緒の感覚でいいかと思います(^^)

そして、点数を確認したら評価を把握します。

PageSpeed Insightsでは、3つの基準があります。

修正が必要 ページパフォーマンスに大きく影響する部分
修正を考慮 時間があれば修正を検討すべき部分
合格 パフォーマンスは良好

 

以上3つの評価基準から判断し、優先的に修正すべき点を確認します。

ここの表示される部分はサイトによってことなりますので、自分のサイトにとっての優先順位を把握し、改善策を試してみて下さい。

修正が必要

修正を考慮

の順番で手を付けていきましょう。

サイトの表示速度を改善するアイディア

PageSpeed Insightsの基本的な見方については理解できましたか?

3つの評価基準で分かれていてとてもわかりやすいですよね。ぜひ自社のサイトのURLを入力し試してみて下さい。

さて続いては、見つかった修正点を改善する方法についてです。

PageSpeed Insightsで提案される改善策は以下になります。
今回は起こりやすい5つの提案について見ていきます。

  1. 画像を最適化する
  2. スクロールせずに見えるコンテンツのレタリングをブロックしているJavaScript/CSSを排除する
  3. ブラウザのキャッシュを活用する
  4. サーバーの応答時間を短縮する
  5. HTML,CSS,JavaScriptを縮小する

それぞれについて簡単に見ていきましょう。

画像を最適化する

画像でデータが重いと、サイトの表示速度は悪化します。
画像に適したフォーマットを選ぶか、画像を圧縮することでファイルサイズの大幅な節約が可能になります。

ではどのようにこの問題を解決すればいいのでしょうか。

今回は画像の最適化の対処方法を2つ紹介します。

画像の形式がpngを使用している場合に有効なツールが、Tiny PNGというサービスです。

Tiny PNG

tinypng

https://tinypng.com

こちらのツールは大変簡単な操作性で、「Drop your .png or.jpg files here!」の部分に圧縮したい画像をドラッグ&ドロップするだけです。
早速やってみましょう。

もう一つの方法として、WordPressプラグインを使う方法があります。
使用するプラグインは、EWWW Image Optimizerというプラグインです。

EWWW Image Optimizer

ewww-image-optimizer

https://wordpress.org/plugins/ewww-image-optimizer/

こちらのプラグインの具体的な使い方に関しましては、以下の記事を参照下さい。

[blogcard url=”https://konohaya.com/ewww-image-optimizer-7232.html″]

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

続いての項目は少し専門的な内容ですね。

JavaScriptという言葉は、ピログラミングを少しかじっている人でないと聞き慣れない言葉ですよね。
少し知っている人でも、いまいち???という感じでしょう。

このJavaScriptとCSSへの改善策としては、正直難しいです。

Googleからの提案はこうです。

・レアリングをブロックするCSSの排除
・レンダリングをブロックする JavaScript を除去
・CSS 配信を最適化

上記を改善する何かをして下さいということになりますね。

そこで、最低限の2つのプラグインを知っておきましょう。

Asynchronous Javascript

asynchronous-javascript

https://wordpress.org/plugins/asynchronous-javascript/

こちらは、JavaScriptの実装を行ってくれるプラグインになります。

Async JS and CSS

async-js-and-css

https://wordpress.org/plugins/async-js-and-css/

上記はCSSを実装してくれるプラグインになります。

こちらのプラグインの具体的な使い方はこちらの記事が参考になります。

【参考記事】
スクロールせずに見えるコンテンツのレンダリングをブロックしている javascript/css を排除するWordPressプラグイン3つ

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

Googleからのこの提案の意味は、「ブラウザにキャッシュさせるように設定を行いましょう」ということです。
詳しい解決方法は参考記事を参照下さい。

【参考記事】
●ブラウザのキャッシュを活用する – PageSpeed Insights

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

サーバーの応答時間とは、サイトへのアクセスがあった時にサーバーがHTMLファイル等の情報を返すまでにかかる時間のことです。
もちろん早いほうがいいわけですが、目安は0.2秒とされています。

このサーバーの応答を遅くしている原因は、サイト毎に異なります。

こちらの参考となる情報をGoogleが用意してくれていますで、詳細は以下を参考にしてみてください。

【参考記事】
●サーバーの応答時間を改善する

HTML,CSS,JavaScriptを縮小する

サイトで文章を書いていると、改行やスペースなどの余分な部分がでてきますよね。
実はそういった部分でも容量を占めているんです。ですから、余分な改行やスペースなどの容量はできるだけ排除したいものです。

そんな時に活用できるのがRefresh-SFというサービスになります。

Refresh-SF

refresh-sf

http://refresh-sf.com/

「Input」の部分に対象ファイルをドラッグ&ドロップして、右上のJavascript・CSS・HTMLの該当するボタンをクリックします。

まとめ

いかがでしたか?

今回はGoogleの推奨するPageSpeed Insightsというツールを使って、自社のサイトのページ読み込み速度を確認し、さらにそれを改善する方法について見てきました。

もちろん改善の提案通りに一筋縄ではいきませんが、「自分のサイトは現状ここが悪いのか」ということが分かるだけでも価値はあります。
改善すべき点が明確になれば、あとはその方法と試すだけということになりますからね。

まずは最低限の対策を行ってみて下さい。

専門的な対策方法は、専門家の方に頼む方が早いですね。
餅は餅屋で不得意な部分は得意な誰かに任せ、自分が集中すべきところに集中することも大切です。

この記事への反響

無料Ebook:スモールビジネス必見!本当に役立つWebツール&サービス50選

Webマーケティングはツールを上手に使うことで、効率的に取り組むことができます。

このEbookでは、

・ランディングページを2時間で作れるツール
・WordPressで会員サイトを作れるツール
・キーワード選定力が10倍アップするツール

などスモールビジネスにおすすめのツール・サービスを50個まとめました。

ぜひ、あなたのWebマーケティングの実践にお役立てください。