Web性能优化及相关故事 — upgrad.com

背景介绍

2021年1月，我们查看了upGrad网站的速度评分，并承认这些分数需要大幅改进。Lighthouse是衡量Web性能的流行且极其有用的工具，而upGrad.com的分数勉强超过两位数。情况并不理想，但对我个人来说却很兴奋，因为它提供了一个需要解决的实际问题。

tl;dr 我们成功改善了网站性能，Lighthouse分数在移动端和桌面端分别从约5分和15分提高到约50分和70分。

网页加载之旅

浏览器从服务器接收到第一块HTML时，通常会经历以下流程：

场景分析

场景1：纯HTML

1
2
3
4
5


<html>
    <body>
        <h1>Hello</h1>
    </body>
</html>

解析器将从顶部开始，继续识别相应的节点。最后，通常会有一个语法树，它将镜像相应的DOM树。

场景2：添加CSS

1
2
3
4
5
6
7
8


<html>
    <head>
        <link rel="stylesheet" href="/main.css" />
    </head>
    <body>
        <h1>Hello</h1>
    </body>
</html>

页面上的任何形式的CSS都是渲染阻塞的。这意味着在所有CSS解析完成之前，渲染器不会绘制页面。

场景3：添加JavaScript

1
2
3
4
5
6
7
8
9


<html>
    <head>
        <link rel="stylesheet" href="/main.css" />
        <script>console.log('Hello from JavaScript!');</script>
    </head>
    <body>
        <h1>Hello</h1>
    </body>
</html>

页面上的任何形式的JavaScript通常是解析器阻塞的。在脚本执行之前，HTML解析被阻塞。

关键优化策略

1. 延迟加载非必要内容

影响： 可交互时间（TTI），首次内容绘制（FCP）

必须延迟/懒加载对首次加载不关键且不影响SEO的所有内容。这包括模态框、非关键脚本、图像、样式表和应用程序的代码块。

对于我们的网站，当我们懒加载所有模态内容时，看到了相当大的差异。由于它本身是一个分离的模块，我们可以轻松做到这一点。

2. 限制关键资源 — 缩短关键渲染路径

影响： 首次内容绘制（FCP），最大内容绘制（LCP）

关键渲染路径（CRP）是页面在浏览器中从浏览器接收到响应的第一个字节（HTML）到页面开始变得可见的过程。我们的目标应该是尽可能缩短这个路径。

页面初始HTML响应应仅包含关键CSS — 页面正确样式所需的CSS。所有其他CSS可以懒加载。异步加载CSS的一种流行方式是使用link标签的media属性。

1
2
3
4
5


<link
    rel="stylesheet"
    href="/link/to/file.css"
    media="print"
    onload='this.media="all",this.onload=null'/>

3. 预加载关键资源

影响： 最大内容绘制（LCP）

另一个重要实践是预加载所有关键资源。如果您的网站在首屏有图像，必须预加载它，以便尽快在视觉上可用。

可以使用preload关键字来实现这一点，许多打包器会自动为您执行此操作。

1

<link rel="preload" as="image" href="banner-image.webp" />

性能改进成果

经过4个月的努力，我们的LCP（在桌面设置中）改进情况如下：

LCP从3.9秒降低到0.9秒
开始渲染时间从4.2秒改进到0.4秒
Lighthouse分数显著提升

未来计划

性能基准测试 — 我们已经改进了分数，但现在我们的工作是维持它们。
性能优化的组件 — 我们正在考虑用更轻量级的替代品替换某些共享UI组件。
Brotli压缩和基础设施级更改 — Brotli已启用，但在实施方面需要一些改进。

总结

Web性能是一个对开发人员和产品所有者都很重要的领域。通过系统的优化策略和持续的努力，我们成功将网站性能提升了数倍。这个过程充满了试验和错误、研究和阅读，但改进和维护性能的一致努力确实会带来丰厚的回报。

相关资源已在需要时链接，更多详细信息请参阅原文。

从17分到65分：upGrad网站性能优化实战

本文详细记录了如何将upGrad官网的Lighthouse性能评分从17分提升到65分的完整过程。涵盖关键渲染路径优化、资源懒加载、CSS/JavaScript阻塞问题解决等核心技术方案，以及具体的实施策略和效果验证。