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

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

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

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

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

１．画像ロゴの削除（PNG形式）

２．Search RegexrとCrayon Syntax Highlighterの停止（無効化）

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

４．遅延読み込み（Lazy Load)の実施。

４つを実施しました。

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

レンタルサーバー＝Ｘサーバー（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などで、詳細にチェックしてくださいという意味です。

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

この体感時間は、大まか（感じた速度）でＯＫです。

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

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

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

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

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

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

　　　　　　　　　　　　　　　　　　↓

サイトの速度低下対策。１．画像ロゴの削除（PNG）

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

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

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

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

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

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

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

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

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

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

当サイト（ブログ）では、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>までを削除します。

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

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

  • <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>

 

サイトの速度低下対策。４．遅延読み込み（Lazy Load)

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

賢威７では、下記の画像のように、コードをダッシュボードの、賢威の設定⇒</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 未満は遅いと見なされます。

引用元: PageSpeed Insights API について

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

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

１．画像ロゴの削除（PNG形式）

２．Search RegexrとCrayon Syntax Highlighterの停止（無効化）

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

４．遅延読み込み（Lazy Load)の実施。

2022年9月14日現在。Page Speed Insightのパフォーマンス

2022年9月14日現在のPage Speed Insightで計測したパフォーマンスは、スマートフォン98。パソコン100をキープしています。