「テキスト圧縮の有効化」を指摘されたとき

PageSpeed Insights 改善方法．

ブラウザでどういう風に確認すればよいかに関しては web.dev にテキストの圧縮を有効にするというページがあるので，これを参考にすればよい．

まず今利用しているサーバーで自動で圧縮されていないか確認する

といっても，PageSpeed Insights で警告が出ている場合，圧縮されていないことが分かる．

この警告はどういうことかというと，最近のブラウザには解凍機能が備わっているので

ウェブサーバーの方でテキストなど圧縮されていないデータは圧縮してから送るようにしなさい．

ということを言ってくれているのである．
最近のサーバーの方は設定をしてやりさえすれば自動的に圧縮してくれる．

例えば，xserver は現在(2022/03)，brotli で圧縮されている．
そこで，ちょっと検索してみると，「gzipより圧縮率の高いBrotliをエックスサーバーで使う」というページを見つけることが出来た．詳細は上記ページを参考にしてもらえばよいが xserver では勝手に対応してくれていた．
レンタルサーバーを利用する場合はこの辺りも踏まえて選択することをお勧めする．

.htaccess の書き方

サーバーの方で初期設定で圧縮になっていない場合，例えば，deflate の圧縮なら以下のように設定する．
もちろん，MIMEタイプがサーバーで設定されていなければこれだけでは動かない．
サーバーによっては text/xml ではなく，application/xml の場合があるので注意する．

<IfModule mod_deflate.c>
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE image/svg+xml
</IfModule>

PageSpeed Insights 対策

PageSpeed Insights 対策の一覧．他の対策は以下を見てください．

• CLS (Cumulative Layout Shift) とは
• LCP (Largest Contentful Paint) とは
• FID (First Input Delay) とは
• Youtube での複数動画を埋め込みページの高速化
• オフスクリーン画像の遅延読み込み
• ウェブフォント読み込み中の全テキストの表示
• 次世代フォーマットでの画像の配信
• 第三者コードの影響を抑えてください
• 静的なアセットと効率的なキャッシュポリシーの配信
• FCP (First Contentful Paint) とは
• タップ ターゲットのサイズが適切に設定されていません
• 不適切なアスペクト比の画像が表示されています
• リンクはクロールできません
• 背景色と前景色には十分なコントラスト比がありません
• リンクに識別可能な名前が指定されていません
• 適切なサイズの画像
• ページ上で視認性の高い動画は検出されませんでした
• 「INP の問題」の改善方法