作为跨境电商团队，如何优化网站首屏性能

导语：电商成功的敲门砖------首屏加载速度。在数字时代，网站性能如同电商的门面，迅速打开是前提，迟滞就容易失去商机。网站首屏性能就好比商店大门的开合，承载着用户留存的关键。秒开易成就交易，缓慢的加载则好比提前预埋了失望离开的种子。尤其在商业的较量中，首屏加载时间作为衡量性能的一环至关重要。

前言

我司是一家跨境电商公司，为北美、欧洲等几十个国家提供高质量的家居、户外和宠物用品等。为了给消费者打造便捷、愉悦的购物体验，利用好广告流量，保证最好的用户转化，尤其是随着狂欢的万圣节、抢购狂潮的黑色星期五和圣诞节等节日的来临，网站的性能面临更为激烈的挑战。

当前存在的问题

当前，我司面临的两大严峻问题愈发凸显：

1. 复杂监控难题： 必须同时监控美洲和欧洲十几个国家，全面观察整体访问情况、性能和错误。实时排查用户错误或卡顿以进行优化增加了难度。构建一个能够应对上百万访问和上亿点击量的监控平台，以及相应的数据收集和存储系统显得异常复杂，对团队提出了更高的技术、架构和管理要求。
2. 用户体验不佳： 首屏加载速度缓慢成为一个突出问题，直接影响用户的整体体验。这不仅对用户浏览产品和下单的过程造成了显著不便，更可能导致用户流失。改善首屏加载速度成为提升用户满意度和促进业务增长的迫切需求。解决这一问题不仅需要技术上的创新，还需要深入理解用户需求和行为，从而为他们提供更为流畅和愉悦的在线购物体验。

优化历程

首先，让我们回顾一下我们在前期所了解到的一些关键想法，这些需求对于深入了解和优化网站性能至关重要:

1. 网站访问的pv、uv和分布
2. 网站加载时间
3. 网站核心指标
4. 关键网络请求的性能
5. CDN的性能

针对上述需求，最初我们采用了实现核心需求的方法，即手写代码以收集部分性能指标。然而，随着时间的推移，我们逐渐认识到这种方式存在一些不可忽视的问题。

首先，维护这部分代码非常耗费精力。这要求我们拥有专门负责编写和维护监控代码的团队成员，这会增加团队的负担。而且，专注于监控代码的编写可能会分散团队的注意力，从而拖慢业务进展的速度。

其次，监控技术和需求不断演进，导致自建监控系统无法及时跟上。这意味着我们可能会错过一些新的监控技术和最佳实践，从而影响了我们对系统性能的全面了解。

最重要的是，自建监控平台的升级和优化也面临着安全性和稳定性的挑战。由于我们需要处理敏感数据和确保监控系统的高可用性，这增加了系统维护的难度和风险。

为了解决这些问题，我们决定转向更可持续和稳定的解决方案。我们采用现成的监控工具和平台，并引入专家资源的方式，既降低转嫁了维护的成本，确保能够及时跟进监控技术的发展。这将有助于提高团队的效率，减少潜在的风险，并确保我们能够更好地满足业务需求。

根据专家经验，通过一个简单的方案成功解决了首屏加载的问题。首先，让我们先来展示一下结果。

今天我们把这个过程分享出来，供大家参考。

一：分两个空间收集监控数据

我们把北美和欧洲数据分成两个空间，北美选择俄勒冈节点，欧洲选择法兰克福节点。北美俄勒冈节点收集加拿大和美国的数据。法兰克福收集意大利、英国、罗马尼亚、西班牙、法国、德国等十来个多家的数据。

解决了数据存储的难题，下一步就是收集哪些数据的难题。

首先是网站核心指标的采集，这是谷歌推荐的指标，从网站加载、用户交互和视觉稳定性三个方面来衡量。下面简单介绍一下：

• Largest Contentful Paint (LCP)：衡量加载性能。 为了提供良好的用户体验，LCP 应在网页首次开始加载后的 2.5 秒内发生。

• First Input Delay (FID)：衡量互动。为了提供良好的用户体验，页面的 FID 应不超过 100 毫秒。

• Cumulative Layout Shift (CLS)：衡量视觉稳定性。为了提供良好的用户体验，页面应保持 0.1 或更低的 CLS。

对于上述每个指标，谷歌推荐用户使用 P75 的数据。

以上内容来源于https://www.web.dev/articles/vitals

这里存在数据收集以及展示这两个问题，下面是我们解决的思路和过程：

1. 数据收集：

performance Observer是JavaScript API，基于观察者模式对网站核心指标进行回调数据。以下是实现的代码：

2. 第75个百分位：随着技术的提升，仅仅达到75分位可能不一定满足要求，有可能需要达到90分位甚至99分位的数据。在这方面，我们需要提前做好规划，比如使用直方图可以直观、清晰地了解性能分布，从而确定网站的优化方向。下图展示了我们在一段时间内收集到的LCP（大内容绘制）的直方图：

通过图表分析，我们发现尽管P75的数据达到了2.5秒的标准，但仍然有很多用户的加载时间超过了2.5秒。显然，对于电商场景来说，P75的2.5秒已经无法满足性能优化的需求。

因此，我们需要设定更符合电商场景的LCP（最大内容绘制）分位值。根据专家建议，我们综合考虑了P75和P90这两个数据，以更全面的视角观察性能表现。这种分析方法有助于更精确地把握电商网站性能的关键指标。

二：性能优化的技术思路

专家首先为我们解释了网站加载资源的拆解，一般的做法是对下图的各个阶段进行分析，这里展示了performance的不同阶段。

然而，就在我们计划按照上述思路对收集到的数据进行分析时，专家却带来了一场全新的解释。他指出多个资源之间存在相互依赖又相互竞争的关系，并强调我们需要首先理解整体流程，然后再深入研究局部情况。

这一新的视角让我们更全面地把握了网站加载过程中各个要素的相互关系，为更有针对性地优化提供了清晰的方向。

依据专家建议下，我们制作了如下图表，分别包含7日的性能数据的核心指标。

经验和上图都表明，每个阶段在性能加载方面都至关重要。因此，专家建议我们从数据分析的角度出发，专家的分析给了我们很多a（惊） ha（讶）的时刻，举个例子LCP通过蜂窝图的展示方式时，我们发现了很多我们意想不到的页面，竟然会加载几十秒。

专家以蜂窝图的形式给我们展示了7天内网站LCP的性能情况，如果LCP低于2.5秒就显示为绿色，如下图所示，我们看到绿色的页面不足50%；

通过专家使用加载性能模型进一步数据分析(这部分素材暂不公开)，专家确定性能瓶颈主要出现在HTML传输阶段。

为了更好地说明，专家绘制了一张散点图，展示了HTML传输时间和LCP加载时间之间的关系。散点图是一种常用于呈现两个变量之间关系的图表工具，它可以帮助我们更清晰地理解这两个变量之间的相互影响。

通过仔细观察图表，专家提供了一些实际降低HTML加载时间的建议，以改善LCP加载时间。

这里优化的方向就非常明显了，此时专家也利用chrome携带的devTools为我们专门做了性能的分析，下图也侧面验证了优化html传输时间的思路，因为我们从图上看到白屏的2s时间中，有1.5s都是在加载html。

三：性能优化的措施

找到优化的核心后，具体的实施变得相对简单。我们最初的策略是专注于减小HTML文件的大小。通过对具体业务代码的调整，大家从下图也能看到我们成功将文件的平均大小从500KB降低到300KB-450KB范围内（这里指的是原始大小）。因为这一过程主要是优化了一些模板类的内容，就不在这里展示了，我们计划在后续针对这个过程提供更详细的优化内容。

通过观察上图，显而易见的是我们成功地降低了HTML资源的大小，如下图所示，优化后的html的大小在50kb-100kb左右。

html大小直接降低了html的传输时间，这一优化措施不仅使得网页加载更加迅速，同时在性能指标上也取得了显著的成果。这对于提升用户体验和确保网站顺畅运行起到了积极的作用。

四：性能优化的效果

仅仅通过调整HTML的大小，我们就成功地实现了首屏加载性能的显著提升。这一优化措施不仅使得网页加载更加迅速，而且在性能指标方面取得了卓越的成绩。

具体而言，我们将P90 LCP（页面加载完成的关键元素显示时间）从原来的2.1秒降低至令人惊叹的1.43秒，同时将P75 LCP从1.43秒降至1.18秒。

这一系列的性能改进为用户创造了更为顺畅、高效的购物环境，使得他们能够更快速地访问和浏览网站内容。这不仅提高了用户体验，也为促成更高的转化率和用户满意度奠定了坚实的基础。

意外收获1：压缩文件存在较大的突刺？

在上图也能看到一些突刺：

专家专门针对这部分突刺做了分析与优化，从别从域名、页面组、地域等维度，最终查找出真凶：购物车和某个页面。这下子优化的方向又来了。

意外收获2：LCP降低后提高了用户的活跃程度

优化前LCP与用户的时序图：

优化后LCP与用户行为的时序图

尽管用户仍可能存在不点击或多次点击的情况，然而，我们观察到购物车内出现一次不点击的行为相比之前有所减少。这表明我们在用户体验方面的改进取得了初步成果，用户在浏览购物车时更倾向于采取明确的行动。

这积极的趋势可能反映了我们在首页、或购物车也得性能优化产生了良好的效果，从而更有效地引导用户完成他们的购物体验。这种变化不仅有助于提高购物车的实际效用，同时也为用户提供了更顺畅、令人满意的购物过程。我们将持续关注这一趋势，并不断优化以确保用户在购物车中得到最佳的交互体验。

意外收获3：性能提升也提高了用户的探索欲望

性能的提升不仅仅是数字指标的提高，更是点燃了用户的热情与投入，为整个电商平台注入了全新的活力。让我们看看数据背后蕴含的惊人变化：用户在首页的平均点击次数从之前的1.1激增至1.8次，而购物车的平均点击次数也从1.6攀升至2次。这绝非巧合，而是用户对平台的浓厚兴趣和深度互动的有力呼应。

这种积极的用户反馈不仅在数字上留下了耀眼的成绩单，更展示了电商平台在任何角落都闪耀着无限的机遇与活力。用户更频繁的点击行为揭示了他们对平台内容和产品的更深层次浏览，为提升转化率、提高用户满意度以及培养用户黏性奠定了坚实的基础。

这种全面升级的用户行为不仅为电商平台带来了新的发展机遇，更是平台强大吸引力和用户体验全面提升的生动体现。每一次点击都是用户对平台信任的延续，同时也是对于网站改善的肯定。这正是电商平台追求卓越用户体验的关键所在，而这样的用户投入为平台未来的发展开启了崭新的篇章。

结语：

构建性能平台在跨境电商网站首屏性能优化与监控保障方面具有诸多好处。

首先，性能平台的建设可以有效解决监控的难度大的问题。通过建立统一的性能监控平台，涵盖美洲和欧洲等多个国家，可以实现对整体访问情况、性能和错误的全面监控。这有助于快速发现和解决性能瓶颈，提升网站的整体性能。

其次，性能平台的建设有助于实现对用户体验的全面监测。通过监控平台，可以实时查看用户行为、定位问题并进行优化。在文章中提到的例子中，构建性能平台帮助定位了首屏加载速度慢的问题，为进一步优化提供了有力的数据支持。

第三，性能平台可以为数据的准确收集和存储提供有力保障。在文章中，为了应对上百万访问和上亿点击量的挑战，构建了两个空间进行数据的分布收集。这样的平台设计使得数据管理更为高效，为后续的性能分析和优化提供了可靠的基础。

最重要的是，性能平台的建设为持续性能优化提供了可靠的基础。通过对监控数据的不断分析，可以及时发现并解决潜在问题，实现对性能的迭代优化。而且，构建性能平台使得整个优化过程更加系统化和可持续，确保网站在不同场景、节假日等情境下都能保持良好的性能表现。

综上所述，构建性能平台为跨境电商网站首屏性能优化和监控保障提供了全面而可靠的解决方案，为提升用户体验、应对挑战和创造业务机会提供了强大的支持。

下一步计划

我们将进一步提高关键环节的性能指标，配置多维度的监控预警策略，建立对CDN的监控，以及实现对渠道转化和性能的进一步探索和分析。