サイトをもっと速くしたい! サイト最適化に使えるツールいろいろ

このブログも、表示速度が遅すぎる!などといったご指摘をいただくことが良くあります・・・。

訪問者の方々にはなるべくイライラさせないように、なるべく速くサイトを表示したいのですが。

というわけで、本日は、サイトをもっと速くしたいと思ったときに、サイトを最適化して表示速度を速くしてくれる、使えるツールなどをいろいろとまとめてみました。

解析ツール

まずは、サイトの解析から。実際にどれくらい表示速度がかかっているのか?とか、このサイトなんだか遅いなぁって思ってるよりも、解析ツールを使って、数字で見るとリアルに感じますよね。

Web Page Analyzer

解析したいURLを入力するだけで、ダウンロード時間を測定してくれるオンラインツールです。

Web Page Analyzer

Speed up your web pages with YSlow

YSlowは、Firebugをベースに公開されているFirefoxのアドオン。そのサイトがどのような理由で遅くなっているのかを解析してくれるツールです。

Speed up your web pages with YSlow

15 Tools to Help You Develop Faster Web Pages

YSlow以外にもまだまだ、解析ツールがたくさん公開されているので、お気に入りのツールを見つけてみてはいかがでしょうか?

15 Tools to Help You Develop Faster Web Pages

画像関連

画像をたくさん使っているサイトには有効な方法がこちら。

smush.it!

クリック一つでそのページ内の画像ファイルを最適化してくれるツールです。画像ごとに、何パーセント圧縮されたかが表示されるので、圧縮率の高かったものだけをピックアップして入れ替えてもよさそうです。ファイルを直接アップロードもできますが、Firefoxのアドオン、もしくはブックマークレットで使用するほうが簡単そうですね。

smush.it!

CSS Spriteを活用しよう

以前、このブログでも紹介しました。CSS Sprite。ひとつひとつ画像をスライスするのではなく、画像をまとめて、CSSのbackground-positionで画像を配置する方法。リクエストが一回で済むので速くなる方法です。

CSS Spriteを活用しよう

JaveScript、CSS

JaveScriptやCSSファイルを圧縮したり、最適化したり書き方次第で、結構速くなりそうです。

Javascript Compressor – compress code online for free

JavaScriptをたくさん読み込んでる方は、こちらの圧縮ツールでファイルを圧縮してみるといいかもしれません。コードを貼り付けて、”Compress”ボタンをクリックするだけ。

Javascript Compressor - compress code online for free

Online CSS Optimiser / Optimizer

URLから、アップロードして、ページにCSSを貼り付けてと、3つのパターンでCSSを読み込んで、ワンクリックでCSSを最適化してくれるツール。実際に、このブログのCSSで試してみたところ結果は39.05%圧縮されました。

Online CSS Optimiser / Optimizer

23 Resources for Clean and Compressed CSS

CSSのコードをキレイにそして、圧縮してくれるツールはまだまだあります。ツールによって圧縮するやり方が異なるので、圧縮率やその後のCSSも変わってきます。いろいろ試してみて、気に入ったツールを使ってみてはいかがでしょうか?

23 Resources for Clean and Compressed CSS

Faster Page Loads – Bundle Your CSS and Javascript

複数のCSSをカンマ区切りで並べてみたり

Faster Page Loads - Bundle Your CSS and Javascript

@importでまとめてインポートしたり

Faster Page Loads - Bundle Your CSS and Javascript

Improve website load time by 500% with 3 lines of code | Aciddrop.com

こちらは、3行追加するだけで、上記のCSSやJSをつなげて、スピードアップさせてくれるPHPのスクリプトです。こちらは、最新バージョンです。

Improve website load time by 500% with 3 lines of code | Aciddrop.com

WordPressプラグイン

WordPressのユーザーの方には、使えるプラグインです。

WP Super Cache

先日もご紹介しましたWordpress用のプラグイン

WP Super Cache

デザインblogランキング

コメント 6 Comments »   はてなブックマーク   del.icio.us

この記事に関連する記事



6 Responses to “サイトをもっと速くしたい! サイト最適化に使えるツールいろいろ”

  1. mishimaccho Says:

    本当に便利で、有益なデザインの情報を提供してくれてありがとうございます。今後もサイトの更新毎回楽しみにしてます!

  2. iPhoner Says:

    エントリしてから時間がたってますが、、、

    かなり欲しかった!まとめです・・。

    ありがとうございます!

  3. links for 2009-01-31 « 個人的な雑記 Says:

    […] サイトをもっと速くしたい! サイト最適化に使えるツールいろいろ | DesignWa… (tags: javascript performance webservice) […]

  4. 最近1週間で気になった記事(1/27~2/2) | Adsense Mania Says:

    […] サイトをもっと速くしたい! サイト最適化に使えるツールいろいろ […]

  5. ニュースまとめ 02月02日版 » はつゆきエンタテインメント Says:

    […] 人が集まるところにはどうしても犯罪も起きるんですかね ● サイトをもっと速くしたい! サイト最適化に使えるツールいろいろ | DesignW… ウチのサイトも遅いので参考にします ● […]

  6. Daily Summary 2009-02-02 - mskari.org Says:

    […] サイトをもっと速くしたい! サイト最適化に使えるツールいろいろ | DesignWa…[CSSXHTML,JavaScript,パフォーマンスチューニング] […]

この記事に対するコメントを残す




この記事のトラックバックURL

広告掲載のお問い合わせはこちら

検索

Google

カテゴリーアーカイブ

最近の記事

タグ・クラウド

月別アーカイブ

Agile Media Network パートナーブログ