このブログを高速化してみました |ポケットビジョン ブログ

このブログを高速化してみました


ネットブックとはちょっと話題がずれますが、Yahoo! JAPAN Tech Blogにサイトを高速化するテクニックが紹介されていました。そのうちいくつかをこのブログでもやってみたら効果が絶大だったので紹介したいと思います。

1.高速表示のためのリニューアル

* CSS Spriteの採用
* 8bit-PNGの採用
* Optpix WebDesignerを利用した減色処理
* Smush.itを利用した8bit-PNGの余分なチャンクの削除

ウェブページの高速化に必要なもの (Yahoo! JAPAN Tech Blog)より引用

CSS Spriteの採用

アイコン画像などを一枚のファイルにしてCSSで呼び出す方法です。読み込むファイル数が少なくなるのでよいらしいです。ブログのデザインを崩してしまいそうだったので今回は断念しました。

8bit-PNGの採用

256色以内のGIF画像はすべてこれに変えました。このブログのピンクっぽい素材はほとんどGIFでした。もともと色が少なかったので、ものによっては3分の1ほどになりました。JPEGには向かないです。

ブログを高速化しました
GIFファイル(元画像)1014バイト

20080410b_9t.png
8bit-PNGファイル348バイト(65%軽量化)

色が多い画像は10%くらいしか小さくならないものもありましたが、おおむね50%以下に。

Optpix WebDesignerを利用した減色処理

こちらを使うとさらに圧縮できるそうです。ただし新規で購入すると5,775円します。ですので今回は見送りましたが、標準の8bit-PNGよりもさらに10%ほど軽量化できるとのことです。

Smush.itを利用した8bit-PNGの余分なチャンクの削除→実行

こちらは無料のウェブサービスです。PNGに含まれているチャンクというデータを削除してあげることによって、ファイルをもう一声軽量化できました。

ブログを高速化しました
チャンク削除済み8bit-PNGファイル308バイト(さらに12%軽量化)

作業の流れ

①フォトショップを使って"Web用およびデバイス用に保存"でGIFを8bit-PNGに変換。この際、カラーを256色から4色まで選べますが、色少ないファイルについては最高4色まで減色。色が少ないほど容量は少なくなります。

②次に、書き出した8bit-PNGファイルからSmush.itを使って、チャンクを削除します。この作業はすべてブラウザ上で行います。

③できあがったチャンク削除済み8bit-PNGファイルをサーバにアップします。FC2の様に共有テンプレートの画像ファイルを置き換えることが出来ない場合は、画像を別途アップロードしたのち、CSSに指定されている画像ファイルのパスを変更します。

結果

今回はGIF画像を8bit-PNGに変更したわけですが、このブログの体感速度がかなり速くなりました。このブログを読んでいただいている方々にも体感できるでしょうか?

例として上に掲載した画像は、1014バイトから308バイトへと合計約70%軽量化されました。大きさとしてはたいしたことないような気がするかもしれませんが、ちりも積もれば山となるです。

以前は、サイトを開くと、左側のメニューの表示に時間がかかって、記事本文がなかなか表示されないことが多かったのですが、その引っかかりみたいなものがかなり解消されました。重いサイトはすぐ閉じられてしまうので、これでこのブログを見てくれる人が少しでも増えると嬉しいですね。

まとめ

結論としましては、画像の軽量化によってページの処理が速くなることは間違いないので、ブログやサイトが重くてお悩みの方は、まずはGIFを8bit-PNGに変えてみることをおすすめします。

(関連リンク)

ウェブページの高速化に必要なもの (Yahoo! JAPAN Tech Blog)

最良の画像フォーマットはPNG8、GIFはアニメーション、JPEGは写真に | エンタープライズ | マイコミジャーナル

(permalink)

TRACKBACK URL to this Entry

TRACKBACK to this Entry

| HOME |

最近の人気記事

順位 記事タイトル
1 Windows 7 64bit阪でPDFのサムネイルを表示する方法
2 WindoswとMac OSXでFLACファイルを再生する方法
3 とにかく重い!時に、Androidスマホの反応を軽くするアプリ9種12本
4 音質劣化がないFLACはMP3に置き換わるか?
5 MacのWord 2011(ワード2011)で(注1)のような脚注をつける方法

サイトマップ

ABOUT

渋谷ヒカリエでパソコン修理をしている会社のブログです。 株式会社ポケットビジョン