あけましておめでとうございます!
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ファイルを圧縮しました。
1ファイル当たり30%の圧縮に成功!これだけでもトータル200MB以上軽くなり、表示速度も・・・0.8秒位早くなりました。
それでもまだ12秒台です。
3の「外部取得のファイルがある為」は、おそらくWEBフォントが原因です。
手っ取り早くWEBフォントを取得しに行かせてました。そのため遅延が発生していたんです。
ってか、こいつが80%以上の原因です。
そこで、必要なフォントだけを使用(サブセット化)することにしました。また、フォントもダウンロードすることで遅延をさらに減らします。
HYZ studioが使用してるフォントは「M+ OUTLINE FONTS」という無料で商用利用OKのフォントです。
このサイトにサブセット化出来るページがあるます。
HYZ studioで使用している「ひらがな」「カタカナ」「英語」「数字」「特殊文字」「漢字」を入力するだけ。
これで入力されたものだけダウンロード出来ます。
あとはCSSで「@font-face~」と記述すればOK!
上記の2と3だけをやった後、完全に表示されるまでどのくらいかを計測したところ。。。
約4秒!
劇的に早くなりました!
あと1秒程度早くしないといけないのですが、これは1の画像サイズを下げればクリア出来そうですね。
皆さんもホームページの表示が遅いと感じたら是非試してくださいね!