［PageSpeed Insights実績］獲得点数98点（合格点）｜太陽光発電メンテナンス会社様

弊社のホームページ制作とPageSpeed Insights対策の実績をご紹介します。今回、太陽光発電のメンテナンス業務を担っている企業のホームページ制作（コーディング）とPageSpeed Insights対策を実施しました。

PageSpeed Insights点数「98点」

まずはPageSpeed Insightsの結果から。パフォーマンス98点、ユーザー補助100点、おすすめの方法100点、SEO100点です。パフォーマンス以外の点数は基本的に100点が可能なので本記事ではパフォーマンスのみ取り上げます。

PageSpeed Insights「パフォーマンス」の最終的な点数は98点です。FCP（First Contentful Paint）が1.8秒のため2点減点となりました。FCPとはFirst Contentful Paintの略で、ページの読み込みが始まってからレンタリング開始までの時間です。1秒未満が「高速」、1秒〜2.5秒未満が「平均」、2.5秒以上が「低速」となります。今回、1.8秒だったので平均でした。この理由については後述で説明します。

PageSpeed Insightsポイント

まずは減点部分以外のポイントです。先日PageSpeed Insights対策で100点獲得方法の記事を公開しましたが、2025年2月現在のPageSpeed Insightsにおいて弊社は100点獲得が可能です。それでも制作途中では何回かやり直した部分もあります。主にLCP「最大コンテンツの描画」への対策です。LCP最適化についてはこちらの記事をご覧ください。

今回PageSpeed Insightsでポイントとなったのは下記2点です。

• ファーストビューの画像最適化
• Webフォントの読み込み

ファーストビューで使用している画像をPC・モバイルそれぞれ用意します。その上でそれぞれのWebP画像も用意します。メインビジュアル部分の画像は表示は1つですが、4ファイル存在しています。コンテンツ部分の画像もですが、PC・モバイル、JPG・WebPと1箇所につき4ファイル準備しています。本サイトは静的ページでWordpressではありません。そのため全て手作業で対応しています。もちろん要望があればWordpressでも構築可能です。

次にWebフォントです。今回、デザインの都合で日本語と英語2種類のWebフォントを使用しています。ウェイトは日本語が3種類、英語が4種類、計7つのWebフォントを使用しています。日本語は英語と比べてのWebフォントのデータ量が多いです。それを3種類も読み込むのでPageSpeed Insightsとしては非常に悩ましい部分です。

2点の減点部分について〜100点までの点数の上げ方

さて、PageSpeed Insightsが98点と100点まで2点マイナスです。この減点の理由はWebフォントの読み込みのためです。試しにWebフォントを止めるとこのように100点となります。

ただ、反響獲得のためにデザインも大切な要素です。なのでPageSpeed Insights対策が最も重要視されるとは限りません。今回のようにバランスを取る必要もあります。今回、一点工夫をすることで2点の減点に留めたというのが実際のところです。

PageSpeed Insightsの対象はファーストビュー部分です。なのでWebフォントを7種類全て同時に読み込まず、ファーストビューで必要なWebフォント3種類を最優先で読み込み、残り4種類は遅延読み込みするようにしました。ひと手間かかるのですが、この対応をするかしないかでされに数点変わります。

以上の通り、今回はWebフォントの読み込み遅延のために98点となりました。もしPageSpeed Insights対策を最優先とするならばWebフォントの使用を限定化することで実現可能です。

（おまけ）コーディングの工夫点

今回のコーディングは弊社としては1点以外は通常通りの対応でした。各要素をふわっと表示させるご要望もあり、JavaScriptで実現しましたがPageSpeed Insightsには影響がありませんでした。

前述の1点というのは文字を動かすという部分です。右から左へ文字を永久スクロールさせるというご要望がありました。処理としては最後まで到達したら文字を最初に戻すのですが、その際画面上で一瞬のちらつきが発生しました。少しのことですが気になってしまうためにちらつかないように工夫しています。

このようなノーコードではできないだろう細かい対応も弊社は可能です。お悩みごとがございましたら一度ご相談ください。