【Google PSI】さくらのレンタルサーバでGZIP圧縮を有効にする

先日、仕事でGoogle PageSpeed Insightsのスコア改善を依頼された。

いろいろやってスコア改善に繋げることはできたが、ふと自分のサイトはどうなの?と思ってかけてみると…

Google PageSpeed Insights 2021-08-11 Output48

散々たる結果!!

長いことメンテナンスとかしていないので仕方ないっちゃ仕方ないんだけど、ちょっとメンテナンスしていこうかという気になった。

まずはテキストリソースの圧縮から

もうどこから手を付けていいかわからないくらいひどいスコアなので、上から順に対応していくことにした。

PageSpeed Insights テキスト圧縮の有効化

ということでまずは「テキスト圧縮の有効化」を行います。

どうやらテキストリソースを圧縮して送信することで通信量を下げて高速化するってことらしいね。
時代はどんどん変わるもんだ。

この処理はサーバ側らしいので、いつもお世話になっているさくらのレンタルサーバでできるか調べてみたら、正式にサポートはしていないけど一応できるっぽい。

さっそく対応してみる。

さくらのレンタルサーバでGZIP圧縮を行う

方法はカンタンで、.htaccessファイルに以下を追記するだけ。

# GZIP圧縮設定

  SetOutputFilter DEFLATE
 
  # レガシーブラウザは圧縮しない
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch \bMSIE\s(7|8) !no-gzip !gzip-only-text/html
   
  Header append Vary Accept-Encoding env=!dont-vary
  
  # 画像は再圧縮しない
  SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|ico|webp)$ no-gzip dont-vary
   
  # 圧縮設定
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/xml
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/js
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/atom_xml
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject

参考記事:
Webサイトの高速化「gzip圧縮」を試してみた | 日々、アップデートブログ
https://hibi-update.org/other/gzip/

検証

テキスト圧縮後のスコア

わぁ!一気に9点もスコア上がった!

こんな感じで少しずつメンテナンスしていこうと思います。

投稿者: Output48

中学生の時に初めてHTMLに触れてからホームページ制作を独学で始める。 ベンチャー企業の営業、大手企業のPG・SEを経て、独立。 現在はとある企業のCTOと、変な名前の会社の社長をしてる。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください