PageSpeed Insightsで​全項目満点を​達成するまでの​5つの​改善

エレノア代表の​豊島と​申します。

エレノアの​ホームページは、2026年9月30日に​リニューアルいたしました。​公開後、PageSpeed Insights（Googleが​無料で​提供している、Webページの​表示速度や​使いやすさを​計測する​ツール）で​トップページを​計測したところ、​スマホでの​表示速度などに​改善の​余地があることが​判明いたしました。

そこで​改善を​実施し、2026年10月1日に​改めて​計測した​結果、​モバイルと​PCの​両方で​「パフォーマンス」​「ユーザー補助」​「おすすめの​方法」​「SEO」の​4つの​分類が​100となりました。PageSpeed Insightsに​新しく​加わった​「エージェントによる​ブラウジング」についても、3項目すべてに​合格しております。

本記事では、​計測で​見つかった​課題と、​全項目満点を​達成するまでに​実施した​5つの​改善を、​原因と​対策の​順に​ご紹介いたします。​ホームページの​表示速度や​使いやすさの​改善を​ご検討中の​皆様の​ご参考になれば​幸いです。

PageSpeed Insightsの​計測結果​（改善前と​改善後）

改善後の​計測では、​モバイルと​PCの​両方で​4つの​分類が​100となり、​「エージェントによる​ブラウジング」は​3項目すべてが​合格となりました。

計測の​対象は、​エレノアの​トップページ​（eleanor-dev.com）です。​改善前は​2026年9月30日、​改善後は​2026年10月1日11時27分​（日本時間）に、PageSpeed Insightsの​画面から​計測いたしました。

分類ごとの​点数

モバイルの​表示速度の​指標

改善前に​値が​大きかったのは、Speed Indexです。

「エージェントによる​ブラウジング」の​評価項目

「エージェントによる​ブラウジング」は、AIの​エージェントが​ページの​内容を​正しく​読み取れるかを​評価する​分類です。AIの​エージェントとは、​利用者に​代わって​Webサイトを​閲覧し、​情報を​集めたり​手続きを​進めたりする​AIを​指します。PageSpeed Insightsの​計測に​使われている​Lighthouse（Googleが​開発している​Webページの​検査ツール）の​バージョン​13で​加わりました。

評価の​対象は、​次の​3項目です。

アクセシビリティツリーとは、​ブラウザが​画面の​内容から​組み立てる、​見出しや​ボタン、​リンクなどの​構造の​情報です。​読み上げ​ソフトが​利用する​情報で、AIの​エージェントもこの​情報を​手がかりに​ページを​理解します。​そのため、​障害のある​方にとって​使いやすい​サイトを​作ることは、AIの​エージェントに​正しく​読み取られる​サイトを​作ることにもつながります。

エレノアの​サイトでは、​構造化データと​llms.txtを​改善前から​設置しておりました。​不合格だった​アクセシビリティツリーの​項目は、​後述する​5つ​目の​改善で​解消しております。

全項目満点を​達成するまでに​実施した​5つの​改善

実施した​改善は、​以下の​5つです。

1. CSSの​ページ内への​埋め込み

改善前は、​ページの​見た目を​指定する​CSSを、HTMLとは​別の​ファイルとして​読み込んでおりました。​ブラウザは、​別ファイルの​CSSを​読み込み終えるまで​画面の​描画を​始めません。​そのため、PageSpeed Insightsでは、​描画を​止める​読み込みとして​改善の​候補に​挙げられておりました。

そこで、​各ページの​HTMLの​中に​CSSを​直接埋め込む方式に​変更いたしました。​エレノアの​サイトは、Webサイトを​構築する​フレームワークの​Astroで​制作しており、​設定​（build.inlineStylesheets: 'always'）を​1か​所追加するだけで​対応できます。

PageSpeed Insightsの​推定では、​この​変更による​短縮は​約0.3秒です。​なお、CSSを​埋め込むと、​ページを​移動するたびに​同じ​CSSを​読み込むことになります。​ページ数や​CSSの​量が​多い​サイトでは、​別ファイルのままのほうが​適している​場合もございます。

2. 最初の​画面の​アニメーションの​開始時期の​調整

トップページの​最初の​画面には、LPが​組み上がっていく​様子を​約4秒で​見せる​アニメーションを​配置しております。​スマホでは、​この​アニメーションの​上の​部分だけが​最初の​画面の​下端にかかります。​そのため、​ページを​開いた​直後から、​画面の​一部が​約4秒間動き続けておりました。

Speed Indexは、​最初の​画面に​見える​内容がどれだけ​早く表示されるかを​示す指標です。​画面の​一部が​動き続けていると、​表示が​完了していないとみなされ、​値が​大きくなります。​改善前の​Speed Indexが​4.7秒と​大きかったのは、​このためです。

対策として、​アニメーションの​枠がほぼ​全部見えてから​動きを​始めるように​変更いたしました。​具体的には、​枠の​80%以上が​画面に​入ったとき、​または​見えている​部分の​高さが​画面の​高さの​70%以上になったときに​開始します。​それまでは、​組み上がる​前の​最初の​形で​止めております。​スマホでは、​スクロールして​枠が​見えた​時点で​動きが​始まります。

端末で​動きを​減らす​設定をされている​方には、​アニメーションを​再生せず、​最初から​完成した​形を​表示いたします。

1の​改善とあわせて、​トップページの​モバイルの​Speed Indexは​4.7秒から​1.0秒に​短縮し、​パフォーマンスは​97から​100になりました​（2026年9月30日と​10月1日の​計測の​比較）。

3. グラデーション上の​文字の​コントラスト比の​確認

トップページの​「エレノアの​強み」の​節では、​紫から​ピンクへの​グラデーションの​帯の​上に、​大きな​数字と​説明文を​配置しております。​この​説明文に​灰色を​使っていたため、​背景との​コントラスト比​（文字と​背景の​明るさの​比）が​2:1前後しかなく、​読みにくい​状態でした。WCAG 2.2（Webアクセシビリティの​国際的な​ガイドライン）は、​通常の​大きさの​文字に​4.5:1以上の​コントラスト比を​求めています​（達成基準1.4.3）。

この​課題は、PageSpeed Insightsの​点数には​表れておりませんでした。​自動の​検査では、​グラデーションのように​色が​一定でない​背景の​上の​文字は、​背景の​色を​判定できないとして、​確認の​対象から​外れることがあるためです。​エレノアが​公開前に​実施している​自動の​検査も​同じ理由でこの​箇所を​確認しておらず、​公開後に​画面を​見直した​際に​判明いたしました。

対策として、​説明文の​色を​白に​変更いたしました。​あわせて​自動の​検査を​見直し、​グラデーションを​構成する​区切りの​色のすべて​に対して​コントラスト比を​計算し、​最も​低い値で​判定する​方式に​改めました。​これにより、​同じ種類の​見落としは、​公開前の​検査で​検出できるようになっております。

PageSpeed Insightsの​点数が​高くても、​読みにくい​箇所が​残っていることがございます。​自動の​検査に​加えて、​実際の​画面での​確認が​欠かせません。

4. 飾りの​英字の​描き方の​変更

トップページの​「コンセプト」の​節には、​背景に​大きく​薄い英字​「Build and care」を​飾りとして​配置しております。​読み上げ​ソフトには​読ませない​設定​（aria-hidden="true"）にしておりましたが、​英字を​ページの​文字として​HTMLに​書いていたため、PageSpeed Insightsの​ユーザー補助の​検査で、​コントラストが​不足した​文字として​指摘されておりました。

WCAG 2.2では、​純粋な​飾りの​文字は​コントラスト比の​基準の​対象外とされています​（達成基準1.4.3）。​しかし、​自動の​検査には、​その​文字が​飾りかどうかを​判断できません。

そこで、​英字を​HTMLの​文字として​書く方式をやめ、CSSで​描く方式に​変更いたしました。HTMLの​要素にはdata-text="Build and care"という​属性で​文字を​持たせ、CSSの::beforeでcontent: attr(data-text) / '';と​指定して​表示しております。​末尾の/ ''は、​読み上げ用の​代替テキストを​空にする​指定です。

見た目はそのままに、​コントラストの​指摘は​解消いたしました。

5. ARIAの​役割の​付け直し

トップページの​「デザインサンプル」の​節では、​タブを​切り替えて​LPの​サンプルを​表示しております。​タブで​切り替わる​領域には、​読み上げ​ソフトなどに​「タブの​中身」であることを​伝えるため、role="tabpanel"という​ARIA（画面の​構造を​支援技術に​伝えるための​属性）の​役割を​付けております。​改善前は、​この​役割を、​サンプルの​画像と​説明をまとめた<figure>要素に​付けておりました。

<figure>要素は、​説明文の<figcaption>を​含む場合、​付けられる​役割が​限られます。role="tabpanel"は​認められていないため、axeの​規則​「aria-allowed-role」​（要素に​合った​役割だけを​使っているか）に​違反しておりました。​「エージェントによる​ブラウジング」の​アクセシビリティツリーの​項目が​不合格だった​原因は、​この​役割の​付け方です。

対策として、<figure>の​外側に<div>要素を​設け、​タブの​中身を​示す役割はその<div>に​付ける​形に​変更いたしました。​見た目と​操作は​変わっておりません。​この​変更により、​「エージェントによる​ブラウジング」は​3項目すべてが​合格となりました。

ARIAの​役割は、​要素ごとに​付けられるものが​決まっています。​合わない​役割を​付けると、​読み上げ​ソフトや​AIの​エージェントに、​ページの​構造が​正しく​伝わりません。

よくある​質問

PageSpeed Insightsの​点数は​毎回同じですか？

同じになるとは​限りません。PageSpeed Insightsの​点数は、​決められた​条件で​ページを​読み込んで​計測する​試験の​結果です。​計測のたびに​回線や​サーバーの​状態の​影響を​受けるため、​同じ​ページでも​点数が​多少変わることがございます。​実際の​利用者の​環境で​集めた​データは、​試験の​点数とは​別に​表示されます。​アクセスの​少ない​サイトでは、​この​データが​表示されない​場合もございます。

エージェントによる​ブラウジングとは​何ですか？

AIの​エージェントが​ページの​内容を​正しく​読み取れるかを​評価する、PageSpeed Insightsの​分類です。​アクセシビリティツリー、​構造化データ、llms.txtの​3項目を​確認します。

スマホと​PCで​点数が​違うのはなぜですか？

計測の​条件が​異なるためです。​モバイルの​計測は、PCより​処理の​遅い端末と、​通信の​遅い回線を​想定して​行われます。​そのため、​同じ​ページでも、​モバイルの​点数は​PCより​低くなりやすい​傾向がございます。

PageSpeed Insightsの​点数が​100でないと、​問題はございますか？

必ずしも​問題があるとは​限りません。​点数は、​改善の​余地がある​箇所を​見つけるための​目安です。​指摘された​項目のうち、​利用者の​使いやすさへの​影響が​大きいものから​順に​対応すると​効果的です。

まとめ

• 2026年10月1日の​計測で、​エレノアの​トップページは​PageSpeed Insightsの​モバイルと​PCの​両方で​全項目が​満点​（モバイルの​Speed Indexは​4.7秒から​1.0秒に​短縮）
• 改善が​必要だった​箇所は、​描画を​止める​CSSの​読み込みや、​最初の​画面で​動き続ける​アニメーションなど、​見た目では​気づきにくいもの
• 自動の​検査では​見つからない​課題もあるため、​実際の​画面での​確認と、​検査の​仕組みの​見直しを​組み合わせることが​重要

本ブログでは、​店舗や​中小規模の​事業者の​皆様に​向けて、​ホームページ運用に​役立つ情報を​順次発信してまいります。LP制作や​ホームページ制作の​内容と​料金は、​サービス・​料金の​ページに​掲載しております。​ホームページの​リニューアルや​LPの​制作を​ご検討の​際は、​お問い合わせより​お気軽に​ご相談ください。