はじめに
ここでは、ページ速度を上げるためにSyntaxHighlighterの読込短縮するための方法を解説する。
いままでは、head内に記述していたためすべてのページに対してSyntaxHighlighterを読込していた。そのためSyntaxHighlighterを使用していないページまで読込が発生してしまいページ速度が著しく低下していた。そこで、Javascriptを使用しSyntaxHighlighterを使用しているページだけ読込をする。
SyntaxHighlighterのautoloaderについて
autoloaderも良いのだがこれはブラシ部分しか判定を行わないため、本体部分は読込を行う。そのためブラシ種類が少ない場合（私の場合だとxml、css、javascriptの３つのみしか使用しない、さらに全記事中の1/4程度しかSyntaxHighlighterを使用していない）などの時は、本体部分の読込も不必要な場面が多い。したがってautoloaderでは役不足である。
SyntaxHighlighter読込短縮フローチャート
シンプルに、まずpreタグの存在を判定し、preタグが存在すればSyntaxHighlighterを読込をするようにする。
SyntaxHighlighter読込短縮javascript
詳しくはこちらのサイトを参考にした。このコードを元に、xml、css、javasprict以外の判定は削除し、Closure Compilerを使用しjavascriptを圧縮した。
<script type='text/javascript'>
<!--
(function(){function k(a){var d=document.createElement("link");d.setAttribute("rel","stylesheet");d.setAttribute("type","text/css");d.setAttribute("href",a);g(d)}function l(a,d){var b=document.createElement("script");b.setAttribute("type","text/javascript");b.setAttribute("src",a);d?(b.onload=b.onreadystatechange=function(){if(!b.readyState||/loaded|complete/.test(b.readyState))b.onload=b.onreadystatechange=null,e=!1,h()},n(function(){g(b)})):g(b)}function g(a){document.getElementsByTagName("head")[0].appendChild(a)}
function p(a){m(function(){e=!0;a();e=!1})}function n(a){m(function(){e=!0;a()})}function m(a){e||0!=c.length?c.push(function(){a();h()}):(a(),h())}function h(){if(!e&&0<c.length){var a=c[0];c.splice(0,1);a()}}var c=[],e=!1;(function(){function a(a,b,e){this.name=a;this.brushNames=b;this.file=e}function d(a){for(var c=0;c<b.length;c++)for(var d=0;d<b[c].brushNames.length;d++)if(a==b[c].brushNames[d]){a=b[c].name;c=e;""!=c[a]&&(l(c[a],!0),c[a]="");return}}for(var b=[new a("CSS",["css"],"shBrushCss.js"),new a("JavaScript",["js","jscript","javascript"],"shBrushJScript.js"),new a("PHP",["php"],"shBrushPhp.js"),new a("Ruby",["rails","ror","ruby"],"shBrushRuby.js"),new a("XML",["xml","xhtml","xslt","html","xhtml"],"shBrushXml.js")],e=[],f=0;f<b.length;f++)e[b[f].name]="https://hosting-d86e3.firebaseapp.com/scripts/"+b[f].file;for(var c=0,g=document.getElementsByTagName("pre"),f=0;f<g.length;f++){var h=g[f].className.match(/(brush:\s*)([^\s;]+)(\s*;*)/);null!=h&&(0==c&&(k("https://hosting-d86e3.firebaseapp.com/scripts/shCore.css"),k("https://hosting-d86e3.firebaseapp.com/scripts/shCoreEclipse.css"),
l("https://hosting-d86e3.firebaseapp.com/scripts/shCore.js",!0)),d(h[2]),c++)}0<c&&p(function(){SyntaxHighlighter.config.bloggerMode=!0;SyntaxHighlighter.all()})})()})();
//-->
</script>
さいごに
今回は、xml、css、javasprictとしたが必要な部分を選択し圧縮を行えば、自分にあったコードが生成できるだろう。
おすすめページ速度チェックサイト
- PageSpeed Insights - Google Developers
- Google アナリティクス – Google
- GTmetrix _ Website Speed and Performance Optimization
上記のサイトなどで読込速度が改善されていることを確認すると良い。
0 件のコメント :
コメントを投稿