その1秒がスマホサイトの明暗を分ける!? サイトパフォーマンス改善のヒント

こんにちは！ウミの森山です。先日四国からお越しくださったお客様が「サラダぱん」を食べてみたいとおっしゃられていました。サラダぱんは滋賀名物として有名なちょっと風変わりなパンで、パンの中にはなんと「たくあん」がサンドされています（笑）滋賀生まれ滋賀育ちの私ですが、実はまだ一度も食べたことがないので今度湖北へ出向いたらぜひ食べてみようと思っています。 さてさて全然関係のない話題から入ってしまいましたが、本日は「サイトのパフォーマンス改善のためにできること」というお題で記事を書いていきたいと思います。

売上に大きな影響をもたらすサイトパフォーマンス

みなさんはサイトのパフォーマンス（表示速度）、気にされていますか？パフォーマンスが離脱率に大きく影響するというのは周知の事実ですね。PCサイトでももちろん気にしたいところですが、移動中に閲覧されることの多いスマートフォンサイトでは特に配慮しておきたいところです。

とある報告によりますと、Googleでは、サイトの表示速度が0.5秒遅くなっただけで、なんと検索数が20%も減少するとのことです。 そしてamazonでは、サイトの表示速度が0.1秒遅くなると売上が1%減少してしまうのだそうです！ ちなみに、逆に1秒高速化するだけでなんと売上が10%も向上するんだそう。

こんなに結果に明らかな差が出るなんて、いかにサイトのパフォーマンスが重要であるかが分かりますね。

できれば1秒以内を目標に

ちなみに、Webにおけるユーザビリティの第一人者であるJacob Nielsen(ヤコブ・ニールセン)博士は反応速度について下記のように述べています。（参照元：「Website Response Times」）

0.1秒までなら、結果はコンピューターではなく、ユーザーによって引き起こされたように感じる。 1秒までなら、"遅れている"と感じるが、ユーザーの思考は途切れずに、自由に動いていると感じる。 10秒までになると、ユーザーがコンピューターに振り回されている気持ちになり、ストレスを感じ始める。 10秒以上遅くなると、サイトからの離脱率が高くなる。

上記を見ると、できれば1秒以内を目標に、遅くとも数秒以内の表示をひとつの目安として対策をしていく必要がありそうです。

まずは測定

「数秒以内で表示する必要があるのは分かったけど、でもどうやって測定するの？目視？」と疑問に思った方もいらっしゃるかもしれません。 実はサイトの表示速度を測定するWebサービスがあります。簡単に測定可能ですのでサイトをお持ちの方は活用してみてください。 下記に代表的なサイトパフォーマンスの測定ツールを2つ挙げておきます。

• Google Developers - PageSpeed Insights
• Pingdom Website Speed Test

解決策

前置きが長くなってしまいましたが、肝心の改善策のご紹介に移りたいと思います。 サイトのパフォーマンス改善にあたり気をつけるべきポイントやヒントを5つご紹介します。

その1 - htmlのheader要素の順番に気をつける

まず1番に気をつけたいのはhtmlの書き方です。 htmlのhead要素内のCSSやJavaScriptへのリンクを書く順番が実はサイトのパフォーマンスに影響することをご存知でしょうか。

例えば CSS > JavaScript > CSS のようにごちゃまぜな順に書くのはNGです。CSSは同時に読み込まれますが、JSは1つずつしか読み込まれません。JSを間に挟むとJSの後ろにある要素を読み込まれるのが遅れ、時間がかかってしましいます。

CSS > JS の順にまとめて書くように癖付けましょう。

※　最近は性能が向上しJSも同時読込が可能になってきたブラウザもあります。ただ一部ブラウザは未対応なのでやはり配慮しておいた方が安心です。

その2 - CSSの記述方法に気をつける

ふたつめはCSSの記述方法です。 JavaScriptほど大きくパフォーマンスに影響するわけではないのですが、やはり非効率なCSSの記述の仕方をするとms(ミリ秒)単位でパフォーマンスが低下します。大規模サイトやECサイトなどCSSの記述量が多いサイトでは結果として大きく影響してくる場合もありますので注意が必要です。効率の良い書き方をマスターし習慣化することが大切ですね。 下記にいくつかの例をご紹介いたします。

不要なセレクタの指定は避ける

#page #content #news p {
  color: #000;
}

たとえば上記のような指定の仕方、よく見かける気がします。でも、実はこういった書き方はパフォーマンスにはあまりよく無いようです。 スタイルシステムは右から左にセレクタを読み始めるので、上記の場合まず最初にすべてのp要素が照合されます。 次に#newsを照合、そしてさらに、#content、#pageと順に照合されていき、レンダリングされることになります。 こんなにたくさん照合するのですから、たしかに非効率な感じがしますよね。 もしCSSのパフォーマンスを上げたい場合は、該当するp要素に.news-textという独自のクラスをつけて下記のように指定するとパフォーマンスには良いと言えるでしょう。

.news-text {
  color: #000;
}

ですが、すべての要素に対していちいちクラス名をふるのは、開発効率やメンテナンスを考えると非効率で現実的とはいえませんね。 ですので、もし改善するのあれば、以下のようにできる限り不要なセレクタを省いて指定するのがおすすめです。

#news p {
  color: #000;
}

その他の注意点

他にも以下のような点に注意すると尚良いでしょう。

• 不要なクラスやIDは削除する
• 未使用のスタイルは削除する
• ユニバーサルセレクタ（※1）でのKey・タグセレクタでのKeyは使わない
• IDを無駄に冗長にしない（ex. div#news -> #news）
• 子セレクター, 孫セレクターの使用はできるだけ控える(ex. Ul > li > a)
• :hover擬似セレクタはJSを代用する
• @import構文の使用を避ける

その3 - 画像の種類と解像度に気をつける

3つめは画像です。画像の扱いはサイトのパフォーマンスに大きく影響してきます。

まずは最初に、「そもそも、その画像を本当に画像にする必要があるのか？」を考えましょう。 最近ではCSS3でグラデーションや角丸、ドロップシャドウなども表現できますし、アイコンなどはCSSスプライトやSVG、Webフォントを利用するという選択肢もあります。 やはり画像でないと表現できないようであれば、以下を参考に適切な画像の種類を選ぶようにしましょう。

• GIF：アニメーション画像
• JPEG：グラデーションのある画像、複雑な画像、色数が多い画像
• PNG8：アイコンなど単調な画像でアルファチャンネルを必要とする画像
• PNG32：複雑な画像でアルファチャンネルを必要とする画像

また画像の種類の他、ファイルサイズにも注意してください。 かくいう私もWeb業界に入って間も無い頃にとんでもなく重たい画像をサイトにアップしてO野氏を驚かせてしまった苦い思い出があります・・。 無駄に高解像度にしない。若かりし頃に学んだ鉄則です！（笑）

その4 - CSSスプライトを利用する

CSSスプライトとは、複数画像をひとつにまとめCSSでポジション指定することにより表示させるCSSのテクニックのひとつです。 単純に使用する画像の数が少なくなるので、HTTPリクエストの回数も少なくなるのでその分サイトの高速化が期待できます。

ただし、サイト内で使っている画像すべてをひとまとめにするなどあまり極端なことをしてしまうと、HTTPリクエストの回数は減らせたとしても、画像のファイルサイズが大きくなりすぎて今度は画像のリロードに時間がかかってしまい、数秒間真っ白な画面に・・・ということにもなりかねませんので注意してくださいね。

その5 - gzip 圧縮 を利用する

最後にご紹介するのは gzip圧縮です。 gzip圧縮とは「GNU zip」の略でファイルの圧縮方法の1つです。gzip圧縮を取り入れることでユーザーとWebサーバ間でやりとりされるhtmlドキュメントのファイルサイズが抑えられ、転送速度を向上させることができます。 gzip圧縮は「ファイル内に同じ文字列が多いほど圧縮率が高まる」という特性があるため、空白やタグ、スタイルなど同じ文字列が多く含まれるhtmlドキュメントは高い圧縮率を得ることができるのです。

ここでは詳しく書きませんがWeb上に多くの参考記事が出ていますので参考にされてみてはいかがでしょうか。

gzip 圧縮によるサイトパフォーマンスを向上させる方法 gzip圧縮でCSSやJSなどの転送量を減らす方法

最後に

いかがでしたでしょうか。 すぐに対策できるもの、時間がかかるものなど対策方法は様々ですが、覚えておいて損はないですね。ホームページを制作するとなった時、ついつい機能やデザインばかりに目がいってしまうかと思いますが、パフォーマンスがコンバージョンに大きく影響するものであることもお分かりいただけたかと思います。ホームページの目的を達成するためには、こういった目に見える部分以外への配慮も欠かせないということですね。ウミでも引き続き目に見えない部分へのこだわりを大切にしながらよりよいホームページをご提供してまいりたいと思います。

サラダパン、いつ食べに行こうかな・・・