読者です 読者をやめる 読者になる 読者になる

interest blog

サクッと読めるライトな記事に詰めた知識


モバイル向けコンテンツの表示速度(ファーストビュー)はランキングに影響する

スピードメーター

【2017/4/12更新】

グーグルはウェブサイトの表示速度をランキング決定の評価にしている。

それは小さな評価のため多くのブロガー、ウェブサイト運営者は重要視していない。何故なら、表示スピードの改善に時間をかけるよりは他の要素の改善(コンテンツの内容だったり)に時間や手間をかけることのほうが効率の良いSEOであり、表示速度に執拗に拘る必要はないのが現状だからだ。

改善を「やらないよりはやったほうが良い」くらいの軽い考えだ。

しかし近々(恐らく2017〜2018年中)グーグルは、コンテンツ表示速度のランキング決定要素見直しを図る。それがモバイルファーストインデックス(MFI)と呼ばれるものだ。「なぜ見直しをするのか?」それはグーグルがある調査をした結果が影響している。

それは下記の内容だ。

  • コンテンツの表示(ファーストビュー)に3秒以上かかるとその53%は離脱する。

というものだ。

半数以上のユーザーがコンテンツの表示が遅いと離脱しているのだ。それは僅か3秒で起こる。

表示速度を改善すれば単純に、検索ユーザーの流入数は2倍近くになる。この結果を受けて登場するのがモバイルファーストインデックス(MFI)だ。

表示速度はSEOで重要になる

これからブログやウェブサイト運営者はコンテンツ表示スピード改善の対応を求められるようになるだろう。特にモバイル向けのブログ・ウェブサイトは、ユーザーエクスペリエンス向上の為、ファーストビューの表示速度がSEO上、更に重要になると考えられる。

ページスピードインサイトで測定

グーグルが提供する無料ツールでページスピードインサイトというものがある。それを使えば自身のウェブサイトやブログの表示スピードを点数で確認出来るのだが、何も対策を取っていない場合、大抵が50点台である事が多い。グーグルが推奨するのは85点以上である。

当ブログも測ってみたが、点数はモバイルで48点であった。(画像撮り忘れたw)「これはいかん!」と重い腰をあげ、ファーストビュー改善に取り組んだ結果60点(59〜60、多少前後する)まで上昇させる事ができた。

ページスピードインサイト

まだまだ改善が必要だ。

↓更に改善が進みました。(H29年4月12日追記)

ページスピードインサイト

はてなブログの表示速度を改善する方法

はてなブログ

はてなブログはそのデザインをカスタマイズし易く、ブロガー各々が自分好みにカスタマイズした結果、ファーストビューが遅くなっている事が多い。原因を改善しようとしてもシステムの関係上自分では改善出来ない点もあるが、自分で改善出来る問題点もある。

  • スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
  • 画像を最適化する
  • JavaScriptを縮小する
  • HTML・CSSを縮小する

上記の問題は、完全にでは無いがある程度は自分で改善する事ができる。この記事では「コンテンツ表示速度の改善方法」について記していく。

1.画像の圧縮

画像の容量は小さいほうが良い。圧縮アプリがあるのでそれを活用してこまめに画像を圧縮し、容量の小さい画像を使う。

画像を圧縮して差し替えるのだが、これが一番手間と時間がかかる。私もまだ完了していない(H29/4月11日)。 

2.async属性で読み込みを遅らせる

asyncをscriptに書き足して、JS読み込みが完了後に実行されるようにする。これによりレンダリングを妨げる原因を遅延して読み込む事ことが可能になる。書き込みかたは、scriptの後に「async」を書き足す。

12  
13 <script async src="//◯◯◯◯
14  

3.CSSは前、script(スクリプト)は後方へ配置換え

ウェブサイトはCSSが読み込まれないとコンテンツの表示が出来ません。基本的にCSSを前に配置しscriptは後ろの方へ配置しましょう。HTMLやCSSコードを書いているページでは順番など考えずに、導入したいコードを次々に足している方が多いと思います。

コードを書き込む画面では左側に行数(1〜コードの数だけの行)があると思います。上記のテーブルの左側12、13、14にあたる部分。

ページやウェブサイトを表示する際は上から順番よく実行されます。その途中にレンダリング(読み込み)を妨げるコードがあると遅くなるのです。scriptは読み込みに時間がかかる事が多いので先の項のasync属性の書き込みで遅延させるか、後方に配置換えして最後に読み込むようにする。

4.HTML・CSSを縮小する

HTMLやCSSには無駄な情報が入っている事がある。例えるなら意味のない空白や改行がそれだ(一例)。私には無かったが、もしもページスピードインサイトでその問題が提起されていたらコピペで簡単に圧縮・縮小できるツールがあるので試してみると良いだろう。

5.スクリプトを削除する

これは究極の表示速度改善方法だ。「デザインを重視するのか表示速度を重視するのか?」自身の方向性を定めてから行動して下さい。因みに私は以前、「Ptegine」というアクセス解析ツールを使用していたが、ブログからそのコードを削除してページスピードインサイトでの表示速度が1点上昇しました。

何かを削除しても数点程度の改善です。20点30点も変わるものではありません。恐らくアドセンスを削除すればあと1点くらい改善出来ると思うが、流石に私には出来ませんwマネーダイスキナノデ

※これらはご自身の責任で行なって下さい。ブログデザインが乱れる恐れがあります。

モバイルファーストインデックス(MFI)導入で、検索ランキングはモバイルでの検索結果が軸になる

モバイル表示画面

海外SEO情報ブログの鈴木氏は自身のブログで

これから(MFI導入後):モバイル向けページスピードの評価が検索結果のランキングに用いられる。たとえPCからの検索であったとしても、モバイル向けページスピードの評価を基準にしてできあがった検索結果が提示される。

[引用:Google、モバイルファーストインデックスの導入予定を正式発表。スマホ向けページを検索の評価対象に。SEOへの影響は? | 海外SEO情報ブログ]

今まではPCでの評価でランキング構成されていたものが、これからは(MFI導入後)モバイルでの評価がPCの検索結果に反映されるということだ。

今後は、モバイルコンテンツで「どれだけ優れたユーザー体験を提供できるか?」がSEOで重要になるだろう。

最後に

継続して改善していきます。新たな情報があれば追記していきます。