最近グーグルで自分のサイトを検索すると「このページはモバイルフレンドリーではありません」とグーグル先生に怒られるのです。
しかし、モバイルフレンドリーテストを行うと「このページはモバイルフレンドリーです」と回答されるのです。
ちょっと訳が分からなかったので、調べてみて解消しました。
せっかくなので忘備録として残しておこうと思います。
なぜモバイルフレンドリーなのにモバイルフレンドリーじゃないと怒られるのか
とりあえずまず、なぜモバイルフレンドリーテストをおこなってもモバイルフレンドリーだと言われるのに、検索上はモバイルフレンドリーじゃないと怒られるのか原因を調べてみました。
速度が遅いとレスポンシブデザインでもモバイルフレンドリーじゃないといわれる
調べてみてわかったことは、モバイルフレンドリーじゃないといわれた理由がデザインではなく表示速度にあるという事です。
例えデザイン自体、ワードプレスのテーマ自体がモバイルフレンドリーだったとしても、表示速度が遅い場合、グーグル先生からモバイルフレンドリーではないと怒られるようです。
表示速度が問題の場合こちらのサイトで確認できます。
確かに、このブログを開設以降、レスポンシブなテーマを選んだものの、表示速度に対する対策はほとんど行っていませんでした。
なので今日はかなり頭を使って表示速度を上げる工夫をしました。
「モバイルフレンドリーではありません」の解消方法
WP Fastest Cacheプラグインの導入
とりあえず、高速化を行うためにプラグインを入れることにしました。
理由は単純にコードをいじるのが怖かったためです。
私はJava scriptもPHPもCSSも専門外なうえに、バックアップを取るのをめんどくさがるタイプなのでプラグインで何とかしようと考えました。
ネットで検索し、こちらのサイトを参考にさせてもらってとりあえず高速化プラグインを入れました。
[blogcard url="http://webshufu.com/wp-fastest-cache/"]
WP Fastest Cacheプラグインの設定
設定についても上記のサイトを参考にさせてもらいました。
本当に簡単な設定でサイトの表示速度を上げることが出来ます。
ただ、バージョンアップの関係か設定項目が増えていたので私の設定した画面を公開します。
これを設定するだけでほぼ表示速度の問題が解決しました。
凄いです、このプラグイン。ほぼこれだけでグーグル先生に怒られた原因を排除することが出来ました。
しかし、残念なことにこれだけではグーグル先生をぎりぎり納得させることが出来ませんでした。
EWWW Image Optimizerプラグインの導入
そのため、今度は画像処理の速度を上げるために、EWWW Image Optimizerというプラグインを導入しました。
とりあえず画像圧縮をしてみようと思ったのです。
参考にしたのは有名なバズ部のページです。
[blogcard url="http://bazubu.com/ewww-image-optimizer-23864.html"]
このプラグインは過去に上げた画像もすべて圧縮できるという機能がありそれにひかれてとりあえずバズ部様のおっしゃるとおりにプラグインを導入、設定しました。
その結果、グーグル先生にぎりぎり怒られない程度まで表示速度を上げることが出来ました。
Async JS and CSSは導入しなかった
このプラグインはJavascriptとCSSを非同期化するプラグインです。
グーグル先生の指摘によるとヘッダーのJavascriptとCSSに問題があるという結果だったため、このプラグインを導入、設定しようとしましたが、どうしてもデザインが崩れるため結局導入しませんでした。
でも導入すると確かに速度は上がりました。
プラグインだけで解決できるなんてなんていい世界
とりあえず、プラグインを導入し設定するだけでモバイルフレンドリーではありませんとグーグル先生に怒られる問題は解決しました。
初めは、コードを書かないといけないかなあ、嫌だなあ、と思っていたのですが、プラグインだけで解決できました。
私はC#とVBしかわからないのでとりあえず今日の体調ではコードは書きたくないなあと思っていたので、本当にこの世界は素晴らしいと思います。
世界の皆さん本当にありがとうございます。
