Published on

Web前端性能优化最佳实践

标签：Performance

高优先级

  • 避免使用 iframe

    仅在没有其他技术可能性的情况下才使用 iframe。尽量避免使用 iframe。iframe 不仅会影响性能，还会影响可访问性和可用性。搜索引擎也不会索引 iframe。

  • 最小化 CSS

    当 CSS 文件被压缩后，内容加载速度会更快，发送到客户端的数据也会更少。在生产过程中始终压缩 CSS 文件非常重要。这对用户和任何想要降低带宽成本和降低资源使用率的企业来说都是有益的。 在构建或部署之前或期间使用工具自动缩小文件。

  • 非阻塞 CSS

    CSS 文件可能会阻止页面加载并延迟页面的呈现。使用preload实际上可以在浏览器开始显示页面内容之前加载 CSS 文件。

    <link rel="preload" href="style.css" as="style" />

  • 避免内联 CSS

    将内容与设计分开是一种很好的做法。它还可以帮助您获得更易于维护的代码并保持站点的可访问性。但就性能而言，这仅仅是因为它减少了 HTML 页面的文件大小和加载时间，使用外部样式表或嵌入 CSS <head>（并遵循其他 CSS 性能规则）

  • 样式表的复杂性

    降低样式表的复杂性，浏览器将更快地读取它们，使用 CSS 预处理器可以有所帮助。

  • 图像优化

    图像经过优化和压缩，不会对最终用户产生直接影响，优化的图像在浏览器中加载速度更快，且消耗更少的数据。

    • 尽可能尝试使用 CSS3 效果
    • 使用 SVG
    • 使用工具压缩。

  • 图像格式

    适当地选择图像格式，每种图像格式都有优点和缺点，了解这些优点和缺点对于做出最佳选择非常重要。

  • 压缩 JavaScript

    压缩JS文件能够加快网站的页面加载时间，并明显减轻用户的下载负担。

  • 非阻塞 JavaScript

    JavaScript 文件使用 async 异步加载或使用 defer 属性延迟加载。

    <!-- Defer Attribute -->
<script defer src="foo.js"></script>

<!-- Async Attribute -->
<script async src="foo.js"></script>

  • 使用 HTTPS

    现代浏览器会限制不安全网站的功能。

  • 页面加载时间

    网站或应用速度越快，跳出率就越低，尽可能减少页面加载时间，以便快速将内容传递给用户。使用Page Speed Insights或WebPageTest等在线工具来分析可能导致加载速度变慢的原因。

  • 减少 HTTP 请求

  • 避免请求无法访问的文件

    404 请求会降低网站的性能并对用户体验产生负面影响。此外，它们还会导致搜索引擎抓取和索引不存在的页面，这会对搜索引擎排名产生负面影响。为了避免 404 请求，请确保网站上的所有链接均有效，并且所有损坏的链接均已及时修复。

  • HTTP 缓存

    设置 HTTP 标头以降低浏览器和服务器之间的往返次数。

  • 启用压缩

    使用 Gzip 或 Brotli 等压缩方法来减小 JavaScript 文件的大小。文件大小越小，用户下载资源的速度就越快，从而提高性能。

    # 开启服务器实时gzip
gzip on;
# 开启静态gz文件返回, 例如 /dist 文件夹的gz文件，其他的是实时压缩
gzip_static on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# 设置压缩所需要的缓冲区大小
gzip_buffers 32 4k;
# 设置gzip压缩针对的HTTP协议版本
gzip_http_version 1.0;
# gzip 压缩级别，1-9，数字越大压缩的越好，也越占用CPU时间
gzip_comp_level 7;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript application/x-httpd-php image/jpeg image/gif image/png application/vnd.ms-fontobject font/ttf font/opentype font/x-woff image/svg+xml;
# 是否在http header中添加Vary: Accept-Encoding，建议开启
gzip_vary on;
# 禁用IE 6 gzip
gzip_disable "MSIE [1-6]\.";

中优先级

  • 使用CDN

    使用 CDN 来提供静态资源，这将减少服务器的负载并提高网站的性能。

  • 尽量使用矢量图

    矢量图像 (SVG) 往往更小，而且 SVG 响应迅速，缩放完美。这些图像可以通过 CSS 进行动画处理和修改。

  • 避免使用 Base64 图像

    首先，Base64 编码的图像比二进制图像更大，这会减慢网站的加载时间。

    其次，由于 Base64 编码的图像直接嵌入在 HTML 或 CSS 中，因此它们包含在初始页面加载中，这可能会给互联网连接速度较慢的用户造成延迟。

    第三，Base64 编码的图像不会从浏览器缓存中受益，因为它们是 HTML 或 CSS 的一部分，而不是单独的资源。因此，每次加载页面时，图像都会重新下载，即使用户之前访问过该页面。

    第四，Base64编码的图片与一些老版本的浏览器不兼容。

  • 图片懒加载

    它将提高当前页面的响应时间，从而避免加载用户可能不需要的不必要的图像。

  • JavaScript 性能

    JavaScript 的复杂性会降低运行时性能，识别这些可能的问题对于提供最流畅的用户体验至关重要，使用 Chrome 开发者工具中的时间线工具评估脚本事件并找出可能耗费过多时间的脚本。

  • Cookie大小

    Cookie 在 Web 服务器和浏览器之间的 HTTP 标头中交换。保持 Cookie 尽可能小很重要，以最大限度地减少对用户响应时间的影响。

低优先级

  • 检查依赖项大小

    注意比较并选择最适合您需求的最佳轻量级库，例如，MomentJS 是一个很棒的库，但其中有很多方法您可能永远不会用到，这就是 Day.js 诞生的原因。它只有 2kB，而 Moment 的 gz 则有 16.4kB。

  • 使用 WOFF 2.0 Web 字体

    据 Google 称，WOFF 2.0 Web 字体压缩格式比 WOFF 1.0 平均增益为 30%。因此，最好使用 WOFF 2.0、WOFF 1.0 作为后备方案和 TTF。

  • 网页字体大小

    使用的字体越多，浏览器下载和呈现页面所需的时间就越长，也可能成为主要的性能瓶颈，导致用户体验不佳和跳出率高。

性能分析工具

  • Page Speed Insights
  • PaLighthouse
  • WebPageTest
  • Chrome DevTools
  • Bundlephobia
  • Squoosh.app