[Google General] google-code-prettify: ローカルで最適化したファイルを持つ方が良い

公開日: 2014/01/08
更新日: 2019/09/18

以前に試した google-code-prettify について、きちんと調べてみました。

[markdown]
> * [WordPress: Markdownをめぐる私的メモ | deadwood](https://www.d-wood.com/blog/2013/09/18_4657.html)

公式サイトはこちら。

> * [google-code-prettify – syntax highlighting of code snippets in a web page – Google Project Hosting](https://code.google.com/p/google-code-prettify/)

## PageSpeed Insights で確認する

PageSpeed Insights で、該当する .js, .css を確認すると、以下のような提案がされます。
ローカルで最適化したファイルを持った方が良いようです。

“`prettyprinted
圧縮を有効にする
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%）削減できます。
“`

“`prettyprinted
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%）削減できます。最適化されたコンテンツを表示
“`

“`prettyprinted
ブラウザのキャッシュを活用する
静的リソースの 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)
“`

“`prettyprinted
静的リソースからクエリ文字列を削除する
静的リソースにある HTTP ヘッダーのパブリックキャッシュを有効にすると、ブラウザはリモートのオリジンサーバーからではなく、近くのプロキシサーバーからリソースをダウンロードします。
このページに関する読み込み時間の短縮方法
URL に「?」を含むリソースは、一部のプロキシキャッシュサーバーでキャッシュされません。以下のリソースの URL からクエリ文字列を削除し、URL 内にパラメータをエンコードしてください:
https://google-code-prettify.googlecode.com/…/run_prettify.js?…
“`

## Auto-Loader ではなく、ローカルに JS と CSS を用意する

Auto-Loader ではなく、

“`html
script src=”https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js?lang=css&skin=sunburst”> script type=”text/javascript” src=”prettify.js”>
“`

load は body ではなく、例えば main.js 内に下記の記述でよい。

“`
prettyPrint();
“`

## 追加したい JS と CSS は、Concat する

lang.js は、prettify.js と、

> * [lang-css.js – google-code-prettify – syntax highlighting of code snippets in a web page – Google Project Hosting](https://code.google.com/p/google-code-prettify/source/browse/trunk/src/lang-css.js)

skin.css は、サイトのメインの style.css と。

> * [sunburst.css – google-code-prettify – syntax highlighting of code snippets in a web page – Google Project Hosting](https://code.google.com/p/google-code-prettify/source/browse/trunk/styles/sunburst.css)

## JS と CSS を最適化する

> * [Grunt: Webページの表示高速化について考える（JavaScript・CSS編） | deadwood](https://www.d-wood.com/blog/2013/12/05_5079.html)

## CDN

調べてみると、CDN の提供者もいるよう。

> * [prettify – cdnjs](http://cdnjs.com/libraries/prettify/)

## 補遺

> * [ソースコードをハイライトする google-code-prettify の設置方法 | 高密度商業地域 > ホームページ作成](http://komitsudo.blog70.fc2.com/blog-entry-168.html)

追記（2016/07/15）
現在は、Auto-Loader を利用しても警告されないようです。

> * [code-prettify/getting_started.md at master · google/code-prettify](https://github.com/google/code-prettify/blob/master/docs/getting_started.md)

“`html

“`

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

> * [[Front-End] google-code-prettify をローカルにインストールする方法 | deadwood](https://www.d-wood.com/blog/2017/08/18_9196.html)
[/markdown]