CKEditorを自分色に染める(2)

カスタムビルドをやったら、今度は読み込み最適化。
これまたヘビー(w
とはいえ、

1. CSSもminifyする
2. ckeditor_basic.jsを利用する

の2点のみをやる。
詳しい情報は、本家にある通り。
本家では微妙な表現だけど、読み込み最適化の話をするならgzip転送は前提なんだなぁ...
mod_deflate対応してないホスティングサービスではこの辺シンドイなぁ。
みんなphpとかの変換スクリプト挟んでいるのだろうか?

CSSをminifyするには、minifierを事前に準備しておく。
yuicompressorを利用する。他に好みのものがあれば、そちらをどうぞ。
yuicompressorでは、

java -jar yuicompressor.jar -o  出力ファイル 入力ファイル

とするだけで、CSSとJSの2種類がminifyできる。

それでは、読み込みを最適化させる。

1. 関連するCSSをminifyする

まずは、_ckeditor自体のスタイルとなる、

 /contents.css

をminifyする。

次に、利用するスキンのスタイルとなる、

/skins/%利用するスキン%/
 dialog.css
 editor.css
 templates.css

をminifyする。

2. ckeditor_basic.jsを利用する

基本的には、「ckeditor.js」として読み込んでいるscript記述を「ckeditor_basic.js」に書き換えるだけでいい。
但し、ckeditor.jsの配置場所がbasic.jsと違ったり、
JQueryでいうgetScriptみたいなXHR経由でckeditorを読み込むとハマる。
回避法方法の具体的な実装ついては、別記する。

お楽しみのBefore & After。
基準となるオリジナルでは、

ckedirot.jsがonloadまでに読み込まれている

そして最適化後は、

ckeditor_basic.jsが追加されている。
ckeditor.js自体や関連するファイルは、onload以後に読み込まれているのが分かる。
結果として、onloadまでの時間が大幅に短縮されている。

となる。
たった少しの手間で絶大な効果があったと言える。