ウェブサイトページの高速化

ウェブサイトの表示が遅い!? ネタ

あけましておめでとうございます!

 

2014年1月1日から、HYZ studioのホームページが公開されました。

みなさんも一度は見て頂けたかと思いますが、如何せん表示が遅い。

これは前から気になっており、やろうやろうと思っていたら新年を迎えてしまいました…

ちょっと手が空いたので、高速化することにしました。

 

まず、ページが完全に表示されるまで約13秒。

 

この13秒が致命的なんです。
「どうしても見たい」という思いがなければ待てないと思います。

13秒→3秒以内へ持っていく事が目標とします。

 

なぜ13秒もかかってしまうのか。

1 画像サイズが大きい

2 CSS・jsファイルが多い、サイズが大きい

3 外部取得のファイルがある為

この3点が遅延の原因です。

 

1の「画像サイズが大きい」は画像サイズを小さくするか、圧縮率を上げてファイルサイズを下げれば解決できます。

でも今回はスルーで。(ちょっと時間が掛かるから。。。)

 

 

2の「CSS・jsファイルが多い、サイズが多い」は確かに多いです。この2種だけでも10ファイル以上あります。

ファイル数を減らすことはせず、ファイルサイズを下げることにしました。
簡単に言うと、余分なインデント・改行・コメントを無くしてファイルサイズを下げる方法です。

今回は「Online YUI Compressor」を使用してCSS・jsファイルを圧縮しました。

 

YUI Compressor

YUI Compressor

 

1ファイル当たり30%の圧縮に成功!これだけでもトータル200MB以上軽くなり、表示速度も・・・0.8秒位早くなりました。

それでもまだ12秒台です。

 

 

3の「外部取得のファイルがある為」は、おそらくWEBフォントが原因です。
手っ取り早くWEBフォントを取得しに行かせてました。そのため遅延が発生していたんです。
ってか、こいつが80%以上の原因です。

そこで、必要なフォントだけを使用(サブセット化)することにしました。また、フォントもダウンロードすることで遅延をさらに減らします。

HYZ studioが使用してるフォントは「M+ OUTLINE FONTS」という無料で商用利用OKのフォントです。

このサイトにサブセット化出来るページがあるます。

 

M+Web FONTS Subsetter

M+Web FONTS Subsetter

 

HYZ studioで使用している「ひらがな」「カタカナ」「英語」「数字」「特殊文字」「漢字」を入力するだけ。

これで入力されたものだけダウンロード出来ます。

あとはCSSで「@font-face~」と記述すればOK!

 

上記の2と3だけをやった後、完全に表示されるまでどのくらいかを計測したところ。。。

 

 

約4秒!

 

劇的に早くなりました!

あと1秒程度早くしないといけないのですが、これは1の画像サイズを下げればクリア出来そうですね。

皆さんもホームページの表示が遅いと感じたら是非試してくださいね!