【Google推奨】サイト表示速度をチェック・改善する方法
どうも、岩崎です。
インターネットで情報収集をしていると、こんな経験をしたことはありませんか？
気になるサイトを見つけて、クリック！
でも、ページが表示されない…。
「なんでこんなに時間がかかるの？」とイライラしますよね。
イライラしてページを閉じ、別のサイトに行ってしまう。
実は、私にもそんなことがあります。
今やインターネットで何でも情報を得ることができます。
しかし、情報が多すぎるのも問題ですよね。
無料の情報が多ければ多いほど、ユーザーに選んでもらうことが難しくなります。
そんな中で、先ほどのようなサイトだとすると、ユーザーは一気にそのサイトから離れていってしまいます。
今の時代、人が待つことへの耐性はどんどん弱くなっています。
「えっ！私のサイトも大変なことになっているんじゃないの？」
と思いませんか？
そうなんです。これは個人的な問題ではありません。
自分でブログやホームページを運営している方は、自分の事ように受け止める必要があります。
ところが、
「でも、どうやって調べればいいの？」
なので、今回は以下のことについて説明します。
- 自分のサイトの表示速度を調べることができます。
- また、その改善方法を調べることができます。
そんなツールをご紹介したいと思います。
Webサイトの表示速度の重要性
実際にツールを紹介していく前に、SEOも絡んでくる表示速度の重要性について見ていきます。
最初にお伝えした通り、サイトの表示速度が遅いことで
・ユーザーをイライラさせ
・ページの離脱を増やす
といったことはご理解されたと思います。
これは理論というよりも、実体験として多くの人の中にあることなんです。
実際にGoogleもページの読み込み時間は検索順位を決める要素の１つとして明言しています。
参照：ウェブマスター向け公式ブログ
じゃ、サイトの表示速度って他サイトはどれくらいなんでしょうか。
それは、2秒が目安値となります。「２秒」ですよ！
2秒を超えてくると、急激に離脱者が増えていくと言われています。
といっても、急激に表示速度を向上させるもの無理があるので着実にやっていくしかありませんよね。
そこで良い方法があります。
ページの表示速度について考えたい時に有効な方法について
実はGoogleが教えてくれているんですよ。
Google自体も、ページの表示速度が重要ということを言っているので、その解決策を教えてくれているんですね。
そのGoogleが示してくれる解決策が、PageSpeed Insights というツールなんです。
PageSpeed Insightsとは？
https://developers.google.com/speed/pagespeed/insights/?hl=ja
上の画像は、Googleが提供している無料ツール「PageSpeed Insights」です。
とてもシンプルなデザインになっていますよね。
使い方もとても簡単で、今日初めてこのツールを使う人でも、何のハードルも感じずに使うことができると思います。
さらに、このツールの一番の特徴は
表示速度を向上させるための提案までしてくれる。
ということです。これは嬉しいですよね。
提案に従って改善をしていけば、サイトのパフォーマンスは着実に向上していきます。
Googleアナリティクスと聞くと、ちょっと身構えてしまう方も多いと思います。
しかし、「PageSpeed Insights」を使えば、その必要はありません。
Google Analyticsのような詳細な分析まではできませんが、ある程度のサイトの状態を確認することができます。
実際にPageSpeed Insightsでやってみる
では実際にサイトの表示速度を測定してみましょう。
まずは、PageSpeed Insightsにアクセスしましょう。
そうすると、上のような画面に移動します。
使い方は簡単で、赤色で囲った検索窓にWebサイトのURLを貼り付けます。そして「分析」を押すだけです。
今回は私のウェブサイトで分析を行っていきます。
分析を行うと、次に上のような画面が表示されます。
非常にシンプルで見やすいですよね
URLの下に大きく、モバイルとパソコンという表記があります。
上画像はモバイルについての分析結果です。
そしてこちらが、パソコンでの表示速度の分析結果です。
微妙の結果が異なっているのがお分かりでしょうか。
まずはここまで
●URLを入力を行い
●分析結果画面が表示された
という流れはよろしいでしょうか。
続いては具体的な見方についてです。
具体的な見方については、以下の2ステップになります。
1.速度の点数を確認する
2.評価を確認し、修正方法を参照する
速度の点数は、一番上に表示されている数字ですね。
私のサイトであれば、62点ということになります。
60点を超えているとまぁまぁの点数だと思います。理想は70点かな？
中には30点、40点のサイトもありますのが、その場合はまずは50点を目指してみてください。
そして、点数を確認したら評価を把握します。
PageSpeed Insightsでは、３つの基準があります。
| 改善できる項目 | ページパフォーマンスに大きく影響する部分 |
| 診断 | 時間があれば修正を検討すべき部分 |
| 合格 | パフォーマンスは良好 |
以上３つの評価基準から判断し、優先的に修正すべき点を確認します。
ここの表示される部分はサイトによってことなりますので、自分のサイトにとっての優先順位を把握し、改善策を試してみてください。
改善できる項目
↓
診断
の順番でやっていきましょう。
サイトの表示速度を改善するアイデア
PageSpeed Insightsの基本的な使い方については理解できましたか？
３つの評価基準で分かれていてとてもわかりやすいですよね。ぜひあなたのサイトのURLを入力し試してみてください。
さて続いては、見つかった修正点を改善する方法についてです。
PageSpeed Insightsで提案される改善策は以下になります。
今回は起こりやすい５つの提案について見ていきます。
- 画像を最適化する
- スクロールせずに見えるコンテンツのレタリングをブロックしているJavaScript/CSSを排除する
- ブラウザのキャッシュを活用する
- サーバーの応答時間を短縮する
- HTML,CSS,JavaScriptを縮小する
それぞれについて簡単に見ていきましょう。
画像を最適化する
画像でデータが重いと、サイトの表示速度は悪化します。
画像に適したフォーマットを選ぶか、画像を圧縮することでファイルサイズの大幅な節約が可能になります。
ではどのようにこの問題を解決すればいいのでしょうか。
今回は画像の最適化の対処方法を２つ紹介します。
画像の形式がpngを使用している場合に有効なツールが、Tiny PNGというサービスです。
Tiny PNG
こちらのツールは大変簡単な操作性で、「Drop your .png or.jpg files here!」の部分に圧縮したい画像をドラッグ＆ドロップするだけです。
早速やってみましょう。
もう一つの方法として、WordPressプラグインを使う方法があります。
使用するプラグインは、EWWW Image Optimizerというプラグインです。
EWWW Image Optimizer
こちらのプラグインの具体的な使い方に関しましては、以下の記事をご覧ください。
スクロールせずに見えるコンテンツのレタリングをブロックしているJavaScript/CSSを排除する
続いての項目は少し専門的な内容ですね。
JavaScriptという言葉は、プログラミングを少しかじっている人でないと聞き慣れない言葉ですよね。
少し知っている人でも、いまいち？？？という感じでしょう。
このJavaScriptとCSSへの改善策としては、正直難しいです。
Googleからの提案はこうです。
・レアリングをブロックするCSSの排除
・レンダリングをブロックする JavaScript を除去
・CSS 配信を最適化
上記を改善する何かをしてくださいということになりますね。
そこで、最低限の２つのプラグインを知っておきましょう。
Asynchronous Javascript
こちらは、JavaScriptの実装を行ってくれるプラグインになります。
Async JS and CSS
上記はCSSを実装してくれるプラグインになります。
こちらのプラグインの具体的な使い方はこちらの記事が参考になります。
【参考記事】
●スクロールせずに見えるコンテンツのレンダリングをブロックしている javascript/css を排除するWordPressプラグイン3つ
ブラウザのキャッシュを活用する
Googleからのこの提案の意味は、「ブラウザにキャッシュさせるように設定を行いましょう」ということです。
詳しい解決方法は参考記事を参照下さい。
【参考記事】
●ブラウザのキャッシュを活用する – PageSpeed Insights
サーバーの応答時間を短縮する
サーバーの応答時間とは、サイトへのアクセスがあった時にサーバーがHTMLファイル等の情報を返すまでにかかる時間のことです。
もちろん早いほうがいいわけですが、目安は0.2秒とされています。
このサーバーの応答を遅くしている原因は、サイト毎に異なります。
こちらの参考となる情報をGoogleが用意してくれていますで、詳細は以下を参考にしてみてください。
【参考記事】
●サーバーの応答時間を改善する
HTML,CSS,JavaScriptを縮小する
サイトで文章を書いていると、改行やスペースなどの余分な部分がでてきますよね。
実はそういった部分でも容量を占めているんです。なので、余分な改行やスペースなどの容量はできるだけ排除したいものです。
そんな時に活用できるのがRefresh-SFというサービスになります。
Refresh-SF
「Input」の部分に対象ファイルをドラッグ＆ドロップして、右上のJavascript・CSS・HTMLの該当するボタンをクリックします。
まとめ
今回は、Googleが推奨するPageSpeed Insightsというツールを使って、あなたのサイトのページ読み込み速度を確認する方法と、その改善方法について見てきました。
もちろん、改善策の提案ほどわかりやすいものではありませんが、あなたのサイトで現在何が問題なのかを知るだけでも価値があります。
改善すべき点が明確になれば、あとはその方法を試すだけです。
まずは、最低限の対策を行ってみてください。
専門的な対策は、専門家に依頼するのが早いでしょう。
また、苦手な部分は得意な人に任せて、集中すべきところに集中することも大切ですよ。
