加快您的网站速度

目录

1. 网页安全字体
2. 字体显示
3. Unicode 范围
4. 预加载
5. Google字体
6. 图片
7. 使用替代软件包
8. 未使用的依赖项
9. 及时更新依赖项
10. 结论

今天，我们将探讨我用来提升自己网站速度的技巧。我一直很好奇大家都在用哪些方法来优化
博客和作品集，从而提升用户体验。而且，我对优化简直到了痴迷的程度。所以我进一步研究了各种优化方法，比如
减小软件包大小、优化谷歌字体、为开发环境和生产环境使用不同的软件包，以及使用自定义字体的技巧等等。
最终，我们来到了一个经过优化的网站：http://ogzhanolguncu.com/。首先，让我们来看看它的GTmetrix评分。

可以看出，性能方面提升空间已经不大。接下来，我们将逐步剖析这些过程，看看如何才能达到这样的分数。

字体

网页安全字体

如果您追求最佳效果，请只使用浏览器自带的网页安全字体。我所说的网页安全字体是指：

• Arial（无衬线字体）
• Verdana（无衬线字体）
• Helvetica（无衬线字体）
• Tahoma（无衬线字体）
• Trebuchet MS（无衬线字体）
• Times New Roman（衬线字体）
• 乔治亚（衬线体）
• Garamond（衬线字体）
• Courier New（等宽字体）
• Brush Script MT（草书）

这些字体几乎适用于所有浏览器，因为它们已经安装在您的计算机上，
因此优先选择它们，而不是Google Web Fonts或Adob​​e Fonts。

字体显示

@font-face {
  font-family: ExampleFont;
  src: url(/path/to/fonts/examplefont.woff) format('woff'), url(/path/to/fonts/examplefont.eot)
      format('eot');
  font-weight: 400;
  font-style: normal;
  font-display: optional;
  unicode-range: U+0020-007F, U+0100-017F;
}

font-display它对累积布局偏移 (CLS)和性能都起着至关重要的作用。因此，
optional为了提高性能并swap降低CLS，最好选择它。

所有现代浏览器均支持。

Unicode 范围

预先指定字符集unicode-ranges可以告诉浏览器只下载将会用到的必要字符。因为我们不需要
阿拉伯语、希腊语、希伯来语等字符。当然，前提是您确实不需要这些字符🙂。

所有现代浏览器均支持。请参阅Unicode 字符集列表。

预加载

<link
  href="/fonts/Avenir-Roman.ttf"
  as="font"
  type="font/ttf"
  rel="preload"
  crossorigin="anonymous"
/>

这preload意味着页面加载后您很快就会需要这种字体，因此请先加载它，然后再加载其他字体，赶在浏览器主渲染
开始之前。这样preload就不会阻塞页面渲染，并能提升整体性能。

Google字体

<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
  rel="stylesheet"
/>

使用 Google Fonts 时，请始终选择preconnect首选字体，浏览器会在源和接收器之间建立新的连接，
从而加快速度，提升网站的用户体验和速度。此外，请选择font-weights您需要的字体，因为font-weight字体越多，需要下载的文件就越大，所以请谨慎选择。

图片

关于图片其实没什么好说的，但一定要尽量使用最小的图片。比如，我首页上的图片只有 50kb，顺便说一下，这已经是
最小尺寸了。

使用TinyPng压缩图片而不损失质量。

使用替代软件包

由于这个网站是用 React 开发的，所以减小打包体积的唯一方法就是使用Preact，它是 React 的一个 3kB 的替代方案。
如果你也像我一样使用 Webpack 作为打包工具，可以按照步骤进行操作。顺便说一下，我在生产版本中使用的是 Preact。

• 首先，安装 Preact。yarn add preact
• 然后，按照如下所示配置您的 webpack 打包器。

webpack: (config, { dev, isServer }) => {
    if (!dev && !isServer) {
      Object.assign(config.resolve.alias, {
        react: 'preact/compat',
        'react-dom/test-utils': 'preact/test-utils',
        'react-dom': 'preact/compat',
      });
    }
    return config;
  },

除了上述示例之外，您还可以通过 Google Lighthouse 分析您的套餐，它会提供替代当前套餐的较小套餐。

未使用的依赖项

检查你的依赖项package.json，找到并删除未使用的依赖项。因为即使你没有使用某些包，package.json它们仍然会
包含在最终的打包文件中，从而增加打包文件的大小，进而降低加载速度。

及时更新依赖项

一开始，更新依赖项似乎没有必要，但有时开发者会从速度和体积两方面改进他们的软件包。例如，Next.js 10 的核心软件包体积减少了 16%。他们引入了代码拆分策略。这一切都源于他们
将内置的 Image 组件添加到了代码库中。在引入这个 Image 组件之前，我一直使用外部软件包来处理图片。升级到 Next.js 10 后，我立即就弃用了这个外部软件包。

结论

• 使用网页安全字体。
• Preload您的字体文件。
• 预先连接到Google Fonts。
• 用于font-display: optional性能font-display: swap和 CLS。
• 只使用unicode-range你需要的东西。
• 无需包含font-weightGoogle Fonts。
• 压缩图片。
• 对于生产环境的软件包，请使用较小的替代软件包，例如Preact。
• 移除未使用的依赖项。
• 及时更新依赖项。

感谢阅读🥳🥳🥳。