Webサイトの表示速度最適化について

ここ1〜2年でスマートフォンからWebサイトが閲覧されることも増えてきて、Webサイトの表示速度について騒がれていますねー。

表示速度についての対策は今に始まったことではなく、数年前から方法はありました。ただ、ここ最近のスマートフォンの普及率からやらざるをえなくなってきたわけです。

各種検証用のツールで調べてみると、言われる項目はだいたい同じです。これは、オライリーの本「O’Reilly Japan – ハイパフォーマンスWebサイト」に書かれている内容について基準を設けて判定してくれているだけだと思います。＃よく見るとこの本も2008年の発行なんですよね。

わたしも仕事でスマートフォンのアプリを扱っていることから、少しだけ検証をしてみました。

表示速度についてかんたんにできること

CSSやJavaScriptといった外部ファイル、そして画像を呼び出すときに使われるHTTPリクエストをできる限り減らすことです。

CSSやJavaScriptは、いくつものファイルに分けてリンクさせるのではなく、ひとつにまとめてしまう方がいいようです。また画像については、CSS Spriteでひとつの画像にまとめてCSSのbackground-positionで指定する方がパフォーマンスがいいようですね。

今までどおりグラフィックソフトからスライスをして画像を書き出している場合は、便利なジェネレーターもあります。

上記でまとめたCSSやJavaScriptファイルは、圧縮をするともっとサイズが小さくなります。ここでいう圧縮（compress）とは、改行やコメントなどを除去することです。

これも、ジェネレーターを使うのが便利です。複数ファイルをひとつにまとめてくれて、さらに圧縮してくれるものもあります。

この2つをするだけでも、かなり表示速度は速くなるのではないかなと思います。もちろん、体感できるわけではないですが… ChromeのDeveloper toolsで速度も比較してみましたが、定かなものは出ず。

さて、細かいことはあまりわからないわたしにとってはここまででもいいかなと思ったのですが、もう少し詳しく見ていきます。

ここでは、次のふたつのツールを使っています。

どちらも、ブラウザ用の拡張機能／アドオンがあるので、使っているブラウザに拡張機能として入れると便利です。

ここで、なかなかいいランクを出してくれなくて、怒られるものがあります。

Yslowでは「Expires headerを追加しろ！」と言われます。なんのことだかまったくわからなくて調べると、ブラウザのキャッシュの期限を決めろということ。少なくとも1週間以上先の有効期間を決めなさいと言われます。

言い換えると「一度見たものをブラウザに一定期間は保存しておくと、次に見たときに通信しなくてもいいから表示が速くなるよ」ということですね。

この最適な期間についてはまだ答えにたどりついていません。

先ほど、外部ファイルを圧縮するといいよと書いたのですが、「gzip」というものに圧縮すると、さらにサイズが小さくなります。

たとえば、これは先ほどのOnline YUI Compressorを使って圧縮した画面。

右上に、通常の圧縮（after compression）と、gzip圧縮（after compression and gzip）の場合のサイズと圧縮率が書かれています。圧倒的にgzipの方が圧縮率が高いですよね。

gzipについてはわたしも詳しくわからないのですが、そもそもはLinux系で使われるものらしいです。

ちなみに、たとえばCSSファイルをgzip圧縮した場合、拡張子は「style.css.gz」のように「.gz」がつきます。ただし、この.gzという拡張子のファイル、モダンブラウザはそのまま理解してくれるらしい！

全ブラウザではまだ確認できていませんが、chromeでは大丈夫でした。

CDNというのはContents Delivery Networkで、よくあるのがjQuery。 Google codeやGoogle APIのサイトから直接ひっぱっています。

なぜこれを使わなければならないのかは後日調査します。

これについてもよく理解できていません。

このサイトの説明が非常にわかりやすかったです。 Y!Slowに「Use cookie-free domains」と言われたY!

とはいえ、正直なところ表示速度についてはなかなか「お！むっちゃはやい！」と体感できるものではありません。

パソコンでブラウジングしている限りは、よっぽど田舎で見ていなければもうそんなに気にしなくていいのではないかと思います。

ですが、スマートフォンではまだ3G回線などでは画像の表示が遅いこともあるので対策が必要だと思います。