标签: lighthouse

灯塔建议修复我的href文本

我有这样的HTML

<a href="https://twitter.com/@some-name-here" target="_blank" rel="noopener" class="social-icon twitter grayscale"></a>

这里真正发生的是我只是使用css类在href中显示图像:

.social-icon.twitter {
  background: url('../images/logo-twitter.png') no-repeat center center;
}

我不能这样做,<a....>Twitter</a>因为显示的文本会破坏视图.

我想不出其他任何事情,比如只是span在我的文本中放入一个文本a并将其隐藏起来,<a....><span class="hide">Twitter</span></a>但是想知道是否有任何正确的解决方案？

对此有何建议？

最近的 Lighthouse 报告指出了以下问题。

不使用被动侦听器来提高滚动性能

它还提到...

考虑标记您的触摸和滚轮事件侦听器passive以提高页面的滚动性能。

我该如何解决这个问题？它似乎与jQuery有关。

我想知道是否有人可以解释计时指标Next.js-before-hydration和Next.js-hydration含义，以及它们与 FCP 的关系。这是针对服务器端渲染并在客户端使用钩子的 NextJS 应用程序。

这是“性能”选项卡测量的屏幕截图，该屏幕截图显示将影响反应服务器和 SSR 的新页面加载。这个特定页面的组件在页面稳定下来之前也会在客户端重新渲染多次。我从最初的请求开始放大了该区域，包括 FCP 和 LCP 等最初的核心 Web 重要功能。（TTI 和 TTFB 在屏幕上出现的时间要晚得多。）

看起来它Next.js-before-hydration恰好在服务器请求开始时启动。（幻灯片似乎显示了浏览器中之前页面的缩略图，这似乎是一个开发工具错误，因此请忽略它。）

Next.js-before-hydration在这个例子中持续了 1.48 秒，但是对于这个请求，TTFB 只有 120 毫秒，所以我知道它不仅仅包括服务器响应时间。

我知道 FCP 是“TTFB + 内容加载时间 + 渲染时间”，所以我认为这Next.js-before-hydration一定是其中的一个子集，但我见过其他网站的示例（ticketmaster.com 就是一个例子），其中 的结尾延伸Next.js-before-hydration得很远超出 FP/FCP 甚至Next.js-hydration更晚结束 - 有时就在 onLoad 事件（红色L）之前。

按照电影胶片，内容在我们到达之前开始逐渐显示Next.js-hydration（如图Next.js...dration中标记），这让我认为它已经开始运行挂钩并重新渲染。

Next.js-before-hydration那么当 NextJS 从 过渡到时意味着什么呢？Next.js-hydration？它是否与“第一次”渲染完成（意味着第一次加载每个组件，如 React Profiler 中的第一次渲染）以及钩子何时开始运行有关？

最后，end ofNext.js-hydration意味着什么？这两个指标与 FCP 有何关系？

我用 React js 构建了我的第一个渐进式 Web 应用程序(PWA)。当我在 DevTools 中的 Chrome 审核选项卡上单击“生成报告”时，它显示消息“灯塔正在预热”。

我的chrome版本是81。

我可以做什么来生成报告？

在说"基于现场数据'页面缓慢'"时,使用90百分位而不是中位数分数,使得大量被贩运的网站(例如google.com)无法获得"快速"排名吗？这是由于每月流量在10M +范围内时会出现长尾？

上次我检查(2018年2月初),桌面google.com获得了100个灯塔合成分数,应该被解释为"几乎没有改进的余地",然而,该页面排名"慢",因为第90百分位FCP超过3秒.

使用此标准时,像nytimes.com这样的页面是否会被认为很快,甚至google.com的桌面页面根据现场数据排名很慢？

最近的例子(2019年2月14日)

前例为FCP的尾部更长:

Lighthouse 一直告诉我“图像元素没有明确的宽度和高度”，尽管我已经尝试在 css 或 img 中添加它，但问题仍然存在：

img.medium {
  max-width: 29rem;
  width: 100%;
}

或者

<img
   src={user.seller.logo}
   alt={user.seller.name}
   width="100%"
   height="auto"
/>

我该如何解决这个问题？

当我为我正在从事的项目运行 Lighthouse 时，我得到

chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js

作为未使用 JS 的第一原因。

从性能优化的角度来看，这有何意义？我无法控制用户在浏览器中运行哪些扩展。我也找不到项目中有关 React 开发工具的任何信息。

如果有人能够阐明这个问题，我将不胜感激。

我正在使用Lighthouse来审核我的webapp.我正在努力解决这些问题,但我仍然坚持这个:

失败:清单start_url不由服务工作者缓存.

在我的manifest.json我

"start_url": "index.html",

在我worker.js,我缓存如下:

let CACHE_NAME = 'my-site-cache-v1';
let urlsToCache = [
    '/',
    '/scripts/app.js',
    '/index.html'
];

哪个与我在Chrome开发工具的应用程序选项卡中看到的一致:

那么......为什么告诉我start_url没有缓存？

这是我的完整worker.js档案:

if ('serviceWorker' in navigator) {
  window.addEventListener('load', function() {
    navigator.serviceWorker.register('/worker.js').then(function(registration) {
      console.log('ServiceWorker registration successful with scope: ', registration.scope);
    }, function(err) {
      console.log('ServiceWorker registration failed: ', err);
    });
  });
}

let CACHE_NAME = 'my-site-cache-v1.1';
let urlsToCache = [
  '/',
  '/scripts/app.js',
  '/index.html'
];

self.addEventListener('install', function(event) {
  event.waitUntil(
    caches.open(CACHE_NAME)
    .then(function(cache) {
      console.log('Opened cache');
      return cache.addAll(urlsToCache); …

用Lighthouse测试网络应用后我有这样的错误:

系统不会提示用户安装Web App浏览器可以主动提示用户将您的应用添加到主屏幕,这可以提高参与度.学到更多.

失败:服务工作者未成功提供清单的start_url.

这里描述的所有标准都满足:

1. 该网站通过HTTPS提供.
2. 服务工作者已注册.
3. 服务工作者的范围包括您审核的页面以及Web应用程序清单的start_url属性中指定的页面.
4. 存在Web应用程序清单并满足以下条件:具有有效的名称属性.有一个有效的short_name属性.有一个有效的start_url属性.具有有效的显示属性,值为standalone,fullscreen或minimal-ui.指定至少为192像素x 192像素的图标.

清单文件通过脚本呈现.重要的变数是

scope_url = 'https://website.com/app/'
start_url = 'https://website.com/app/about/'

ServiceWoker.js非常简单:

self.addEventListener('push', function(e) {

  ...
});

self.addEventListener('notificationclick', function (e) {
    ...
);

Web应用程序和sw.js由start_url提供.

我还能检查什么？

编辑1.当我尝试从Chrome控制台"添加到主屏幕"时,我得到:

Site cannot be installed: the page does not work offline 什么接近这个评论

Google Lighthouse中的效果报告提出了以下建议:

避免多次,昂贵的往返任何来源

"避免多次,昂贵的往返任何来源"......然后继续列出8个起源.

因此,我将以下代码添加到<head>我的网站部分的顶部,其中hrefs对应于每个原点.

<link rel='preconnect' href='https://connect.facebook.net' />
<link rel='preconnect' href='https://img.secureserver.net' />
<link rel='preconnect' href='https://advertise.bingads.microsoft.com' />
<link rel='preconnect' href='https://advertiseonbing.blob.core.windows.net' />
<link rel='preconnect' href='https://www.gstatic.com' />
<link rel='preconnect' href='https://js.calltrk.com' />
<link rel='preconnect' href='https://px.ads.linkedin.com' />
<link rel='preconnect' href='https://www.facebook.com' />
<link rel='preconnect' href='https://accounts.google.com' />

我也试过它们<link rel='dns-prefetch' />和它和其他浏览器提示的一些组合.

然而,灯塔报告在一段时间后再次运行后没有任何变化.有人可以引导我朝着正确的方向前进,这样我就可以在灯塔中解决这个问题并更接近完成报告了吗？!

编辑:我猜测为什么这样做可能不会对灯塔报告产生影响,而且在预连接完成之前,文档中会调用资源.因此,即使它在技术上更快地启动并节省了一些ms,但文档的其余部分非常小,并且在预取或预连接完成之前它会请求这些资源.合乎逻辑？