【SEO対策に必須】手軽にページスピードを改善する方法

こんな方におすすめ
  • サイトの表示スピードを改善したい人
  • そもそも表示が遅くなる原因を知りたい人
  • なぜ表示スピードを改善する必要があるのか知りたい人
  • 表示スピードが遅いのはわかっているけど、ほったらかしにしてる人

どうも、ブロガーのポムです!

ページスピードを改善したいのに上手くいかないのはどうして?

ページスピードが遅いままだと何がいけないの?

SEO対策の中でもよく耳にする「ページスピードの改善」に関して悩んでいる方をよく見かけます。
私もブログを始めてから4ヶ月ほど悩み続けていました。
特にテーマエディターを圧縮させて改善する記事も見かけましたが、「万が一失敗したら」と考えると他の方法で改善したくなると思います。

そこで、今回は自分も悩んだ末に大幅に改善できた経験から手軽に改善できる方法をいくつか紹介していこうと思います!

ちなみに改善前がどれほど酷かったか気になる方は下の記事も読んでみて下さい

目次

そもそもなぜページスピードを改善する必要があるのか?

なぜページスピードを改善する必要があるのかというと、表示速度が掲載順位に影響を及ぼすからです。
これはGoogleでも公開されている情報です。

ページの読み込みに時間がかかると、直帰率に深刻な影響を及ぼします。

具体的には:

ページの読み込み時間が 1 秒から 3 秒に増加すると、直帰率は 32% 増加します。

ページの読み込み時間が 1 秒から 6 秒に増加すると、直帰率は 106% 増加する。

遅いと判断されたページは、Google 検索での順位が下がる可能性がある。ケーススタディをご覧ください。

出典:ウェブに関する主な指標レポート|Google search consoleヘルプ

また、Googleの情報のみならず、Amazonなどの調査によって実際に収益の減少や顧客満足度の低下が明らかになっています。

Amazonの調査では、ページの表示速度が0.1秒遅くなると、売り上げが1%低下することが明らかになった。

Googleからは、ページの反応が0.5秒遅くなるとアクセス数が20%低下すると発表されている。

さらに米Aberdeen Groupの2008年の調査では、スピードが1秒遅くなるとページビューが11%、コンバージョンが7%、顧客満足度が16%低下することが報告されている。

出典:Webサイトのレスポンス速度から見るインターネットユーザーの閲覧行動と企業の課題

今までもSEO対策として重要であることは知られていますが、2021年6月のアップデートで”コアウェブバイタル(Core Web Vitals)”という掲載順位に影響がある要素が新たに加えられ、より一層ページスピードの重要性が高まっています。

→コアウェブバイタルの詳細はこちら

ポム

つまりページスピードを改善しなければ、アクセス数や収益を必然的に逃していることになるので、気を付けましょう!

まずはサイトのページスピードの確認

もし現状のページスピードがわからなかったり、一回確認してみたいという方はPageSpeed Insightsで一度確認してみて下さい!


PageSpeed Insights の画面

使い方はとても簡単で、赤線のところにページスピードを調べたいサイトのURLを入力します。

そして、丸で囲んでいる「分析」という項目をクリックすれば、分析が始まります。

あとは数秒ほど待てば、ページスピードの結果が表示されるので確認することができます。

ページスピードが遅くなる原因

ページスピードが低下する原因はいくつかあります。

  1. アドセンス広告の読み込みが遅い
  2. 不必要なプラグインの稼働
  3. 画像データの容量が大きい
  4. 無駄なJavaScriptやCSSがある

もちろん上記以外にも多くの原因が考えられますが、今回は代表的な要素をピックアップし、ページスピードの改善する方法を紹介していきます。

ブログや記事の広告にGoogle AdSenseを掲載している方は多いと思います。
しかし、Googleは「ページスピードが大事!」と言ってるくせにGoogleの広告をそのまま貼ったらページスピードは低下してしまいます・・・
そのため”遅延読み込み”という方法を活用して、記事の内容は先に表示しつつ後から広告を表示するという形式で読み込ませる必要があります。

次にWordPressのプラグインは、有効にしていると様々な前処理を追加します。
複雑なプラグインの場合、サイトを表示する時に数十種類にも及ぶ処理を追加したり、読み込む度にデータベースにデータを書き込むような処理を行うものもあります。

そのため、利用していないプラグインは「無効にする」または「削除することをおすすめします。

”画像データ”の容量に関しては、コンテンツの増加によるデータ容量の増加という意味ではなく、画像データ1つ1つの容量の大きさのことです。

特に最近は解像度が高い(データ容量が大きい)画像が多く出回っており、必然的に読み込む時間を圧迫する状態になっています。
そのため、データ容量が大きい画像の場合は圧縮してから使用するようにしましょう。

Web上の仕組みは、外部ファイルの数だけ通信を行います。

つまり、無駄なJavaScriptやCSSを残したままにしておくと、それも毎回読み込もうとするため必然的にページスピードが遅くなってしまいます。

ページスピードを改善する方法

主に前の章で紹介した4つの原因に対して、ページスピードを改善する方法を紹介していきます。

1,アドセンス広告の表示を遅延する方法

アドセンスコードには新コード・旧コードがあるため、まずはそれを確認してください。(下の画像の赤線が引かれているとこが判断箇所です)

  • 新コード:data-ad-client
  • 旧コード:google-ad-client

次に青線で隠されているところにある、16桁のサイト運営者IDをメモしておきます。

そして、下に表示されているアドセンス遅延コードを利用します。

<!-- Adsense 遅延読み込み 開始 -->
<script type="text/javascript">
(function(window, document) {
  function main() {
    // GoogleAdSense読込み
    var ad = document.createElement('script');
    ad.type = 'text/javascript';
    ad.async = true;
    // 新コードの場合、サイト運営者IDを書き換えてコメントアウトを外す
    // 旧コードの場合、コメントアウトしたままにする
    //ad.dataset.adClient = 'ca-pub-XXXXXXXXXXXXXXXX';
    ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
    var sc = document.getElementsByTagName('script')[0];
    sc.parentNode.insertBefore(ad, sc);
  }

  // 遅延読込み
  var lazyLoad = false;
  function onLazyLoad() {
    if (lazyLoad === false) {
      // 複数呼び出し回避 + イベント解除
      lazyLoad = true;
      window.removeEventListener('scroll', onLazyLoad);
      window.removeEventListener('mousemove', onLazyLoad);
      window.removeEventListener('mousedown', onLazyLoad);
      window.removeEventListener('touchstart', onLazyLoad);
      window.removeEventListener('keydown', onLazyLoad);

      main();
    }
  }
  window.addEventListener('scroll', onLazyLoad);
  window.addEventListener('mousemove', onLazyLoad);
  window.addEventListener('mousedown', onLazyLoad);
  window.addEventListener('touchstart', onLazyLoad);
  window.addEventListener('keydown', onLazyLoad);
  window.addEventListener('load', function() {
    // ドキュメント途中(更新時 or ページ内リンク)
    if (window.pageYOffset) {
      onLazyLoad();
    }
  });
})(window, document);
</script>
<!-- Adsense 遅延読み込み 終了 -->
  • 旧コードの場合、このコードをコピーして</body>タグ直前に入力しましょう。
  • 新コードの場合、//ad.dataset.adClient = ‘ca-pub-XXXXXXXXXXXXXXXX’; の Xを先ほどメモした16桁のサイト運営者IDに変更し、コメントアウト「 // 」を削除します。
    削除したら旧コードと同様に変更した新コードをコピーして</body>タグ直前に入力しましょう。

例えば、サイト運営者IDが「1234567890123456」の場合、 ad.dataset.adClient = ‘ca-pub-1234567890123456’; となります。

最後に、表示させたい箇所に広告コードを貼り、アドセンスコードの一行目に表示される赤線の部分を削除すれば、設定は完了です。

<script ~/script>の削除作業は貼り付ける全ての広告コードで行わなければいけません。
1つでも残っていると、効果が発揮されないので注意してください!

2,不要なプラグインの削除

プラグインは便利なものですが、インストールすればするほどページスピードに影響を与えてしまうため、必要最低限使用するものだけに絞ることをおススメします。

今回私が整理していた中で、特にページスピードに影響を与えていたのが「Site Kit by Google」 でした。

Site Kit by Googleは、Google公式ツールでありWordPressと簡単に連携できる便利なプラグインです。

しかし、あくまでWordPress上でサーチコンソールやアナリティクスの結果を簡易的に見れるプラグインなので、結局詳細なデータはサーチコンソールやアナリティクスで確認します。

また、このプラグインによってページスピードが大幅に低下し、SEO評価の足を引っ張ってしまっていたことがわかりました・・・

ちなみにこれはどちらもアドセンス広告の遅延設定は完了しています。
そのため、約50点近く上昇していることがわかります。

「いつもサーチコンソールやアナリティクスはそれぞれのサイトで確認してる」という方はすぐに削除することをおススメします!

3,画像データの圧縮

画像データの圧縮方法は過去に便利ツールの紹介記事を投稿しているので、下の記事の第2章をご確認ください。

4,簡易的にJavaScriptなどを圧縮する方法

JavaScriptやCSSを直接変更したり、いじることは慣れていない人からすると中々難しいです。
私自身も全くできません・・・

しかし、コードの行が切り替わるとこで空白の改行が施されている箇所がチラホラあると思います。

実はその空白の行を消して簡易的に圧縮するだけでも、ページスピードに影響を与えることができます!

私もこの方法で簡易的に圧縮しただけで、5~10点ほど点数が上がったので試してみるといいかもしれません。

ページスピードの改善でSEOの評価を上げよう!

いかがだったでしょうか?

SEO対策で欠かせないページスピードの改善をぜひ実践してみて下さい。

それでは、今回はこの辺で!

ポム

当ブログを応援していただけると幸いです

PVアクセスランキング にほんブログ村
よかったらシェアしてね!

コメント

コメントする

目次
閉じる