【即効】WordPressのモバイルパフォーマンスをすぐに改善する方法

【即効】Wordpressのモバイルパフォーマンスをすぐに改善する方法
たくす
たくす

こんにちは、副業アフィリエイトブロガーのたくす@taksBLOG)です!

WordPressでGoogleのプラグイン「SiteKit」を導入していると、ページ表示速度を計測してくれる「PageSpeed Insits」を見ることができます。

たくす
たくす

デスクトップは良いスコアなのに、携帯電話(モバイル)の方は20点あたりでショックを受けます。

モバイルパフォーマンスの改善

「サイトの表示スピードアップ」がSEOに有効とは知ってるけど、うまく改善できない。

たくす
たくす

そんなあなたに、たった一つのプラグインを入れるだけで60点台前後まで改善してくれたので情報共有します。専門知識は一切不要です。

【即効】Wordpressのモバイルパフォーマンスをすぐに改善する方法

プラグイン「Flying Scripts by WP Speed Matters」を導入します。いますぐスピードアップできます。

このプラグインは、java script(ジャバスクリプト)で動いているプログラムを遅延読み込みさせることができます。

たくす
たくす

ジャバって風呂釜掃除のアイテムではなく、あなたのサイトを表示するためのいろんな情報を交通整理してくれているプログラムのひとつなんです。

このプログラムがないと困りますが、動作が重くなる(つまりサイトの表示速度が遅くなる)特徴があります。

「Flying Scripts by WP Speed Matters」は、このジャバ君を「ちょっと遅れてから」動作するようにできるプラグインなのです。導入するだけで、携帯電話(モバイルパフォーマンス)が60点前後に改善できます。

たくす
たくす

モバイルパフォーマンスは60点台あれば合格ラインと言われているので、このプラグイン一つで解決できます。

モバイルパフォーマンスが低い原因はアドセンス広告

モバイルパフォーマンスが低くなる原因はいくつかあります。

  • 画像サイズが大きすぎる
  • 画像ファイルが重すぎる
  • プラグインが多すぎる
  • フォントが重すぎる
  • 無駄なCSSが多い

このほか、特に表示スピードを遅くしている原因は「グーグル・アドセンス広告」が有名です。

デスクトップでは問題なくても、モバイルスピードには大打撃を与えます。

たくす
たくす

あまりにも遅いので、せっかく合格したアドセンス広告を外す人までいます。

GoogleAdSense(グーグルアドセンス)を外してアフィリエイト広告のみにするのもいいですが、無料のプラグイン一つで大幅に改善できるなら、外す理由はありませんよね!

たくす
たくす

プラグインを導入しても、もちろんアドセンス広告はふつうに表示されます

次章でプラグインの設定と実例を紹介します!

Sponsor

プラグインでモバイルパフォーマンスを即効改善

Flying Scripts by WP Speed Matters

では、WordPress(ワードプレス)のダッシュボードから「プラグイン」→「新規追加」で「Flying Scripts by WP Speed Matters」をインストールしてください。

Flying Scripts by WP Speed Matters

こんなものです。とりあえずインストールして有効化までしてください。

続いて設定に必要な情報を集めるために、ページスピードインサイトであなたのサイトの分析をしてください。

まずはスピードインサイトでモバイルパフォーマンスの検索結果を確認

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

PageSpeed Insightsのトップページに、あなたのブログのURLを入力して「分析」をクリック。

スピードインサイトでモバイルパフォーマンスの検索結果を確認

すると、1分くらいで分析結果が表示されます。標準で「携帯電話(モバイル)」が表示されます。「デスクトップ」を見たいときは上の方にあるタブで切り替えて見られます。

で、ぼくが最近立ち上げたサイトを分析してみました。

まずはスピードインサイトでモバイルパフォーマンスの検索結果を確認

 

たくす
たくす

わりとショックなスコアがでました。

さすがにひどいので少し頑張ってみましたが、53点にしかなりませんでした。

さて、スコアの下の方に必要な情報がありますので集めていきましょう。下図の2箇所です。

モバイルページ高速化

  • 使用していない JavaScript の削減
  • 第三者コードの影響を抑えてください

少し拡大して説明します。ちなみに、ぼくの運営しているサイトなので、あなたのサイト結果と同じとは限りません。実例として参考にしてください。

使用していない JavaScript の削減

まずはスピードインサイトでモバイルパフォーマンスの検索結果を確認

クリックすると、詳細情報がでてきます。
このよくわからない文字列の後ろについている( )の中身が必要な情報です。

コピーして、いったんメモ帳などのテキストエディタに貼り付けておいてください。
同じものは不要です。下の画像の場合、1行目と2行目は同じものだったので、4つ中3つが必要な情報です。

まずはスピードインサイトでモバイルパフォーマンスの検索結果を確認

たくす
たくす

つづいて、もう一方の情報も集めます。

第三者コードの影響を抑えてください

まずはスピードインサイトでモバイルパフォーマンスの検索結果を確認

こちらも同じものは不要です。上記の場合は3つ。Googleアナリティクスは、なんとなくやめておきました。
先ほどと同じメモ帳に貼り付けます。

WordPressに遅延読み込みプラグイン「Flying Scripts by WP Speed Matters」の設定

集めた情報をプラグインに設定します。

ダッシュボードのメニューにある「設定」から「Flying Scripts」をクリック。

先ほど集めた情報をメモ帳からコピーして「Include Keywords」に貼り付けて、下の青い「Save Changes」ボタンをクリック。これで完了です。

モバイルパフォーマンスプラグイン設定

たくす
たくす

専門知識なくても設定できます!
ではさっそく改善できているか見てみましょう。

「Timeout」はそのままでいい

設定欄に「Timeout」というのがあります。アクセスされて、何秒後に読み込むかを変更できます。いろいろ変えてみましたが、はじめから設定されている「5s」でOKです。

Flying Scripts by WP Speed Matters

Flying Scripts by WP Speed Mattersでモバイルスピードを改善

Flying Scripts by WP Speed Mattersでモバイルスピードを改善

出来すぎな結果です。

ぼくは8ブログ運営していますが、この結果はちょっと驚きです。他のサイトでは60点台がほとんどでした。

たくす
たくす

あなたもご自身のサイトスピードを確認してみてください。

補足:サイト表示の挙動がおかしくなったら

もしも、サイトの表示がおかしくなったりしたら、このプラグインを止めてください。

または、先ほど集めた情報のうち、「pagead2.googlesyndication.com」だけを残してみてください。

まとめ〜モバイル表示パフォーマンス低下となる他の原因について

プラグインを使ってアドセンス広告の読み込みを遅らせ、モバイル表示のパフォーマンスを改善する方法と実例を紹介しました。

初心者でも「Flying Scripts by WP Speed Matters」を使えば、60台前後のスコアに改善できます。

その他、モバイル表示のパフォーマンス低下原因として注意したいのは次の2つ。

  1. 大きすぎる画像
  2. GoogleWebフォント

この他にも改善デキるポイントは数多くありますが、どうしても専門的な知識が必要になります。深追いしないように注意です。

画像サイズは、横幅800pxか1,200pxあたり。画像ファイル形式はWebP(ウェッピー)に、画像ファイルの重さは可能な限り小さくしましょう(少なくとも100Kb以下)。

アイキャッチの作り方の中で、カンタンに軽い画像に変換する手順を紹介していますので、参考にご覧ください。

【関連記事】無料でブログのアイキャッチ画像を作る流れ【時短作業】

GoogleWebフォントは、スピードアップと読者側の環境に左右されないフォント表示に役立ちますが、やはり日本語は動作が重くなりがちです。使う必要がないなら、削除しておくことをオススメします。

サイトスピードを含めてSEOに関するテクニックは、一般的なブロガーではプロに太刀打ちできません。僕たちは、最低ラインを下回らないことだけ注意しておけば十分です。

それよりも、記事の質、記事の量、求められている記事の内容(キーワード選定)の面からSEOを進めて行くべきですよね。サイトスピードを上げて検索1位になったとしても内容がダメならすぐに落ちてしまいます。

人気の出るブログは、SEO施策から産まれるものではなく、あなたというブロガーの魅力や、内容の面白さ、お役立ち度です。ぼくも試行錯誤中です、お互い頑張っていきましょう!

たくす
たくす

現場からは以上です!

PAGE TOP
タイトルとURLをコピーしました