PageSpeed Insightsの結果がモバイルだけ異常に遅い場合の改善策！第三者コードの対応

PageSpeed Insightsで自分のサイトの表示速度を解析してみる

ページの表示スピードの高速化は、最近SEOでも必要とされるようになってきました。なかなか、表示されないWebサイトってすぐ離脱しちゃいますよね。

そんなページスピードが一発でわかるのがGoogleが提供しているツールの一つである「PageSpeed Insights」です。

ここにあなたのサイトのURLを入れればGoogleが評価してくれます。
スマホで見た場合、PCで見た場合で100点満点で評価をしてくれます。
基本的に数値が高いほどページ表示速度が高速です。

さて、このサイトはというと
スマホの評価が26/100、PCが89/100と
スマホが大変な結果に...
※改善前のスクショを忘れました...

というわけで、スマホが異常に悪いので改善していきましょう。

「第三者コートの利用」って項目が非常に悪かったりしませんか？

とくにGoogle/Doubleclick Adsってところが高い場合は、それは多分、Googleアドセンス張りすぎです。
このサイトの場合そこが4000ms近くあったんですよね…

つまり、Googleが提供しているものが一番表示速度を落としているわけです。（本末転倒）

なのでまず何をしたかというと、Googleの自動広告をやめました。これが一番効果ありました。

自動広告のポップアップするオーバーレイ広告とか、画面いっぱいに表示するモバイル全画面広告とかが重いようですね。

なので、私の場合は、レスポンシブ広告とインフィード系の広告のみにしました。

これだけでも20点くらい上がったと思います。

画像が大きすぎてもページの表示速度は落ちてしまいます。
比較的大きな画像があるページは最適化をするとページの表示速度が速くなると思います。

画像の圧縮についてはtinypngがおすすめです。
おそらく、一番有名な画像圧縮サイトです。
「圧縮　パンダ」と検索すれば出てきますよ。
お好きな画像をアップロードするだけで、簡単に圧縮した画像がダウンロードできる優れものです。

参考

これで多分5点から10点ほど落ちたと思います。

これも結構おすすめの方法です。

要するに、見える部分の画像を優先的に表示して、
そのほかの見えない画像の部分を遅れて表示させるというものです。
このようにすることで、表示スピードを上げてユーザーへのストレスを減らすことができます。

Lazy Loadというプラグインがおすすめです。

Lazy Load

アドセンス最適化、画像サイズ圧縮、画像遅延読み込み、上記を3つを行うとなんとかスマホは75点、PCは98点までもっていくことができました。

これらやるだけでもだいぶ変わるかと思いますので是非やってみてください。

以下はワードプレスのテーマの編集が必要な部分であることからそこまで躍起になって対応しなくてもいいかなという部分です。

メインスレッド処理の最小化という部分の結果が悪い場合もあるかもしれませんが、ここはあまり手を付けないほうがいいと思います。

JSやCSSをインラインにすると表示速度が上がるよって言っているのですが
結構難易度高いです。基本スルーでいいかとおもいます。

また、効果的なものがあれば追記していきます。