[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&amp;skin=sunburst"></script>

追記(2017/08/18)
手順が変わっていました。