电商网站的加载速度是影响在线购物体验舒适度的重要因素。要显示电商网站的页面，Chrome、Safari等浏览器需要从服务器获取并解析HTML、CSS、JavaScript、图片文件等资源，这需要一定的时间。
导致页面加载变慢的原因在于HTML、CSS、JavaScript、图片文件等存在某些问题，使得浏览器的读取和处理耗时较长。通过优化代码编写方式和使用方法，减轻浏览器的处理负担，往往能改善页面加载速度。
因此，本次将介绍在感到页面加载缓慢时，在考虑增加服务器资源或修改电商系统之前，建议优先确认的6项提升电商网站加载速度的对策。
- 浏览器显示电商网站页面的机制
- 提升电商网站加载速度的6项对策
- 1. 尽可能快速显示首屏（改善感知速度）
- 2. 缩短页面加载时间（改善感知速度）
- 3. 减少浏览器处理负担（改善处理速度）
- 4. 减小并减少需加载的文件体积与数量（改善处理速度）
- 5. 减少显示内容（改善处理速度）
- 6. 重新审视外部服务及广告标签
- 加载速度的测量方法
- 总结
浏览器显示电商网站页面的机制
浏览器是指用于显示网页的应用程序。电商网站的界面，即Web页面，是通过Chrome、Safari等浏览器进行显示的。下面简要介绍浏览器是如何处理Web页面显示的。
- 浏览器访问URL栏中指定的服务器。
- 服务器将指定URL的内容（即HTML文件）发送给浏览器。
- 浏览器读取HTML并解析其内容。
- 如果HTML中包含图像文件、JavaScript文件和CSS文件等，则分别访问相应的服务器并下载这些文件。
- 将下载的文件与HTML的记载内容一起进行解析。
- 如果有JavaScript，则执行它并将处理结果反映出来。
- 如果有CSS，则对其进行解析并反映到屏幕显示上。
- 将解析结果以人眼可见的形式显示出来。
页面显示通过这8个阶段完成。如果觉得页面显示缓慢，可以认为其中某个阶段存在问题。
处理速度与感知速度的区别
当我们谈论页面显示是快还是慢时，请认为页面显示速度包含两个方面。
处理速度
处理速度是指浏览器完成Web页面所有显示处理所需的速度。即已读取所有文件，并完成了解析和显示处理。
感知速度
感知速度是指，在智能手机或PC等屏幕上，从开始加载到首屏内容（无需滚动即可显示的内容）完全展示完毕所需的速度。
对于屏幕尚未显示的后续内容，浏览器仍在进行渲染处理，但浏览者无法察觉。
改善电商网站加载速度的6项对策
本文将详细讲解改善电商页面加载过程中感知速度与处理速度的6项对策。
1. 尽可能快速展示首屏内容（提升感知速度）
针对首屏内容的优化措施有助于提升感知速度
应确保在智能手机或PC等屏幕上最先显示的内容（即首屏内容），优先于页面中下部其他内容呈现。
一旦首屏内容成功展示，访问者便会感觉页面已加载完成，从而有望实现感知速度的提升。
首屏内容建议将CSS代码直接嵌入HTML文件中；同时，最好避免使用需要JavaScript处理的复杂内容。
如果确实需要使用JavaScript，应将JS代码直接写在HTML内部。这样做可以节省加载外部JS文件和CSS文件的时间，因为直接将代码写入HTML后，甚至能省去获取这些文件的请求过程。
对页面底部内容进行延迟加载
故意推迟内容显示的做法称为“延迟加载”（Lazy Loading）。当用户访问电商网站时，不应一次性展示页面的所有内容，而是对首屏之后的内容以及页面底部的内容进行延迟加载。
具体而言，可通过JavaScript指定：待页面上部内容显示完毕后，再开始渲染页面下部内容。这样可使上部内容的渲染处理获得优先执行权，进而提升感知速度。
此外，请注意不要对首屏内的图片文件实施延迟加载。虽然有些案例会将页面内所有图片都设为延迟加载对象，但这会导致必须等待所有图片下载完成后才展示首屏，反而降低感知速度。首屏将在页面内所有图片加载完成后显示，因此感知速度反而会更慢。
2. 缩短页面加载时间（改善感知速度）
按需加载隐藏内容
对于最初在标签页中不显示的内容、弹出式内容等，应在显示时进行加载。
应编写代码，使得在点击标签或按下弹出链接时执行JavaScript，而在首次显示页面时不处理这些内容。这样可以缩短因处理未显示内容而花费的时间。
3. 减少浏览器处理量（提升处理速度）
正确编写CSS
浏览器会计算页面内所有内容在屏幕上显示的尺寸。
虽然CSS中可以混合使用“%”、“rem”、“em”、“px”等多种指定方式，但在屏幕显示时，浏览器必须将所有单位换算为像素。如果内容的显示尺寸没有以像素为单位正确指定，浏览器为了使其能在屏幕上正常显示，会进行重新计算。
此外，当通过JavaScript处理使页面内的内容显示出来时，也会计算该内容的显示尺寸。即使其他内容的尺寸计算已经完成，为了显示新内容，浏览器也会进行重新计算和重新渲染。
如果新增内容对周围内容产生影响，则会将这些内容一并重新计算。
像这样，多次执行决定屏幕显示内容的处理过程，一旦确定的尺寸或位置发生变化，这种现象称为布局偏移（Layout Shift）。布局偏移是导致显示处理速度变慢的原因。
也就是说，为了让内容的显示尺寸能够尽可能快速且准确地计算，应正确编写CSS以确保指定的数值没有矛盾，从而防止布局偏移，这有助于提升速度。为了让内容的显示尺寸能够尽可能快速且准确地计算，应正确编写CSS以确保指定的数值没有矛盾，从而防止布局偏移，这有助于提升速度。
即使进行延迟加载的内容，其显示处理本身也不会消失，因此请提前预留内容的显示区域，避免浏览器进行重新计算。
此外，虽然平板电脑和智能手机等设备的屏幕尺寸会因显示设备而异，但利用媒体查询（一种可根据屏幕宽度指定CSS的机制），可以预先设想并编写CSS。
减少CSS描述内容的重复
减少CSS的重复描述也有助于改善页面的显示速度。
CSS可以对相同的HTML标签或“id”、“class”等属性进行重复指定。如果进行了重复指定，浏览器将按照优先级顺序依次解析，并决定最终的显示设计。
例如，在像“html”、“body”、“div”这样影响较大的标签上进行重复指定时，会对浏览器的显示计算产生较大影响。此外，当通过JavaScript执行应用新的CSS时，浏览器将进行重新计算。
如果应用多个CSS文件，浏览器需要读取的文件量会增加，导致产生不必要的处理，最终导致显示速度下降。
如果在EC平台初始应用的CSS中，确保所设置的CSS与其不重复，则可以期待速度的提升。
4. 减少加载文件的容量和数量（提高处理速度）
图像
与JavaScript或CSS相比，图像文件通常具有较大的文件容量。而且，如果数量众多，下载的文件总容量也会相应增加。
请检查每个图像文件的文件容量，确认是否存在不必要的大容量文件。虽然根据图像文件类型的不同而有所差异，通过调整压缩率和颜色数量等参数，可以减小文件容量。
Web字体
在EC网站中使用Web字体时，需要从服务器下载CSS中指定的Web字体，这一过程会导致页面加载时间变长。
将Web字体更改为系统字体（iOS、Android、Windows和Mac上预装的字体），有可能提高显示速度。
HTML标签
HTML标签可以通过注释或CSS指定来隐藏，但即使是隐藏的 content，也会影响HTML文件的大小。实际上，经常可以看到一些过去使用过的HTML标签被隐藏后仍保留在代码中的情况。
如果删除不显示的HTML标签，可以减少浏览器需要读取的HTML标签数量，从而有望提升处理速度。
JavaScript文件和CSS文件
当浏览器加载文件时，外部文件的加载次数越多，浏览器与外部服务器之间的请求和响应处理所需的时间就越长。
例如，如果URL错误，浏览器会等待一段时间后才会报错，因此会额外消耗时间，最终导致页面显示延迟。
特别是，浏览器反复重复加载外部文件的“多重加载”是导致EC网站显示速度下降的原因之一。请尽量将代码写在HTML内部，以减少对外部文件的加载处理。
例如，有些情况下，“更新信息”、“最新信息”等内容在外部进行管理并通过JavaScript显示，因此会将更新内容作为外部文件以数据（JSON）形式运行。
在这种情况下，在JavaScript执行过程中会进行数据（JSON）文件的加载、解析和显示处理，这不仅会增加处理时间，还会影响用于显示的尺寸计算。
在明确页面内容的更新频率和优先级后，请确保考虑周到，以免对感知速度产生影响。
如果直接在HTML标签中编写内容，与加载外部文件相比，有望提升显示速度。
5. 减少显示内容（改善处理速度）
删除优先级较低的内容
如果实施上述措施后显示速度仍未改善，建议考虑减少该页面的内容。
随着EC网站运营时间的延长，会积累大量内容，导致页面往往变得很长。虽然人们倾向于刊登看似有用的内容，但请从浏览内容的人的角度进行思考。
在用户浏览页面的短暂时间内，这些内容是否值得被看到？它们是否有助于促进商品选择？即使牺牲页面显示时间，这些内容是否仍应展示？
页面内的内容越少，浏览器的处理时间就越短。请确定内容的优先级，并将优先级较低的内容隐藏或删除。
6. 重新审视外部服务和广告标签
为什么外部服务和广告标签会影响性能
浏览器处理速度下降的原因之一，可能是与EC网站集成的外部服务（如聊天工具、营销自动化工具、网络接待工具等）以及用于广告效果测量的标签。这是因为几乎所有外部服务和广告测量都基于JavaScript运行。
因此，在引入了多个外部服务的EC网站中，JavaScript的加载和处理可能会花费较长时间，从而导致页面显示速度变慢。
同样地，在安装了多个广告测量标签的EC网站中，JavaScript的加载和执行也可能需要花费较多时间。
即使单个外部服务或广告标签单独使用时不会影响显示速度，但它们的组合可能会对显示速度产生负面影响。即使单个外部服务或广告标签单独使用时不会影响显示速度，但它们的组合可能会对显示速度产生负面影响。我们常看到一些案例，即停止使用的外部服务或广告测量标签未被删除而继续保留。通过适当的管理，有望防止显示速度的下降。
确认外部服务和广告标签影响的步骤
要解决由外部服务和广告标签引起的显示速度延迟，以下措施是有效的。
- 移除EC网站上使用的所有外部服务和广告标签，并检查EC网站的显示速度。如果移除后显示速度得到改善，则表明这些外部服务或广告标签中的某一个可能是导致显示速度下降的原因。
- 逐一重新启用之前移除的外部服务和广告标签，并在每次启用时检查显示速度。如果在启用某个外部服务或广告标签后显示速度下降，则可以认为该外部服务或广告标签很可能是造成速度延迟的原因。
- 如果逐个测试仍无法确定原因，请尝试组合设置几个外部服务和广告标签以验证显示速度的变化。即使单独使用时没有问题，组合使用时也可能会产生影响。
显示速度的测量方法
Chrome开发者工具
在测量EC网站的显示速度时，利用 Chrome 开发工具会更方便。
打开 Chrome 开发工具的 Network 标签页，即可按文件显示“页面加载顺序”和“加载耗时（毫秒）”。Waterfall 部分显示的柱状图越长，表示加载所需时间越久。
通过查看 Network 标签页，可以了解各个文件在何时被下载。结合页面呈现的过程进行确认，应该能够检查 HTML、CSS、JavaScript、图片文件等是否存在问题，以及浏览器的加载或处理是否耗时过长。
关于测试环境
在验证浏览器显示速度时，在多种设备和环境下进行测试也很重要。这是因为用于测量的设备的处理速度（如 CPU、GPU 等规格）以及防病毒软件等会影响显示速度。
由于测量时的通信环境也会影响显示速度，因此不仅要在公司内部网络中测量，还应在各运营商网络和一般公共网络（家庭用）中进行测量。
总结
当您感觉 EC 网站的显示速度较慢时，曾采取过哪些改进措施？
人们往往认为 EC 网站显示速度慢是由于服务器规格或 EC 平台系统存在问题，但正如本文所解释的，通过重新审视 EC 网站上使用的文件，显示速度往往会得到改善。
请参考本文中介绍的对策，致力于打造一个让用户感到舒适的 EC 网站。