标签: pagespeed-insights

我正在处理woff2文件类型的类似问题，并使其成功完成。

事实是，woff2文件存在于服务器中，并且能够在以下位置引用它：

<link rel="preload" href="fonts/fontawesome-webfont.woff2" as="font" type="font/woff2" crossorigin>。

正如我从PageSpeed Insights获得的一样，下面的图片内容是：

我该如何解决初始路径？

我可以在我的本地主机网站或离线网站上使用Pagespeed见解吗？

看来我的页面速度得分受到此问题的严重影响：

减少第三方代码的影响 第三方代码阻塞主线程 [number] 毫秒

每次运行测试时这个数字都会变化，有时是 1,000，有时是 1,400 等。

从 Google CDN 我只加载 jquery 插件并加载 Web Font 脚本来延迟加载字体，这里是相关代码：

<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.6/webfont.js"></script>
<script>
 WebFont.load({
    google: {
      families: ['Open Sans:400,600','Roboto:400,500,700']
    }
  });
</script>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

这是来自页面速度洞察的信息：

第三方| 尺寸| 主线程阻塞时间

谷歌CDN | 40 KB | 1,001 毫秒

引导 CDN | 70 KB| 0毫秒

我应该做什么来提高速度？

我注意到向我的网站添加更多 JS 代码或删除它会影响这个“主线程阻塞时间”，即使该代码不是来自 Google CDN。

例如，如果删除一些 javascript 块，例如这些本地脚本：

<script src="/js/d3.v5.min.js"></script>
<script src="/js/billboard.min.js"></script>
<script defer src="/js/moment.min.js"></script>

Google CDN 的主线程阻塞时间减少到 500 毫秒，我的分数增加

我不知道为什么我的 LCP 会是 ap 标签，我也不知道我会做什么来减少它的大小。有时它会达到 2.6 秒并给出黄色评级（而不是绿色）。

这是 p 标签。所有这些类都是引导类。

<p className="text-center mb-md-5 mt-0 mb-5">{aboutText}</p>

这是变量aboutText

const aboutText = `Suddenly  Magazine highlights the uniqueness of Saskatchewan,  and its sudden rise in popularity and growth mentioned in publications such as USA Today and the New York Times.

Advertorials and Articles focus on its rare & particular tourism, its passionate sports, its character, and the prosperous opportunity for businesses and artists influenced by a Saskatchewan setting.

It is centred in Saskatoon, …

我最近注意到 Google 更新了 PageSpeed Insight 报告页面。有一个“起源摘要”。

它到底是什么意思？为什么它与现场数据略有不同？

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

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

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

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

我正在运行一个 Angular 应用程序，该应用程序在移动版 PageSpeed Insight 中显示得分非常低（移动版为 41，桌面版为 86）。

我在这里附上错误的屏幕截图。

我确实需要一些帮助来解决这些问题。你得到的任何建议都会很棒！

有关该应用程序的一些详细信息

• 角17.1
• 我延迟加载了所有路由并仅使用独立组件
• 该应用程序确实有一些第三方库示例：Angular Material、Ngrx、Chartjs...

页面速度测试

移动分数低 - 41

减少 JavaScript 执行时间 1.5 秒

最小化主线程工作 2.4 秒

最大内容绘制元素 5,640 ms

SVG 是矢量，因此可以在不损失任何质量的情况下调整大小。

知道这一点后，我的脑海中浮现出为什么我要使用正确大小的 SVG。在我看来，相同尺寸的 SVG 100px x 100px 的尺寸比 10px x 10px 的尺寸要大得多。

那么问题是我应该选择较小的文件大小并让浏览器调整图像大小，还是以正确的大小提供图像更好，这样浏览器就不必进行任何重新缩放（在许多情况下接受这一点）由于响应性，它必须以任何一种方式执行此操作）。

我知道这可能属于微优化的范畴，但似乎我的许多 SVG 可能要小得多，这可能有助于提高 Google 页面速度分数。

我正在测试我创建的网络的性能。我尝试使用Google 的 Page Speed \xe2\x80\x8b\xe2\x80\x8band GT Metrix。每个应用程序都会产生不同的性能结果。

我正在尝试查看热门问题 GT Matrix 中的结果，. 中的渲染资源存在问题app.css。我尝试使用下面的代码来解决这个问题，但初始渲染结果不太好看。

谁能帮助我如何处理这个问题？

<link rel="stylesheet" href="http://103.148.190.87/css/app.css" as="style" onload="this.onload=null;this.rel=\'stylesheet\'">\n<noscript>\n  <link rel="stylesheet" href="http://103.148.190.87/css/app.css">\n</noscript>\n

我一直在努力提高我网站的 web.dev 评级，而我最后遇到的困难是 LCP。加载延迟通常非常高，我很难理解为什么。这是我最新测试的一个例子：

我们所说的LCP是一个图像。这就是 img 标签的样子：<img class="img-fluid" fetchpriority="high" loading="eager" alt="Van houtwolisolatie tot schelpen: welke natuurlijke isolatiematerialen zijn er?" width="1024" height="768" src="https://livios-images.imgix.net/livios/umbracomedia/100432/renovatie%20kalkhennep2.jpg?w=640&amp;h=480&amp;auto=format&amp;fit=crop&amp;crop=faces%2Cfocalpoint&amp;corner-radius=10&amp;mask=corners&amp;s=0cd046a70dfd52ab8c40029eafd14e99">
如您所见，我添加了fetchpriority="high"和loading="eager"来提高负载。

在我的 html 头部，我还添加了<link rel="preconnect" href="https://livios-images.imgix.net" crossorigin="">和<link rel="dns-prefetch" href="https://livios-images.imgix.net">来改进 DNS 加载。我什至添加了<link rel="preload" href="https://livios-images.imgix.net/livios/umbracomedia/100432/renovatie%20kalkhennep2.jpg?w=640&amp;h=480&amp;auto=format&amp;fit=crop&amp;crop=faces%2Cfocalpoint&amp;corner-radius=10&amp;mask=corners&amp;s=0cd046a70dfd52ab8c40029eafd14e99" as="image">预加载图像。然而加载延迟仍然很高。我有什么遗漏的吗？