SEO(検索エンジン最適化)に関して調べた【11日目】に書いたようにGoogleはサイトを評価する時に「ユーザビリティ」の一つとして「ページ速度」を考慮しています。
Google 検索の仕組み | 検索アルゴリズムのユーザビリティのところでこのように書かれています。
たとえば 2018 年 1 月には、検索アルゴリズムでサイトの Page Speed を考慮することを決定し、変更を実施する 6 か月前に発表しました。
https://www.google.com/intl/ja/search/howsearchworks/algorithms/
確かに、読み込みが遅いサイトに行くと、待てなくて「戻るボタン」押したりしちゃいますよね？
ということで自分のブログの速度解析をして改善していきましょう！
サイトのページ速度解析ツール２つ
先程のGoogleのページで推奨されているツールは２つあります。
- PageSpeed Insights
Googleの提供するスピード測定ツールです。ページ速度のスコアや、遅い原因と思われる項目を教えてくれます。 - WebPageTest – Website Performance and Optimization Test
WebPageTestが提供する測定ツール。最初にどのエリアから確認するか(Tokyoからのアクセスを想定)等を設定できます。ページ内の各アイテムの読み込み時間等が細かくレポートされます。
Google PageSpeed Insightsを使ってみる
PageSpeed InsightsにアクセスしたらブログのURLを入れてみましょう。
トップページなど記事の一覧が出るページと、個別記事ページはタイプが異なるのでそれぞれ調べてみたほうが良いです。
結果の見方
結果には「モバイル」と「パソコン」があり、左上で変更できます。両方確認しましょう。
スコア
最初にある円グラフが「スコア」です。
このスコアは、Lighthouse を実行してページに関するラボデータを収集、分析することで決定されます。スコアが 90 以上であれば速い、50～90 であれば平均的と見なされます。50 未満は遅いと見なされます。
https://developers.google.com/speed/docs/insights/v5/about
このLighthouseツールですが、Chromeブラウザ上の拡張機能でも実行することができ、パフォーマンス(速度)以外の項目も解析できるので使ってみると面白いです。(Lighthouse Chrome 拡張機能)
スコアは以下のように色分けされています。
- 0 to 49 (遅い): Red（赤)
- 50 to 89 (平均): Orange（オレンジ)
- 90 to 100 (速い): Green（緑)
ラボデータ
このラボデータには６つのパフォーマンス指標が表示されますが、ブログのような表示メインのサイトの場合は以下の３つの指標が重要になります。（なお以下の指標は最新版で非推奨のようです。First Meaningful Paint、CPU の初回アイドル)
- First Contentful Paint(FCP) :
ページの最初の要素が描かれるまでの時間
- 速度インデックス(Speed Index):
ページのコンテンツが取り込まれて表示される速さ
- インタラクティブになるまでの時間(TTI) :
読者が操作できるようになるまでの時間
(JavaScript等すべて読み終わった時間)
改善できる項目
改善できる項目が、対応をするとどれくらい時間削減になるかも含めて書かれていますので自分で変更できるところは対応していきましょう。
基本的にはページを軽くする(画像の圧縮率やサイズ、不要なjavascriptを外す等)ことが一番容易にできる対策となります。
WebPageTestを使ってみる
「WebPageTest」は「PageSpeed Insight」よりもうちょっと技術よりな雰囲気です。
WebPageTest – Website Performance and Optimization Testにアクセスしてテスト設定をします。
URLだけではなく、テスト場所(モバイルか、地域(Tokyo等))、ブラウザのタイプなどを選びます。また、初期状態では３回テストが実施され時間がかかるので１回に変更して実施するのが良いと思います。
結果の見方
テスト結果ですが、一番上の緑の四角が並んだところがスコアになり、「最初の読み込み」、「Keep-alive(いちいち接続が切れないか)」、「データ転送」、「イメージ圧縮」、「キャッシュ」といった項目別に評価されます。
スコアの下の黒いメニューバーから様々な詳細レポートが見れます
例えば、以下のDetailページの結果
赤枠のところでjavascriptを読み込むのに時間がかかっています。ですが、実はこれブログとは関係ない「Google Adsense(広告)」用のjavascriptです。なので広告外せば速度が上がることが分かりますね。(外しませんけど。。)
Cocoonテーマ (WordPress)の高速化設定
このブログで紹介しているCocoonテーマには高速化設定がありますので、基本的に全部オンにしておきましょう。
高速サーバーを検討
さらに高速化を目指す場合は高速なレンタルサーバーに乗り換えましょう。
特に高速だということで評価が高いのはエックスサーバーです。レンタルサーバーの変更はかなり大変なので、本腰入れて儲かるブログを作成するなら最初から高速なものを選んでおきましょう。
コメント