ガジェニュー

~iPhone・Android,格安スマホ,ネットフリックスとか~

【WordPressカスタマイズ】「Crayon Syntax Highlighter」が重かったのでサイト高速化のため「highlight.js」を入れてみた

      2016/02/17    後で読む

2014-12-22-23-00-27_deco.jpg

最近はWordPressでやっているこのブログがかなり重かったので高速化を目指して色々とやっています。そんな中、出来るだけPluginを減らすことによって高速化を目指そうということもあり記事中にプラグイン無しでAdSenseとソーシャルボタンを設置する方法なども含め色々といじっています。

そんな中、WordPressのプラグインの「P3 Plugin Profiler」を使ってどのPluginのせいでサイトが重くなっているのかを特定して対策をしました。

今回サイトの表示速度に大きく影響を及ぼしていたのは「Crayon Syntax Highlighter」という本文で、コードとかを綺麗に表示するためのプラグインでした。

ですので今回はこちらの「Crayon Syntax Highlighter」のプラグインを削除し、「highlight.js」という物を導入してみましたのでそのやり方と、効果の程をメモしていきます。

SPONSORED LINKS

「Crayon Syntax Highlighter」が重い。「highlight.js」に変更してみた

導入に際しては下記のサイトに詳しく書いてあったのでそちらを参考にして進めさせて頂きました。

特に難しいことはなく、JavaScriptとCSSの読み込みの記載を入れるだけです。こちらは後ほど。

まずは、サイトの表示速度について結果を報告

サイト表示速度が劇的に早くなった

まずは導入前と後のサイト表示速度を見てもらいたいと思います。データは上記で紹介した「P3 Plugin Profiler」を利用しています。

導入前

befor
見てもらえいるとわかるように、「Crayon Syntax Highlighter」がかなりサイトを重くしていることがわかると思います。

導入後

after導入したことによって「Plugin Load Time」が1.43秒から0.28秒と1秒以上の高速化になりました。

また、「Crayon Syntax Highlighter」はCSSの読み込みが別でレンダリングブロックの弊害もあったんですが、それも解消しました。

「highlight.js」の導入方法

導入は簡単です。
header.phpのheader内に

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/styles/github.min.css"/>

footer.phpのfooterの直前に

<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/8.2/highlight.min.js"></script>
<script>
$(document).ready(function() {
    $('pre').each(function(i, block) {
        hljs.highlightBlock(block);
    });
});
</script>

>
を記載します。

以上です。

「Crayon Syntax Highlighter」のときに、「pre」のタグ内をハイライトさせていたのでそのまま引き継げるようにちょっといじっています。

また表示のデザインに関しては、こちらで表示を確認してここからCSSの読み込みのファイルをこちらの中から選択して書き換えるだけです。(上の○○○.min.cssの部分)

まとめ

こちらの設定を見なおした所かなりサイトん表示速度が改善されたと思います。

ほかのサイトを見ていると「Crayon Syntax Highlighter」は軽いと書いてあったのですが、自分の環境ではかなり重かったので対策しました。

あとはサーバーの速度改善ぐらいしか出来る手立てがないので、早いと言われるエックスサーバーに乗り換えるか検討中です。

また同じ会社がやっている、WordPress用に特化してカスタマイズしたwpXレンタルサーバーに関しても気になるところのなのでちょっとリサーチをして乗り換えるのであれば来年の1月中に契約をしてしまいたいなぁと思っています。

でも、乗り換え面倒なんだよね。。

てな感じで。

 - WordPress, プラグイン , ,

  関連記事

sum-wpp
【STINGER5カスタマイズ】WordPress Popular Postの表示をSTINGER5と同じにする

「STINGER5」への移行にともなって、使用していたプラグインでもポロポロと修 …

sum
【アクセス数報告】2014年10月のPVとアフィリエイトの収益を公開します

10月の末から、昨日まで曾祖母のお葬式や、遺品整理やらでバタバタしていて本日から …

icon_1r_192
【アクセス数報告】2015年7月のPVとアフィリエイトの収益とか

7月も終わってとうとう8月に突入です! 個人的には夏は嫌いです!みなさんは「暑い …

images_112014_115155_AM
【STINGER5カスタマイズ】このブログにしたカスタマイズまとめ

STINGER3からSTINGER5に乗り換えたのが、2014年10月1日。もと …

sicon_1r_192_120214_095619_AM
【アクセス数報告】2014年11月のPVとアフィリエイトの収益を公開します

さて、12月ということで、いつもの報告をやっていきます。前回までの結果は下記から …

screenshot (1)
「Google+」と「WordPress」を活用して2時間でサーバの容量を圧迫しないフリー写真素材サイトを作ったよ!

2年ほど前にミラーレス一眼を買って色々写真を楽しんだりしていた私なのですが、実は …

sicon_1r_192_010515_055949_PM
【アクセス数報告】2014年12月のPVとアフィリエイトの収益とか

2015年がスタートしましたね。 今年は色々なことを始める予定ですので、去年とは …

icon_1r_192
【アクセス数報告】2015年4月のPVとアフィリエイトの収益とか

4月も終わり今日から5月ですね。GW前にこの暑さはもはややってられないです。 ま …

sum1
【STINGER5カスタマイズ】 App Store Insert の導入とCSSカスタマイズ

今回はSTINGER5にRAKUISHI.COMさんが公開しているWordPre …

simages_121114_030748_PM
【STINGER5カスタマイズ】日付・更新日の横にPoketの後で読むボタンを追加

今回も、STINGER5のカスタマイズ記事です。 普段スマホでネットサーフィンを …

Loading Facebook Comments ...

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です