こんにちは。開発の四家です。
あっという間に夏らしい夏が過ぎ去ってしまって、少し寂しい今日この頃ですね。
今日は、BiND10で搭載された、ページ閲覧高速化の対策について書きたいと思います。
デザイン性の高さをウリにしているBiNDにとって、ずっと問題として付きまとっていたのが、ページ総容量の重さでした。
画像をキレイに維持したいが故の問題点でしたが、以前、お使い頂いていた、某ラーメンショーのサイトなどでは、ラーメンの画像が沢山貼ってあったこともあり、トップページの総容量が30MBを超えていたこともありました。
ある意味、サーバーインフラチームの腕の見せ所でもあったワケですが、そんな折、我々開発チームに火を付けたのが、Google PageSpeed Insightsです。
Google PageSpeed Insightsは、URLを指定すると、そのページの閲覧スピードに関わる問題点を分析し、点数を付けてくれるサイトです。
BiND10の開発スタート当初、点数はどうだったかと言うと…
圧倒的Poor（53点）…
このままで良いハズがないッ！！という事で、１つずつ問題点を解消していきました。
１．レンダリングをブロックするJS、CSSを取り除く
「レンダリングをブロックする」というのは、ここでは、CSS・JSの読み込み待ちで、ページ描画がストップする事を指します。
BiND10では、今まで<head>内にあった基本的なJSの読み込みを</body>の直前に移動し、描画がブロックされるのを防ぐようにしました。
２．画像サイズの最適化
ページの総容量の削減で、最も効くのが、この画像サイズの最適化です。
最近になって、mozjpeg、optipngと、割とデファクトスタンダードと言えるツールが出てきたので、これを使う事にしました。
画像にもよりますが、画質を落とさずに、30%〜70%ぐらいの容量が削減できます。
３．HTML、CSS、JSのminify（縮小）
minifyとは、ソースコード内の改行やTab文字を取り除いたり、変数名を短縮化する事により、ファイルの容量を削減する事を指します。
BiND8から、基本部分のCSS・JSのminifyは導入されていましたが、今回、HTMLや、Dressやページ設定用のCSSもminifyするようにしました。
この時点で、再度、Google PageSpeed Insightsを実行すると…
え…。全然、変わらず（53点）…。
Google PageSpeed Insights、結構、からいですね。
もう一度、何をすれば良いのか、確認してみます。
もう後は、サーバー側の設定の話ですね！！
でも、ご安心。BiNDクラウドのウェブサーバーで設定が可能です。
４．gzip圧縮への対応（圧縮を有効にする）
随分前から、主要ブラウザーはgzip圧縮された配信に対応していて、サーバー側からgzip配信を行えば、配信容量を削減する事ができるようになっています。
BiNDクラウドでは、この間リリースされた無料SSL化の機能を使うと、自動でgzip圧縮されるようになっています。
昨今、常時SSL化は常識になりつつあるので、これを機に是非、有効にしましょう！
これで再度計測すると…
おお！ようやくNeeds Work（72点）になりました。
５．キャッシュを有効にする
残りの作業はキャッシュを有効にする事です。
ただ、キャッシュはサイトの更新頻度を考慮に入れ、慎重に有効期間の長さを設定する必要があります。
お試しになる場合は、各設定値を良くご検討ください。
（落としたい記事が、いつまでも落とせないという事になり兼ねません。）
まず、.htaccessファイルを作り、下の内容を記述します。
<Files ~ “.(gif|jpe?g|png|ico)$”>
Header set Cache-Control “max-age=604800, public”
</Files>
<Files ~ “.(css|js)$”>
Header set Cache-Control “max-age=604800, public”
</Files>
604800は、キャッシュの有効期間を表します。
単位は秒になっていますので、
60 × 60 × 24 × 7 = 604800（１週間）
という感じに計算します。
作った.htaccessファイルを、FTPソフトでBiNDクラウドの設定したいフォルダにアップロードします。
ここまでやってGoogle PageSpeed Insightsを実行すると…
Needs Work（76点）！
モバイルのほうも、Needs Work（65点）まで点数を上げることができました。
実は、ちょっと前の検査では、Good（85点以上）が出ていたのですが、日々、改善されているようで、今回はGoodまでは取れませんでした…。残念。。
このように、BiND10では、ページの閲覧スピードの改善を試みています。
ページの構成によるところもあり、全てのページが高得点を取れるようになるワケではありませんが、サイトを見に来るお客様への配慮として重要な事ですので、今後もアップデートを重ねていきたいと思っています。
※当ページでの検証は2017年9月11日時点での結果です。サイトの構成や掲載内容によって結果は異なります。
POINT
- Googleの分析ツールでBiND10のページ速度の改善を実際に確認
- BiNDクラウドの無料SSL化の機能を使うと、自動でgzip圧縮される
- 分析ツールの採点基準は変わるのでBiNDもアップデートを重ねていく予定