为什么react中新创建的应用程序在灯塔中的站点性能较低

文章/答案/技术大牛

发布

2回答

reactjs、google-chrome、create-react-app、lighthouse

想知道为什么新创建的应用程序在灯塔中得分很低的原因。目前显示的分数是28。请帮助我获得一个可能的解决方案，以提高网站的性能 ?

浏览 28提问于2021-06-29得票数 2

1回答

PWA灯塔与Webpack捆绑

reactjs、webpack、create-react-app、progressive-web-apps

这个问题的一些背景知识:我试图通过使用动态模块加载来聪明地在我的PWA上获得良好的灯塔性能数据。所以我的方法是:在我的index.js中，我只静态地导入react和react-dom，然后使用React.lazy和suspense来导入我的应用程序组件。一旦所有这些都完成加载，服务工作者状态就会变为绿色，并显示已安装，并触发我<

浏览 0提问于2021-04-15得票数 0

1回答

如何知道React组件何时准备好进行交互

reactjs、performance、web、lighthouse、web-vitals

只是好奇能做些什么来测量一个反应应用的TTI (网络生命)。因为我们只对特定的组件TTI感兴趣，所以灯塔将无法在这里提供帮助。

浏览 5提问于2022-01-12得票数 0

1回答

在Chrome工具上运行“灯塔”网站审计时，打开“遗留导航”会严重影响网站的性能。

seo、google-chrome、technical-seo、seo-audit、lighthouse

当在chrome开发工具上运行“灯塔”网站审计时，打开“遗留导航”确实会破坏网站的性能分数。它使我的网站的一些URL上的性能分数下降了10-15分，并在我的领域中其他不同的URL上开始了剧烈波动的性能分数。有人能向我解释什么是遗留导航吗?在chrome工具中，这个设置在灯塔中到底是做什么的？这和成绩有什么关系

浏览 0提问于2022-07-25得票数 3

2回答

有没有办法用Jest和React的大数据集来测试highcharts？

unit-testing、highcharts、performance-testing、large-data、react-highcharts

我正在尝试highcharts的写作测试。但是如何使用更大的数据集测试highchart，如何检查性能，以及如何测试highchart是否适用于更大的数据集。库:Highchart- React -官方，Jest，React

浏览 66提问于2019-12-11得票数 0

1回答

哪些参数影响桌面和移动应用程序的灯塔性能？

mobile、desktop、lighthouse、web-performance、static-web-apps

我正在使用Hugo构建一个个人博客，并将其部署到Netlify，出于好奇，我通过Chrome灯塔运行了它。令我惊讶的是，桌面和移动设备的结果相差很大。这个博客还没有针对手机进行优化，但它使用的大多是相对大小，所以在移动Chrome上选择“查看桌面版本”就可以看到手机上的情况。有三个结果特别有影响:第一，内容油漆(FCP)，最大的内容油漆(LCP)和时间交互(TI)。结果是beow (以秒为单位)，桌面或Mobile后面的数字是性能指标。总结如下：

浏览 13提问于2022-05-30得票数 0

回答已采纳

1回答

减少灯塔“第一有意义的油漆”在反应建造

reactjs、webpack、lighthouse

我有一个反应应用程序，它在主页面上呈现了很多图像。 threshold: 10240, })) yarn build --profile serve -s build

浏览 1提问于2020-04-05得票数 2

回答已采纳

1回答

在REACT应用中使用高效的缓存策略为静态资产提供服务

reactjs、caching、service-worker、lighthouse

灯塔建议：“使用有效的缓存策略为静态资产提供服务”。但是如何在React应用程序中添加缓存策略？我使用了create-react-app，但没有自动创建serviceworker。

浏览 13提问于2020-12-01得票数 2

1回答

核心web生命周期结果一致性问题，甚至所有URL都处于良好状态( LCP \ CLS )

pagespeed、google-search-console、google-pagespeed、pagespeed-insights、core-web-vitals

1.在Core中，谷歌搜索控制台是否依赖流量来显示LCP和CLS的结果？如果是，那么需要多少最低流量？因为在动态页面洞察工具中，所有的URL都处于良好状态。LCP为: 2.5以下为: 0.1以下 2.是否谷歌搜索控制台/核心网络生命周期的结果取决于每个设备或页面洞察工具的CruX？正如我已经检查过的，在这个组中给出的所有示例URL也都是好的。有没有办法检查它是如何计算出来的</em

浏览 8提问于2022-08-04得票数 0

1回答

如何避免在使用Fontsource加载自托管字体时链接关键请求？

javascript、css、reactjs、lighthouse

我有一个React Gatsby网站，我正在努力优化它的性能，以在灯塔中获得95+分数。最近，我改用了自托管字体，并使用了我在Gastby's docs中找到的npm包Fontsource。它的安装非常简单，只需执行以下操作： npm install @fontsource/nunito 并将以下导入添加到我的gatsby-browser.js文件中： import '@fontsou

浏览 38提问于2021-07-16得票数 0

1回答

为什么一个空的、默认的NextJS应用程序的性能分数这么低？

javascript、performance、next.js、lighthouse

我开始玩我的第一个Next.js项目。有人能解释一下为什么这些是结果吗？该项目是新创建的，完全是空的，人们可以假设一个性能报告来为这样

浏览 2提问于2021-03-27得票数 6

3回答

如何测试react* js应用程序的性能？*

reactjs、jmeter、profiling、performance-testing、performance-monitor

如何对ReactJS应用程序进行客户端性能测试？在JMeter中是否有任何类似于Load runner中的真实客户端协议来测试ReactJS应用程序。或者我可以用来测试ReactJS应用程序的任何其他方法。

浏览 2提问于2020-06-05得票数 0

1回答

灯塔Pagespeed > HTTP2

google-chrome-devtools、http2、lighthouse、pagespeed-insights

我的页面速度性能有问题，我无法解决。当我从Chrome Dev工具中运行Lighthouse时，整体性能相当不错(不是很完美，但还可以……)。当我在单独的选项卡中运行Lighthouse时，或者当我使用页面速度洞察时，性能非常糟糕。主要区别:开发工具和从开发工具内部运行的灯塔使用HTTP/2，而单独选项卡中的灯塔和Pagespeed insights都

浏览 0提问于2021-03-16得票数 0

2回答

在NextJS中预加载图像

reactjs、next.js、preload

我们使用的是带有静态站点生成器的NextJS 9.3.2框架，即引入了谷歌灯塔6的最大内容画(LCP)，这影响了我的站点性能得分。大多数网站在折叠内容的上方都有一个英雄形象。因此，我正在寻找预加载图像，以减少LCP的时间。你们能指导我如何使用SSG在NextJS中预载大英雄图像吗？

浏览 4提问于2020-07-12得票数 2

1回答

只在特定页面上使用Firebase Nuxt模块？

firebase、vue.js、nuxt.js

我在我的nuxt.config.js中包括@nuxtjs/firebase，但只在特定路由上使用Firebase auth和其他特性。但是，通过在nuxt.config.js中包含Firebase模块，它将加载一些其他页面不需要的代码，并对站点性能产生负面影响(每个灯塔)。我怎么能只为需要这个模块的页面加载这个模块呢？

浏览 0提问于2020-10-10得票数 4

2回答

隐秘灯塔的性能问题

javascript、vue.js、getstream-io

我在运行性能测试时遇到了这个问题。它仍然在运行测试，给我一个分数，但似乎有什么影响。--存在影响灯塔运行的问题:在这个位置: IndexedDB中可能存在影响加载性能的存储数据。在隐名窗口中审核此页面，以防止这些资源影响您的分数。

浏览 3提问于2021-04-23得票数 11

1回答

反应只是重新渲染什么已经改变了渲染速度？

performance、reactjs、browser

为什么React的“只更新必要的内容”的功能对性能很重要？仅重呈现组件的功能是否会影响浏览器呈现速度/性能？在内部，React使用了几种巧妙的技术来最小化更新UI所需的代价高昂的DOM操作的数量。对于许多应用程序来说

浏览 6提问于2017-06-26得票数 4

回答已采纳

5回答

灯塔多个URL

javascript、audit、lighthouse

有一个网站我需要做一个全面的审计，但我想知道是否有任何方法可以让灯塔做到这一点。我知道他们不支持全站点审计或多个URL，但我发现可以使用bash脚本来完成。因此，我非常感谢在这个案例上的任何帮助！或者是你推荐的灯塔替代品？提前谢谢你！

浏览 1提问于2018-09-07得票数 3

1回答

仅在需要时加载React块CSS

css、reactjs、optimization、lazy-loading、create-react-app

灯塔告诉我，当我运行审计时，我的React应用程序要“推迟未使用的CSS”。我已经实现了代码拆分，所以我有一堆块，它们都包含自己的CSS。问题是，即使页脚组件最初没有呈现，它的CSS仍然加载到页面的头部，这就是灯塔</em

浏览 2提问于2019-03-25得票数 2

2回答

谷歌页面速度下降，说我可以节省更多的加载时间，即使没有什么改变

pagespeed、google-pagespeed、deferred-loading、pagespeed-insights

我每天都在测试我的页面。我的页面经常得到94到98的分数，主要的问题是：推迟未使用的CSS -保存0.15 s 推迟未使用的CSS -保存~0.60 s 它还说我的First CPU idle是慢的~4,

浏览 1提问于2019-02-03得票数 1

点击加载更多