サイトをもっと速くしたい! サイト最適化に使えるツールいろいろ
このブログも、表示速度が遅すぎる！などといったご指摘をいただくことが良くあります･･･。
訪問者の方々にはなるべくイライラさせないように、なるべく速くサイトを表示したいのですが。
というわけで、本日は、サイトをもっと速くしたいと思ったときに、サイトを最適化して表示速度を速くしてくれる、使えるツールなどをいろいろとまとめてみました。
解析ツール
まずは、サイトの解析から。実際にどれくらい表示速度がかかっているのか？とか、このサイトなんだか遅いなぁって思ってるよりも、解析ツールを使って、数字で見るとリアルに感じますよね。
Web Page Analyzer
解析したいURLを入力するだけで、ダウンロード時間を測定してくれるオンラインツールです。
Speed up your web pages with YSlow
YSlowは、Firebugをベースに公開されているFirefoxのアドオン。そのサイトがどのような理由で遅くなっているのかを解析してくれるツールです。
15 Tools to Help You Develop Faster Web Pages
YSlow以外にもまだまだ、解析ツールがたくさん公開されているので、お気に入りのツールを見つけてみてはいかがでしょうか？
画像関連
画像をたくさん使っているサイトには有効な方法がこちら。
smush.it!
クリック一つでそのページ内の画像ファイルを最適化してくれるツールです。画像ごとに、何パーセント圧縮されたかが表示されるので、圧縮率の高かったものだけをピックアップして入れ替えてもよさそうです。ファイルを直接アップロードもできますが、Firefoxのアドオン、もしくはブックマークレットで使用するほうが簡単そうですね。
CSS Spriteを活用しよう
以前、このブログでも紹介しました。CSS Sprite。ひとつひとつ画像をスライスするのではなく、画像をまとめて、CSSのbackground-positionで画像を配置する方法。リクエストが一回で済むので速くなる方法です。
JaveScript、CSS
JaveScriptやCSSファイルを圧縮したり、最適化したり書き方次第で、結構速くなりそうです。
Javascript Compressor – compress code online for free
JavaScriptをたくさん読み込んでる方は、こちらの圧縮ツールでファイルを圧縮してみるといいかもしれません。コードを貼り付けて、”Compress”ボタンをクリックするだけ。
Online CSS Optimiser / Optimizer
URLから、アップロードして、ページにCSSを貼り付けてと、3つのパターンでCSSを読み込んで、ワンクリックでCSSを最適化してくれるツール。実際に、このブログのCSSで試してみたところ結果は39.05%圧縮されました。
23 Resources for Clean and Compressed CSS
CSSのコードをキレイにそして、圧縮してくれるツールはまだまだあります。ツールによって圧縮するやり方が異なるので、圧縮率やその後のCSSも変わってきます。いろいろ試してみて、気に入ったツールを使ってみてはいかがでしょうか？
Faster Page Loads – Bundle Your CSS and Javascript
複数のCSSをカンマ区切りで並べてみたり
@importでまとめてインポートしたり
Improve website load time by 500% with 3 lines of code | Aciddrop.com
こちらは、3行追加するだけで、上記のCSSやJSをつなげて、スピードアップさせてくれるPHPのスクリプトです。こちらは、最新バージョンです。
WordPressプラグイン
WordPressのユーザーの方には、使えるプラグインです。
WP Super Cache
先日もご紹介しましたWordPress用のプラグイン
|
|
|
1月 31st, 2009 at 6:06 AM
本当に便利で、有益なデザインの情報を提供してくれてありがとうございます。今後もサイトの更新毎回楽しみにしてます！
1月 31st, 2009 at 8:08 AM
エントリしてから時間がたってますが、、、
かなり欲しかった！まとめです・・。
ありがとうございます！
1月 31st, 2009 at 9:12 PM
[...] サイトをもっと速くしたい! サイト最適化に使えるツールいろいろ | DesignWa… (tags: javascript performance webservice) [...]
2月 2nd, 2009 at 4:33 AM
[...] サイトをもっと速くしたい! サイト最適化に使えるツールいろいろ [...]
2月 2nd, 2009 at 5:04 AM
[...] 人が集まるところにはどうしても犯罪も起きるんですかね ● サイトをもっと速くしたい! サイト最適化に使えるツールいろいろ | DesignW… ウチのサイトも遅いので参考にします ● [...]
2月 2nd, 2009 at 6:07 PM
[...] サイトをもっと速くしたい! サイト最適化に使えるツールいろいろ | DesignWa…[CSSXHTML,JavaScript,パフォーマンスチューニング] [...]