Googleが「モバイルフレンドリー」を重視!モバイルフレンドリーにするためにできること

執筆者

株式会社NOBITA代表取締役。グループ企業の株式会社ノイズにてフロントエンドエンジニア兼ディレクターを担当。LIGMAKEPOなどのメディアでは「のび太」名義にてライターとして執筆活動も行っている。

監修

NOIZZ

株式会社ノイズ

http://noizz.co.jp/

マーケティングコンサルティング企業。事業戦略・事業開発支援のほか、MAKEPO等のメディアを展開。ウェブ制作系グループとして株式会社NOBITAを抱えている。

2015年4月21日(※記事執筆時2015年3月30日)から世界最大検索エンジンGoogleは、サイトがモバイルフレンドリーかどうかをランキング要素として使用すると発表しました。

スマホユーザーが急増する近年において、モバイルで見やすいかどうかはますます重要になっていきそうです。サイト運営者・制作者はどんなことを意識すればよいのでしょうか?

モバイルフレンドリーとは?

mobile-f

2015年の2月27日に、公式Googleウェブマスターブログで下記の発表がありました。

Google では、4月21日より、ウェブサイトがモバイル フレンドリーかどうかをランキング要素として使用し始めます。この変更は世界中の全言語のモバイル検索に影響を与え、Google の検索結果に大きな変化をもたらします。この変更によって、検索ユーザーは、クエリへの関連性が高く使用端末にも適した高品質な検索結果を見つけやすくな ります。

※引用:検索結果をもっとモバイルフレンドリーに

これからの検索順位は、モバイルでも見やすさがより重視されるようになるということです。どんなに良質なコンテンツが揃っていてもモバイルでモバイル対応していない、もしくは見づらい表示であれば順位が落とされる可能性が高いです。

モバイルユーザーにとって見やすい、使いやすいということをGoogleは「モバイルフレンドリー」と呼んでいます。

モバイルフレンドリーテスト

モバイルフレンドリーかどうかを簡単にチェックできるのがこちら↓のサイトです。
モバイルフレンドリーテスト

使い方は超簡単。あなたのサイトのURLを入力して「分析」ボタンをクリックするだけです。以下のように、「問題ありません。このページはモバイルフレンドリーです。」と出ればOKです。

test-r1

Googleから発表された公式記事によるとモバイルフレンドリーかどうかは、

  • スマホ用サイトを持っている(もしくはレスポンシブ対応)
  • スマホサイトの形式を正しくGoogleに伝える
  • スマホサイトのページがちゃんとクロールされている

上記3点が重要なようです。

※モバイルフレンドリー対応しているかどうかは「Googleが判断」することです。自分ではスマホ対応したつもりでもモバイルフレンドリーになっていない場合もあります。

表示速度の改善

これからはモバイルでの表示速度の改善も重要になります。以下はGoogleが公式発表している「ウェブマスター向けガイドライン」からです。

サイトのパフォーマンスを監視して、読み込み時間を最適化します。Google の目標は、最も関連性の高い検索結果と優れた利便性をユーザーに提供することです。表示が速いサイトは、ユーザーの満足度を高め、ウェブ全体の質を向上させます。

※引用:ウェブマスター向けガイドライン

モバイルでは端末回線の関係で読み込み速度が遅くなりがちです。特にレスポンシブの場合は1ソースであるためPCよりも遅くなるのはどうしても避けられません。

以下の記事によると、「サイト表示が2秒遅いだけで直帰率は50%増加」してしまうそうです。
サイト表示が2秒遅いだけで直帰率は50%増加! DeNA事例から学ぶWebの自動最適化手法/日本ラドウェア

もしECサイトの場合、売り上げにかなりの影響を与えますよね。

また以下の記事からは、「サイトに訪れた人の61%が遅いサイトには2度と来なくなる」と書いてあります。
Webサイト高速化対策の現状

モバイルフレンドリーが重要になるこれからは特に、表示速度改善が不可欠になってきそうです。

PageSpeed Insights

「PageSpeed Insights」はGoogleの公式サイトです。モバイルでの表示速度、パソコンでの表示速度の診断することができます。

test1

test2

診断結果は上記のようにPC・モバイル別々で見れます。数値が低い場合はすぐに改善していきましょう!

モバイルでの表示速度の鍵を握る3要素

1. 画像

画像は文字に比べて読み込みに時間がかかります。当然ながらサイズの大きい画像ほど読み込みに時間を要します。

2. ソース

WEBページを構成するコードのことです。たいていブラウザの上で右クリックして「ページのソースを表示する」をクリックすると見る事ができます。 サイトにはCSS、JS、HTMLなど様々なソースがありますが、複雑で長いと読み込みのに時間がかかってしまいます。

3. キャッシュ

「キャッシュ」は、一度アクセスしたサイトのデータを、ブラウザで一時的に記憶して次に同じページにアクセスした時にいち早く表示させてくれる仕組みです。読み込み速度アップには大変有効です。

※ページを頻繁に更新する場合、その変更がなかなか反映されないというデメリットもあります。

簡単にサイトを高速化できるWordPressプラグイン

WordPressを使っている場合には、画像・ソースなどを簡単に改善できるプラグインがあります。特にオススメなのは以下の3つです。

1. EWWW Image Optimizer

ダウンロード

これからアップロードする画像だけでなく、過去にアップロードした画像までも圧縮してくれます。

2. Autoptimize

ダウンロード

HTML、CSS、JavaScriptのソースコードを圧縮します。

3. Jetpack

ダウンロード

JetpackはWordPress.comが作ったプラグインで、これ一つ入れるだけで色んな機能を追加することができます。その中でも、「Photon」というCDN(コンテンツ デリバリー ネットワーク)を使うことによって速度が大幅に改善されます。


WordPressを使用している場合には、上記3つのプラグインを使うだけでモバイルでの読み込み速度がだいぶ変わってきます。すぐにでも導入しましょう!