「モバイルでブログの表示速度を改善したい！」と悩んでいませんか？
そんな方に向けて、「ブログの表示速度を改善する方法【モバイル編】」に関する記事を書きました。
- モバイルでブログの表示速度を改善したい方
- PageSpeed Insightsの得点を高めたい方
- Googleアドセンス使っても表示速度を落としたくない方
- 表示速度を改善するプラグインを知りたい方
今回の記事では、PageSpeed Insightsで全ページをモバイルで70点以上獲得した方法を紹介していきます。
ブログでは表示速度にこだわり過ぎるのは問題ですが、最低限の表示速度の対策をやっておく必要はあります。
あまりにも遅いと離脱者を増やす原因にもなりますので、ぜひこの記事を読んで速度改善に取り組んでみてください！
PageSpeed Insightsでモバイルだけ遅いブログは何故ダメなのか？
ブログの表示速度が遅いことの一番の問題は、ユーザーにストレスを与えてしまうことです。
つまり、サイト運営で一番重要視しなければならないユーザーファーストができていないことを意味します。結果、あなたのブログに以下のようなデメリットが生じます。
- 直帰率が高まりアクセスが低下する
- コンバージョンが低下する
- アフィリエイトなどの成果が減る
- 滞在時間の低下により検索順位が下がる
こういった話をすると「表示速度が遅くても検索順位の高い記事もあるよ！」って声をよく聞きます。
確かに表示速度が遅い記事でも検索上位に表示されるているものもあります。なぜなら、表示速度以外の評価点が高いからです。
あなたが記事の内容やSEOが誰にも負けないと自信があるのならば表示速度は無視しても構いません。
逆に表示速度だけでも現在の検索上位の記事には負けたくないと考えているならこの先を読み進めてください！
PageSpeed Insightsでモバイルの表示速度を確認する方法
ここからは実際にみなさんのブログの表示速度がどれくらいなのかを測定していきましょう。
表示速度を計測するには改善点の指摘もしてもらえる『PageSpeed Insights』にて説明していきます。
改善前の数値を把握しておくことで、これから紹介する改善方法に効果があったかどうかわかるので必ず改善前の数値は計測しておきましょう。
PageSpeed Insightsの利用方法
PageSpeed Insightsの使い方は、表示速度を計測したいURLを入力して分析ボタンをクリックするだけです。
とはいえ、全てのページを分析するのは時間的にもったいないので、一番遅いページに当たりを付けて改善を行っていきましょう。
一番遅いページが改善できればその他のページも表示速度は速くなっているので安心してください。
- Google Analyticsを開く
- サイトの表示速度を確認
- 遅いページのURLを確認
- STEP1Google Analyticsを開く
- STEP2サイトの表示速度を確認【行動】＞【サイトの速度】＞【ページ速度】の順にクリックすると下の画面が表示されます。
- STEP3遅いページのURLを確認赤く表示されている部分が表示速度の遅いページになります。
上の方法で表示速度の遅いページの特定ができたら、PageSpeed Insightsで測定してみましょう。
- STEP1PageSpeed Insightsを開く
- STEP2計測したいURLを分析計測したいページの【URL】を入力し【分析】をクリック
- STEP3分析結果の確認下のような画面が表示されればOKです！
次は表示されるデータの何を見たらいいのかを紹介していきます。
PageSpeed Insightsの確認すべき場所
PageSpeed Insightsの分析結果には以下のような項目が表示されます。
- パフォーマンススコア：Lighthouseによる速度スコア
- フィールドデータ：Chrome User Experience Report（CrUX）のレポート
- ラボデータ：Lighthouseで分析を行った結果
- 改善できる項目：ページ表示速度の向上を狙うための改善案
- 診断：ページ表示速度がWeb開発にて適している設定に近いかの項目
- 合格した監査：問題がないと判断された項目
それぞれどのような分析結果が表示されているのかを、まずは説明していきますね。
改善方法が早く知りたい方は読み飛ばしていただいてOKです！
パフォーマンススコア
PSI のレポートの上部には、そのページのパフォーマンスを要約するスコアが表示されます。このスコアは、Lighthouse を実行してページに関するラボデータを収集、分析することで決定されます。スコアが 90 以上であれば速い、50～90 であれば平均的と見なされます。50 未満は遅いと見なされます。
PageSpeed Insightsでは、上部に100点満点のスコアが表示されます。
モバイルとパソコンの選択ができ、モバイルのスコアはたいてい50点未満となっていることが多いでしょう。
ただし、スコアが悪くてもコアウェブバイタルの基準（フィールドデータ）をクリアしている場合もあります。
スコアにはこだわりすぎず参考程度にしておき、改善できる項目や診断結果から▲低速と指摘された項目を改善していくようにしましょう。
その結果スコアも改善されているはずです。
- モバイル：40点以上
- パソコン：90点以上
フィールドデータ
フィールド データは特定の URL の今までのパフォーマンスについてのレポートであり、実際のさまざまな端末やネットワークの条件におけるユーザーから匿名で送られたパフォーマンス データです。
フィールドデータの中身は実際のユーザーが見たときのデータです。
ここで大事なのがユーザーは様々な速度の回線でアクセスしており一定の速度ではありません。また、使っている媒体も高性能なパソコンから低スペックなスマホまで多種多様です。
そのような様々な環境でのデータを集計し、28日間の累計データとして表示されます。そのためフィールドデータの数値が改善されるには時間が必要であり、これから紹介する改善方法を実施してもすぐには反映されません。
ラボデータ
PSI は Lighthouse を使用して、指定された URL を分析し、さまざまな指標についてページのパフォーマンスを推定するパフォーマンス スコアを生成します。対象となる指標は、コンテンツの初回ペイント、First Meaningful Paint、Speed Index、First CPU Idle、操作可能になるまでの時間、入力レイテンシの推定などです。
ラボデータでは、『Lighthouse』でおこなった分析結果を下のとおり表示してくれます。
項目の内容とマークの説明は下のとおりです。
| 項目 | 内容 |
|---|---|
| First Contentful Paint | テキストまたは画像が初めてペイントされるまでにかかった時間 |
| Speed Index | ページのコンテンツが取り込まれて表示される速さ |
| Largest Contentful Paint | 最も大きなテキストまたは画像が描画されるまでにかかった時間 |
| Time to Interactive | ページが完全に操作可能になるのに要する時間 |
| Total Blocking Time | タスクの処理時間が 50 ミリ秒を上回った場合の、コンテンツの初回描画から操作可能になるまでの合計時間（ミリ秒） |
| Cumulative Layout Shift | ビューポート内の視覚要素がどのくらい移動しているかを測定する指標 |
| マーク | 速度判定 | 改善の必要性 |
|---|---|---|
| ▲ | 遅い | 優先的に改善すべき項目 |
| ■ | 平均 | ▲が無くなった次に改善すべき項目 |
| ● | 速い | 合格した項目 |
6つの項目を３段階で判定してくれるので、まずは▲（遅い）と判定された項目を優先的に改善していきましょう。
改善できる項目
ページのパフォーマンス指標を改善する最適化案が表示されます。このセクションの各最適化案には、実装するとページの読み込みがどのくらい速くなるかの見積もりも表示されます。
改善できる項目では、ページ表示速度を高めるための改善案が表示されます。
改善が完了することで表示速度をどれだけ短縮させることができるのかも書かれているので、どの項目から改善すべきかの目安にしてください。
こちらで表示されるマークもラボデータと同様ですので▲（遅い）から優先的に改善していきましょう。
| マーク | 速度判定 | 改善の必要性 |
|---|---|---|
| ▲ | 遅い | 優先的に改善すべき項目 |
| ■ | 平均 | ▲が無くなった次に改善すべき項目 |
診断
ページがウェブ開発のおすすめの設定にどの程度沿っているかについての追加情報が表示されます。
診断では、アプリケーションに関する改善案を表示してくれます。
ひとつひとつはミリ秒単位の速度改善しかできませんが、表示速度の改善をするにはひとつずつ潰していくしかないので頑張っていきましょう！
なお、ここでのマークもこれまで紹介してきた内容と同じですので▲（遅い）から改善をおこなっていってください。
| マーク | 速度判定 | 改善の必要性 |
|---|---|---|
| ▲ | 遅い | 優先的に改善すべき項目 |
| ■ | 平均 | ▲が無くなった次に改善すべき項目 |
PageSpeed Insightsでモバイルだけ遅い表示速度を改善する方法
それではここからは当ブログが表示速度を改善するうえで効果の高かった改善方法を紹介していきます。
※今回紹介する内容は下の指摘事項に関する内容です。（改善方法が見つかり次第追記予定）
- 適切なサイズの画像
- 使用していないCSSを削除してください・レンダリングを妨げるリソースの除外
- 第三者コードの影響を抑えてください
- キーリクエストのプリロード
上の内容を改善することで当ブログのパフォーマンススコアはスマホでも70点を超える高得点を叩き出しています。
適切なサイズの画像
ブログの表示速度の改善を目指すには一番効果的なのが画像サイズの最適化です。
- 正しい画像の拡張子を選択
- 最適な画像サイズ
- 画像は必ず圧縮
それぞれ順に説明していきますね。
正しい画像の拡張子を選択
拡張子とは、ファイルの末尾についている『.jpeg』や『.png』などの英字のことです。
画像ファイルの場合、基本的には上のどちらかを利用されているかと思いますが使い分けができていない人が多いです。
細かい説明は他のサイトにまかせるとして以下の使い分けだけ理解しておいてください。
- 『.jpeg』・・・写真
- 『.png』・・・イラスト・スクショ
上のとおり覚えておけば使い分けは問題ありません。
最適な画像サイズ
画像ファイルは、大きければ大きいほどデータサイズが大きくなります。データサイズが大きくなれば、表示速度が遅くなってしまいます。
ブログの横幅が700pxであるのに、横幅2000pxの画像を貼るのは無駄という事になります。
まずは自分のブログに貼り付ける画像の最適サイズを把握し、毎回最適化したものを貼るようにしましょう。
最適な画像サイズの調べ方については、ブログに使う適切な画像サイズを調べる超簡単な方法（ツール）にて詳しく紹介しています。
画像は必ず圧縮
画像で注意すべき最後が、ブログに貼る画像は必ず圧縮しておくことです。
元から軽い画像であっても下のように必ず圧縮作業を行ってから貼るようにしています。
画像の圧縮方法については、ブログの画像サイズの悩み即解決！超絶簡単なサイズ変更と軽量化法もにて詳しく紹介させていただいてます。
使用していないCSSを削除してください・レンダリングを妨げるリソースの除外
多くのブログで改善できる項目として表示されている内容ですね。
とはいえ、ブログのWordPressテーマをカスタマイズするのはリスクが高く、失敗すると画面が真っ白になってしまいます。
そこでわたしが利用したのが2つのプラグインです。
- Async JavaScript（CSSやJSなどのリソースを軽量・最適化）
- Autoptimize（JavaScriptの読み込みを非同期化）
AutoptimizeとAsync JavaScriptは、作成者が同じプラグインであり相性も抜群なため不具合の出にくいプラグインになります。
それぞれの設定方法については、ボリュームがあるので改めて別記事にて紹介させていただきます。今すぐ知りたいって方のために私が参考にさせていただいた記事のURLを紹介しておきます。
- https://tekito-style.me/columns/wordpress-plugin-autoptimize
- https://lazy-se.net/wp-plgin-async-javascript/
第三者コードの影響を抑えてください
実はブログの表示速度を下げている大きな要因の一つがこの「第三者コードの影響を抑えてください」でして、ここを解決しないことには表示速度を高めることはできません。
診断結果の内容を見てみると影響を与えているのは『Google/Doubleclick Ads』と書かれています。
つまり、Googleアドセンスの広告がブログの表示速度を下げてしまっています。
アドセンス広告をブログから外してしまえば点数が高まるのは間違いないですが、収益化を目指してやっているブログから取り除くのは解決策にはなりません。
ネット上でいろいろ調べているとGoogleAdSenseの遅延読込みでページ表示速度を改善という記事を見つけたので、遅延読込みで対策すると効果抜群でした。
※なお、遅延読み込みについてGoogleのポリシー上禁止ではないが、遅延読込みにより広告の表示やデザインに影響が発生した場合、広告主の意図しない配信となり違反措置がつく可能性はあるので自己判断で試してみてください。
キーリクエストのプリロード対策
<link rel=”preload”>を使用して、現在ページ読み込みの後の方でリクエストしているリソースを優先的に取得することをご検討下さい。
プリロードとは、『Pre（前に）』『Load（読む）』ことを意味し、後半に読み込みが開始するモノを前半に読み込む処理を言います。
PageSpeed Insightsの改善できる項目に表示されている方も多いですが、多くの場合「フォント」です。
つまりフォントの読み込みが遅くなっているのを前倒しで読み込ませる処理をしなさいと指摘されているんですね。
キーリクエストのプリロードは、改善がとても簡単ですが説明が長くなってしまいますので高速でキーリクエストのプリロードを改善するたった一つの方法にて紹介させていただきました。
まとめ：PageSpeed Insightsでモバイルだけ遅い速度を改善する方法
今回は私が自分のブログで表示速度を改善させた方法を紹介してきました。
特に効果の高かった4項目をまとめてみましたので、表示速度に悩んでいる方はぜひ試してみてください！
- 適切なサイズの画像
- 使用していないCSSを削除してください・レンダリングを妨げるリソースの除外
- 第三者コードの影響を抑えてください
- キーリクエストのプリロード
わたしのブログもモバイルでの評価はまだまだ100点には程遠いので効果の高い改善策が見つかったら追記していきます。
