标签: pagespeed

我正在努力解决一个问题。我使用Nuxt.js [2.2.0] ( https://nuxtjs.org/ ) 创建了一个应用程序。一切都很完美，但页面速度显示我的页面结果非常糟糕。

该问题似乎与许多页面和组件有关。我为了测试目的把它们删除了，只留下一页，然后页面速度显示大约90%。另外，这个问题只出现在移动设备上，在桌面设备上我在这个测试中得分为99%。您是否也在为这样的问题而苦恼呢？有机会对此做点什么吗？

我知道这可能看起来有点模糊，但我将提供更多背景信息：在我工作的公司中，我们使用（我个人的想法是我们滥用）Google Tag Manager (GTM)来注入一些第三方GTM 标签内的脚本。大多数情况下，我们使用它来操作某些页面模板（例如产品页面）中的 DOM 并注入第三方脚本（例如 Zopim 聊天、Facebook Pixel 等\xe2\x80\xa6）。

DOMContentLoaded我们通常做的事情是：在页面加载时和/或事件发生时操纵 DOM load，因此对我来说，显然如果没有这些 GTM 标签，我们的网站将在PageSpeed Insights和Chrome DevTools\' Lighthouse中获得更好的分数。如果没有激活 GTM 标签，我无法测试该网站，因为它已经在网站中随处可见。

这种 GTM 的使用对我们网站的速度有多大影响？

在我正在处理的 wordpress 上运行 Pagespeed 表示此资源需要 4.5 秒：/wp-content/themes/dt-the7/fonts/icomoon-the7-microwidgets-16x16/fonts/icomoon-the7-microwidgets-16x16 .ttf?dqeoeo

它建议使用预加载。

所以我之前尝试将其添加到 WordPress 中的 header-single.php 中</head>：

<link rel="preload" href="/wp-content/themes/dt-the7/fonts/icomoon-the7-microwidgets-16x16/fonts/icomoon-the7-microwidgets-16x16.ttf?dqeoeo" as="font" type="font/ttf" crossorigin="anonymous">

但没有任何结果。有人知道我如何在 WordPress 上预加载此类内容吗？

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

减少第三方代码的影响 第三方代码阻塞主线程 [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, …

expo build:web 生成的包大小非常大，平均为 3mb。

我完成了https://docs.expo.io/guides/web-performance/上的步骤。我的应用程序没有图像，因此优化它们没有真正的问题。其他建议的改进变化很小。

我使用了捆绑包分析器，并且没有安装任何大尺寸的模块来导致 3mb 捆绑包大小。

当我运行构建时，我得到：

entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (48.8 KiB). This can impact web performance.\nEntrypoints:\n  app (3.2 MiB)\n      static/js/runtime~app.aaee9ccd.js\n      static/js/2.a5f54fa3.chunk.js\n      static/js/app.98ae2f23.chunk.js\n

其结果是网页的性能极差。

如果我在浏览器中的构建结果上运行 google \xe2\x80\x9clightspeed\xe2\x80\x9d (pagespeed Insights)，我会得到非常差的初始页面加载评级。

我正在考虑一种可能的解决方法，即分支，然后 expo 弹出，然后删除所有不必要的 npm 模块以减少包大小。

我\xe2\x80\x99ve还在一些组件上添加了延迟加载，但没有太大改进。

您还有其他建议吗？

还附上谷歌光速测试结果。

\n

问题总结：

Google V2 ReCapcha 取消了所有页面速度调整工作，这些工作只是为了加载小“不可见”[不是真正不可见] iFrames

情况：

得到了一个很棒的 SEM 登陆页面，构建良好，压缩，缩小的 JS/css，CDN，最小字体快如闪电，99% A 页面速度得分...

但是一旦JS层被激活

Google V2 Invisible ReCapcha 尝试处理页面上的 3 个 FORM 元素（潜在客户表单、时事通讯和基于 Twilio 的 SMS“点击通话”表单）速度得分受到影响（并且不是可接受的程度，严重程度）

图片说明了一切：

多年来一直是一个问题，一直都知道它，但想现在也许有解决方案吗？

所有表单都是 100% AJAX。使用其他东西也可以，也许是 V3？异步延迟，尝试使用延迟和不延迟 - 仅从 Google 传递 JS 文件的加载时间似乎“不合理”...（尝试抓取 JS 文件并在本地提供它们，无论如何都是非正统且“不起作用”）

接受建议。

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

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

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

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

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

页面速度测试

移动分数低 - 41

减少 JavaScript 执行时间 1.5 秒

最小化主线程工作 2.4 秒

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

如果我使用wget,并从URL获取一个html文件.如何从该HTML文件生成HAR文件.

1. 用于从html文件生成har文件的任何开源实现？
2. 一旦生成了HAR文件,我就可以使用harlib从HAR文件中读取数据.

如果可能,请建议C,C++或Java实现.

当我在GTmetrix上查看我的WordPress网站时,我收到此消息"跨主机名并行化下载"> https://gtmetrix.com

以下是详细信息> https://gtmetrix.com/parallelize-downloads-across-hostnames.html

我该如何解决这个问题？