我如何通过 Gatsby 获得完美的 Google Lighthouse 评分

几周前，我接到一个项目，要建一个网站做SEO。目标关键词是casino know-hows和online casino website，这两个关键词在当地竞争非常激烈。

我以前用过WordPress和Wix做 SEO 项目。但这次我决定用Gatsby，因为：

• 为了提高竞争力，它应该速度极快
• 该网站将纯静态
• 我希望源代码在我的掌控之下
• 我想挑战一种新技术
• 当然，它是 React，所以为什么不呢？

我花了8天时间从零开始搭建网站并部署到服务器。카지노网站共有46个页面。

Google lighthouse 和 gtmetrix 得分相当高。

* Lighthouse 分数可能因地点和浏览器而异

我想分享我通过谷歌灯塔审核的经验：

以下一代格式提供图像

您可能几乎每次优化网站性能时都会看到此消息。

Google Lighthouse 非常喜欢 WebP，但 WebP 图片因无法在 iOS 浏览器上运行而臭名昭著。虽然有一些变通方法，比如使用<picture>标签，但这是一项重复且枯燥的工作。我相信很多开发者已经放弃了 WebP，转而使用 jpg 图片。

有了gatsby-image，您将再也不会遇到这种头痛。

例如，我使用如下 graphQL 查询：

query BlogPostByID($id: String!) {
  markdownRemark(id: { eq: $id }) {
    html
    fields {
      slug
    }
    description
    tag
    featuredimage {
      publicURL
      childImageSharp {
        fluid(maxWidth: 2048, quality: 64) {
          ...GatsbyImageSharpFluid_withWebp
        }
      }
    }
  }
}

然后在我的组件中，我像这样渲染：

import Img from 'gatsby-image'

<Img fluid={image.childImageSharp.fluid} />

然后在我的 html 中，我得到如下元素：

请注意，有一个img带有 base64 编码源的标签。它是原始图像的模糊版本。它会在高质量图像完全加载之前首次显示。gatsby-image-sharp构建页面时，它会裁剪并调整图像大小并生成缩略图。所有图像的尺寸都正确，并节省了大量的网络负载。

就像魔术一样！

陷阱

请注意，我将 webp 质量设置为 64。众所周知，无损（或 100% 质量）webp 压缩会使尺寸增加 30%。

换句话说，如果将质量设置为 100，webp 图像尺寸将大于原始图像尺寸。

使用高效的缓存策略提供静态资产

Lighthouse 要求您返回Cache-Control如下 HTTP 响应标头：

Cache-Control: max-age=31536000

您可以在本文中找到如何Cache-Control在 nginx 和 apache 中设置标头。

陷阱

31536000 实际上指的是 365 天或一年。我尝试将此值减少到 10 天（或 864000），但警告消息并没有消失。所以我认为你应该保持原样。

启用文本压缩

Gzip 压缩通过压缩基于文本的资源大大减少了网络字节数。

在这里您可以找到如何在 apache 和 nginx 中启用 gzip 压缩。

背景色和前景色具有足够的对比度

我见过很多网站都没通过这项审核。如果你想通过这项审核，你可能需要更改你的配色方案。

据灯塔称：

• 18pt 或 14pt 加粗的文本需要 3:1 的对比度，
• 所有其他文本的对比度需要为 4.5:1

您可以充分利用 Chrome DevTools 的颜色选择器来检查对比度：

问题：
如果背景使用了图片或动画 CSS，Lighthouse 可能无法确定对比度。在这种情况下，即使背景与人眼的对比度足够，审核仍会失败。

例如，casinohouse.link页脚使用了 CSS 动画。我无法让 Lighthouse 相信页脚的对比度足够。为了解决这个问题，我给链接添加了另一种背景颜色。这样看起来效果更好了。

所有资源均使用 HTTP/2

我的托管 Web 服务器使用 CentOS 和 Apache。不幸的是，它使用 HTTP1.1。我发现让它使用 http2 并不容易。为了解决这个问题，我为我的域名启用了CloudFlare。然后，问题在一分钟内就解决了。而且还是免费的！

结论

所有其他审核都已由 Gatsby 处理。真的很方便。虽然这是我第一次使用静态网站生成器，但我得到了令人满意的结果，我认为我的选择非常完美。

请浏览我的网站并随时提出任何想法和进一步的优化。

感谢阅读！