こんにちは。おいしい健康エンジニアの近藤です。
おいしい健康では、iOS、Web（API / フロントエンド）、インフラ、SEOなど幅広く担当しています。 今回は掲題の通り、たった一行の変更でおいしい健康のWebサイトのパフォーマンスを大きく改善することが出来ましたので、ご紹介させていただきます。
PageSpeed Insightsとは
皆さんは、PageSpeed Insightsはご存知でしょうか？
PageSpeed Insightsとは、Googleが提供しているWebサイトのパフォーマンス（速度）を測定するためのツールです。 無料で利用することができ、改善事項なども細かく提示してくれますので、利用したことが無い方は、ぜひ一度お試しください。
おいしい健康の速度スコア
お恥ずかしながら、おいしい健康のPageSpeed Insightsの速度スコアはとても低くなっていました。
私の方で https://oishi-kenko.com/ に対して、実行した結果は以下の通りです。
100点満点で、0〜49が遅いという評価のため、おいしい健康の11というスコアはとても遅いという位置づけでしょうか。
ただし、この速度スコアには少しカラクリがあり、モバイルのパフォーマンスについては、3G回線利用時の通信速度をベースとしたスコアとなっています。
そのため、4G回線を利用している場合は、おいしい健康の表示にそこまで遅いとは感じないはずです。 日本では、現在は4G回線が主流で、2020年には、NTTドコモ、KDDI、ソフトバンク、楽天モバイルで、5Gの商用通信サービスが開始される見込みとの報道もありました。
しかし、日本以外ではまだ3G回線以下の速度の地域も多いことや、ページ読み込み速度はSEOの指標の一つになっていることもあり、可能であれば速度改善をしたいところです。
速度スコアの改善項目
PageSpeed Insightsで主に以下の項目が指摘されていました。
| No | 改善できる項目 | 短縮できる時間（推定） |
|---|---|---|
| 1 | レンダリングを妨げるリソースの除外 | 7.93s |
| 2 | テキスト圧縮の有効化 | 7.05s |
| 3 | キー リクエストのプリロード | 6.12s |
| 4 | オフスクリーン画像の遅延読み込み | 3.75s |
| 5 | 次世代フォーマットでの画像の配信 | 1.95s |
| 6 | 使用していない CSS の遅延読み込み | 1.8s |
| 7 | 効率的な画像フォーマット | 0.9s |
多くの改善項目がありますが、前述の通り、モバイルの速度スコアは3G回線利用時の通信速度がベースとなっており、通信容量の影響を非常に多く受けます。 そこで、通信容量の削減を行うことで、全体的に表示速度を改善できるのではないかという仮説を立て、先ずは、テキスト圧縮の有効化を実施することにしました。
テキスト圧縮の有効化
おいしい健康では、 AWS の S3 に CSS や JS などのアセットを配置し、CloudFront経由で配信しています。 今回はこれがgzipで圧縮されていなかったため、PageSpeed Insightsで改善項目として挙がっていました。
CloudFrontで配信しているファイルの圧縮は非常に簡単です。
おいしい健康では、Cfdefというgemを使い、CloudFrontの設定内容をDSLとして管理しているため、今回の対応内容としてはDSLの変更のみです。
実際の変更内容は以下の通りです。
- compress false + compress true
タイトルの通り、diffは1行だけですね。
改善後の速度スコア
気になる改善後の速度スコアはこちらです。
タイトル通り、1行の変更で速度スコアが11から58と、ほぼ5倍になりました。
さいごに
この記事では、テキスト圧縮の有効化の対応内容をご紹介させていただきましたが、これ以外にもいくつか比較的簡単に改善できる項目もあるため、 皆さんも一度確認してみてはいかがでしょうか。
今回は以上です。
