使用 Bootstrap + Google PageSpeed Insights 进行 Gatsby 优化答案

【问题标题】：Gatsby Optimization With Bootstrap + Google PageSpeed Insights使用 Bootstrap + Google PageSpeed Insights 进行 Gatsby 优化
【发布时间】：2020-11-11 04:45:12
【问题描述】：

我正在尝试使用 Google PageSpeed Insights/Lighthouse 优化我的网站。我目前的分数在 37 左右，但我认为这主要是由于页面所做的大量 API 请求（大约 30-40）。 Here's the Google PageSpeed Insights

如何解决此避免更改关键请求问题？

gatsby-browser.js

// Imports: Dependencies
import 'bootstrap/dist/css/bootstrap.min.css';

Layout.js

// Layout
const Layout = ({ children }) => {
  return (
    <div className="layout">
      <Helmet>
        <link
          rel="stylesheet"
          href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css"
          integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk"
          crossorigin="anonymous"
        />

        <meta charSet="utf-8" />
        <title>COVID-19</title>
        <html lang={'en'} />
        <link rel="canonical" href="https://orangecountycovid19.com" />
        <meta name="description" content={'Orange County, CA COVID-19 Tracker'} />
      </Helmet>

      <div>{children}</div>
    </div>
  );
};

// Exports
export default Layout;

【问题讨论】：

标签： optimization gatsby pagespeed google-pagespeed lighthouse

【解决方案1】：

为什么要使用 CDN 在 gatsby-browser.js 和 <Helmet> 组件中导入 Boostrap？由于您的 <Helmet> 放置在 <Layout> 组件中，因此您正在使用 gatsby-browser 以及每次渲染 <Layout> （在您的大多数组件中）时将这些样式导入所有页面。有点乱。

由于您使用的是import 'bootstrap/dist/css/bootstrap.min.css';，您的样式将被放置在所有站点中。来自Gatsby documentation：

创建一个全局 CSS 文件为 src/styles/global.css 并将以下内容粘贴到文件中：

在gatsby-browser.js文件中导入全局CSS文件如下： 注意：您也可以使用require('./src/styles/global.css') 将全局 CSS 文件导入 gatsby-browser.js 文件中。

运行gatsby-develop 以观察在您的站点中应用的全局样式。 注意：如果您使用 CSS-in-JS 来设置网站样式，这种方法不是最合适的，在这种情况下，布局页面包含所有共享应使用组件。这将在下一个食谱中介绍。

删除您的 <Helmet> 样式并确保 https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css 具有与 bootstrap/dist/css/bootstrap.min.css 相同的样式以避免清除。您必须尽可能减少外部请求，至少是在您的项目中易于替换的样式。

通过此删除，您将改进结果请求以及渲染块样式。

您的 PageSpeed Insights 还会显示大量未使用的 JavaScript（几乎 1 秒）。

【讨论】：

谢谢！我从头盔中删除了 Bootstrap CDN 链接，并将其仅导入到我的 gatsby-browser.js 中。不需要 global.css