时间戳

首页 > 解决方案 > 使用 Bootstrap + Google PageSpeed Insights 进行 Gatsby 优化

optimization - 使用 Bootstrap + Google PageSpeed Insights 进行 Gatsby 优化

问题描述

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

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

在此处输入图像描述

盖茨比浏览器.js

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

布局.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;

标签： optimizationgatsbypagespeedgoogle-pagespeedlighthouse

解决方案

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

由于您正在使用import 'bootstrap/dist/css/bootstrap.min.css';您的样式，因此将放置在所有站点中。从盖茨比文档：

  1. 创建一个全局 CSS 文件src/styles/global.css并将以下内容粘贴到文件中：
  2. 在文件中导入全局 CSS 文件gatsby-browser.js如下： 注意：您也可以require('./src/styles/global.css')在 gatsby-browser.js 文件中使用导入全局 CSS 文件。
  3. 运行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 秒）。

推荐阅读