创建一个快速的网站超级简单😏

没错，我说的就是这个。创建一个快速的网站超级简单，几乎不会带来任何不便。

我建立了一个网站，它在 Google Lighthouse 中获得了满分，并且可以部署到边缘。

它完全采用高性能、久经考验的语言构建，可以持续很长时间。

想亲眼看看它到底有多快吗？你可以在这里查看：https://enterspeed-hw.netlify.app/

您看到它有多快了吗？

好吧，我承认，这番话有点儿低俗。你们有些人可能会觉得嘴里有点儿酸，觉得这篇几乎是标题党的文章被骗了。不过等等，这番疯狂的举动背后还有点道理。

关键在于，任何人都可以创建一个快速的网站。但挑战在于，如何创建一个外观精美、功能齐全且性能卓越的网站。

我们都偶然发现了 LinkedIn 上的一篇帖子，有人吹嘘他们的网站在 Google Lighthouse 中获得了 100/100 的得分。

这样的分数也算得上是相当了不起的成就，确实值得庆祝。不过，我想我们很多人都见过一些高性能网站，怎么说呢……看起来糟透了。请原谅我的用词不当。

你知道这种类型。2000 年代后期风格，几乎没有任何图像，也许有几个看起来很糟糕的图标，目之所及只有文字。

别误会——对于某些网站，例如博客，这完全合理。但是，对于一个旨在通过销售商品或服务来转化客户的网站来说，网站的外观也应该具有吸引力。

当然，一个网站的外观好坏与性能评分不同，它非常主观。俗话说：“情人眼里出西施”。

网站的视觉效果可能成本高昂。每张图片、视频、自定义字体、动画库等等，对用户来说都是一个额外的请求，并且需要传输给客户端额外的数据。

问题的另一面在于网站的功能。上面那个漂亮的“Hello world”示例是用纯HTML编写的，但实际上它并不适合一个功能齐全的公司网站。

然后，我们引入一些会增加包大小和响应时间的框架。这些框架带来的开销也会因您选择的框架而异，正如我们在上一篇文章中所发现的：我们测量了 6 个 JS 框架的 SSR 性能——以下是我们的发现。

好了，基础已经打好——现在开始内容部分。市场营销部门提出新想法的频率几乎和引入新的 JS 框架的频率一样高。他们不想一直打扰你，同样重要的是，你也不想每次需要做微小的改动时都被打扰。

现在我们开始实现 CMS。根据具体实现方式，这也会给性能带来额外的开销。如果我们使用 SSG 进行渲染，性能不会有任何显著变化。但是，如果我们使用 SSR（或者出于某种原因你选择了 CSR——请不要这样做），我们就会开始看到一些额外的请求。

好吧，现在我们满足了市场营销部门的需求——一个编辑和发布内容的平台，他们现在应该满意了吧？哦，我可爱的夏日孩子，你显然从未与市场营销部门合作过。

还记得《指环王》里成千上万的半兽人攻打米那斯提力斯的场景吗？想象一下，米那斯提力斯是你的网站，而成千上万的半兽人则是市场营销人员想要实现的一堆追踪脚本。在这种情况下，你扮演的是甘道夫，竭尽全力保卫米那斯提力斯。

尽管把所有问题都归咎于营销很有趣，但事实是营销确实发挥了至关重要的作用。

如果网站没有任何访客，那么速度再快也毫无意义。此外，如果这些访客没有转化（例如购买、注册、预约电话、下载资料等），速度也毫无意义。

那么，我们是否应该让营销部门自由发挥呢？

呃……

就像一个孩子拿着一碗糖一样，我们仍然应该保持警惕，不要让他们把一碗加糖的燕麦片变成一碗加糖的燕麦片。

许多研究表明，网站的速度和转换率之间存在直接的相关性。

此外，在搜索引擎优化方面，核心网络生命力在 2021 年成为谷歌官方排名因素。

因此，我们必须平衡视觉元素、网站的功能和网站的性能，以便它们能够共存。

我知道你在想什么：“废话少说，这不是营销，我到底能做什么呢？”（抱歉，我自己也从营销转到了开发，所以我实在没办法）。

别担心，在本文的第二部分，我们将介绍一些可行的建议。

让您的网站快速、实用、美观👌

让我们尝试实现那个让每个人都开心的神奇三因素。

图片

让我们先从性能的一大罪魁祸首——图片开始。图片占据了网站总大小的很大一部分。

截至 2022 年 8 月，图片在桌面设备上平均占页面总重量的 45%，在移动设备上平均占页面总重量的 44%。图片请求数量在桌面设备上占页面总请求量的 32%，在移动设备上占页面总请求量的 30%（数据来源：HTTP Archive）。

因此，优化图像可以轻松带来巨大收益。我之前写过一篇关于这个主题的文章：如何优化图像性能。

我将快速总结文章中的要点并转到一个具体的例子。

1. 选择合适的图片格式（JPEG、PNG、GIF、SVG、WebP）。
每种图片格式都有其用途。例如，PNG 格式非常适合图标和较小的图片，但对于较大的图片来说，文件大小很快就会变得非常大。

2. 谨慎使用 GIF 动图。GIF
动图非常适合制作小型“视频”，例如用于教程，但需要付费。文件大小可能非常大，所以建议使用视频。

3. 务必压缩图片。
用压缩工具处理图片能节省多少千字节，这总是让我感到惊讶。我曾经成功将一个 SVG 文件压缩到 97% 左右——简直太厉害了。

我一直以来最喜欢的工具之一是TinyPNG（又名 TinyJPG）。它的用户界面美观、简洁，更重要的是，它的压缩效果非常出色。它可以压缩 PNG、JPEG 和 WebP 文件。

记住，每次使用后都要检查质量。很多压缩工具在压缩渐变色时会遇到一些问题——结果可能会很卡。

我可以推荐的在线工具：

💡 提示：Squoosh可让您调整质量（压缩率）并实时查看结果。

4. 缩小图片尺寸
完全没有必要提供 3000px 宽度的图片。此外，如果只渲染 300px 宽度的图片，也没有理由提供 500px 宽度的图片。

5. 提供响应式图像
不要在桌面和移动设备上使用单个图像，而是考虑根据视口提供 3 到 5 种不同尺寸的图像。

在此处查看 Mozilla 有关响应式图像的文章：MDN 上的响应式图像。

6. 延迟加载图片
不到必要，请勿加载图片。延迟加载图片有助于减少初始请求数量和页面大小，从而显著提高网站速度。

如今，我们拥有了所有主流浏览器都支持的内置延迟加载属性：网络浏览器级图像延迟加载。

⚠警告：切勿延迟加载您的 LCP 元素！

现在，让我们看一个例子，了解如何优化图像性能的一大罪魁祸首——英雄图像。

优化英雄形象

几乎所有现代网站都在其英雄部分（徽标和导航正下方的区域 - 通常主要用于主页）使用某种图像。

英雄部分可能是您网站中最重要的部分，因为它负责快速告诉访问者：

您提供的产品或服务
您的 USP 是什么（独特的销售主张）
传达信任（为什么访问者应该信任你的网站）
主要行动号召（注册、预约电话、立即购买等）。

设计英雄部分的方法有千千万万种，但现在，我们将其分为两类：

A) 全尺寸英雄图像（背景）
B) 部分尺寸英雄图像（通常放置在屏幕的右侧，占据宽度的 1/2 到 1/3 之间）。

从性能角度来看，英雄图像之所以有趣，是因为它通常是 LCP 元素（最大内容绘制），在 Lighthouse 性能评分中，它是第二大加权指标，权重为 25%，仅次于 TBT（总阻塞时间），权重为 30%。

此外，就文件大小而言，英雄图像往往也是最大的图像之一（尤其是全尺寸英雄图像）。

对于部分尺寸的英雄图像，根据其大小，它们可能不是 LCP - 这很可能是标题文本 - 特别是在移动设备上，设计师倾向于缩小图像以便为文本和按钮腾出空间。

那么，让我们来优化一下我们的英雄图片。在本例中，我们的英雄图片将是一个全尺寸的英雄图片。

我们应该做的第一件事是确保我们不会延迟加载我们的英雄图像（有些人可能会选择向所有图像添加 lazy=true 属性），因为这会对我们的分数产生负面影响。

接下来我们应该做的是预加载它。将你的英雄图像设置为预加载，将使浏览器的预加载扫描器能够在页面生命周期的早期加载元素。

来源：https://web.dev/preload-scanner/

请注意，如果您使用响应式图像（根据视口大小使用不同的图像），则需要在元素上指定imagesrcset 属性。

接下来是下一个技巧：使用响应式图像尺寸。

我们使用的是宽度为 1920px 的全尺寸背景图片。在 iPhone SE 等屏幕视口宽度为 375px 的设备上加载宽度为 1920px 的图片绝对是疯了。

通过将宽度从 1920px 缩小到 375px，您可以将图像大小缩小到原始大小的 1/10。这真是节省流量。

我知道你在想什么。实现所有这些变化听起来很费劲。我理解你的感受——我也很懒，但幸运的是，现在有很多很棒的工具可用。

响应式图像断点生成器会根据您的分辨率范围自动创建所需数量的图像。此外，它甚至还会为您生成 HTML img 标签。

该工具由Cloudinary （另一项出色的服务）创建，它还具有可用的 API，可将您的图像上传到云端并以编程方式自动生成断点。

懒人万岁🙌

现在我们来看一下如何优化主图像尺寸。在这个例子中，我将使用 Photoshop，但有很多免费工具可以完成同样的操作。

我们想为我们的网站打造这个出色的英雄：

我们找到了这张想要使用的美丽图像（向摄影师Matheus Cenali致敬）。

我们最大的图片尺寸是 1920x1080。可惜的是，1920x1440 的分辨率有点太大了。需要裁剪一下。

我选择 Photoshop 中的裁剪工具并输入我想要的分辨率。

太好了，这里没有多余的像素。

接下来，我点击“文件”>“导出”>“导出为”。在这里，我可以选择图像格式——如果是 JPG 格式，则选择图像质量，同时检查质量和文件大小。

如果您不想使用其预定义的质量等级（良好、非常好、优秀等），您可以使用其旧版导出工具，该工具允许您从 0 到 100 之间选择质量，类似于Squoosh。您可以在“文件”>“导出”>“另存为 Web 格式（旧版）”下找到它。

我通常会选择“好”质量，因为它通常能达到质量和文件大小之间的最佳平衡点。

现在，我们可以对 188.9 KB 的文件大小感到满意，对于大型背景图像来说这也不算太糟糕，但让我向您展示另一个很酷的技巧。

正如您从上面的英雄示例中看到的那样，我们希望在图像上覆盖一层黑色，以便更好地查看文本并使 CTA 脱颖而出。

啊哈！那我们只需要添加一些 CSS 就能创建一个带有一定不透明度的黑色覆盖层，对吧？没错，我们可以这么做，不过你看一下这个。

现在，我取上图相同的苹果图片，在 Photoshop 中打开，右键单击图层，选择“混合”选项。点击“颜色叠加”，选择黑色，并选择不透明度（本例中我们使用 60%）。

现在让我们尝试像以前一样以“良好”质量再次导出它，结果文件大小为 188.9 KB。

我们的文件大小缩减到了 99.5 KB！几乎减少了 50%。图像细节越少，图像尺寸就越小。

如果我们选择模糊图像，情况也会一样：

现在文件大小是 78.7 KB。我想知道如果我们在模糊图像上添加黑色覆盖会发生什么？

最终文件大小只有惊人的49.7KB。由此可见，在Photoshop中处理特效时可以节省多少KB空间。

好了，关于图片就说这么多——我们可以一直优化各种资源。现在我们来看看字体。

字体

如果说设计师最爱的是什么，那一定是字体。所以，当谷歌最近在 Google Fonts 上推出彩色字体时，整个网页设计社区几乎都为之疯狂也就不足为奇了。说实话，这确实是一个很酷的功能。

那么，我们来谈谈字体以及如何优化它们。我们不会在本文中涵盖所有方面，因为不管你信不信，这实际上是一个相当大的话题。

首先，为什么字体/排版对于网页设计如此重要？让我们来看一下。

1. 可读性
还记得网络的旧时代吗？当时似乎有一条普遍规律：你的网站应该有 11px 的正文字体？（这是什么？蚂蚁的网站？）

幸好，眯着眼睛浏览网页的日子已经一去不复返了。现在大多数（当然不是所有）网站都采用了合适的字体大小。

字体的选择当然也很重要。互联网无障碍局推荐使用以下字体：Times New Roman、Verdana、Arial、Tahoma、Helvetica 和 Calibri。

2. 易读性
易读性与可读性相关，易读性是衡量单个字符和单词在读者眼中的可区分程度的标准；可读性是衡量整个文本的易读程度的标准（来源：易读性和可读性）。

3. 颜色与对比度
每个人对颜色的感知方式各不相同。有些颜色组合对某些人来说可能非常难以辨认，甚至无法辨认。

通常，这是由于颜色对比度差（前景色和背景色相似）造成的。

WebAIM 指南建议所有文本的 AA（最低）对比度为 4.5:1。不过，大文本（比默认正文大 120% 到 150%）是个例外，此时对比度可以降至 3:1（来源：颜色和对比度可访问性）。

4. 品牌推广
没错，您以为我们的营销工作已经完成了，但就像 Undertaker 一样，他们会在您最意想不到的时候偷偷溜进来。

字体是品牌的重要组成部分，它能够唤起情感，并向消费者传达品牌的核心。

不相信？看看这些精彩的标志互换，做好心理准备吧。

为您的网站选择合适的字体组合，可能决定着设计是否成功。查看Canva 的字体搭配终极指南。

在继续讨论如何优化字体性能之前，我们还需要讨论两种基本类型的 Web 字体：Web 安全字体和 Web 字体。

网页安全字体
这些字体是设备上预装的字体，也称为系统字体。例如 Arial、Times New Roman 和 Courier。

网络字体：
这些字体未预装在您的设备上，必须由浏览器下载后才能显示。这些字体可以自行托管（在您自己的网络服务器上），也可以通过第三方托管服务（例如 Google Fonts、Adobe Typekit 等）托管。

细心的读者肯定已经知道我们要优化哪种字体了——没错，就是网页字体。虽然在设计中只使用网页安全字体固然很好，但仅靠这些字体很难让网站看起来美观。

那么，让我们看看我们能做什么。

您应该做的第一件事是确保您没有下载不必要的字体变体。

如果您使用主题、样板等，它可能会带有许多不必要的字体变化。

以流行的Roboto 字体为例，它有 12 种不同的样式（6 种不同的字体粗细，每种都有斜体和非斜体版本）。用户必须下载每种变体的字体，额外占用 KB 空间。

幸运的是，您可以轻松找出您正在使用的样式和未使用的样式。之后，您可以更改链接/@import，以仅下载这些变体。

接下来，让我们看看这些字体会如何影响我们的性能得分。Web 字体会对核心 Web 指标（例如累积布局偏移 (CLS) 和最大内容绘制 (LCP)）以及非核心 Web 指标（例如首次内容绘制 (FCP)）产生负面影响，FCP 也用于计算Lighthouse 性能得分，权重为 10%。

那么，我们如何优化所有这些呢？我们做不到。

等等，什么？我们不能吗？

不，针对 CLS 和 LCP/FCP 优化字体是相互冲突的。这都与我们如何使用font-display属性有关。

加载自定义字体时，每个浏览器都有自己的行为。Edge 会将其与系统字体交换，直到字体准备就绪；Chrome 和 Firefox 会等待 3 秒钟再将其与系统字体交换，而 Safari 则会将其隐藏，直到字体准备就绪。

我们可以使用 font-display 来修改这个默认行为。

因此首先让我们尝试针对 LCP/FCP 进行优化。

首次内容绘制通常是你的文本，正如我们之前所了解的，它也可能是你的最大内容绘制。这些元素加载得越快越好。

因此，Chrome、Firefox 和 Safari 的加载行为可能会损害这些指标。如果您选择手动将 font-display 设置为“block”，这会使字体的阻塞时间较短，而交换时间无限长，也会产生同样的效果。

我们可以通过将 font-display 设置为“swap”来避免这些“不可见字体”，从而将块周期设置得非常小。这将加载系统字体，并在自定义字体准备就绪时“切换字体”。

相当巧妙，但你知道在加载过程中“交换内容”会发生什么吗？你的布局可能会发生偏移，导致累积布局偏移 (CLS) 得分较低。

所以，很遗憾，没有万能的解决方案。如果你的文本就是你的 LCP，那么使用交换方法是合理的，因为 LCP 和 FCP 在 Lighthouse 性能得分中的权重总计为 35%（25% + 10%）。

但是，我们也可以减少布局偏移的发生。我们可以确保后备字体与自定义字体最佳匹配。您可以使用字体样式匹配器工具来实现这一点。

现在，让我们尝试优化获取实际字体的速度。我们可以使用preconnect来与重要的第三方来源（这里指的是我们的字体）建立早期连接。

接下来我们要做的就是告诉浏览器在页面生命周期的早期加载我们的字体。我们在 link 元素中使用preload来实现这一点。

这样，我们的字体就不太可能阻止页面的渲染，因为它会在浏览器的主渲染引擎启动之前加载。

最后，如果您选择自行托管字体，请确保使用现代 Web 字体格式——这里是 WOFF 2.0。WOFF 2.0 的压缩率比其前身 WOFF 提高了 30%。

第三方脚本（跟踪脚本和其他有趣的东西）

现在要说的是比《权力的游戏》结局更令人沮丧的事情（对不起布兰，但任何人的故事都比你更好）——第三方剧本。

从 Facebook 到 Google Analytics，再到 LinkedIn Insight Tag。第三方脚本的数量似乎无穷无尽。

当某个部门（我们不愿透露姓名）来找你并要求你添加 Facebook 页面插件，以便“我们的客户可以轻松关注我们的公司页面”时，你几乎可以感觉到你的灵魂离开了你的身体。

不过别担心，有办法克服这些障碍。还记得我们说过的平衡吗？

让我们从简单的开始——第三方脚本渲染内容，比如Facebook 页面插件。

负责呈现某种内容的脚本应该始终是延迟加载的，这意味着当您滚动到内容时才首先发出请求。

Facebook 页面插件实际上已经内置了此功能。只需插入 data-lazy=”true” 就可以了。

现在来看看更烦人的部分——所有的跟踪脚本。

如果您的网站仅针对欧洲访客，那么您很幸运。根据《通用数据保护条例》(GDPR) 和《电子隐私指令》(ePrivacy Directive)，您必须在用户接受的情况下才能合法设置跟踪 Cookie。

这意味着您的初始加载时间 - 并且您的核心网络生命力不会受到这些第三方脚本的影响。

问题解决了。关闭你网站，别再跑到欧洲去了——别担心，我们有啤酒🍻

没有？好吧，那我来表演个小技巧。

保留你的请求

首先，你当然应该只加载特定页面所需的第三方脚本。这意味着，如果你公司页面上有一个很酷的动画，需要用到 animate.css（不是脚本，而是样式表，请耐心听我说完），那么其他页面就不应该加载这个动画。

您可以使用Google Tag Manager之类的工具来管理和编排所有脚本。这正是我们在这个巧妙技巧中要用到的工具。

第三方脚本，例如 Facebook Pixel、LinkedIn Insight Tag，甚至您的聊天插件，并非必须立即请求。它们可以等到用户与网站互动后，或者经过一段时间后再请求。

我并不建议使用 Google Analytics 来执行此操作，因为您可能会丢失宝贵的数据。

然而，对于所有好东西，他们可以等待。

那么我们该怎么做呢？

在 Google 跟踪代码管理器中，您可以设置触发器来指示代码/脚本何时触发。这些触发器可以是条件触发器，这意味着您也可以将它们串联到 OR 语句中。

因此，对于我们的非关键脚本，我们可以设置一个条件来查找：

用户点击了任意元素（对于导航有用）
已滚动 5%（表示用户开始与网站互动）
5秒过去了（我们的初始加载已完成）。

一定要测试一下这些方法，看看是否一切正常。作为一个生活在玛格丽特·维斯塔格（Margrethe Vestager）监督下的人，我自己不会使用这种技巧。

从您的 CMS 加载内容

没错，我们把最好的留到了最后——提供实际内容。

有多种方法可以解决这个问题，但我们无法在本文中完全涵盖这个主题。

确保您的内容加载速度非常快的一种方法是使用静态站点生成 (SSG)，它在构建时呈现您的内容并将其作为（您猜对了） - 静态内容。

这确实性能出色，但灵活性略逊一筹。另一种选择是使用类似 Next.js 的增量静态再生(ISR) 之类的技术，它是服务器端渲染 (SSR) 和静态站点生成 (SSG) 的混合体。

再次强调，这很酷——但不是每个人都能利用这些渲染策略——许多组织都有一些需要通过 SSR 渲染的动态内容。

这些组织通常也不是那种你可以轻易说服他们放弃旧 CMS 并转向最新最好的无头 CMS 的类型。

从这些 CMS 获取数据可能很慢，甚至可能造成瓶颈。那么，我们该怎么办呢？

我们把它分离吧，宝贝。

如果您阅读了我之前的文章《使用 Google 表格作为您的 CMS》，您可能对这个概念很熟悉。

使用像我们自己的产品Enterspeed这样的解决方案，您可以将数据同步到高性能数据存储，同时仍保留编辑器体验。此外，您还可以将多个数据源转换并合并到单个调用中，从而减少请求数量。

分离 CMS 还会带来其他好处。您可以缩减服务器规模，因为它不再承担高流量负载。

如果您需要进行维护，您甚至可以将其关闭而不会影响您的站点。

将数据同步到 Enterspeed 还可以迁移到其他 CMS，或者迁移到当前 CMS 的更新版本。看看我们如何快速从 Umbraco V7 设置迁移到 Umbraco V10 设置。

不是自吹自擂，但这真的很贴心

总结

这篇文章可以一直写下去（感觉好像已经写得够长了），但总得有个结尾。我们并没有涵盖性能优化的所有内容，因为内容足够写一本书了。

我们没有涉及的一些内容是：

结论

建立一个超快的网站并不难。难的是，要让它看起来赏心悦目，并满足所有部门的需求。

幸运的是，我们可以通过进行一些优化调整并学习在速度、功能和视觉元素之间取得平衡来解决许多此类障碍。

记住，罗马不是一天建成的。这些事情需要时间，有时必须达成共识。与网站的每个利益相关者沟通，确保他们理解为什么所有要素之间需要协同作用。

文章来源：https://dev.to/enterspeed/making-a-fast-website-is-super-easy-9lb