PageSpeed Insights 分析結果

当サイトでは、Google PageSpeed Insights使って読み込み速度を分析評価しました。

スコアの改善 ( GA4 )

Google アナリティクス: GA4 の読み込みタイミングをgoogle タグマネージャー経由で 【ページビュー】時では無く【ウィンドウの読み込み】時に変更。

これにより、読み込み中の離脱者のカウントは不可となりますが 離脱者をカウントする為に、読み込み時間を増やし更なる離脱者を増やすという悪循環 を回避します
これには、【より早い読み込みをして、読み込み後のユーザーの行動に注視することを優先する】といった 意図があります。
上記の設定変更によって、PageSpeed Insightsのパフォーマンススコアが5~7点・ Largest Contentful Paintが１秒以上、評価改善しました。

スコアの改善 ( webフォント )

webフォントのついては、【Speed Index】に大きな影響があった為、使用数を厳選し重要度の少ない webフォントの使用を中止しWebブラウザのデフォルトのフォントのゴシック体系の使用を想定しました。 また、【First Contentful Paint】のスコア改善のため@font-faceにfont-display: swap;を指定しフォントファイルを読み込み時間に代替テキストを表示することで、ページの読み込み速度を優先させました。

Lazy Loading の実装

当サイトの画像の遅延読み込みについては、Google Developersのドキュメントを参照し【ネイティブ遅延読み込み】を使用しました。(loading 属性 loading="")

Lazy Loading 実装テスト結果

実装のテストには Puppeteerスクリプトを使用し、実装をローカルでテストしました。

フェードアニメーションを指定している画像については 発火条件をスクロールイベントでは無く、googleの推奨する Intersection observer での監視に切り替えましたが、 スクロールされていないページとスクロール後のページに齟齬が出ました。(下記写真赤色の部分参照)

この件については

• ■Google Webmasters（動画の35分55秒〜）の見解でgoogle search consoleのURL検査でHTMLが読み込まれていれば問題はないという発言がある
• ■検索上位の他社のサイトをテストしても、アニメーションを指定している箇所でFAILED(失敗)という結果が出る

以上の結果を踏まえ、テスト結果の内容はアニメーションを指定していない遅延読み込み画像部分のみを参考にすることと、装飾的なコンテンツ以外、アニメーションの過度な指定は避けるという２点に配慮して実装しました。

クリックして写真全体を見る

ローディング アニメーションの設置

画像の遅延読み込みの結果、読み込みが間に合わなかった画像に対しての対策として 該当の画像エリアのバックグランドにローディング アニメーションを設置しました。

【設置概要】
設置対象の直上の親要素(画像エリア)に class="loading-box" のクラスを指定し background-image でローディング アニメーションを読み込みます。

ローディング イメージ スクリプト

当サイトでは、ローディング アニメーションが設置されている箇所に関して、本番画像の読み込み完了をJavaScriptで監視し、読み込み完了時点でCSSの .loading-box クラスを外し、ローディング アニメーションを停止させています。

ローディング アニメーション DEMO

下の例では、100MBの画像でローディングアニメーションの挙動をデモ実装しています。

• ■上段、読み込み完了後に画像のopacityを0.5に指定
• ■下段、読み込み完了後に画像のopacityを1.0に指定
• ■左列、読み込み完了後にローディング アニメーションを停止
• ■右列、読み込み完了後にローディング アニメーションを続行