WordPressのシンタックスハイライトをCrayonからhighlight.jsに変えたら表示速度が向上した(多分)

WordPressでシンタックスハイライトをするために、これまで「Crayon Syntax Highlighter」というプラグインを使っていました。

WordPress › Crayon Syntax Highlighter « WordPress Plugins

このCrayon Syntax Highlighter、WordPressでシンタックスハイライトするためのプラグインとしては非常に人気があります。でも、ちょっと動作が重いのが気になっていました。WordPressのプラグインを使わなくてもシンタックスハイライトはできるので、プラグインを使わない方法でシンタックスハイライトして、速度を計測してみました。具体的には、「highlight.js」というJavaScriptを使っています。

highlight.js

WordPressでプラグインを使わずにシンタックスハイライトする方法

WordPressでプラグインを使わないでシンタックスハイライトするには、以下の3つのJavaScriptライブラリを使うのが良さそうでした。

google-code-prettify

SyntaxHighlighter

highlight.js

google-code-prettify、SyntaxHighlighter、highlight.jsを比較した記事がありました。

JavaScript – コードのハイライト表示 JS ライブラリ 3種 – Qiita

コードのハイライト表示

この3つから、速そうかつ楽そうなhighlight.jsを使うことにしました。

highlight.jsの使い方

highlight.jsの使い方、またはCrayon Syntax Highlighterからhighlight.jsへの移行については、以下の記事が詳しいのでこれを読んでやるといいですね(丸投げ)。WordPressのヘッダーとフッターにコードを貼付けるだけです。

WordPressでコードを色付け表示する。highlight.jsでシンタックスハイライト | はぴすぷ

ただし、上記の記事ではhighlight.jsのバージョン8.2を使っていますが、本日現在の最新版は8.8.0になっています。新しいバージョンのものを使う場合には貼付けるべきコードが異なってきますので、highlight.jsの公式ページにアクセスして最新版のコードを確認しましょう。

試しに、この記事に載せたコードをシンタックスハイライトしてみます。綺麗にシンタックスハイライトされているのが見えるでしょうか?

const int inputPin_1 = 9;
const int inputPin_2 = 10;
const int pwmPin = 11;
const int threshold_1 = 341; 
const int threshold_2 = 682; 

void motorBack(void){
    digitalWrite(inputPin_1,HIGH);
    digitalWrite(inputPin_2,LOW);
    analogWrite(pwmPin,255);
    delay(100);
}

void motorStop(void){
    digitalWrite(inputPin_1,LOW);
    digitalWrite(inputPin_2,LOW);
    analogWrite(pwmPin,0);
    delay(100);

}

void motorAhead(void){
    digitalWrite(inputPin_1,LOW);
    digitalWrite(inputPin_2,HIGH);
    analogWrite(pwmPin,255);
    delay(100);
}

void setup(){
  pinMode(inputPin_1,OUTPUT);
  pinMode(inputPin_2,OUTPUT);
  pinMode(pwmPin,OUTPUT);
}

void loop(){
  //可変抵抗からの入力値を取得(0-1023)
  int inputValue = analogRead(A0);  
  
  //可変抵抗からの入力値で回転を制御
  if (inputValue <= threshold_1) {
    motorBack();
  }
  else if (inputValue <= threshold_2){
    motorStop();
  }
  else{
    motorAhead();
  }
}

なお、HTMLなどを表示するときはエスケープが必要になりますが、「HTMLエスケープツール 」というのを使えば一発でエスケープしてくれるので楽です。

HTMLエスケープツール | Web制作小物ツール - dounokouno.com

highlight.jsを導入した結果

Crayon Syntax Highlighter使用時とhighlight.js使用時でそれぞれ表示速度を計測してみました。計測には、GoogleのPageSpeed InsightsとGTmetrixを使いました(GTmetrixのPageSpeed Scoreは、GoogleのPageSpeed Insightsの数字を使っているみたいですが)。このブログのトップページを対象に計測しました(追記:現在、本ブログはwpXサーバーを使っていますが、当時はさくらインターネットのビジネスプロを使っていました)。

計測結果を以下に示します。矢印左側がCrayon使用時の数字、矢印右側がhighlight.js使用時の数字です。

測定結果です。それぞれ1回だけ計測しています。

  • PageSpeed Insight
    • Mobile: 53 → 54
    • Desktop: 64 → 66

     

  • GTmetrix
    • PageSpeed Score: B(83%) → B(86%)
    • YSlow Score: C(70%) → D(68%)

     

YSlow Scoreが2%ほど下がっていますね…。でもPageSpeed Scoreが3%も上がっているので、差し引きプラスということで、表示速度は向上している…と言えるのではないでしょうか?GoogleのPageSpeed Insightの数字も向上しているので、WordPressのシンタックスハイライトをCrayonからhighlight.jsに変更すると表示速度は多分速くなる、ということでよろしくお願いします。

シェアしてもらえるとうれしいです。゚(´っωc`)゚。