标签: lighthouse

我有一个在 Google Page Speed Insights 上得分很高的网站，但它显示了一个性能问题，显示此文件的“删除未使用的 JavaScript”：

https://www.gstatic.com/recaptcha/releases/2diXFiiA9NsPIBTU15LG6xPf/recaptcha__en.js

但是，我尝试删除我的 Invisible Captcha 插件，并将这行代码添加到 functions.php：

add_action('wp_print_scripts', function () {
    if ( is_home() ){
        wp_dequeue_script( 'google-recaptcha' );
        wp_dequeue_script( 'google-invisible-recaptcha' );
    }
});

但我仍然收到错误。我可以做些什么来从主页上的加载中删除此脚本？我的网站使用的是最新版本的 Wordpress。

我正在运行一个 angular 应用程序，它在谷歌页面洞察中显示出非常低的分数（移动设备为 13，桌面为 43）。我在 Nginx 服务器上运行它，所有压缩和缓存问题都从 Nginx 端解决，但它在页面洞察力方面仍然显示出非常低的分数。页面中只有一张图像，并且已经被压缩。

错误是删除未使用的 javascript 和 css 文件。但是他们显示错误的文件是从角度生产构建生成的构建文件。我不明白这些文件是如何未被使用的。我在这里附上错误的截图。请帮我解决这些问题。

我正在使用图像滑块（猫头鹰旋转木马 2）并实现了图像，如下所示：

<img loading="lazy" itemprop="image" srcset="
image-320.jpg 320w,
image-480.jpg 480w, 
image-640.jpg 640w" 
sizes="(max-width: 680px) 320px, 480px" 
src="image-640.jpg"
width="480" height="720">

在 Chrome 开发工具中针对移动视图运行 Lighthouse 时，我收到（除其他外）以下“投诉”：

**Properly size images**
Serve images that are appropriately-sized to save cellular data and improve load time.

由此 Lighthouse 引用image-640.jpg

然而，根据我的图像标签中的定义，应该考虑 image-320.jpg 。至于 SRC 属性，我想保留 image-640.jpg 变体。

我的图片标签的结构有问题吗？

预先非常感谢并致以最良好的祝愿，亚历克斯

我开始尝试我的第一个 Next.js 项目。

通过创建新项目后create-next-app，我在网络应用程序“Lighthouse”中运行性能选项卡（结果可以在下面的选项卡中查看）。然而，绩效报告的得分为 79 分；所有其他测试都在90以上。

有人可以向我解释为什么会出现这些结果吗？

该项目是新创建的，并且完全是空的，人们会假设一份绩效报告会为这样的项目返回一个很好的分数，但事实并非如此。如果您有任何见解可以帮助澄清为什么性能测试会返回我上面解释的结果，我们将不胜感激。谢谢你！

我正在尝试提高使用第三方 JS 的网站的性能（他们都这样做:)）。

运行灯塔分析后，报告显示：

减少第三方代码的影响第三方代码阻塞主线程

由于每个 JS 通过下载、解析和执行脚本来阻塞关键路径，因此我将所有非关键 JS 推到页面底部并添加了defer属性

尽管如此，我仍然认为特定的 JS 资源阻塞了主线程。

推迟资源应该并行下载它，并在渲染完成后执行它，所以我真的不明白为什么 Lighthouse 一直在主线程阻塞资源列表中显示它。当然，它会在主线程上解析和执行，但它不会阻塞关键路径，也不会对用户体验产生太大影响

例如，在不影响 Lighthouse 性能分数的情况下向网页添加 Tidio 聊天小部件的最佳解决方案是什么？

干杯

编辑

我已经测试过，延迟和异步都会阻止主线程

下面的代码也阻止了它

  window.addEventListener('DOMContentLoaded', (event) => {
    var tidioScript = document.createElement("script");
    tidioScript.src = "//code.tidio.co/xxxx.js";
    document.body.appendChild(tidioScript);
  });

有效的方法是显式延迟将脚本标签注入到 DOM 中：

setTimeout(function() {
    var tidioScript = document.createElement("script");
    tidioScript.src = "//code.tidio.co/#{tidio_id}.js";
    document.body.appendChild(tidioScript);
  }, 3 * 1000);

但这感觉就是错误的：/我认为 defer 应该达到相同的结果：/

我有这个 nextjs 应用程序，灯塔一直告诉我删除未使用的块。

\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

Run Code Online (Sandbox Code Playgroud)\n

我不知道它们是如何生成的，也不知道如何删除它们。我到处都搜索过，但找不到解决方案。

构建后如何删除未使用的块？

我有一个包含项目列表的页面。每个项目都包含一个指向不同页面的“阅读更多”链接。但是当我在该页面上运行灯塔工具时，它抱怨链接没有描述性文本。现在我无法更改此处的“阅读更多”文本。

<a href="link 1">Read more</a>
<a href="link 2">Read more</a>
<a href="link 3">Read more</a>

还有其他方法可以解决这个问题吗？

我使用 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，我怎样才能摆脱这个警告？