MS Access Tips/Sample and VBA and Blog customize etc...

SyntaxHighlighter 3.0 を軽量化する

タイトル画像

SyntaxHighlighterは、ライバルの google-code-prettify やhighlight.js と比べると重いと言われているので軽量化にトライしてみました。

難易度:

ライバルとの違い

SyntaxHighlighter は基本スクリプトと、言語別のスクリプトに分かれており、必要な言語の数だけリンクを設定する必要があります。これはHTTPリクエスト数が増えるので重くなる原因になります。

その点 highlight.js はダウンロードするときに、必要な言語にチェックを入れると、その言語用スクリプトを含む一つのファイルとしダウンロードできます。

highlight.jsダウンロードページ

highlight.js を当方が必要な言語(CSS, HTML, JS, SQL, VB)にチェックを入れてダウンロードしてみたら jsファイルのサイズは 25KB でした。 SyntaxHighlighter の必要ファイルの合計サイズは30KBです。

ファイルサイズだけで実行速度が決まるものではないですが、目安にはなります。

google-code-prettifyは言語別ファイルなしで基本スクリプトだけでも動作します。が、言語別ファイルもあり、それも設置しておくとより綺麗に表示されるらしいです。当方の必要ファイルの合計は19KBとなりました。

SyntaxHighlighterのファイルを一つにまとめて圧縮する

スクリプトを圧縮、マージしてくれるWEBサービスはいろいろありますが、今回は下記のサイトを利用しました。

Refresh-SF - Online JavaScript and CSS Compressor

OnlineJavaScriptandCSSCompressorページ

上記のテキストエリアにまずは shCore.jsファイルをドラッグ&ドロップして、後は必要な言語ファイル(shBrush****.js)を複数選択してドラッグ&ドロップします。自動でjsかcssかHTMLかを判断して、JavaScript のボタンに色が付きますので、それをクリックします。

OnlineJavaScriptandCSSCompressor圧縮後

ファイルサイズが 26KB まで圧縮されたと表示されています。Saveボタンをクリックして保存します。

ただし、ライセンス表記まで削除されてしまいます。そのまま使うのは問題ですので、圧縮する前に、先頭のライセンス表記部分はコピーしておいて、圧縮後、先頭に挿入してから、ファイル保存するようにしましょう。

これでHTMLでスクリプトのリンクは1行になりスッキリします。

さらに下記のような規定値の設定や、ハイライト実行メソッドのコードを最後に追加しておいて圧縮すると、HTMLにこれらを記述する必要がなくなりさらにスッキリします。

ファイルサイズとHTTPリクエスト数の減少での高速化が体感できるかどうかは微妙ですが、htmlがスッキリするのは気持ちいいですね。

追記: SyntaxHighlighter.all() はページがすべて読み込まれたあとで実行されるので、実行タイミングが遅くなります。WEBが重い時など、ハイライトされずにテキストエリアが表示されて、しばらくしてからハイライトされることがあります。それを避けたい場合は SyntaxHighlighter.all() は削除して、HTMLの記事のすぐあと(FC2ブログなら、<%topentry_more> の後辺り)に下記のコードを置くとより早いタイミングでハイライト描画されます。

当プログだと下記のようになります。

このWEBサービスはCSSも圧縮できるので、ついでに、CSSファイルも圧縮するといいでしょう。9KBから7KBへと若干ですが圧縮されました。

ブログでの不必要な読み込みを回避する

FC2ブログには本文と追記があり、通常は、一覧ページや検索結果ページなどは、本文だけ表示して、続きを読むボタンで個別記事ページヘ移動するというサイト設計になっています。当ブログも同様で、コードは追記部分のみに置いています。

その場合、個別ページ以外でスクリプトの読み込むのは無駄ですね。この無駄を回避するために、個別記事のときだけ読み込むように設定してみました。

<!--permanent_area-->
~ <!--/permanent_area-->
はエリア変数の一つで、これで囲まれた部分は個別記事の時だけ表示されます。

まとめ

WEBサービスを使うことでリソースの圧縮は手軽にできます。これだけで劇的にロード速度が改善するということはないですが、このような細かい改善をコツコツと積み重ねていくことで全体的な速度が改善されていくでしょう。

また、FC2ブログはエリア変数をうまく使うとこのように無駄な読み込みを回避できますので、調べておくといいでしょう。

FC2ヘルプ | FC2ブログ | テンプレート用 変数一覧

拍手する

Leave a reply






Trackbacks

trackback URL
http://hatenachips.blog34.fc2.com/tb.php/474-15354d81
該当の記事は見つかりませんでした。