【SEO】サイトスピードはSEOに効果があるのか？PageSpeed Insightsの使い方

よく、最近話を聞くサイトスピードがSEOに効果があるのかないのかというお話。

色々なサイトを見ると
「スピードは順位に関係ない！」「ページ表示速度はSEOに重要！」などなど色々な意見があるようです。
Google側もサイトの表示速度を計測する。
PageSpeed Insights
というツールを公開しています。

また、私の経験上ですが、すごく重いサイトに限り、若干の順位の改善につながった事例もありました。（別の要因の可能性もありますが・・・）

どちらにしても、サイトの表示速度が遅いのは離脱率が多くなり、ユーザビリティにかなりの影響がありますので、改善をしたほうがいいでしょう。

PageSpeed Insightsの使い方

使い方はとても簡単です。

自サイトのURLを入力し「分析」を押すだけでサイトの点数と修正内容が表示されます。

結果の上部に【○○/100 速度】と色と点数でサイトを評価してくれます。 100点満点で色は赤→黄色→緑と良くなっていきます。とても几帳面な人は100点を目指すでしょうが、とりあえずは60~70点前後まで改善されれば大丈夫かと思います。

ちなみにyahooでも、60点前後ですｗ(Googleは100点ですが・・・)

その下に修正内容が表示されるのですが、重要な項目に「修正が必要」、注意する部分に「修正が考慮」という項目で表示されます。「修正が必要」を修正すると大幅に点数が改善されますのでこちらを優先的に修正していきましょう。

続いて主なエラーの修正方法を説明します。

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

1.レンダリングをブロックする JavaScript を除去してください。
Googleの説明
対処1 小さな JavaScript をインライン化する

例えばこのようなソースがあり

<html>
  <head>
    <script type="text/javascript" src="small.js"></script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

外部スクリプトの中身がこういった場合

 /* contents of a small JavaScript file */

headに入れるということです。

<html>
  <head>
    <script type="text/javascript">
      /* contents of a small JavaScript file */
    </script>
  </head>
  <body>
    <div>
      Hello, world!
    </div>
  </body>
</html>

短いスクリプトの場合、外部jsから読み込むよりも、headに直接書いたほうが表示速度が速くなるということです。
あくまで、ソースが短い場合のみ行ってください。

対処2 JavaScript の読み込みを遅らせる
外部jsに「async」を追加するだけ。

<script async src="my.js">

とても簡単です。
詳しい説明は割愛しますが、スクリプトを「非同期実行」するコードです。
注意としまして、実行タイミングが予期せぬタイミングになる可能性があるので、jQueryなど色々なライブラリを使用している場合は注意が必要です。

2.CSS 配信を最適化
Googleの説明
上記と同じようにCSSもインライン化を進めています。

こういった、ソースがあって

<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>

こういう外部CSSがあった場合

  .yellow {background-color: yellow; }
  .blue {color: blue; }
  .big { font-size: 8em; }
  .bold { font-weight: bold; }

以下のようにインライン化をします。

<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <script>
      var cb = function() {
        var l = document.createElement('link'); l.rel = 'stylesheet';
        l.href = 'small.css';
        var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);
      };
      var raf = requestAnimationFrame || mozRequestAnimationFrame ||
          webkitRequestAnimationFrame || msRequestAnimationFrame;
      if (raf) raf(cb);
      else window.addEventListener('load', cb);
    </script>
  </body>
</html>

重要なスタイルのみをインライン化して、ページの読み込みが完了したらjavascriptで読み込むといった流れです。
CSSのソースが短い場合は単純にインライン化でいいかと思います。

他にもCSS圧縮ツールで
Online JavaScript/CSS/HTML Compressor
というものがあります。
javascriptにもつかえ、ソースを張り付けて「CSS」を押すだけ。
ぎゅっと、改行やスペースを無くしたソースを作成できます。
ただし、すごく、みにくくなるので改修がしずらくなります。
用途によって使い分けてください。

また、インライン化といっても<a style=””>みたいな、タグに直接書くのは逆効果ですので控えましょう。

著者：poroa　｜　投稿日：2016年11月09日　｜　カテゴリ：SEO

POROA