今すぐできる、WEBサイト高速化テクニック ITかあさん

ITかあさん

今すぐできる、WEBサイト高速化テクニック

どんなにSEO効果をあげても、WEBサイトが表示されるのが遅ければ意味がありません。ユーザーは基本的にせっかちです。
3秒で表示されなければブラウザを閉じられてします。
PHPのプログラムの処理はおいといて、今回はマークアップの観点から速度アップについてです。

速度判定ツールを使う

まずは己を知ることが大事です。速度判定ツールを使いましょう。

WebWait – Benchmark Your Website

CSS+XHTML シンプル&コンパクトに収めよう!

そもそもなぜテーブルコーディングは推奨されないのか?

  • スペース用画像を置かなくてよい
  • コード量が格段に減るので、読み込みスピードが上がる

これにつきます。余計な画像はないですか?表ではないのにtableタグなんて使っていませんか?そのCSS、共通化できませんか?改めて全体を見直してください。

コーディングが終わったら、余計な改行・空白を取ってしまおう

コーディングの作業中、区切りを分かりやすくするために、余計な改行を入れているところはありませんか??
ここで言う改行とはbrタグではなくて、ただの改行\nのことです。1改行あたり2バイトありますから、3つ改行を取れば、6キロバイト削減したことになりますね。
全てのHTMLファイルと、CSSファイルの余計な改行を取ればかなり削減できるはずです。
私が大手企業のWEBサイトを手掛ける制作会社にいた時は、CSSファイルなんかは全ての改行を取っていました。

CSSスプライトを積極的に使おう。

おなじみCSSスプライト。WEB制作の先生をしていた時、CSSスプライトの代表サイトは必ずYouTubeを例にあげています。

10個の画像を取得するのに10回のリクエストが必要ですが、1つにまとめてCSSで調整すれば、リクエストは1回で済みますね。ただ、なんでもかんでも1つの画像に入れてしまうと、画像のサイズが重くなり、表示に時間がかかることも。私は色合いが似ているものを1つの画像にします。

画像をキャッシュ化させる

さて、極論なのですが、あなたのサイトに毎回読み込ませる必要のある画像ってどれだけありますか?
デザイン上の画像などはページが表示されるたびに読み込ませる必要はなく、キャッシュさせてしまえば高速になりますね!画像のキャッシュ方法はApach側の設定やPHPでも可能です。いくつかやり方があるのですが、これは別の機会に紹介できればと思います

1つのフォルダにファイルは2000ファイルまで!

1つのフォルダにファイルは最大でも2000ファイルまでにしましょう。ファイルは分散させておくのです。1つのフォルダにファイルが1万もあると、圧倒的に遅くなってきます。1フォルダにつき1000ファイルくらいが理想です。プログラム上からでも分けられる工夫が必要です。

初夏のJavaScript祭 in サーキュレーションビル ForPro