标签: lighthouse
为什么我的 NextJS 性能得分在 web.dev 中如此不一致？
我们发现 web.dev 与 NextJS 应用程序的性能分数非常不一致。起初，我们有大约 30 个性能，所以我们开始优化。现在我们在 Lighthouse 的成绩约为 90，领先 5。然而，当我们在 web.dev 上测试它时，我们的分数从 73 到 99 不等，这是一个巨大的差异。这可能是什么原因造成的？当您比较具有完全相同的包大小的两份报告时，其中一份的总阻塞时间为 670 毫秒，另一份的总阻塞时间为 70 毫秒。此外，“最小化主线程工作”和“减少 Javascript 执行时间”也有很大不同。“最小化主线程工作”在低性能运行时为 3.5 秒，在高性能运行时为 2.8 秒。“减少 Javascript 执行时间”在性能较低的运行中为 1.5 秒，而在高性能运行中根本不存在（所以我假设为 0 秒）。同样，这是使用完全相同的 JS 和 CSS 包。
什么可能导致性能下降？这是我的代码中的任何错误还是这只是 Lighthouse/web.dev 中的问题？我在 Vercel 上托管，它通过 CDN 为我的网站提供服务，并且我还使用 CDN 来提供图像。
任何帮助将不胜感激。
推荐指数
解决办法
查看次数
如何删除 Nextjs 应用程序中的 .js 块？
我有这个 nextjs 应用程序，灯塔一直告诉我删除未使用的块。
\n\n\nRun Code Online (Sandbox Code Playgroud)\n\xe2\x80\xa6chunks/26c47f1\xe2\x80\xa6.6971807\xe2\x80\xa6.js\n410.0 KiB\n399.8 KiB\n\xe2\x80\xa6chunks/25.91c4046\xe2\x80\xa6.js\n437.6 KiB\n392.5 KiB\n\xe2\x80\xa6chunks/30.3fdf525\xe2\x80\xa6.js\n
我不知道它们是如何生成的，也不知道如何删除它们。我到处都搜索过，但找不到解决方案。
\n构建后如何删除未使用的块？
\n推荐指数
解决办法
查看次数
了解更多链接没有描述性文字
我有一个包含项目列表的页面。每个项目都包含一个指向不同页面的“阅读更多”链接。但是当我在该页面上运行灯塔工具时，它抱怨链接没有描述性文本。现在我无法更改此处的“阅读更多”文本。
<a href="link 1">Read more</a>
<a href="link 2">Read more</a>
<a href="link 3">Read more</a>
还有其他方法可以解决这个问题吗？
推荐指数
解决办法
查看次数
如何修复 Next.js 中灯塔中的“提供低分辨率图像”警告？
我使用 Next.js Image 标签显示了 svg 徽标。
import Image from "next/Image"
export default function Home() {
return (
<div>
<Image width={32} height={32} src="/logo.svg"></Image>
</div>
)
}
然后，当我使用 lighthouse 在页面上获取报告时，
我收到一条警告：“提供低分辨率的图像”。
另外，如果您尝试将宽度和高度都设置为 1024px，
此警告将会消失。即使使用 32px，我怎样才能摆脱这个警告？
推荐指数
解决办法
查看次数
为iOS编译Qt(UIKit灯塔)
我一直在尝试为iOS编译Qt,但是我遇到了一些其他人似乎没有的疯狂问题(至少根据我过去读过的内容).
我按照本文的说明操作:文章网址
- 我从git克隆了最新的Qt 4.8:
$ git clone git://gitorious.org/qt/qt.git - 我制作了
qt-lighthouse-ios-simulator文件夹,cd给它. - 我从文章中运行了很长的代码:
$ ../qt/configure -qpa -xplatform qpa/macx-iphonesimulator-g++ -arch i386 -developer-build -release -opengl es2 -no-accessibility -no-qt3support -no-multimedia -no-phonon-backend -no-svg -no-webkit -no-scripttools -no-openssl -no-sql-mysql -no-sql-odbc -no-cups -no-iconv -no-dbus -static -nomake tools -nomake demos -nomake docs -nomake examples -nomake translations opensource许可证yes我接受此协议
我收到这些错误:
In file included from /System/Library/Frameworks/ApplicationServices.framework/Frameworks/HIServices.framework/Headers/Accessibility.h:13,
from /System/Library/Frameworks/ApplicationServices.framework/Frameworks/HIServices.framework/Headers/HIServices.h:49,
from /System/Library/Frameworks/ApplicationServices.framework/Headers/ApplicationServices.h:34,
from generators/mac/pbuilder_pbx.cpp:56:
/System/Library/Frameworks/ApplicationServices.framework/Frameworks/HIServices.framework/Headers/AXUIElement.h:65: error: CGCharCode has not been declared
/System/Library/Frameworks/ApplicationServices.framework/Frameworks/HIServices.framework/Headers/AXUIElement.h:65: error: CGKeyCode has not been declared
在努力解决这个问题之后,在这里和那里搜索,找不到任何有用的东西(甚至没有关于CGKeyCode或CGCharCode实际上是什么,我决定"破解"它并且只是将定义添加到pbuilder_pbx.cpp:
typedef …
推荐指数
解决办法
查看次数
由Lighthouse测量的Hello World Angular CLI(为什么慢而且巨大？)
是否需要对Angular CLI Hello World应用优化,还是这是一个有效的"性能"结果？
在将Lighthouse应用于我们的live angular 4项目时,我们将与Angular CLI Hello World进行了比较.
从控制台:
npm install -g @angular/cli
ng new my-dream-app
cd my-dream-app
ng serve --prod
在Chrome中 - > F12 - >审核 - >运行灯塔.
- 表现为39/100.
- 第一个有意义的油漆是15,250毫秒
- 感知速度指数:15,248(目标:<1,250)
- 拥有巨大的网络负载:总大小为2,453 KB(目标:<1,600 KB)
更新1
感谢@Moshe,使用:
ng serve --prod --build-optimizer
提供以下内容: - 性能为96/100. - First Meaningful Paint是2,040ms - 感知速度指数:2,054(目标:<1,250); 等级92/100
最终难以形成一个单一,简明的问题.我理解 ng serve 不是为了生产使用,即使使用ags ..但这允许我在发布之前在我的localhost上进行测试.
推荐指数
解决办法
查看次数
渐进式Web应用程序"无法脱机工作"错误
我已经编写了一个渐进的Web应用程序,遵循所有可用的指南和示例,但由于某些原因,当我单击Add to homescreen按钮时,我不断收到这个神秘的错误:
Site cannot be installed: does not work offline
我的PWA和示例之间的主要区别在于我的运行纯粹是在域的非根路径中运行,所以我不得不在各个位置添加额外路径到配置,因此应用程序仅限于非root用户夹.
在谷歌灯塔网站没有太大的帮助或者,给人一种非常类似的消息.
任何人都可以建议这个错误可能是由什么引起的？
javascript android google-chrome lighthouse progressive-web-apps
推荐指数
解决办法
查看次数
Angular Universal：提供关键CSS并延迟非关键
这基本上是我正在使用的代码，并且灯塔说我的css包正在延迟我的初始加载。
那么我该如何链接到critical.scss
<head><style>DONT_WANT_TO_WRITE_STUFF_INLINED</style>...</head>
有没有比https://www.npmjs.com/package/critical更好的解决方案，或者内联所有内容？
以及如何延迟主要styles.scss的加载，直到预渲染的Universal内容加载到浏览器中？angular-cli.json中服务器应用程序的配置不包含styles或assets，所以我不明白为什么最初加载styles.scss
css lighthouse progressive-web-apps angular-universal angular
推荐指数
解决办法
查看次数
为什么灯塔插件无法识别Angular 6应用中的服务工作者？
我使用Angular 6 CLI在应用程序中生成并注册服务工作者,当我手动启用离线模式时,服务工作者工作是正确的,但是一旦我尝试使用灯塔进行审核,它就会告诉我服务人员未注册.
lighthouse service-worker angular angular-service-worker angular-pwa
推荐指数
解决办法
查看次数
如何增加角度6中的js和CSS文件的缓存寿命？
我一直在尝试使用灯塔报告来优化我的网页。
性能诊断工具之一说，可以增加我的静态文件的缓存寿命。
在报告中所指出的文件是main.js，polyfills.js，runtime.js和styles.css。据我了解，这些是我网页的主要内容。我当时在考虑使用角度服务工作者增加缓存。但是我找不到任何办法。
我发现增加缓存时间最接近的是角度服务工作者数据组。数据组支持缓存配置。
cacheConfig: {
maxSize: number;
maxAge: string;
timeout?: string;
strategy?: 'freshness' | 'performance';
};
但我不知道如何对AssetGroups执行相同操作。据我了解，js和css文件属于AssetGroups。
这是灯塔报告屏幕截图。
我正在工作的网页是margvel.com，我在github上有代码。
我还使用Firebase进行托管。是否拥有或可以更改Firebase上的缓存策略？
如何延长这些文件的缓存寿命？
推荐指数
解决办法
查看次数
标签 统计
lighthouse ×10
angular ×4
next.js ×3
css ×2
html ×2
reactjs ×2
anchor ×1
android ×1
angular-cli ×1
angular-pwa ×1
caching ×1
hyperlink ×1
ios ×1
javascript ×1
optimization ×1
performance ×1
qt ×1
seo ×1
uikit ×1
vercel ×1
webpack ×1