先日のブログ記事で予告していたとおり、本サイトを大幅リニューアルしました。
大幅リニューアルと言ってもWordPressのテーマを新しいのに変更するだけなんですが、いろいろカスタマイズしているのでけっこう大変だったんですよ。
変更理由は単純です。Googleスピードの点数がかなり低かったからです。つまり重いページだったってこと。先日の記事にも書いたようにGoogleの検索順位は変動が時々起こります。その際に速度が遅いとかなり不利となるんですよ。（それに起因する様々な指標も悪化するため）
リニューアルをしたことによりGoogleスピードの点数はモバイルもPCも90点以上に回復しました。
今回はGoogleスピードの点数を上げる事に着目して本サイトのリニューアルについて見ていきます。
WEBページリニューアル（テーマ変更）でGoogleスピードの点数はどうなった？
もともと、本サイトはGoogleから速度の警告があったこともあり、スピードをかなり意識して改善していました。点数にすると95点くらいまではできていたんです。
その改善について詳しくは下記ページをご覧ください。
しかし、昨年にGoogleスピードが評価方法を変えたことにより点数がただ下がり、PCは80点代でしたがモバイルは20点代とかなりやばい点数まで落ちてしまったのです。
その後、いろいろなスピードアップ施術を行いました。
キャッシュ
次世代フォーマットの画像を使う
CDN などなど
そのおかげでモバイルも31点までは持っていきました。でもかなり低いですよね・・・
そこで今回ボトルネックとなっていたワードプレスのテーマを思い切って変更したのです。
ちなみにワードプレスはテーマを変えれば簡単にデザインの変更が可能となってます。しかし、一度決めたテーマを変えることは結構リスキーなんですよ。そのテーマ独自のルールが新しいテーマとうまく合わなかったりすると大幅な修正が必要となるためです。とくに本サイトの場合にはかなりカスタマイズも加えていましたしそのリスクは高め・・・
今回はそれを承知でテーマを思い切って変えさせていただきました。
それでは実際のGoogleスピードの点数を見てみましょう。
テーマ変更前のGoogleスピード
モバイル
まずはモバイルです。31点でした。
PC
PCはそこそこで87点でした。
さてこれがどのように改善をしたのかを見てみましょう。
テーマ変更後のGoogleスピード
モバイル
まずモバイルの点数は31点から93点まで大きく改善しました。
PC
次にPCです。こちらも87点から98点に大きく改善しました。もともと悪くもなかったんですけどね。
満点まであとちょっとです。
両方共かなりの改善となりました。ただし、これ注釈がつくのです。。。
Googleスピードで90点以上取る方法
今回はテーマを変えただけで大きく改善しました。ただし、前述したようなスピード改善はすでにいろいろしておりましたのでそれがプラスされての結果となります。
ですからGoogleスピードで90点以上取る方法をまとめるとこんな感じですね。
速いサーバーを使う
不要なプラグインは整理する
画像を軽くする
データベースを整理する
ソースの調整をする
画像の遅延読み込み
キャッシュを使う
次世代フォーマットの画像を使う
CDN
実際に使ったプラグイン
画像の重さの改善と次世代フォーマットの画像を使うために使ったのはEWWW Image Optimizerを使いました。自動で見た目が変わらない程度に圧縮かけてくれます。また次世代フォーマット画像のWEBPを対応しているブラウザのみ表示できる機能も使っています。
CDNとは簡単に言えばいくつかのサーバーに画像なんかをおいておいて負担を分散する仕組みです。それを使ったのは下記のプラグインです。正直うちのサイトレベルではあまり効果はわかりませんでした・・・ただし、Googleスピードの点数は上がったのでその点ではよかったのでしょう。
Google AdSenseを掲載するとGoogleスピードは爆下げ
先ほど今回の点数は注釈がつくと書きました。それはGoogle AdSenseを載せるとGoogleスピードの点数は爆下げするってことです。Google AdSenseとは簡単に言えばGoogleの広告で載せておくと広告料がもらえるのです。
ちなみに実験をしたところGoogleアドセンスの自動広告（Googleが広告を貼る位置を決める）を使うとGoogleスピードの点数はモバイルで50点ほど落ちてしまいました（笑）他の広告でも10点〜30点くらい落ちましたね。特に関連コンテンツとインフィード広告が点数を大きく下げるようです。
このサイトもトップページは広告を貼っていませんのでGoogleスピードの点数は高いですが、それ以外のブログ記事などはGoogle AdSenseを貼っていますのでちょっと点数低めとなってしまっています。ですから注釈ってことですね。
Googleスピードの点数やGoogle検索のことだけを考えるならGoogle AdSenseや他の広告を貼らないほうが良さそうですね。
同じGoogleなのでなんかしてくれ・・・って思うのですが仕方ないところなのでしょう。
速いテーマの選別法
質問がありましたので追記します。
質問は「速いテーマってどれ？」ということでした。具体的なテーマ名をご紹介するのは避けますが速いテーマの選別法をご紹介しましょう。
かなり簡単にわかります。
どのテーマでも完成形のイメージがわかるようにデモページが用意されているはずです。そのページをGoogleスピードにかければよいのです。
画像がやけにデカかったり一切チューニングをしていないケースもありますが、だいたいテーマででる速度がわかりますね。また、その時点でチューニングしていないということは作者がGoogleスピードを全く意識していないってことにもなりますね。
私が見た中だと人気テーマなのにデモの時点でGoogleスピードで１０点台のものもありました。さすがにそれではいくらこちらでチューニングしても限界があります。。
まとめ
今回は「Googleスピードでモバイル90点以上をゲットする方法」と題してWEBページをリニューアルをしたことによる効果をみてきました。
WEBページとくにモバイルページの速度が遅いとそれだけで離脱率がかなり上がると言われます。Googleの発表したデータだとモバイルで表示されるまでに3秒以上かかると、53%のユーザーはページを離れると言われています。実際のページを開くのに掛かる時間の平均は15秒なのにです。
ぜひ自社のWEBとくにモバイルページが重い、遅いと感じたら改善してみてください。今日この記事で書いた内容をやるだけでかなり早くなるはずですよ。
また、WEBページの速度アップにはAMPという方法もありますが、個人的にはあまりおすすめしていませんね。最近は少しはよくなったのかな？私がAMPをやめたときの記事は下記を御覧ください。
なお、今回にリニューアルに伴い本サイトがうまく表示できない方はキャッシュの削除をお願いいたいします。かなりの部分が変わっていますので前のテーマのキャッシュが残っているとおかしな表示となってしまう可能性があるんですよ。
なお、Googleスピードをやってみたいかたは下記のページでURLを入れるだけですよ
アドセンスを利用している場合などでもこちらの方法を使うとモバイル90点以上を計測することが可能です。
最後まで読んでいただきありがとうございました。
「シェア」、「いいね」、「フォロー」、「ツイート」してくれるとうれしいです
