PageSpeed insightsのモバイルだけ遅い原因はアドセンスとフォントかも！？

・PageSpeed insightsのモバイル版のスコアだけ低い...
・色々と対策を試したけど思うようにスコアが上がらない...

今回はこういった悩みを持つ方に向けて

というお話をしたいと思います。

PageSpeed insightsのモバイルだけ遅い問題

サイトやブログを運営していると、やはり気になるのが自分のサイトの速度。

僕も気になったのでGoogleが提供しているPageSpeed insightというサイトの速度を計測するツールで調べた所

というまさかの結果に(汗)

PC版のスコアは及第点レベルですが、流石にモバイル版が低すぎる...

流石にこのままではマズイということで、モバイル版の速度を改善する為に色々なサイトを見ながら対策をしたのですが中々上手くいかず。

丸2日程かけてようやく

まで上げることが出来ました。

モバイルだけ遅い原因はGoogleアドセンスとGoogleフォントだった

結論から言ってしまいますが、速度改善の為に行った対策で一番効果があったのが

といったものでした。

(この2つを実施した所、スコアが40点近く上昇しています。)

Googleアドセンスの読み込みを遅延化する

PageSpeed insightsの診断結果に

第三者コードの影響を抑えてください 第三者コードによってメインスレッドが ◯◯ミリ秒間ブロックされました。

第三者コードによって、読み込み速度が著しく低下する可能性があります。重複する第三者プロバイダの数を制限したうえで、ページのメインの部分を読み込み終えた後に第三者コードを読み込んでみてください。

PageSpeed insightsより

という結果が出ており、その中に「Google/Doubleclick Ads」という表示が出ている場合、Googleアドセンスによってサイトの速度が低下している証拠です。

Googleアドセンスの読み込みを遅延化する方法としては

これだけです。

Googleアドセンスのコードの一番上、<script>〜</script>を消す

まず自分のブログやサイトに貼り付けている全てのGoogleアドセンスのコードを確認します。

(functions.phpになどに広告の設定を書き込んでいる人はそちらも確認します。)

アドセンスのコードは下記のようになっているはずなので

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- HP_TOP -->
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"
     data-ad-slot="1836686153"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

このコードの一番上

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

という部分を消して下さい。

HTMLファイルの</body>の直前に遅延化用のコードを追記する

HTMLファイルを編集する方法ですが、WordPressのテーマを使用している場合はWordPressの管理画面から

「外観」→「カスタマイズ」→「アクセス解析コード・head」と進んで、下の方の</body>の前という項目に以下のコードを貼り付けて保存すればOKです。

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

(※HTMLファイルを直接編集する場合は「footer.php」の中に</body>があると思われるので、同じ様にコードを貼り付けて保存して下さい。)

これでGoogleアドセンスの遅延化は完了です。

もう一度PageSpeed insightを確認してみましょう。

ちなみにGoogleアドセンスの自動広告を利用している方はそれだけでPageSpeed insightのスコアが下がるので、まずは手動広告に切替えてから上記の対策をやってみて下さい。

Googleフォントを読み込まないようにする

一般的にGoogleフォントを使うことでPageSpeed insightのスコアが下がるとされています。

もしGoogleフォントを使っていないのであれば読み込まないように設定することでスコアが改善する場合があります。

読み込まないようにする方法は簡単で、Disable Google Fontsというプラグインを導入して有効化するだけです。

また、LiteSpeed CacheやAutoptimizeなどのページを最適化するプラグインを導入している方はこちらからでもGoogleフォントの設定ができます。

その他に行ったモバイルのスコアを上げる対策

ここからは上記程では無いにしろ、多少はスコア改善に効果があった対策をご紹介します。

AutoptimizeでJavascriptとCSSを最適化

Autoptimizeというプラグインを使ってJavascriptとCSSを最適化することでPageSpeed insightのスコアを改善できる場合があります。

僕もこの対策を行うことで10点前後スコアが上がりました。

ちなみに僕の設定は上記の通り。各ファイルの最適化の項目にだけチェックを入れて後はデフォルトのままです。

「JSファイルを連結する」と「CSSファイルを連結する」という項目にチェックを入れるとスコアが改善する場合もあるみたいなのですが、僕の場合はブログの動作やデザインがおかしくなったのでOFFにしています。

(※こちらのプラグインから画像の遅延化の設定もできます。)

画像を次世代フォーマットに変換

画像のフォーマットを「JPEG」と「PNG」から「WwbP」に変換することでデータ容量が削減されスコアが上がる場合があります。

こちらもスコアが10点程度上昇しました。

画像を次世代フォーマットに変換する方法はEWWW Image Optimizer という画像の圧縮や最適化を行うプラグインを使うのが一般的なのですが、僕はLiteSpeed Cacheを導入していたのでそちらを使いました。

本当に必要なプラグイン以外は削除する

機能的に被っているプラグインや今後必要なさそうなプラグインは削除しました。

特に「WordPress Popular Posts」という人気記事の一覧をサイドバーに表示するプラグインが重かったようで、これを消すとスコアが5点前後上がりました。

もし「人気記事を表示させたいけどサイトが重くなるのは困る...」という方は「Simple GA Ranking」というプラグインが軽量かつ正確なのでオススメです。

まとめ│PageSpeed insightsのモバイルだけ遅い原因

さて、ここまでPageSpeed insightsのスコアを上げる方法をご紹介してきた訳ですが正直な所、人によってサイトの環境が全く違うので

「他の人はスコアが20点上がったけど自分はむしろスコアが下がった...」

なんてことも十分にあり得ます。

そのため、設定が面倒だったり元に戻すのが大変な対策方法よりも上記で説明したような比較的簡単にできる対策から少しずつ行ってみることをオススメします。

最後まで読んで頂きありがとうございました。