标签: pagespeed

我构建了一个使用 gatsby 处理静态内容的小型站点，但是对于需要在客户端呈现的某些内容，我在 gatsby 中使用了仅客户端路由。

我不确定我是否完全理解这是如何工作的 - 假设我有一个Header、Footer和我在我的静态站点中使用的字体。在我的仅客户端路由上，我使用相同的Header、Footer和font。之前在我的静态组件中使用过这些元素，我会从中受益吗？例如，是否重新加载字体？

基本上，我想知道我的客户站点内容现在失去了 Gatsby 的哪些功能，以及我应该多注意什么，因为 Gatsby 不会再为我处理这个问题了。尤其是在页面速度方面。

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

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

我的一个网站的 LCP 非常糟糕，4.6。我意识到如果没有主动延迟加载我的图像，LCP 是 2.0 。TCB 也通过使用延迟加载而增加。所以我想这一定是我的 JS-Skills 不好，所以能给我一个提示吗？

我的实际代码：

let lazyImages = [...document.querySelectorAll('img[data-src],iframe[data-src],div[data-bg],header[data-bg]')];
let inAdvance = 300;

function lazyLoad() {
   lazyImages.forEach(image => {
       if ( !image.classList.contains( 'lazyloaded' ) && !image.classList.contains( 'none' ) && image.getBoundingClientRect().top <= window.innerHeight + inAdvance && image.getBoundingClientRect().bottom >= 0) {
           if( image.hasAttribute( 'data-src' ) ){
               image.src = image.dataset.src;
           }

           if( image.hasAttribute( 'data-bg' ) ){
               image.setAttribute( 'style', 'background-image:url( ' + image.dataset.bg + ' );' );
           }

           image.classList.add('lazyloaded');
           //image.onload = () => image.classList.add('lazyloaded');
       }
   })
}

window.addEventListener( 'scroll', …

我一直致力于提高我的网站页面速度。我计划使用 AVIF 格式的图像。此图像格式仅在最新的 Chrome 浏览器版本中受支持。为了提供后备图像，我使用了这个 CSS：

.banner-bg {
  background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}

.banner-bg{
  background: url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, 249, 255) 33%, rgb(213, 227, 255) 70%, rgb(211, 225, 255) 100%);
}

这在 Chrome 中工作正常，其中仅加载 AVIF bg 图像并忽略 jpg 格式。在旧版本的 Chrome 中，忽略 AVIF 格式，加载 jpg 格式。

页面中只加载了一张图片。而在 Firefox 和其他浏览器中，忽略 AVIF 格式并且不加载 jpg。我尝试使用下面的代码，它有效，但两种格式的图像都加载到页面中，这增加了我的页面大小。

.banner-bg {
  background-image: url('https://cdn.xyz.com/content/images/desktop_banner_bg.jpg'), url('https://cdn.xyz.com/content/images/desktop_banner_bg-updated.avif'), linear-gradient(90deg, rgb(246, 250, 255) 0%, rgb(244, …

我正在尝试优化我的 google pagespeed Insights 分数，我得出的结论是，推迟 nextjs 的 NextScript 还不够好，它仍然会导致不良的 LCP 和 TII。

我有以下代码。

如何捆绑我正在循环的脚本，以便在 window.onload 事件之后加载它们？

任何帮助将非常感激。

import { NextScript } from 'next/document';
import React from 'react';

type DocumentFiles = {
  sharedFiles: readonly string[];
  pageFiles: readonly string[];
  allFiles: readonly string[];
};

function dedupe<T extends { file: string }>(bundles: T[]): T[] {
  const files = new Set<string>();
  const kept: T[] = [];

  // eslint-disable-next-line
  for (const bundle of bundles) {
    if (files.has(bundle.file)) {
      // eslint-disable-next-line
      continue;
    }
    files.add(bundle.file);
    kept.push(bundle);
  }
  return …

问题是如何重写静态 HTML 脚本嵌入：

<script async id="__script__id__"\n              type="text/javascript"\n              src="//abc.xyz.com/js/script.js">\n</script>\n

到编程嵌入中，该嵌入允许仅在特定条件下加载脚本。

悬赏金是为了描述静态/程序化嵌入之间的差异而设置的，具体来说：

\n
1. 解释当以权威引用加载和执行 \xe2\x80\x94 时，JS 规范如何处理以编程方式添加的脚本 \xe2\x80\x94。
\n
2. src通过权威参考解释将脚本嵌入从 HTML 内联转换为程序化如何影响浏览器优化（众所周知，浏览器会扫描带有属性的 HTML 脚本标签并预加载它们）。
\n

我用谷歌页面速度检查了我的网站.

它表示为我的资源指定过期时间.

谁能告诉我如何利用浏览器缓存博客？

我为客户建立了一个模板和一些站点.我总是关注网站加载时间.我的Google PageSpeed Insights是我的主要工具之一.两天前,我提到了一些不同的东西.我发现我的很多网站页面负载都在下降.而影响该更改的PageSpeed规则是" 改善服务器响应时间 ".我以前从未见过这条规则.

我要求我的托管服务知道是否有任何服务器问题,并使用GTmetrix进行检查.他说没关系,他没有发现任何重大问题.我自己检查一下,看到该网站的Google PageSpeed Insights 有所不同.

请看一下,

• 这是pagespeed洞察力测试结果http://imm.io/123Ex
• 这是GTMetrix测试结果http://imm.io/123EV

是"提高服务器的响应时间"是一个新的规则,如果它是的,我能做些什么呢？

我在页面底部引用了以下js脚本：

<script src="http://example.com/test.js" type="text/javascript"></script>

Google PageSpeed的建议是推迟加载此js。我不太了解该怎么做或产生的影响。有人可以解释一下吗？

Google的页面速度测试仅显示一个问题:

在上层内容中消除渲染阻止JavaScript和CSS您的页面有1个阻止CSS资源.这会导致呈现页面的延迟.
在不等待加载以下资源的情况下,无法呈现页面上的上述内容.尝试推迟或异步加载阻止资源,或直接在HTML中内联这些资源的关键部分.
优化以下内容的CSS交付:https://fonts.googleapis.com/css？family = Roboto:
300,400

作为fonts.google.com建议加载的字体:

<link href="https://fonts.googleapis.com/css?family=Roboto:300,400" rel="stylesheet">

在<head />标签内.

据我所知,没有办法控制谷歌的字体缓存,而且这个网址的输出依赖于用户代理,所以在本地分发字体是没有意义的.所以,问题是:我该怎么办呢？我如何满足谷歌的速度测试？