WordPressプラグインのCrayon Syntax Highlighterを使うのをやめました。代わりがあるのでプラグインを使う必要がないからです。
サイトのパフォーマンス上、SEOを考えるとプラグインは少ない方が良いです。代わりにPrism.js を使うことにしました。
シンタックスハイライトとは
シンタックスハイライトは、ソースコードを見やすくするため、シンタックス（文法）で決まっている文字列をハイライトする機能です。
ハイライトは太字や色をつけて文字が目立つようにします。こんな感じ。
$text = true
if( $text ) {
//シンタックスハイライトです
}WordPressのプラグインやJavaScriptのプラグインで提供されています。
なぜ highlighter.js を選ばなかったのか？
シンタックスハイライトのJavaScriptプラグインに highlighter.js があります。おそらくもっとも使われている有名なプラグインでしょう。
今回、highlighter.jsは見送りました。一番の理由は行数表示がデフォルト機能にないから。
highlighter.jsを見送ったわけ
highlighter.js は機能拡張のたびに、機能拡張用のJavaScriptを実装しなければいけません。
highlightjs-line-numbers.js で行数を表示することはできます。しかし、JavaScriptファイルの最適化（ファイル結合、圧縮）作業をするのがめんどうなのでやめました。
WordPressプラグインのAutoptimizeで最適化するからそんなことはないじゃないか？
という意見もあるかもしれません。
が、ぼくはサイトのファーストビューをできるだけ速く表示するように、JavaScript, CSSの最適化を自分でカスタマイズできる環境を作っています。
Autoptimizeプラグインはカスタマイズしないものに限定しています。そこで、同じような機能の Prism.js を選びました。
Prism.js は軽量で実装する機能を選べる
Prism.js では、jsファイルをダウンロードするときに、どの機能を使うかオプションで選べます。ダウンロードするJavaScript、CSSファイルはそれぞれひとつだけ。
JavaScript、CSSファイルはサイズが小さい方がよく、使わない機能は無駄にサイトのパフォーマンスに影響するので、できるだけ実装したくありません。
ということで、Prism.jsに決めました。
『そんなに小さいことを気にしなくてもいいじゃないか？』
『それぐらい影響ないでしょ？』
という意見もあると思います。
しかし、サイトのパフォーマンス改善の作業をすると、小さなことの積み重ねは無視できないとに改めて気づかされました。
いかに楽して目的を達成するのかも大事ですが、それで解決できないものは、手を動かすことも大事なんですね？
