【100点】PageSpeed Insightsを使いパフォーマンスを向上させてSEO対策を行う。モバイルも100点合格

期間

2025年08月〜2025年10月

当ポートフォリオサイトのトップページリニューアルの際に、PageSpeed Insightsを使ってSEO対策を行いました。

今までは80点、90点を超えるような対策を行なっていましたが、今回は100点を取るために細かく対策を行い、結果としてデスクトップ、モバイルともに100点を取ることができました。
（測定結果にはばらつきがあるため、100点とならないこともあります）

PageSpeed Insights
2025/10/09 10:33:04 に作成したレポート

携帯電話

デスクトップ

１：SEO順位の改善
ページの表示速度は、Googleの検索順位を決める上で重要な要素と言われています。
スマホでのパフォーマンスは特に重要視されており、速度改善は上位表示のための重要な対策です。
２：コンバージョン率の改善
ページの表示速度が遅いとユーザーの離脱率が高まり、コンバージョン率（CVR）が低下します。
速度改善を行い、ユーザーのストレスを減らしスムーズに手続きを完了できるようにすることで、購入や問い合わせを増やすことが期待できます。
３：ユーザー体験の向上
ページの表示速度を改善することで、ユーザーの直帰率・離脱率を減らし、サイト滞在時間を延ばすことができます。
表示速度が速いと、ユーザーはページの回遊やコンテンツの閲覧を活発に行う傾向があります。
スマホでは通信速度が不安定なこともあるため、表示速度の改善はスマホで閲覧するユーザーの体験を向上させます。

PageSpeed Insightsの評価項目は大きく分けて４つで、
パフォーマンス、ユーザー補助、おすすめの方法、SEOです。
各評価項目は100点満点でスコアが出されます。

そのスコアは、各評価項目ごとにあるいくつかの診断項目の内容から決まります。
各診断項目ごとに合格または不合格の結果が出て、改善点などを教えてくれます。

ビューポート内で表示される最大のコンテンツが表示されるまでの時間の評価。

最適な画像サイズ、画像の遅延読み込みを適切に行い改善。

ユーザーがページにアクセスしてから、ページが応答できない時間が合計でどのくらいかを示す。

CSSをインライン化して改善。
JavaScriptもコアな部分をインライン化して改善。
jQueryとSwiperを使用していたが廃止して改善。

jQueryを利用してDOM操作を簡略化していた部分は、自作のライブラリを作成してそれを使用。（jQueryを軽量化したようなものを作成）

Swiperも廃止して、自作のスライダーライブラリを作成。
スクロール、ドラッグ、ボタンでスライドでき、オプションで自動スクロールも可能なものを作成。

上2つの自作ライブラリをインライン化して、それ以外のJavaScriptファイル（1つ）は非同期読み込みにして改善。

ビューポート内で表示されているコンテンツがどれだけシフトしたか。コンテンツの不安定さを示す。

Swiperを利用していた際に、不合格だった。
Swiperの初期化でスタイル変更があり、レイアウトシフトが発生していた。オプションとCSSの見直しをして改善。

「スクロールパフォーマンスを向上させるためにパッシブリスナーを使用する」
自作スライダーの処理が不合格。
スマホでスライドする際に使用したtouchmoveが原因だったため、イベントのpassiveオプションをfalseにして対応したが、意図した動きとならなかった。

そのため、touchmoveイベントをpointermoveイベントに変更して改善。

最初のコンテンツをレンダリングするまでに要する時間を示す。

「オフスクリーン画像の遅延読み込み」
FVの範囲外の画像を遅延読み込みにして改善。
FVにスライダーがあり、画面外にある画像も範囲外となるため、現在完璧な対策ができていない

「リンクに識別可能な名前が指定されています」
画像をaタグで囲っていたため、この項目が不合格。
aria-label属性でリンク名をつけて改善。

「DOMサイズ」
DOM要素が多い、ネストが深いとメモリ使用量が増加するため、この点を意識したコーディングを行う。
今回は「過度なサイズを回避」という結果で合格している。

レスポンシブデザインを目的としたフレックスボックスレイアウトをするためにHTML要素をよく入れ子にする傾向があるため、必要最低限の要素でデザインを再現できるように意識する。