[Google General] google-code-prettify: ローカルで最適化したファイルを持つ方が良い
以前に試した google-code-prettify について、きちんと調べてみました。
公式サイトはこちら。
Contents
PageSpeed Insights で確認する
PageSpeed Insights で、該当する .js, .css を確認すると、以下のような提案がされます。
ローカルで最適化したファイルを持った方が良いようです。
圧縮を有効にする
gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。
詳細
このページに関する読み込み時間の短縮方法
次のリソースの圧縮を有効にすると、転送サイズを 30.7 KB（56%）削減できます。
https://google-code-prettify.googlecode.com/.../run_prettify.js?... を圧縮すると 9.0 KB（55%）削減できます。
https://google-code-prettify.googlecode.com/.../sunburst.css を圧縮すると 1.2 KB（61%）削減できます。
CSS を縮小する
CSS コードを縮小すると、データ サイズを大きく削減でき、ダウンロード、解析、実行の速度を向上させることができます。
詳細
このページに関する読み込み時間の短縮方法
次のリソースの CSS を縮小すると、サイズを 1.4 KB（32%）削減できます。
https://www.d-wood.com/.../style.css を縮小すると圧縮後に 769 バイト（29%）削減できます。 最適化されたコンテンツを表示
https://google-code-prettify.googlecode.com/.../sunburst.css を縮小すると 695 バイト（36%）削減できます。 最適化されたコンテンツを表示
ブラウザのキャッシュを活用する
静的リソースの HTTP ヘッダー内で、有効期日や最大経過時間を設定すると、ブラウザが以前にダウンロードしたリソースをネットワークからではなくローカル ディスクから読み込むようになります。
このページに関する読み込み時間の短縮方法
次のキャッシュ可能なリソースでブラウザのキャッシュを活用してください:
https://google-code-prettify.googlecode.com/.../lang-css.js (3 minutes)
https://google-code-prettify.googlecode.com/.../run_prettify.js?... (3 minutes)
https://google-code-prettify.googlecode.com/.../sunburst.css (3 minutes)
静的リソースからクエリ文字列を削除する
静的リソースにある HTTP ヘッダーのパブリック キャッシュを有効にすると、ブラウザはリモートのオリジン サーバーからではなく、近くのプロキシ サーバーからリソースをダウンロードします。
このページに関する読み込み時間の短縮方法
URL に「?」を含むリソースは、一部のプロキシ キャッシュ サーバーでキャッシュされません。以下のリソースの URL からクエリ文字列を削除し、URL 内にパラメータをエンコードしてください:
https://google-code-prettify.googlecode.com/.../run_prettify.js?...
Auto-Loader ではなく、ローカルに JS と CSS を用意する
Auto-Loader ではなく、
script src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst"></script
ローカルに。
<link href="prettify.css" type="text/css" rel="stylesheet" />
script type="text/javascript" src="prettify.js"></script
<body onload="prettyPrint()">
load は body ではなく、例えば main.js 内に下記の記述でよい。
prettyPrint();
追加したい JS と CSS は、Concat する
lang.js は、prettify.js と、
skin.css は、サイトのメインの style.css と。
JS と CSS を最適化する
CDN
調べてみると、CDN の提供者もいるよう。
補遺
追記（2016/07/15）
現在は、Auto-Loader を利用しても警告されないようです。
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js?lang=css&skin=sunburst"></script>
追記(2017/08/18)
手順が変わっていました。