スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。


--/--/--(--)/--:--:--:コメント(-)|トラックバック(-)

サイトの読み込みを早くするために知っておくと便利なサイト

サイトを作る際に、
画像の最適化、スクリプトの圧縮など、
コンテンツの要領を減らすことで、読み込み速度を上げることができるのは、
サイト作っている人としては既知のことだと思います。

ただ、本当にちょっとしか触れてない人にとっては、なにそれおいしいの?
という話です。

自分が使っているサイトですが、
いくつか紹介していきたいと思います。
(有名どころが多いです)



1.JSファイルを圧縮してみる。

YUI Compressor Online

2011y12m03d_174927278.png

ブラウザ上で使えるYUI Compressorです。
ファイルをアップロードしてCompressを押して、
下に出てきたリンクを保存すれば終わりです。

チェックボックスは基本的にそのままでいいかと。

改行とかコメント部分を消してくれるので、すでにやってあるものはほとんど圧縮できません。
どれくらい圧縮できてるかも右の方に%で表示されますので、実感があります。

確か、CSSも圧縮できたはずですけど。自分はやったことないです。




2.画像をまとめて、リクエスト数を少なくする。

CSS Sprite Generator
2011y12m03d_180021303.jpg

アイコンなど画像をzipにしてアップロード後は適当にやっていけば、
ひとまとめにして、その画像を呼び出すためのbackground-positionも出してくれます。

スプライト画像設定のオフセットは画像同士の間隔なので、できるだけ小さくして、
Build Directionは画像を並べる方向なので、そのあたりは自己判断で適当に。
OptiPNGで画像を圧縮、Operaのバグを修正するためにコラムを囲む。
はやりたければどうぞみたいな。感じです。

アイコンを10個くらいを1つにまとめておくと、httpリクエストが実質1回で済むので、
サイトによってはだいぶ軽くなると思います。
GoogleやYouTubeなどの大型サイトも、アイコンをまとめています。


3.画像を最適化してみる。


PUNY PNG

2011y12m03d_180921190.jpg


UPLOAD IMAGESで画像をアップロードするだけでいい感じに最適化してくれます。
まとめての最適化もできますし、それをzipでDLすることも可能です。

どれくらい圧縮されているかも%で見えますし、
どれくらい圧縮するとか考えずに、
見た目はたいていの場合最適化したのが分からないくらいのレベルで最適化を行ってくれます。

Wikipediaの画像もここで最適化されているんですね。

この3つを使うだけでもサイトによってはだいぶ読み込みが早くなるものだと思います。

2011/12/03(土)/18:13:34:コメント(0)|トラックバック(0)
コメントの際の注意。
・宣伝・同じ内容の連投は削除等の対象。
・質問等は、しっかり考えてから行ってください。
 聞けば何でも教えてくれるというのは間違いです。
・コメントの返信方法が確立していないので、返せない場合があります(´・ω・`)
・http://とhttps://が禁止ワードとなっています。
 コメント本文のURL入力は頭のhを抜くなり、なんなりしてください
name:

title:

Mail_address:

URL:

comment:

パスワード:

管理者にだけ表示を許可する
トラックバックURL

プロフィール

猫と馬

Author:猫と馬
相互リンク希望の方はこちらにコメしてください
閲覧推奨環境
現在不明

フリーエリア

blogram投票ボタン
fc2ブログランキング 人気ブログランキングへ

↑から買い物をしてくれると管理人が喜びます

カテゴリ

リンク

月別アーカイブ

リンク・記事の紹介(引用)について。
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。