2021年9月14日の午後8時30分ごろに、Page Speed Insightで計測した速度が、モバイルは、52⇒98。パソコンは65⇒98になりました。

サイトの速度が低下した時に、下記の作業(当日の作業自体は、概ね10分~15分程度)を行なえば、改善する場合があります。

今回は、サイトの速度低下の原因が、グーグルアドセンスにあったために、グーグルアドセンスのスクリプト他を修正しました。

サイト(ブログ)の速度低下の原因をグーグルアドセンスと特定したのは、グーグルアドセンス(広告)を停止した際に、パソコンやスマートフォン(携帯電話)の速度が、向上したからです。

この記事では、下記の項目を修正しました。

1.画像ロゴの削除(PNG形式)

2.Search RegexrとCrayon Syntax Highlighterの停止(無効化)

3.グーグルアドセンスのスクリプトの一部削除

4.遅延読み込み(Lazy Load)の実施。

4つを実施しました。

なお、サイト(ブログ)の前提条件は、下記のとおりです。

レンタルサーバー=Xサーバー(X10)

ブログの形式=wordpress

ブログのテーマ=賢威7.1 クール版バージョン: 7.1.0.9。作者: 株式会社ウェブライダーです。

回線の速度は、ダウンロードが81.04MBps。アップロードが97.67MBpsでした。

記事は、概ね400記事です。

画像は600ピクセル(最大幅)に抑えています。また画像形式はJPEGです。画像の枚数ですが、1つの記事に、多い時は10枚くらい入れる時もあります。

記事の内容によって、ケースバイケースです。

上記を踏まえて、今回は、サイト(ブログ)の読み込み時間を短くするために、行った事項を記事化します。

サイトの速度低下対策。体感速度は大切です

サイト(ブログ)の読者は、Page Speed Insightなどは使用していません。サイト(ブログ)の読者は、体感して開くことが遅いサイトは、サイト(ブログ)を開かずに離れていきます。

サイト(ブログ)は、さまざまな原因によって重くなります。このため、サイト(ブログ)の速度が低下することがあります。サイト(ブログ)の速度低下は、SEOの低下やブログの読者の減少につながるケースがあります。

自分のサイト(ブログ)の速度低下を計測する方法は、沢山ありますが、最も手っ取り早いのは、ヤフーなどにアクセスする時間と、自分のサイト(ブログ)のアクセス時間(体感時間)を比較対照してみることです。

ヤフーや大手のサイトなどから自分のサイト(ブログ)へアクセスして、いつまでも、クルクル時計が表示されて、自分のサイト(ブログ)が表示されないケースは要注意です。

ここで、大手のサイトと言ったのは、大手のサイトは基本的に、ITエンジニアの手によって、高速化の仕組みがセッティングされているからです。

例えば、大手の通販サイトアマゾンです。URLは、https://www.amazon.co.jp/です。

この会社は、自社の広告塔であるサイトの鈍足化は、死活問題になります。

体感速度が鈍化していると思った場合は、Page Speed Insightなどで、詳細にチェックしてください。

要するに、アマゾンへは一瞬でアクセスできたのに、自分のサイト(ブログ)へのアクセスは、クルクル時計が回ったままという時は、Page Speed Insightなどで、詳細にチェックしてくださいという意味です。

グーグルは速度が速すぎて、比較対照になりません。

この体感時間は、大まか(感じた速度)でOKです。

サイトの速度低下対策。改善後のスコアはモバイル98点パソコン98点

サイトの速度低下認識は、パソコン上での自分のサイト(ブログ)へのアクセス時間が過大になったことに気がついて、速度低下対策を行うことになりました。

下記の画像のように対策前は、モバイルは52。パソコンは65です。

このモバイルは52。パソコンは65ですが、画像ロゴを削除した後の数値ですので、画像ロゴを削除する前の数値は、もっとひどい数値でした。(数値自体は失念して思い出せません。)

多分、モバイルは40代。パソコンは50代だったと思います。(うろ覚えです。)

根拠のある数値は、モバイルは52。パソコンは65からスタートで、2日前の、ほぼ同じ時刻です。

                  ↓

サイトの速度低下対策。1.画像ロゴの削除(PNG)

まず、wordpressのダッシュボードの、賢威の設定(サイト内共通)の、修正設定を行います。

下記の画像のように、設定してあった画像を消去します。

画像ロゴの削除(PNG)を削除し、空欄にすることで、サイト(ブログ)は若干、軽くなりました。

なお、画像ロゴの削除とは別に、画像のサイズが大きい場合や画像量がサイト(ブログ)の速度低下の主な原因になっている場合は、画像のサイズ変更などのプラグインのインストールや、function.PHPなどへの書き込みが必要です。

サイトの速度低下対策。2.不要不急なプラグインの無効化

次に、下記の、2本のプラグインを削除。停止(無効化)しました。

Crayon Syntax Highlighterは、削除しました。

Search Regexrの無効化(このプラグインは、インストールしたままですが、仕様の都度、有効化します。)

これで、使っていないプラグインは、無効化したので、現在有効化して使用しているプラグインは8本となります。

サイトの速度低下対策。3.グーグルアドセンスのスクリプトの一部削除

当サイト(ブログ)では、header.php(1本)とquick adsense(4本)にグーグルアドセンス広告を貼っています。

サイトの速度低下対策。テーマヘッダーの、グーグルアドセンス<script>から</script>までを削除します。

1つ目。賢威7.1 クール版: テーマヘッダー (header.php)の133行目の、グーグルアドセンス<script>から</script>までを削除します。

また、画像ロゴの削除に伴って、タイトル直下広告は、位置を少々下げて、最下段の<!--▲サイトヘッダー-->の直前に移動しました。

この後、グーグルアドセンスに、<br><br>を2個付加して、

<!-- タイトル直下広告1 -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890"
data-ad-slot="1234567890"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

</div>
</form>

<!--▲サイトヘッダー-->の直前に移動しました。

サイトの速度低下対策。クイックアドセンスの、グーグルアドセンス<script>から</script>までを削除します。

2つ目。クイックアドセンスに記載している、下記のグーグルアドセンス<script>から</script>までを削除します。

  • <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

 

または、

  • <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-12345678901"
  •      crossorigin="anonymous"></script>

です。

サイトの速度低下対策。忘れがちなテーマヘッダー (header.php)の、グーグルアドセンス<script>から</script>までを削除します。

3つ目。忘れがちになってしまうのが、グーグルアドセンスの申請時(審査用)の下記のコードです。

このコードは不要ですので、忘れずに削除します。

  • <script async src=”//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js”></script>
  • <script>
  • (adsbygoogle = window.adsbygoogle || []).push({
  • google_ad_client: “xx-xxx-xxxxxxxxxxxxxxxx”,
  • enable_page_level_ads: true
  • });
  • </script>

 

サイトの速度低下対策。4.遅延読み込み(Lazy Load)

下記のコードを、</body>直前の部分に設置します。

賢威7では、下記の画像のように、コードをダッシュボードの、賢威の設定⇒</body>直前に挿入するコード記入欄に設定します。

このコードを埋め込まないと、サイト(ブログ)を開いた際に、下へスクロールしないと見えない部分の画像まで、すべて読み込んでしまいます。

要するに、不要な部分まで、読み込んでいるわけです。

今後、回線などが大容量になれば、遅延読み込み(Lazy Load)は不要になってくるのでしょうが、現時点ではサイト(ブログ)の速度低下の原因になっていますので、遅延読み込み(Lazy Load)を実施します。

遅延読み込み(Lazy Load)を行うことにより、サイト(ブログ)のページの表示速度を向上させます。

  • <script>
  • //<![CDATA[
  • //lazy load ads
  • var lazyloadads = false;
  • window.addEventListener("scroll", function() {
  •     if ((document.documentElement.scrollTop != 0 && lazyloadads === false) || (document.body.scrollTop != 0 && lazyloadads === false)) {
  •         (function() {
  •             var ad = document.createElement('script');
  •             ad.type = 'text/javascript';
  •             ad.async = true;
  •             ad.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js';
  •             var sc = document.getElementsByTagName('script')[0];
  •             sc.parentNode.insertBefore(ad, sc);
  •         })();
  •         lazyloadads = true;
  •     }
  • }, true)
  • //]]>
  • </script>

 

サイトの速度低下対策。PageSpeed Insights(PSI)

Googleは、PageSpeed Insights API(PSI)について、下記のように記載しています。

1つの目安(ガイドライン)になると思います。

URLは、https://developers.google.com/speed/docs/insights/v5/aboutです。

「パフォーマンス スコア」PSI のレポートの上部には、そのページのパフォーマンスを要約するスコアが表示されます。このスコアは、Lighthouse を実行してページに関するラボデータを収集、分析することで決定されます。スコアが 90 以上であれば速い、50~90 であれば平均的と見なされます。50 未満は遅いと見なされます。

サイトの速度低下対策。未着手項目の後回し

今回、解消した下記の項目以外の項目については、サイト(ブログ)の速度低下が顕著になった段階で対応します。

1.画像ロゴの削除(PNG形式)

2.Search RegexrとCrayon Syntax Highlighterの停止(無効化)

3.グーグルアドセンスのスクリプトの一部削除

4.遅延読み込み(Lazy Load)の実施。