超速! Webページ速度改善ガイド ── 使いやすさは
結果を
参考
Long Tasks API とは
50ms 以上 時間が
現在(2018/01/27) v1 で、
実行方法
PerformanceObserver を 登録する
ScriptAutoRunner - Chrome ウェブストア を
var aPE = []; var observer = new PerformanceObserver(function(list) { var perfEntries = list.getEntries(); for (var i = 0; i < perfEntries.length; i++) { var p = perfEntries[i]; aPE.push(p); } }); observer.observe( { entryTypes: ["longtask"], buffered: true } );
buffered: true
は、チェックしたい ページを 開き、 Console 上で スクリプトを 実行する
kemsakurai.github.io で、
console.log(aPE);
(5) [PerformanceLongTaskTiming, PerformanceLongTaskTiming, PerformanceLongTaskTiming, PerformanceLongTaskTiming, PerformanceLongTaskTiming] 0:PerformanceLongTaskTiming {attribution: Array(1), name: "self", entryType: "longtask", startTime: 1657.2000000000003, duration: 67.59999999999991} 1:PerformanceLongTaskTiming {attribution: Array(1), name: "self", entryType: "longtask", startTime: 1835.1400000000003, duration: 69.16999999999985} 2:PerformanceLongTaskTiming {attribution: Array(1), name: "cross-origin-descendant", entryType: "longtask", startTime: 1904.8550000000002, duration: 135.33999999999992} 3:PerformanceLongTaskTiming {attribution: Array(1), name: "multiple-contexts", entryType: "longtask", startTime: 2375.4000000000005, duration: 108.49999999999955} 4:PerformanceLongTaskTiming {attribution: Array(1), name: "unknown", entryType: "longtask", startTime: 5090.1, duration: 155.2549999999992} length:5 __proto__:Array(0)
duration が 100ms 以上のみ 取得する
console.log(aPE.filter(function(element, index, array) { return (element.duration >= 100); }));
(3) [PerformanceLongTaskTiming, PerformanceLongTaskTiming, PerformanceLongTaskTiming] 0:PerformanceLongTaskTiming {attribution: Array(1), name: "cross-origin-descendant", entryType: "longtask", startTime: 1904.8550000000002, duration: 135.33999999999992} 1:PerformanceLongTaskTiming {attribution: Array(1), name: "multiple-contexts", entryType: "longtask", startTime: 2375.4000000000005, duration: 108.49999999999955} 2:PerformanceLongTaskTiming {attribution: Array(1), name: "unknown", entryType: "longtask", startTime: 5090.1, duration: 155.2549999999992} length:3 __proto__:Array(0)
name が、 self のみ 取得する
console.log(aPE.filter(function(element, index, array) { return (element.name == "self"); }));
(2) [PerformanceLongTaskTiming, PerformanceLongTaskTiming] 0:PerformanceLongTaskTiming {attribution: Array(1), name: "self", entryType: "longtask", startTime: 1657.2000000000003, duration: 67.59999999999991} 1:PerformanceLongTaskTiming {attribution: Array(1), name: "self", entryType: "longtask", startTime: 1835.1400000000003, duration: 69.16999999999985} length:2 __proto__:Array(0)
name属性取り
self
自画面 の遅い Task same-origin-ancestor
同じdomain の親フレームの 遅い Task same-origin-descendant
同じdomain の子フレームの 遅い Task same-origin
同じdomain の到達不能な フレームの 遅い Task cross-origin-ancestor
他domain の親フレームの 遅い Task cross-origin-descendant
他domain の子フレームの 遅い Task cross-origin-unreachable
他domain の到達不能な フレームの 遅い Task multiple-contexts
遅い Task に複数の フレームコンテキストが 関与している unknown
上記のどれでもない 遅い task
muliple-context と、
Task 特定に 必要な 情報を 取得する
Long Tasks with setTimeout test page を
aPE.forEach(function(element, index, array) { console.log("element.name:", element.name); console.log("element.startTime:" , element.startTime); console.log("element.duration:", element.duration); console.log("element.attribution.length:", element.attribution.length); console.log("element.attribution[0].name:", element.attribution[0].name); console.log("element.attribution[0].containerType:", element.attribution[0].containerType); console.log("element.attribution[0].containerSrc:", element.attribution[0].containerSrc); });
VM1816:2 element.name: self VM1816:3 element.startTime: 1598.98 VM1816:4 element.duration: 123.32500000000027 VM1816:5 element.attribution.length: 1 VM1816:6 element.attribution[0].name: script VM1816:7 element.attribution[0].containerType: iframe VM1816:8 element.attribution[0].containerSrc: VM1816:2 element.name: cross-origin-descendant VM1816:3 element.startTime: 1765.6600000000003 VM1816:4 element.duration: 553.145 VM1816:5 element.attribution.length: 1 VM1816:6 element.attribution[0].name: script VM1816:7 element.attribution[0].containerType: iframe VM1816:8 element.attribution[0].containerSrc: https://platform.twitter.com/widgets/widget_iframe.83d5793f6ebbe2046330abda6016ae93.html?origin=https%3A%2F%2Fkemsakurai.github.io
以下、
attribution[0].name
PerformanceLongTaskTiming は、TaskAttributionTiming の 配列を 保持して おり、 その 1要素目の name 属性を 取得します。
現在は、script
しか設定されていないようです。 element.attribution[0].containerType
“iframe”、“embed”、 “object”などの フレームコンテナの 型が 設定されています。
確認した画面では、 iframe
のみが設定されていました。 element.attribution[0].containerSrc
フレームコンテナの、接続リソースの URL が 設定されます。
他 domain に接続している フレームでは、 その URLが 設定されていました。
使って 見た 感想
現在は、
有用な 情報は 取得できない。
監査と、パフォーマンス調査に 使用するには、 取得できる 情報が 少ないです。
今後詳細な情報が 取得でき、 具体的な 問題箇所まで 特定できるとうれしいかなと 思いました。 遅い Task が
あるかどうかの チェックには 使える。
現在の情報でも、 遅い Task が 存在するかどうかは わかるので、 パフォーマンス改善の ボトルネック検知には 使用できそうに 思います。
「200ms かかっている Task が あったら 改善箇所が ないか 確認する」などは いいかもしれません。 使用方法の
イメージ - RUM と
して、 Google Analytics に 送信する。 - 開発テスト時の
監査項目に する。
- RUM と
以上です。
個人的に、
スクリプト処理の 遅さを 検知できる APIだと 思いました。 フレームは、 60 (フレーム・パー・) セカンズ:Pinterestの 描画パフォーマンス最適化の ケーススタディ | デザイン | POSTD を 指しているのかと 思いましたが、 何か 違う 気もします。 ↩
コメント