LINEで送る
Pocket

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

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

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

解析ツール

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

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

Similar Posts:

LINEで送る
Pocket


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

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です