NO_LCP 页面速度见解和灯塔

发布于 2025-01-16 04:51:32 字数 1769 浏览 3 评论 0原文

灯塔日志： 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)

页面速度洞察 https://pagespeed.web.dev/ report?url=https%3A%2F%2Fdev.workscope.com%2F

我试图查找相关信息，但没有找到确切的答案，也许你知道？

原文

Lighthouse log:
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 insights
https://pagespeed.web.dev/report?url=https%3A%2F%2Fdev.workscope.com%2F

I tried to find information about, but dont find exactly answers, maybe you know?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

十六岁半 2025-01-23 04:51:32

测试来自 MDN 的基本画布元素演示、灯塔说道：

记录页面加载跟踪时出现问题。
请再次运行 Lighthouse。（NO_LCP）

根据此 github 帖子，原因是除了画布本身之外，html body 元素中没有任何其他内容。

画布元素之前的 h1 和之后的段落在 Lighthouse 中返回标准性能结果。

除了画布元素之外，身体中没有任何东西：

<!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 说：

请再次运行 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>

Lighthouse说：

100 性能

When testing a basic canvas element demo from MDN , Lighthouse said:

Something went wrong with recording the trace over your page load.
Please run Lighthouse again. (NO_LCP)

According to this github post the cause was a result of there not being any other content within the html body element, other than the canvas itself.

An h1 before the canvas element and a paragraph after it, returned standard performance results in Lighthouse.

Nothing in body other than canvas element:

<!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 said:

Please run Lighthouse again. (NO_LCP)

After adding other html content:

<!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>

Lighthouse said: