NO_LCP页面速度洞察力和灯塔
NO_LCP页面速度洞察力和灯塔
提问于 2022-03-22 22:17:49
灯塔日志: 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
我试着寻找有关信息，但找不到确切的答案，也许你知道？
回答 1
Stack Overflow用户
发布于 2022-09-23 21:40:46
在测试MDN中的基本画布元素演示时，灯塔说：
在页面加载过程中记录跟踪出现了问题。请再跑一次灯塔。(NO_LCP)
根据这个github哨所，原因是除了画布本身之外，在html元素中没有任何其他内容。
画布元素之前的一个h1和它之后的一个段落，返回灯塔中的标准性能结果。
除了画布元素之外，身体上没有任何东西：
<!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>灯塔说：
请再跑一次灯塔。(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性能
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71579595
复制相关文章
相似问题
腾讯云开发者
