すぐに実施できる、あなたのウェブページのスピードを改善する10のチップス

Post on:2011年4月22日

1. 現在のスピードをチェック

まず、現在のあなたのウェブページのスピードの分析からはじめます。これは、改良を行った際に、どんな変更でスピードが改善させたかを知るためです。
ウェブページのスピードは下記の無料ツールで知ることができます。

2. 画像の最適化

イラストや写真など画像ごとに、最適なファイル形式があります。適切なファイル形式を使用することで、画像のファイルサイズを劇的に減少させることができます。

GIF

gifは主にロゴのように色数が少ないイメージに最適です。
JPEG

jpegは写真のように色数が多いイメージに最適です。
PNG

pngは透明度を使った高品質なイメージに最適です。

3. 画像は実寸で配置

img要素を使って画像を配置する際に、画像の実際の寸法と異なる値を指定して配置しないようにします。例えば、実際は700x700pxの画像に「width=100 height=100」などのように。
これはファイルサイズが無駄に大きくなるため、Photoshopなどの画像編集ツールで最適なサイズにして配置します。

4. コンテンツを圧縮して、最適化

ウェブサイトのコンテンツを圧縮することで、ロード時間を減らすことができます。「HTTP compression」を使用することで、多くの異なるファイルのリクエストを劇的に減らすことができます。「HTTP compression」については、Wikipediaの記事を参考にしてください。

HTTP compression -Wikipedia

また、JavaScriptやCSSのファイルを最適化、圧縮することもできます。

[ad#ad-2]

5. スタイルシートは上に配置

スタイルシートのファイルは、HTMLドキュメントの<head>～</head>内の上部に配置するようにします。これにより、ページスタイルのレンダリングをより速く実行することができます。

6. スクリプトは下に配置

通常ブラウザが同時にホストからダウンロードできるコンポーネントは、2つです。これは、ページの上にスクリプトを配置してしまうと、ページをロードする際に、他のロードを阻止する要因になります。これを避けるために、スクリプトはHTMLドキュメントの下、</body>の上あたりに配置します。
ただし、ページのスタイルに関するスクリプトは上に配置してください。

7. スクリプトとスタイルシートは外部ファイルで

スクリプトとスタイルシートをHTMLドキュメント内に直接記述（インラインなど）している場合、HTMLドキュメントがリクエストされる際にいつもダウンロードされることになります。これは、ブラウザのキャッシュを利用しないため、HTMLドキュメントのサイズは常に大きいものになります。
そのため、スクリプトとスタイルシートは常に、外部ファイルとして配置してください。

8. HTTPリクエストは最小限に

新しいウェブページを訪問する際のページローディング時間の大部分は、そのページのコンポーネント（画像、スクリプト、スタイルシートなど）のダウンロードです。これらのリクエスト数を減らすことで、ページはより速くロードします。
HTTPリクエストを減らすために簡単にできる一つのことは、CSSスプライトを使うことです。これは多数のイメージを結合し一枚の画像にし、スタイルシートで配置を行うテクニックです。また、スクリプトやスタイルシートのファイルが複数ある場合は、リクエスト数を減らすために結合することも検討してください。

9. キャッシュの利用

もし、あなたのサイトが動的にウェブページを表示しているCMSであれば、ページのレンダリングにキャッシュを利用することで劇的に速くすることができます。これはウェブページとデータベースのクエリをキャッシュし、ページの表示を行います。
もし、WordPressを使用しているなら、「WP Super Cache」「W3 Total Cache」などのプラグインで簡単に導入できます。