标签: pagespeed-insights

Google Page Speed在这里向我报告了一个我无法理解的错误。

删除未使用的代码 我使用了 Google Page Speed 所说的所有 javascript，实际上 vendor.js 是项目的主要脚本。与 Webpack 和 Laravel 编译和统一。

那么为什么 Google Page Speed 说我不使用这些脚本呢？在我上传 lazysizes 插件之前，我没有得到任何这些。

另一方面，网站加载速度很快。我认为 Google Page Speed 非常不可靠。

这是我所做的。请记住，我以管理员身份登录浏览器，访问相关域下的 G Suite 帐户。

1. 我去 PageSpeed Insights 网址https://developers.google.com/speed/pagespeed/insights/
2. 我在框中输入我的网站

3. 错误： The referrer https://www.googleapis.com/ does not match the referrer restrictions configured on your API key. Please use the API Console to update your key restrictions

   一种。谷歌怎么知道我没有配置密钥？

   湾 什么钥匙？

   C。没有指向“我的”API 控制台的链接（我不知道我有一个）

4. 搜索 API 控制台并获取（最终）：https : //console.developers.google.com/apis/

5. 凝视和绝望......“组织无法查看页面。要查看此页面，请选择一个项目”（什么？）。我看到凭据（不要点击它，还没有，我做到了，你会后悔的）
6. 长话短说，我想我必须先创建一个项目。
7. 在这一点上，我不知道我在做什么，我在创造什么，或者特别是：为什么。
8. 单击启用 API，选择 PageSpeed，单击创建等等等等。
9. 现在单击创建凭据（我们回到 api 页面）。这是一个令人愉快的噩梦……重要的部分，在“从”USE：“服务器”中调用它，是唯一有效的部分！（想知道为什么其他选择，特别是“来自浏览器”，因为在我看来这就是我正在做的）
10. 现在有一把钥匙坐在那里。怎么办？
11. 我转到第 1 点并以微小的变化重复此列表 50 次

相关域名：https : //niagarafallsbus.com

因此，在我的所有网页上，我都有此代码，Yandex metrika 使用该代码进行分析。根据谷歌的说法，这个脚本正在减慢我的页面速度，需要改变它的加载方式，以免渲染阻塞、TTI 时间输入阻塞、FID 第一个输入延迟阻塞、第一个内容绘制阻塞。

<script data-cfasync="false" type="text/javascript">
   (function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)};
   m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
   (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

   ym(XXXXXXXX, "init", {
        clickmap:true,
        trackLinks:true,
        accurateTrackBounce:true,
        webvisor:true
   });
</script>

Google 的页面速度报告如下 https://developers.google.com/speed/pagespeed/insights/

我可以修改 Yandex metrika javascript 来解决此问题吗？

我聘请了一名开发人员来提高我的网站加载速度。他建议将 AMP 用于 Wordpress 插件。他在移动设备和桌面设备上都给了我 100 分的满分。我对此非常怀疑，因为我的网站很重，其他开发人员甚至不会承诺 90+ 的分数。我很确定这个开发人员只是在骗我 - 我想知道我如何才能找到？

有人可以帮我诊断该网站以查明它是否真实吗？听起来好得令人难以置信。

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 确实进行了某些升级，如果可能，请提供一些参考。

我正在尝试使用 PageSpeed Insights API。API参考表明我可以在调用API时传递多个类别值。

我发出了以下命令。类别值用逗号分隔。

curl 'https://pagespeedonline.googleapis.com/pagespeedonline/v5/runPagespeed?key=<my key>&url=<my url>&category=ACCESSIBILITY,BEST_PRACTICES,PERFORMANCE,PWA,SEO'

API 使用以下 JSON 进行响应。

{
  "error": {
    "code": 400,
    "message": "Invalid value at 'category' (TYPE_ENUM), \"ACCESSIBILITY,BEST_PRACTICES,PERFORMANCE,PWA,SEO\"",
    "errors": [
      {
        "message": "Invalid value at 'category' (TYPE_ENUM), \"ACCESSIBILITY,BEST_PRACTICES,PERFORMANCE,PWA,SEO\"",
        "reason": "invalid"
      }
    ],
    "status": "INVALID_ARGUMENT"
  }
}

我不知道如何传递多个类别值。有谁知道这是怎么做到的吗？

我正在通过 Google 的页面速度分析器运行一个页面，对于移动设备，它告诉我应该下载适当尺寸的图像。我知道视口大小，但不知道插槽的宽度，因为我们使用的是响应式布局。我查看了文档和一堆示例，但没有一个使用我认为应该是正确的图像。

开发人员工具的“网络”选项卡显示我们正在下载移动版 about.webp，而不是较小的图像（200 像素或 400 像素）。即使将 Chrome 中的设备更改为较小的视口宽度，它仍然会下载 about.webp。

picture使页面速度分析器使用适当图像的元素的正确 HTML 是什么？

下面是我的picture元素。谢谢！

<div class="row"><div class="col-md-3">
    <picture>
        <source type="image/webp" 
            sizes="(max-width: 200px) 200px,
              (max-width: 400px) 400px,
              (max-width: 1500px) 1500px" 
            srcset="//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w200.webp 200w,
//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w400.webp 400w, 
//cdn.storyboardthat.com/site-images/articles/education/about-sbt.webp 1500w">
        <source type="image/png" 
            sizes="(max-width: 200px) 200px, 
              (max-width: 400px) 400px, 
              (max-width: 1500px) 1500px" 
            srcset="//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w200.png 200w, 
//cdn.storyboardthat.com/site-images/articles/education/about-sbt-w400.png 400w, 
//cdn.storyboardthat.com/site-images/articles/education/about-sbt.png 1500w">
            <img src="//cdn.storyboardthat.com/site-images/articles/education/about-sbt.png" 
              alt="Storyboard That" 
              title="Storyboard That" 
              class="lazyload " 
              style="max-width:100%;height:auto;" 
              width="1500" height="400" loading="lazy"> 
    </picture>
</div>

我们如何通过 SSR 提高 Nuxt 的速度性能有以下几点。

• 减少未使用的 JavaScript
• 避免为现代 JavaScript 提供遗留服务
• 最小化主线程工作
• 减少 JavaScript 执行时间
• 避免巨大的网络负载

我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 吗？

我有一个 wordpress 网站正在运行，我正在使用 W3Total 缓存插件来加快网站加载速度。当我在 Google Page Speed Insight 中扫描网站时，我注意到我得到的扫描结果不一致。我有一个浮动在网页上的 Facebook Messenger 聊天和一个谷歌地图。由于这两个给了我减少第三方代码警告的影响，我进行了更改，以便仅在 DOM 完全加载后才加载这两个。实际上，我为此使用了 jQuery SetTimeOut。通过这样做，我实际上设法从结果中删除了警告。但时不时我注意到同样的警告再次出现，即使我已经做出了调整。如果我经常扫描网站两到三遍，warnong 可能会消失，但我会在一段时间后再次尝试。

这些是频繁扫描的结果。你们知道这里会发生什么问题吗？我花了很多时间搜索，但无法理解它。

当通过 Google Pagespeed Insights 工具运行该网站的页面时，在比较移动设备和桌面设备时，我收到了截然不同的“实验室数据”（交互时间、首次内容绘制、速度指数）速度。桌面版往往会在 2 秒内接收值，因此每个页面的 Pagespeed Insights 分数通常在 80 或 90 左右。然而，移动得分表明页面加载速度要慢得多，最多需要 10 秒。正如您可能猜到的那样，我无法在移动设备上重现接近这些加载时间的任何内容。移动和桌面体验没有显着差异，主要区别在于使用 CSS 媒体查询的样式。希望能帮助您理解为什么这些值如此显着不同！

参考图片： 桌面指标 移动指标

我为一家公司建立了一个网站，当我去尝试谷歌页面速度中的https://openroad.nz域时，它返回此错误Requests from referer https://www.googleapis.com/ are blocked。

知道这是什么以及为什么会发生吗？