NO_LCP 頁面速度洞察和燈塔

Question

燈塔日志：PROTOCOL_TIMEOUT

Channel: DevTools
Initial URL: https://dev.workscope.com/
Chrome Version: 99.0.4844.74
Stack Trace: LHError: PROTOCOL_TIMEOUT
    at devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:146:58
    at new Promise (<anonymous>)
    at Driver$1.sendCommandToSession (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:146:10)
    at Driver$1.sendCommand (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:146:257)
    at Object.clearBrowserCaches (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:164:899)
    at resetStorageForNavigation (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:166:447)
    at async Object.prepareTargetForIndividualNavigation (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:168:161)
    at async Function.runPass (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:214:918)
    at async Function.run (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:214:129)
    at async Function._gatherArtifactsFromBrowser (devtools://devtools/bundled/devtools-frontend/front_end/third_party/lighthouse/lighthouse-dt-bundle.js:363:456)

Pagespeed 見解https://pagespeed.web.dev/report?url=https%3A%2F%2Fdev.workscope.com%2F

我試圖找到有關的信息，但沒有找到確切的答案，也許你知道？

Answer 1

在測試來自 MDN 的基本 canvas 元素演示時，Lighthouse 說：

在您的頁面加載過程中記錄跟蹤出現問題。 請再次運行 Lighthouse。 (NO_LCP)

根據此github 帖子，原因是 html 主體元素中沒有任何其他內容，除了 canvas 本身。

canvas 元素之前的 h1 及其后的段落，在 Lighthouse 中返回標准性能結果。

除了 canvas 元件外，沒有其他東西：

<!DOCTYPE html>
<html lang="es">
<head>
<title>Canvas API - basic_example - code sample</title>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<style>
body {padding: 0; margin: 0;}
</style>
</head>
<body>

<canvas id="canvas"></canvas>

<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
</script>

</body>
</html>

燈塔說道：

請再次運行 Lighthouse。 (NO_LCP)

添加其他html內容后：

<!DOCTYPE html>
<html lang="es">
<head>
<title>Canvas API - basic_example - code sample</title>
<meta charset="utf-8">
<meta name="robots" content="noindex, nofollow">
<style>
body {padding: 0; margin: 0;}
</style>
</head>
<body>

<h1>Some text in H1</h1>

<canvas id="canvas"></canvas>

<p>Lorem ipsum dolor sit amet, consectetur..</p>

<script>
const canvas = document.getElementById("canvas");
const ctx = canvas.getContext("2d");
ctx.fillStyle = "green";
ctx.fillRect(10, 10, 150, 100);
</script>

</body>
</html>

燈塔說道：

100 性能

NO_LCP 頁面速度洞察和燈塔

問題描述

1 個解決方案

解決方案1
0 2022-09-23 21:40:46

NO_LCP 頁面速度洞察和燈塔

問題描述

1 個解決方案

解決方案1 0 2022-09-23 21:40:46

解決方案1
0 2022-09-23 21:40:46