BiNDのページ表示の高速化を実際に測定してみた

ページの閲覧スピードに関わる問題点を分析、採点してくれるツール「Google PageSpeed Insights」を使って、実際にBiNDで作ったサイトを計測してみました。BiND10で改良した進化のほどをリアルレポートします。

こんにちは。開発の四家です。
あっという間に夏らしい夏が過ぎ去ってしまって、少し寂しい今日この頃ですね。
今日は、BiND10で搭載された、ページ閲覧高速化の対策について書きたいと思います。

デザイン性の高さをウリにしているBiNDにとって、ずっと問題として付きまとっていたのが、ページ総容量の重さでした。
画像をキレイに維持したいが故の問題点でしたが、以前、お使い頂いていた、某ラーメンショーのサイトなどでは、ラーメンの画像が沢山貼ってあったこともあり、トップページの総容量が30MBを超えていたこともありました。
ある意味、サーバーインフラチームの腕の見せ所でもあったワケですが、そんな折、我々開発チームに火を付けたのが、Google PageSpeed Insightsです。

Google PageSpeed Insights

Google PageSpeed Insightsは、URLを指定すると、そのページの閲覧スピードに関わる問題点を分析し、点数を付けてくれるサイトです。

BiND10の開発スタート当初、点数はどうだったかと言うと…
gpsi_01
圧倒的Poor(53点)…

このままで良いハズがないッ!!という事で、1つずつ問題点を解消していきました。

1.レンダリングをブロックするJS、CSSを取り除く

「レンダリングをブロックする」というのは、ここでは、CSS・JSの読み込み待ちで、ページ描画がストップする事を指します。

BiND10では、今まで<head>内にあった基本的なJSの読み込みを</body>の直前に移動し、描画がブロックされるのを防ぐようにしました。

2.画像サイズの最適化

ページの総容量の削減で、最も効くのが、この画像サイズの最適化です。
最近になって、mozjpeg、optipngと、割とデファクトスタンダードと言えるツールが出てきたので、これを使う事にしました。
画像にもよりますが、画質を落とさずに、30%〜70%ぐらいの容量が削減できます。

3.HTML、CSS、JSのminify(縮小)

minifyとは、ソースコード内の改行やTab文字を取り除いたり、変数名を短縮化する事により、ファイルの容量を削減する事を指します。
BiND8から、基本部分のCSS・JSのminifyは導入されていましたが、今回、HTMLや、Dressやページ設定用のCSSもminifyするようにしました。
この時点で、再度、Google PageSpeed Insightsを実行すると…

gpsi_01
え…。全然、変わらず(53点)…。

Google PageSpeed Insights、結構、からいですね。

もう一度、何をすれば良いのか、確認してみます。
gpsi_03
もう後は、サーバー側の設定の話ですね!!

でも、ご安心。BiNDクラウドのウェブサーバーで設定が可能です。

4.gzip圧縮への対応(圧縮を有効にする)

随分前から、主要ブラウザーはgzip圧縮された配信に対応していて、サーバー側からgzip配信を行えば、配信容量を削減する事ができるようになっています。
BiNDクラウドでは、この間リリースされた無料SSL化の機能を使うと、自動でgzip圧縮されるようになっています
昨今、常時SSL化は常識になりつつあるので、これを機に是非、有効にしましょう!

これで再度計測すると…
gpsi_02
おお!ようやくNeeds Work(72点)になりました。

5.キャッシュを有効にする

残りの作業はキャッシュを有効にする事です。
ただ、キャッシュはサイトの更新頻度を考慮に入れ、慎重に有効期間の長さを設定する必要があります。
お試しになる場合は、各設定値を良くご検討ください。
(落としたい記事が、いつまでも落とせないという事になり兼ねません。)

まず、.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(1週間)
という感じに計算します。

作った.htaccessファイルを、FTPソフトでBiNDクラウドの設定したいフォルダにアップロードします。
gpsi_04

ここまでやってGoogle PageSpeed Insightsを実行すると…
gpsi_05
Needs Work(76点)!

モバイルのほうも、Needs Work(65点)まで点数を上げることができました。
実は、ちょっと前の検査では、Good(85点以上)が出ていたのですが、日々、改善されているようで、今回はGoodまでは取れませんでした…。残念。。

このように、BiND10では、ページの閲覧スピードの改善を試みています。
ページの構成によるところもあり、全てのページが高得点を取れるようになるワケではありませんが、サイトを見に来るお客様への配慮として重要な事ですので、今後もアップデートを重ねていきたいと思っています。

※当ページでの検証は2017年9月11日時点での結果です。サイトの構成や掲載内容によって結果は異なります。

  • Googleの分析ツールでBiND10のページ速度の改善を実際に確認
  • BiNDクラウドの無料SSL化の機能を使うと、自動でgzip圧縮される
  • 分析ツールの採点基準は変わるのでBiNDもアップデートを重ねていく予定

関連記事

  • 開発ブログ

【テンプレート制作秘話】BiNDでできなかったデザインにチャレンジ

BiNDの顔ともいうべきテンプレートは、毎年楽しみにされている方もいらっしゃるのではないでしょうか。新しいBiNDのテンプレートはどんなデザインなのかをちょこっとお見せするとともに、こういう機会でもないとお伝えできない、BiND10のテンプレートのコンセプトについてお話ししたいと思います。

2017.08.10 - オモト