前の関連記事：Blogger:SyntaxHighlighter(5)Configurationを設定する
Blogger:GTmetrixのWaterfallをみてページ速度向上を考えるで使ったGTmetrixのWaterfallでSyntaxHighlighter関連の処理の部分を抜き出して、オートローダーを使う場合と使わない場合を比較します。
オートローダーを使うと同じブラシファイルが何度も呼ばれる
計測するページはSyntaxHighlighterの出力部分が6箇所あるBlogger:モバイルサイト(8)Bloggerのタグではウェブバージョンをモバイル端末からみていることを判別できずを使います。
このページをテストブログにコピペしてそのサイトで計測します。
こうしてみると何回も同じファイルが呼び出されているのがわかります。
Googleサイトに置いているファイルはリダイレクトが2回ずつあるので、そこに置いている外部ファイルは同じファイルが3回ずつ呼び出されることになります。
302という数字がある行がリダイレクトされている呼び出しです。
200が実際のファイルの呼び出しになります。
shCoreが6回呼び出されれているように見えるのはshCore.cssとshCore.jsという二種類のファイルがあるだけでそれぞれは3回ずつしか呼び出されていません。
shBrusで始まるファイルは13回も呼び出されています。
リダイレクトではない実際の呼び出しは4回です。
SyntaxHighlighterの出力部分の6個と一致しないのはなぜかわかりません。
オートローダーを使わない場合は同じブラシファイルが何度も呼ばれるということはない
今度はオートローダーをやめて、ブラシファイルをxml、js、ｃｓｓだけを読み込みます。
計測するページで呼び出しているブラシファイルはxmlだけです。
shBrusで始まるファイルの呼び出しが9回に減っていますね。
shAutoloader.jsの読み込みもなくなるので呼び出し数が全部で25回から18回に減っています。
さらに全ての呼び出しがDOM読み込み時間(縦の青線）以内に収まっています。
やはりオートローダーを使わないほうが表示が早い
今回の結果からはオートローダーを使わないほうが表示は早くなります。
しかし、このWaterfallをみてみると、時間がかかっている最大の原因は、オートローダー使用の有無ではなく、Googleサイトにファイルを置いている、ということだということがわかります。
参考にしたサイト
GTmetrix | Website Speed and Performance Optimization
これのWaterfallの結果をみるとページ表示の流れがわかります。
0 件のコメント:
コメントを投稿