【旧刊】WordPressテーマ制作のみを取り扱った別冊電子書籍がAmazon Unlimitedでお楽しみ頂けます!!
Amazon Unlimited内で 田中勇輔 で検索してください。

☓ 閉じる

6Mar2012

web初心者でもできるサイトパフォーマンス改善

毎年決算期は忙しくてイライラしてしまう訳ですが、普段から多々あるイライラの元の一つに「見たいwebサイトが遅い」という事があります。

ページの表示速度が遅いと、閲覧者の直帰率が上がるのはもちろん、検索エンジンの評価が下がる原因でもあります。

今回はWEB製作初心者でも簡単にできる「サイトパフォーマンス改善」のポイントをいくつかご紹介します。

1. HTML編

1.1. 画像はwidth/heightを指定する

画像を読み込むimgタグには、表示する高さ/幅の指定をする属性を書きましょう。


これにより、ページ内の全ての画像を読み終わる前からページレイアウトの計算が出来るため、表示速度が改善されます。

1.2. headタグ内:CSSは最初に読み込む

外部CSSはheadタグ内でもなるべく上のほうで読み込みます。
特に読み込みに時間のかかるjavascriptが先にある場合、最終的なレイアウトが出力されるまでに時間がかかります。

ページレイアウトに必要なCSSは上に。時間のかかるjavascriptは下に。
これで表示速度が改善されます。

2. CSS編

2.1. グローバルセレクタは使わない

CSSでは「*」はグローバルセレクタと呼ばれ、全てのタグに対して指定を行う際に使われます。

このグローバルセレクタを使うと、文字通り「すべてのタグ」を表示するたびにCSSの読み込みが発生しますのでパフォーマンスが落ちます。

なるべく不必要なCSSは書かないようにすると、表示速度が改善されます。

2.2. 子(孫)要素はid名・class名で指定する

グローバルセレクタの話にも共通しますが、なるべく指定先を重複させないのがポイントです。

↓下の例は、親であるdivにidがついていますが子であるliにはclass/idがついていません。
これではページ内に複数ある[li]に引っかかってしまいますのでダメな例

div#wrapper ul li {
 color:#000;
}

↓このように、最終的な指定先であるタグにクラス名を付けます。

div#wrapper ul li.fontblack {
 color:#000;
}

3. 体感できるほど速くなるCSS sprite

複数の画像をまとめて一つの画像を作り一回の読み込みですませてしまう手法CSS spriteを使うと、場合によっては劇的に表示速度が改善されます。

CSS初心者には少し難しいテクニックですが最近のweb製作では一般的な手法ですので、是非取り入れてみてください。

当サイトでも過去に取り上げましたので、ご覧ください。

メニューボタンを作りなおしてサイト高速化[CSS sprite]
CSS spriteの作り方と使い方

関連記事