标签: lighthouse

试图找出为什么 Lighthouse 审核将我的一堆链接标记为未通过elements have discernible names

<h3>
  <a href="https://..." class="custom classes here">My New Post Title</a>
</h3>

我的问题是所有链接都需要吗aria-labels，因为我想如果这只是一个普通链接，则链接内的文本就是所需要的？

或者我的标记结构还有其他问题吗？另一个标记元素是这个：

<a class="custom classes" href="https://...">
  <div class="custom classes" style="background-image: url('https://...');"></div>
  <div class="article-thumbnails-small__title">Post Title</div>
</a>

对于那个，我知道a没有文本，所以aria-label应该放在带有实际帖子标题的 div 上，对吗？

已解决 我看错了元素...祝你有美好的一天。

我在工作中接到了一项提高项目绩效的任务。目前，Google Lighthouse 分数有所波动，但总体而言，分数并不是那么好，因此我们正在尝试找出如何提高其性能，以便能够向我们的领导者炫耀。

我们的项目将整个 Gatsby 站点作为单个 JavaScript 包加载。这会从站点创建一个单页面应用程序，允许通过 JavaScript 快速加载新页面。但对于像我们的 WordPress 网站这样大的东西，这会产生一个非常大的包（以兆字节计）。这个大包会显着降低页面速度。

我不太确定如何解决卸载这个bundle.js的问题，但我发现了一个关于这个主题的有趣文档https://www.gatsbyjs.org/docs/how-code-splitting-works/

虽然我不完全理解这些文档，但我相信我编辑了这个 async-requires.js 文件以包含多个导出组件行，这应该会导致多个 javascript 包而不是主要的大包。也许如果有多个 js 包，网站加载速度会更快，因为它不仅仅是一个瓶颈。因此，页面可以加载它需要渲染的特定包，并异步加载它不需要的包。

下面是我认为与手头的任务相关的一些代码。对于盖茨比来说，我仍然是一个初学者，所以我不太确定我可以在这里改变什么来获得更好的性能。

感谢您的帮助。

async-requires.js

const preferDefault = m => m && m.default || m

exports.components = {
  "component---src-templates-page-js": () => import("../src/templates/page.js" /* webpackChunkName: "component---src-templates-page-js" */),
  "component---cache-dev-404-page-js": () => import("dev-404-page.js" /* webpackChunkName: "component---cache-dev-404-page-js" */),
  "component---src-pages-404-js": () => import("../src/pages/404.js" /* webpackChunkName: "component---src-pages-404-js" */)
}

src/templates/pages.js

import React from 'react'
import PropTypes from 'prop-types'
import Helmet from 'react-helmet'
import Layout from '../layouts/layout'
import …

我正在开发一个 Ionic Aungular PWA 项目，并且在 Chrome 中始终遇到失败的 Lighthouse 审核，并显示 404 错误，指出无法找到我重定向到的默认路径（本例中为 /home）的 localhost 页面。我在下面包含了自动生成的 src/app/app-routing.module.ts 文件。如果我替换重定向路径来加载 \xe2\x80\x9chome\xe2\x80\x9d 模块而不是重定向到主路径，则审核成功。任何人都可以帮助解释为什么redirectTo 不起作用吗？

import { NgModule } from '@angular/core';\nimport { PreloadAllModules, RouterModule, Routes } from '@angular/router';\n\nconst routes: Routes = [\n  {\n    path: 'home',\n    loadChildren: () => import('./pages/home/home.module').then( m => m.HomePageModule)\n  },\n  {\n    path: '',\n    redirectTo: 'home',\n    pathMatch: 'full'\n  },\n  {\n    path: 'create-restaurant-menu',\n    loadChildren: () => import('./pages/page2/page2.module').then( m => m.Page2Model)\n  }\n];\n\n@NgModule({\n  imports: [\n    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })\n  ],\n  exports: [RouterModule]\n})\nexport class AppRoutingModule { …

我正在努力提高网站的性能分数。Reduce JavaScript execution time在under中运行 lighthouse 时diagnostics，我看到Script Evaluation一些 js 脚本的时间很长。

如果我在不同的环境中运行 lighthouse different evaluation time for the same scripts，这种差异非常大，例如对于一个脚本，它从 1700 毫秒变为 100 毫秒，

我想了解how lighthouse calculates the evaluation time，这样我就可以努力减少它。

这些 js 文件比其他评估时间较短的文件相对较小，这是我无法理解的。如果重要的话，在分析中我可以看到同一脚本的执行时间是 45 毫秒。

PS-我知道脚本执行和评估是不同的

谢谢任何帮助，将不胜感激。

我使用 Chrome 的网站审核工具Lighthouse，它在我的网站上发现了以下问题：

\n
• 问题类型：SameSite cookie
\n
• /tr/?id=\xe2\x80\xa6(www.facebook.com)
\n

我该如何解决这个问题？

更新

这是我在“问题”面板中得到的内容：

屏幕截图\n

文本

\n

通过指定 SameSite 属性来指示是否在跨站点请求中发送 cookie\n

\n

由于 cookie\xe2\x80\x99s SameSite 属性未设置或无效，因此默认为 SameSite=Lax，这会阻止在跨站点请求中发送 cookie。此行为可防止用户数据\n意外泄露给第三方和跨站点请求伪造。

\n

通过更新 cookie 的属性来解决此问题：

\n

-> 如果应在跨站点请求中发送 cookie，请指定 SameSite=None 和 Secure。这使得第三方可以使用。

\n

-> 如果不应在跨站点请求中发送 cookie，请指定 SameSite=Strict 或 SameSite=Lax。

\n

受影响的资源：\n2 个 cookie：名称域和路径\n_ga .bootstrapcdn.com/ cppo .facebook.com/

\n

1 项请求

\n

?id=383112278961246&ev=fb_page_view&dl=https%3A%2F\xe2\x80\xa6rl=&if=false&ts=1621983787255&sw=1920&sh=1080&at=

\n

我正在尝试通过修复 Google Lighthouse 报告的所有问题来优化我的 Next.js 应用程序。

目前它在图像方面最重要的缺陷之一：

根据文档static，Next.js 自动对文件夹中的媒体执行此操作

Next.js 自动将缓存标头添加到 /_next/static 提供的不可变资产中，包括 JavaScript、CSS、静态图像和其他媒体。

由于所有这些有问题的图像都来自 API，该 API 由 AWS CloudFront 提供服务，因此我找不到解决问题的方法。

我想Cache-Control在 CloudFront 中添加建议的策略可能会有所帮助，但我不知道

1.) 如果这是正确的解决方案 2.) 如何在 AWS 控制台中执行此操作

我已经安装了 chrome、LTS 版本的 Node 和灯塔，但是当我尝试运行审计时出现以下错误：

/usr/local/lib/node_modules/lighthouse/lighthouse-core/lib/url-shim.js:36
class URLShim extends URL {
                      ^

ReferenceError: URL is not defined
    at Object.<anonymous> (/usr/local/lib/node_modules/lighthouse/lighthouse-core/lib/url-shim.js:36:23)
    at Module._compile (module.js:652:30)
    at Object.Module._extensions..js (module.js:663:10)
    at Module.load (module.js:565:32)
    at tryModuleLoad (module.js:505:12)
    at Function.Module._load (module.js:497:3)
    at Module.require (module.js:596:17)
    at require (internal/module.js:11:18)
    at Object.<anonymous> (/usr/local/lib/node_modules/lighthouse/lighthouse-core/lib/network-request.js:14:13)
    at Module._compile (module.js:652:30)

安装完所有必需的东西后，我尝试对其进行测试并得到上述错误。

灯塔https://www.bbc.co.uk

据我了解，您在命令行上输入 lighthouse，然后输入您尝试对其进行审核的站点的 url。但我不断得到：

参考错误：未定义 URL。

难道我做错了什么。请帮忙。

https://developers.google.com/speed/pagespeed/insights/

2020 年 5 月 27 日，我使用了页面速度，我在桌面 (90+) 和移动设备 (85+) 上获得了相当不错的分数，但在 2020 年 5 月 28 日，指标似乎发生了巨大变化，我可以看到 PageSpeed新版本 (v6) 但这里没有提供适当的发行说明https://developers.google.com/speed/docs/insights/release_notes。

任何人都遇到过类似的问题，并发现 google pagespeed 确实进行了某些升级，如果可能，请提供一些参考。

我收到错误！对于 Google Chrome Lighthouse 报告中的“性能”选项卡。我尝试修复但无法修复，有什么建议吗？

这是以下错误： Largest Contentful Paint Error! The page did not display content that qualifies as a Largest Contentful Paint (LCP). Ensure the page has a valid LCP element and then try again. (NO_LCP)

在诊断上，它有一个错误：

Preconnect to required origins Error! Consider adding preconnect or dns-prefetch resource hints to establish early connections to important third-party origins. Learn how to preconnect to required origins.FCPLCP. https://developer.chrome.com/docs/lighthouse/performance/uses-rel-preconnect/?utm_source=lighthouse&utm_medium=devtools [在此输入图像描述]( https://i.stack.imgur.com/dbZoA.png )

我将以下链接标记添加到我的 app.js 文件中，但它没有修复错误。我将其添加到预连接到谷歌字体，尽管我使用的是 NextJS 的 next/font。资源https://nextjs.org/docs/messages/google-font-preconnect <link rel="preconnect" …

我font-awesome在应用程序中使用图标angular。我检查了我的网络结果pagespeed。我遇到字体问题。

这是pagespeed结果。

它所说的用途<link rel=preload>，但问题是它..fonts/fontawesome-webfont.woff?v=4.7.0可以在FontAwesome的 css 文件中使用，那么我如何为此添加预加载呢？或者有什么解决方案可以修复它？

这是我的index.html，其中包含了font-awesomecdn。

<link rel="preload" as="style" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" crossorigin />

我认为这就是问题所在css。

@font-face {
    font-family: 'FontAwesome';
    src: url('/assets/fonts/fontawesome-webfont.eot?v=4.7.0');
    src: url('/assets/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'), url('/assets/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'), url('/assets/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'), url('/assets/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

我推迟了非关键的 CSS/JS 并预加载了网站的基本 CSS。PageSpeed Insights上的每个实验室数据都变得更好。“最大内容绘制”和“累积布局变化”除外。特别是，CLS 从 0.002 增加到 1.148！

网站上的图像设置为background-image我认为不会出现“图像没有尺寸”的问题。我也尝试使用 修复字体font-display，但 CLS 仍然相同。

我可以使用其他任何技术来优化 CLS 吗？

我已经在 google chrome light house 中为我的角度应用程序运行了可访问性测试，并收到以下错误

我添加了“aria-labelledby”，但似乎不起作用。谁能帮我解决这个问题。下面是给我这个错误的html代码。

<div class="heading form-group col-md-4 col-xs-12">
     <label for="fuels">Fuel Filter</label>
     <ng-select class="oss-ngselect" [items]="fuelType" bindLabel="name"
           placeholder="View All" [(ngModel)]="searchPremiseFuelType" [dropdownPosition]="'bottom'" 
           id="fuels" name="fuels" (change)="changeFuelType(searchPremiseFuelType.type)"
           aria-labelledby="fuels">
     </ng-select>
</div>

我想使用 cypress 和 lighthouse 生成 HTML 报告。我已按照此处提到的所有步骤进行操作， 我可以在控制台视图上查看 Google Lighthouse 报告，而无需在配置中传递“html”。当我在 lighthouse 中尝试使用参数“html”时，出现错误 - “CypressError cy.task('lighthouse') 失败并出现以下错误：

没有提供或请求任何浏览器工件”

我的规格文件如下： ///

    `describe('Generate HTML report', () => {
    it('first test case', () => {
    cy.visit('http://localhost:3000/');
    // cy.lighthouse();

    const thresholds = {
      "accessibility": 50,
      "best-practices": 50,
      "seo": 50,
      "pwa": 20,
    };
    const LHOptions = { 
      formFactor: 'desktop',
      screenEmulation: { disabled: true },
       };
    const LHConfig = {
      output: "html", //If output is not specified, then the json report will be generated …