Webデザイナーが知っておきたいパフォーマンス改善

(※半分エイプリルフールネタです、ご注意を)

世間はエイプリルフールで大変ですね。
うちはそんなネタなんか準備するゆとりもありませんので、Safariで閲覧されている方に一部ご迷惑をおかけしている程度にとどめておきました。

さて、今日のお題は「Webサイトのパフォーマンス改善」です。
「それってサーバ側の話でしょ?、関係ないじゃん」と思ってる方は、考え方を少しだけあらためましょう。下手したら、.htaccessへの「たった一行の記述」で改善されるかもしれないのです。

その説明に入る前に用意していただきたいもの

Firefoxに「YSlow」というアドオンをインストールしてください(要 Firebug)。ちなみにこのアドオンは、米Yahoo!が作って公開しているパフォーマンスチェックツールと思ってもらえばよいでしょうか。13個の項目をそれぞれAからFまでで評価し、改善点があればそれを提示してくれます。

アドオンのインストールが終わったら、このサイトと自分のサイトでパフォーマンスのランクをチェックしてみましょう。FirebugのウィンドウにあるYSlowのタブ左上の「Performance」を押せばチェックできます。

yslow

どうでしょうか?
このサイトは「B」になってますかね。一部アクセス解析で使っているMintのJSがMinify化されていなかったり、それらにはもちろんExpiresヘッダが効いてませんが、まぁ良しとしましょう。では、皆さんのサイトはいかがでしょうか。
※この後、別のアクセス解析をテストで入れたので「C」になるかもしれません。

国内のWebサイトの場合は「F」が多いかもしれませんね(「C」や「D」とかになってる場合もあり)。これが必ずしも良ければいいってわけではないでしょうけど、そんなこと言われるとなんとなく気になるものです。

これはアクセス数が多いサイトだからというわけではなく、普通一般のサイトでも影響することです。サイトそのもののパフォーマンスが悪ければ、見ている人もイライラするでしょ?(回線帯域が遅い場合はなおさら)。

さ、ここからが本題です。

Webデザイナーでもできるパフォーマンス改善とは?

パフォーマンスを改善する方法はいくつか考えられます。
見る側のことを考えて「できることを少しでも」と思うのであれば、YSlowが表示してくれる改善点をなおしていけば良いのですが、サーバ側の知識が必要になることもあります。多くのWebデザイナーさんはその辺にはあまり詳しくないでしょうからできないこともあるでしょう。

そこでいくつかの方法を考えてみました。

  1. 画像を使わず、テキストのみのHTMLに(HTTP Requests減)
  2. テーブルレイアウトをやめる(転送データ量の削減)
  3. HTMLから改行と余分なスペースを削除(転送データ量の削減)
  4. CSSを使わない(HTTP Requests減)
  5. JavaScriptを使わない(HTTP Requests数と転送データ量の削減)

いかがでしょうか?
これで劇的にWebサイトのパフォーマンスが改善されるでしょう(笑)。転送データ量が減れば、ホスティングの月間転送量の制限も気にせず、今の何倍ものユーザーを処理できるかもしれませんね。実際、Google.comのHTMLソースには改行とか一切ほとんど入ってないことをご存知でしょうか。

と、ここまで読んでいただいて誠に恐縮なのですが、今日はエイプリルフール。壮大なネタを用意することはできないものの、何かやってみたくてあげたクソエントリーです(一部は実際に有効ですけどね 笑)。

これはネタにもなってないクソエントリーですが、正直サーバ側のことはともかく、見た目も維持しながらでも「もう少しできることがあるのに」って思ってるのは事実です(謎)。


※本当にWebサーバの知識がなくてもたった1行の記述でパフォーマンス(というかYSlowの評価といった方がいいかな)を改善できることはあったりするんですよ、フフフ。ま、YSlowの結果が全てじゃないですし、やった方がいいこととそうでないこともあるので一概には言えませんけどね。

※そのやり方については、後日こっそりヒソヒソ勉強会でもやりますのでお楽しみに(つまり、ここには書かないってことです 笑)。

Tags: , ,

   

Comments are closed.


Performance Optimization WordPress Plugins by W3 EDGE