ページスピードインサイトとは？スコアの目安や改善方法を解説！

サイトの読み込みが遅くて困っているんだけど、何かいい方法はないかな。

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

点数だけじゃなくて改善策もわかるなんてすごい！

改めてページスピードインサイトは、「サイトの読み込み速度をスコア表示したり、改善方法を教えてくれたりする分析ツール」のこと。

Googleが提供していて、無料な上にアカウントがなくても使えちゃうよ。

そういえば、なぜページスピードが重要なのかはわかってる？

正解！さらにそれに関連して、SEO的にもメリットになるんだよ～。

つまり、ページスピードが重要な理由は次の2点。

ページの読み込みが遅くなるほど、ブラウザバックしてしまう人は増えるよね。

Googleが2017年に発表したデータによると、その割合は1秒から3秒になると32％増加し、さらに5秒になると90％も増加するんだ。

さらに、Googleは読み込み速度と検索結果の関係を次のように述べているよ。

つまり、Core Web Vitalsはページスピードに関する指標で、これを改善することで検索結果の上位にあがりやすくなると言えるよ。

Core Web Vitalsで用いられる指標と押さえておくべき点をまとめておくね。

ページスピードのスコアは100点満点で表示されるよ。

目安はモバイルとデスクトップで異なっていて、大体モバイルが70点、デスクトップは90点って感じかな。

それが難しければ、それぞれ40～50点以上・70～80点以上を目標にしてみてね。

モバイルはデスクトップよりもデータやコードの処理に時間がかかってしまうんだ。

それと、スコア測定は海外で行われるから、4Ｇ通信を前提とするモバイルの場合は必然的に低くなりがちなんだよ。

それじゃあページスピードインサイトを使ってみよう。

手順は簡単で、トップページにURLを入力し、右の「分析」を押すだけ！

するとスコアが表示され、下にスクロールしていくと様々なデータが出てくるよ。

オッケー。じゃあ見てほしいポイントを5つ説明していくね。

フィールドデータは「実際のユーザーの環境で評価する」という項目の部分だよ。

Googlechromeのユーザーデータを用いて算出した速度評価で、棒に緑・オレンジ赤の色がついているよね。

端的に言うと、緑が良くて赤は要注意だよ。

「パフォーマンスの問題を診断する」という部分は、フィールドデータと違ってシミュレーションで得た結果が出るよ。

だから、更新して間もないページにも対応してくれるんだ。

アップしてすぐの場合はラボデータを確認して改善を図るのがおすすめだよ。

ここでは改善点を教えてくれるよ～。

ここでもオレンジと赤が使われているんだけど、マークや棒が赤くなっている項目から優先的に改善していってね。

右端にある下矢印マークをクリックするともう少し細かい解説が出てくるから、そこも参考にしてみたらいいよ～。

「改善できる項目」と同じように、改善点が列挙される項目だよ。

「診断」ではWeb開発の観点から洗い出しているというところがちょっと違うかな。

これも具体的な改善策を提案してくれるから、参考にしみてね。

最後の項目は、現時点でちゃんとできている部分だよ。

これで直すべき点と直さなくて良い点が明らかになったよね。

改善点は基本的に分析結果に載っているけど、具体的にどうすればいいかを知っておいた方がいいよね。

オッケー。じゃあ6つくらいならどうかな？

画像のサイズやフォーマットに関する改善提案が挙がった場合、画像の圧縮やリサイズをしてみよう。

画像って結構データ量が多いから、何も考えずにアップすると読み込みが遅くなっちゃうんだ。

あとは次世代ファイルを利用するのもひとつだよ。

これまでの主流だったJPEGやPNGとは違う新しいフォーマットのことで、例えばWebPというのがあるよ。

JPEGなどと同じ画質のままファイルサイズを小さくできる優れものなんだよ～。

遅延読み込みっていうのは、ユーザーが見ている画面に表示される画像のみを順次読み込んでいくことだよ。

ページ内の画像を一気に読み込まないから、速度を上げられるんだ。

伝統的なのはJavaScriptのライブラリを使う方法だけど、現在はGooglechromeに標準装備されているから、imgタグに「loading="lazy"」と入力するだけでもできちゃうよ。

WordPressを使っている人は拡張機能を使ってみてね。

Webフォントはインターネット上にあるデータから引っ張ってきて使うんだけど、そうすることでどの端末でも同じフォントを表示させられるんだ。

普通のフォントだと、ユーザーの端末にそのデータがなければ別のフォントで代用されてしまうんだけど、それを防げるってわけ。

でも、Webフォントも画像のように読み込む必要があるから、使いすぎると表示速度が遅くなってしまう原因になるよ。

Webページにはいろんなコードから成り立っているよね。

でもあれこれ手を加えていく過程で、無駄に増えてしまったり、使わなくなったものが放置されたりしてしまっている可能性もあるよ。

未使用のものをチェックして削除できればデータ容量を減らせるね。

ちなみに、チェックにはブラウザの開発者ツールが使えるよ。

そうそう、コードをいじる過程でレイアウトが変わっちゃう場合があるから、バックアップをとることを忘れずにね。

キャッシュというのは、ページなどの情報を一時的に保存しておいて、次表示するときにすぐ見られるようにするための機能だよ。

でもキャッシュが溜まると動きが遅くなってしまうというデメリットもあるんだ。

キャッシュを許可するのか、そして有効期間はどのくらいにするのかを決められるから、キャッシュに課題点があった場合は設定を見直してみてね。

Webページはサーバーからデータを送ってもらうことで表示されるようになるから、サーバーの応答時間が長いと読み込み速度も遅くなってしまうよ。

例えば次のような要因が考えられるよ。

そうだね。専門知識が結構必要だから、詳しい人に頼むのがおすすめだよ。

ページスピードインサイトをまとめると、こんな感じだよ～。

どういたしまして。またいつでも聞いてね～。