Googleが無料で提供しているPageSpeed Insightsというサービスがあります。ページの読み込み速度を改善するときに使うと便利なサービスです。ウェブサイトは、完全に表示されるまでに3秒以上かかると53%のユーザはそのページから離れるとも言われているそうです。今後、モバイルからのアクセスがますます増えることが予想されますので、できるだけ軽快にサクサク表示されるサイトを目指したいと考えています。では早速、PageSpeed Insightsを使って当社のコーポレートサイトを高速化するために取り組んだことをまとめておきます。
PageSpeed Insightsとは
PageSpeed Insights とは、下図のようなシンプルな画面です。「ウェブページのURLを入力」欄に測定したいWebサイトのURLを入力して、分析ボタンをクリックします。そうしますと、ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための方法を提案してくれるという優れものです。では、実際に当社のコーポレートサイトを分析してみましょう。
PageSpeed Insightsを使ってみる
それほど高速化対策をしてこなかったため、こんな結果になりました。
58点です。やはり結果は散々でした。Googleによりますと85 以上のスコアはそのページのパフォーマンスが高いことを示しているようです。そして、「適用可能な最適化」というところに、高速化するためのヒントが書かれています。順番に見てゆきたいと思います。
高速化に向けた取り組み
では、Googleに指摘された項目ごとに見てみましょう。
圧縮を有効にする
残念ながら、現在使用しているレンタルサーバの機能上、この項目は改善することができないことが分かりました。そろそろ共用サーバは卒業しないといけないかな・・・と痛感しました。もちろん、レンタルサーバによっては共用サーバでも圧縮に対応しているところはあると思いますが・・・・
ブラウザキャッシュを活用する
キャッシュというのは、一度アクセスしたページのデータを保存しておくことです。そして、再度そのページにアクセスするとき、いちいちサーバからデータを転送せずに保存しておいたローカルPCのデータを用いることで表示速度を改善することができます。この項目に関しては、サーバ上に置かれている.htaccessに下記のコードを書き加えることで対応することにしました。.htaccessは失敗するとたちまちwebサイトが表示されなくなったりしますので、手を加える前に必ずバックアップを取っておくことをお勧めします。
# CACHE media files for 30days
<Files ~ ".(gif|jpe?g|png|ico|js|css)$">
Header set Cache-Control "max-age=2592000"
</Files>
Files~のあとに、キャッシュの対象となるファイルの拡張子を並べます。それほど更新されることがないであろう画像やCSS、Javascriptといったファイルの拡張子を指定することができます。キャッシュの期間は、30日間にしました。つまり、当サイトにアクセスする場合、まずローカルのキャッシュを確認して、30日以上経過していたならサーバから改めて画像やjavascriptファイルを転送します。30日未満であればキャッシュを使って表示するということになります。max-age=につづく部分の数値を書き換えることでキャッシュ期間を調整することができるようです。単位は秒です。ちなみに、1日、1週間、1ヶ月の場合は、次の秒数になります。
１日 … 86400
1週間 … 604800
30日 … 2592000
Cache-Controlではなく、Expires～という記述で対応することを解説したサイトが多数ありました。しかし、残念ながらお借りしているレンタルサーバが、Apacheのモジュール「mod_expires」に対応していないようで、それも断念しました。。。
スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSSを排除する
JavaScriptやCSSの記述を直接HTMLに書くことができます。一方、JavaScriptやCSSを直接HTMLには書かず、それらを別ファイルから読み込むこともできます。ブラウザをページを解析中にそうした外部スクリプトが出てきますと、解析を一旦中断して、その外部ファイルをダウンロードする必要が生じます。そのためにページの表示が遅れてしまうためです。そうした状況を回避するために、スクロールせずに見える部分（つまり、ページの上部）の表示必要なスクリプトは、できるだけHTMLに直接記述することができます。一方、フッター部分のようなスクロールしないと見えないところで使われているJavaScriptなどは、外部スクリプトの読み込みを遅延させることで表示速度を上げることができます。HTMLの中でJavaScriptのファイルを読み込むときに次のように記述することができます。
<script src="my.js" async>
async属性を使うことで、ファイルをバックグラウンドで読み込むことができます。ただし、Googleのサイトには次のような注意事項が書かれています。
「JavaScript リソースで document.write を使用している場合は、非同期の読み込みを安全に使用できません。document.write を使用するスクリプトは、別の方法を使用するように書き直すことをおすすめします。 また、JavaScript を非同期的に読み込む際に、ページで互いに依存している複数のスクリプトを読み込む場合は、アプリケーションで適切な依存関係の順序でスクリプトを読み込むように注意を払う必要があります。」
使い方には注意が必要ですね。
画像を最適化する
できるだけ画像ファイルのサイズを小さくすることで転送時間を短縮させるというものです。わたしは、画像圧縮の便利なウェブサービスを使っています。jpgやpngに限定されますが、パンダが印象的なTinyPng というサイトのサービスは非常に便利です。ファイルをドラッグ・アンド・ドロップするだけで簡単に画像圧縮が可能です。わたしの感覚では、圧縮しても画像が粗くなったとは全く感じませんでした。
CSS/HTML/JavaScriptを縮小する
これは、余分なスペースや改行などをできるだけ削除することでファイルサイズを小さくするようにということのようです。余分なスペースや改行を手で削除するのは大変なので、これもウェブサービスを使うことにしました。たとえば、Refresh-SF はとても便利で使いやすかったです。「Input」欄にファイルをドラッグ・アンド・ドロップして、その右上のJavaScript、CSS、HTMLのいずれか該当するものをクリックするだけです。あとは編集されたものをダウンロードすればすぐに使うことができます。
Googleの採点は・・・
72点でした。随分改善されましたが、85以上のスコアを出すにはまだまだです。やはり、サーバをかえる必要があるでしょうか・・・・ちなみに、当社コーポレートサイトはレスポンシブ対応なのでモバイルでの採点も同時に改善はされたのですが、スコアは60ということでこちらもまだまだという感じですね。地道に改善に取り組みたいです。
