标签: lighthouse

我的应用程序目前使用webpack,angular js和服务工作者.

使用sw-precache插件创建我的服务工作者. https://www.npmjs.com/package/sw-precache-webpack-plugin

服务工作者缓存进展顺利,我可以看到我的静态资源是从chrome dev工具中的serviceworker.js中获取的.

现在,当我运行灯塔报告时,我仍然收到以下错误:

URL responds with a 200 when offline 

https://github.com/GoogleChrome/lighthouse

在我开启离线时的Dev工具中,我实际上可以看到我的页面加载.某些第三方脚本的控制台中的某些错误失败.这是没有得到网址响应200的原因,因为我有来自第三方的一些控制台错误,即示例错误:

GET https://fonts.googleapis.com/css?family=Roboto+Slab:300,400,700 net::ERR_INTERNET_DISCONNECTED

这次审计到底要找什么,我该如何实现？

编辑:当我离线打开时,我添加了网络选项卡的图片,因为我说页面加载正常.我注意到我的sw.js是从磁盘缓存加载的,我在其他网站上没有注意到,所以可能是那里的东西.

这里还有sw.js的内容

'use strict';

var precacheConfig = [["/css/app.styles.77e2a0c3e7ac001193566741984a07f0.css","77e2a0c3e7ac001193566741984a07f0"],["/css/vendor.styles.582e79ead0684a8fb648ce9e543ad810.css","582e79ead0684a8fb648ce9e543ad810"],["/favicon.ico","70ef569d9a12f6873e86ed57d575cf13"],["/fonts/MaterialIcons-Regular.eot","e79bfd88537def476913f3ed52f4f4b3"],["/fonts/MaterialIcons-Regular.svg","a1adea65594c502f9d9428f13ae210e1"],["/fonts/MaterialIcons-Regular.ttf","a37b0c01c0baf1888ca812cc0508f6e2"],["/fonts/MaterialIcons-Regular.woff","012cf6a10129e2275d79d6adac7f3b02"],["/fonts/MaterialIcons-Regular.woff2","570eb83859dc23dd0eec423a49e147fe"],["/icons/launcher-icon-2x.png","91896b953c39df7c40b4772100971220"],["/icons/launcher-icon-3x.png","0aee2add7f56559aeae9555e495c3881"],["/icons/launcher-icon-4x.png","b164109dd7640b14aaf076d55a0a637b"],["/images/aa_logo_only.png","b5b46a8c2ead9846df1f1d3035634310"],["/images/developer.png","e8df747b292fe6f5eb2403c7180c31da"],["/images/facebook.png","8ab42157d0974099a72e151c23073022"],["/images/home-bg.jpeg","0a0f7da8574b037463af2f1205801e56"],["/images/logo.png","e8712312e08ca427d79a9bf34aedd6fc"],["/images/map.png","af3443ef4ab2890cae371c7a3de437ed"],["/images/pattern.png","114d593511446b9a4c6e340f7fef5c84"],["/images/twitter.png","99da44949cd33e16d2d551d42559eaf2"],["/index.html","1e9b5c4b3abba7e13d8d28c98cfb3bb5"],["/js/app.d9ada27616bf469d794d.js","8e2fc74de7d5c122ab8f0aca7e31b075"],["/js/vendor.d9ada27616bf469d794d.js","3bbba4569b6f3b88881b0533260905fe"],["/manifest.json","4bea29155995b63a9f2855637c0fe74c"]];
var cacheName = 'sw-precache-v2-45-' + (self.registration ? self.registration.scope : '');


var ignoreUrlParametersMatching = [/^utm_/];



var addDirectoryIndex = function (originalUrl, index) {
    var url = new URL(originalUrl);
    if (url.pathname.slice(-1) === '/') {
      url.pathname += index;
    }
    return url.toString();
  };

var createCacheKey = function (originalUrl, paramName, paramValue,
                           dontCacheBustUrlsMatching) {
    // Create a new URL …

灯塔审计建议我预载关键请求，特别是我在React应用程序中使用的两种Google字体。灯塔成员建议使用： <link rel="preload" as="style" href="https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>

我知道它是在发出请求，因为我在瀑布中看到了它，并且收到了以下控制台警告：

“资源https://fonts.googleapis.com/css?family=Open+Sans|Roboto:700已使用链接预加载进行了预加载，但在窗口加载事件发生后的几秒钟内未使用。请确保它具有适当的值，并有意预加载。”

不幸的是，这两种字体不再显示在我的应用程序中。我是否需要在CSS中使用@ font-face或类似的东西定义这些？

我正在使用Next.js开发服务器端渲染网站，但我想使其成为渐进式Web应用程序，但是这个问题我找不到正确实现的方法。

当我构建应用程序时，它可以正确地服务于服务工作者，但是没有manifest.json，在某些项目示例中，它可以服务manifest.json，但是我在Lighthouse审核中尝试了它，并说

服务工作者未成功提供清单的start_url

我使用带有Service Worker Precache的Create Next App的示例 之一

我认为问题是start_url是。或/而不是有效文件，因为在Next.js中从一开始就没有index.html可以提供服务。

总而言之，我正在寻找一个使用Next.js将其构建到dist文件夹的示例，当我为其提供服务时，它具有有效的Service Worker和有效的Web Manifest。

当进行Lighthouse Audit审核时，我设法通过了所有要点，但是在此过程中我一直遇到错误。

内容的大小适合视口

Lighthouse说，如果window.innerWidth === window.outerWidth，审核通过

如果我将这些记录到控制台，它们是相同的，但是我仍然遇到问题，似乎无法解决。到目前为止，这是我尝试解决的问题...

最大化浏览器窗口在页面下/页面外停靠开发工具面板将容器流体类中的“孤立”行divs包装到CSS中添加了HTML {overflow-x：hidden;}

以上所有建议均来自- 灯塔审核说，尽管机身宽度为100％，但内容的视口尺寸仍不正确

我已从页面上删除了所有图像，以确保这些图像不会引起任何问题。我还在大多数设备上进行了检查，以确保没有问题。

我目前拥有的meta标签是

<meta name="viewport" content="width=device-width, initial-scale=1">

再次，将宽度记录到控制台不会显示任何差异，因此我不确定这是否是Google失败或是否缺少某些内容。任何帮助将非常感激。谢谢！！

在我的一些网站上，Google 的 Search Console 工具和 PageSpeed 在我的主页上显示移动设备上的最大首次输入延迟 300 秒和 PC 上的 900 秒。

奇怪的现象，因为即使在我禁用所有 javascript 和 css 代码的开发环境中，结果也不会改变。

此外，我在我的网站上安装了以下由 Google 开发的脚本：https : //github.com/GoogleChromeLabs/first-input-delay

它允许您通过 FID 将数据发送到 Google Analytics。在我的网站上，我在代码中添加了一行，以便浏览器控制台返回 FID ( console.log(delay);)。

结果并不奇怪：当您单击页面上的任何位置时，浏览器的响应时间不到 5 毫秒，在某些情况下为 10 毫秒。

所以我认为 google 并没有在页面上做简单的点击来计算 FID。顺便说一下，我也知道 FID 是由 Google Chrome 上的真实用户计算的，机器人无法完成。

但是在这种情况下，您如何识别可能需要半秒甚至一整秒才能让浏览器响应的元素？

尽管我在互联网上对此主题进行了长时间的研究，但都给出了相同的解释来做出诊断，但这对我的问题没有帮助。

我创建了一个像这样的graphql文件：

type Field {
    id: ID!
    name_en: String!
    name_fa: String!
    description: String!
    img_url: String!
    created_at: DateTime!
    updated_at: DateTime!

    subFields: [SubField] @hasMany
}

extend type Query {
    fields(input: ListInput @spread): [Field] @paginate(model: "App\\Models\\CustomerManagement\\BusinessInformation\\Field" defaultCount: 10)
    field(id: ID! @eq): Field @find(model: "App\\Models\\CustomerManagement\\BusinessInformation\\Field")
}

extend type Mutation {
    createField(
        name_en: String! @rules(apply: ["required"])
        name_fa: String
        description: String
        img_url: String
    ): Field @create(model: "App\\Models\\CustomerManagement\\BusinessInformation\\Field")

    updateField(
        id: ID! @rules(apply: ["required", "int"])
        name_en: String @rules(apply: ["required"])
        name_fa: String
        description: String
        img_url: String
    ): Field @update(model: "App\\Models\\CustomerManagement\\BusinessInformation\\Field") …

我不明白https://www.openstream.ch移动版上的哪个元素被 Lighthouse认为是最大的内容绘制。

当我使用 PageSpeed Insights（目前在 Lighthouse v6.0.0 上运行）测试当前版本的网站时，它有 90 点的桌面和1.8 秒来渲染最大的内容绘制，这似乎是视图底部的 4 个图像港口：

当我切换到移动结果时，它有 61 个点和 3.7s 来渲染Largest Contentful Paint，尽管视口中甚至没有图像：

在https://web.dev/lcp/ 上，它说目前考虑用于最大内容绘制的元素类型是：

• <img> 元素
• <image> 元素内的元素
• <video> 元素（使用海报图片）
• 具有通过 url() 函数加载的背景图像的元素（与 CSS 渐变相反）
• 包含文本节点或其他内联级文本元素子级的块级元素。

当我在适用于 macOS 的最新版 Chrome（Lighthouse 5.7.1）中进行测试时，最大的内容绘制在大约 0.5 秒后呈现：

这是 Lighthouse 6.0.0 中的错误还是可能有其他原因？

使用累积布局偏移 (CLS) 现在是 Page Speed Insights (PSI) 和 Google Search Console (GSC) 的标准，我想知道如果 PSI 返回 0 值但字段数据返回高值，应该使用什么方法来识别 CLS .

例如，根据 Search Console，我有一个页面在 PSI 上的得分为 0，但桌面版的 CLS 得分为 0.99（移动版为 0）。

使用开发人员工具，我尝试打开油漆闪烁并打开布局移位区域，但仍然得到 0 移位，而字段数据显示为 0.99。

那么，您如何使用开发人员工具确定导致布局偏移的原因？

当我收到网站报告时，我在“性能”部分下看到了 Google Analytics 的问题。 有办法解决吗？现在，如果用户代理包含 Google 机器人，我所做的只是关闭 GA 加载。

if (/googlebot|lighthouse/i.test(navigator.userAgent)) {
    window.ga=function(){};
} else {
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
}

我正在尝试在 Google Search Console 中为 Weebly/Square 网站使用 PageSpeed Insights 并收到错误消息：

灯塔返回错误：NOT_HTML。提供的页面不是 HTML（作为 MIME 类型）

一开始它对我有用（我测试了 2-3 次）。我调整了一些图像的大小并再次尝试。从那时起收到此错误。

Square 的支持表明它不站在他们一边。