DeepCrawlでページのパフォーマンスを確認する

これらのデータを取得する

これらの指標はDeepCrawlでカスタム機能を活用すると、これらを簡単にクロールに含めることができます。どのパフォーマンス指標をレンダリングされたクロールで確認したいか決めたら、以下２つのステップでこれらを取得することができます。①カスタムJavaScriptの挿入を使っている指標を見つけ、②該当プロジェクトのカスタムスクリプトの挿入設定にて、以下のコードスニペットを追加してください。

var perfTimings=performance.timing.toJSON() Object.keys(perfTimings).forEach((i)=>{   if(perfTimings[i]>0){       var newSpan = document.createElement("span");       newSpan.id = "customextraction-perftimings-" i       newSpan.innerText = ((perfTimings[i]-perfTimings.navigationStart)/1000).toFixed(2)       document.body.appendChild(newSpan)   } }) performance.getEntriesByType('paint').forEach(entry => {           var newSpan = document.createElement("span");       newSpan.id = "customextraction-perftimings-" entry.name       newSpan.innerText = (entry.startTime/1000).toFixed(2)       document.body.appendChild(newSpan) }) var deepCrawlResourceMetrics = {count:0,totalTransferBytes:0,totalDecodedBytes:0} performance.getEntriesByType('resource').forEach(entry => {     deepCrawlResourceMetrics.count       deepCrawlResourceMetrics.totalTransferBytes =entry.transferSize     deepCrawlResourceMetrics.totalDecodedBytes =entry.decodedBodySize }) Object.keys(deepCrawlResourceMetrics).forEach((i)=>{     var newSpan = document.createElement("span");     newSpan.id = "customextraction-resources-" i     newSpan.innerText = deepCrawlResourceMetrics[i]     document.body.appendChild(newSpan) })
	

カスタム抽出でこれらのデータを取得しましょう。前述のステップを行うことで、ページをクロールするときに、パフォーマンスデータがページのDOMへ出力されます。次のステップはこれらをカスタム抽出へと抽出してくることです。抽出したい指標に応じて、以下のカスタム抽出を使ってください。

• navigationStart
• unloadEventStart
• unloadEventEnd
• fetchStart
• domainLookupStart
• domainLookupEnd
• connectStart
• connectEnd
• requestStart
• responseStart
• responseEnd
• domLoading
• domInteractive
• domContentLoadedEventStart
• domContentLoadedEventEnd
• domComplete
• loadEventStart
• loadEventEnd

パフォーマンスタイミングについての詳細はこちらをお読みください。

ペイントタイミング

• first-paint
• first-contentful-paint

ペイントタイミングの詳細についてはこちらをお読みください。

Resource Statistics

• resource-count
• resource-totalTransferBytes
• resource-totalDecodedBytes

データを使用する

一度クロールを行うと、これらのデータは[カスタム抽出]と[全てのページ] の両方に表示されます。パフォーマンスの指標は、レンダリング開始からかかった時間（秒）で表示されます。