随着2018年7月“PageSpeed Insights（页面速度洞察）”的更新以及2021年6月“Core Web Vitals（核心网页指标）”的引入，日本国内对提升网站加载速度和用户体验的关注度日益提高。
“网上商店道场”第5期的主题是网站加载速度。从事Web制作业务的Design Family代表大伴纯平先生表示，旨在利用“PageSpeed Insights”进行优化，打造既受Google青睐、也受访问EC网站用户喜爱的网站。
什么是网站的重要指标“Core Web Vitals”？
Google于2021年6月引入了“Web Vitals”，旨在提升网页加载速度和用户体验（UX）。
- 移动友好
- 安全浏览
- HTTPS
- 不存在阻碍内容访问的插页式广告
- 网站的加载速度……最大内容绘制（LCP）
- 网站的响应性……首次输入延迟（FID）
- 网站的视觉稳定性……累计布局偏移（CLS）
Google基于这些“Web Vitals”对网站进行评估，并将评估结果反映在搜索排名中。其中，第5至第7项被称为特别重要的指标“Core Web Vitals”。确认和改善“Core Web Vitals”不可或缺的工具是“PageSpeed Insights（页面速度洞察）”。正是如此。
大伴先生指出
改善“Core Web Vitals”意味着改善用户访问网站时的第一印象（首屏视图）。“PageSpeed Insights”是提升网站性能、优化用户体验的一款非常优秀的工具之一。
重要的是实地数据，而非评分
接下来，请读者朋友们一边通过PageSpeed Insights查看自家网站的分析结果，一边继续阅读。
分析结果是否已显示？正如笔者一样，许多人在查看分析结果页面时，关注的往往是图中右侧的评分。
大伴氏
经常听到的烦恼是“分数无论如何都提不上去”。真正需要关注的不是分数，而是现场数据。
所谓“现场数据”，是指实际访问该页面的用户环境下的显示速度等统计数据（仅当使用Chrome浏览器且满足障碍报告自动发送、历史记录同步等条件※1时，才会被纳入统计对象）。
在现场数据中，尤其重要的是查看各项目的绿色、橙色和红色仪表；达到绿色即为合格线。如果超过75%的页面访问呈现绿色（表示满足Core Web Vitals的标准※2），则判定为合格。大伴氏表示：“为了提供更优质的用户体验，每天进行改善以使90%以上的部分变为绿色至关重要”。
※1 https://developer.chrome.com/docs/crux/methodology/?hl=ja#user-eligibility
※2 https://web.dev/defining-core-web-vitals-thresholds/
改善所需的6个查看项
在“PageSpeed Insights”的评分栏下方，会显示针对错误的改进建议。然而，即使解决了改进建议中的问题，分数也不会立即反映出来。那么应该看哪里呢？需要查看的是下图所示的6个项目。
各项目及大伴氏认为的重要性如下所示。
- 首次内容绘制（FCP）／首次内容渲染……重要度10%
- 速度指数（SI）／速度指数……重要度10%
- 最大内容绘制（LCP）／最大内容渲染……重要度25%
- 可交互时间（TTI）／变为可交互所需的时间……重要度10%
- 总阻塞时间（TBT）／总阻塞时长……重要度30%
- 累计布局偏移（CLS）／累计布局偏移……重要度15%
大伴氏
如何改善这6项指标将有助于提升用户体验和“PageSpeed Insights”的分数。如果网站的首屏能够流畅显示，分数就会较高。消除导致无法流畅显示的瓶颈是提升性能的关键。
消除延迟原因的3种速度优化方法
要提升显示速度，必须解决导致延迟的瓶颈。三大要素如下所示。
- 图片
- JavaScript
- CSS
接下来，我将根据讲座中听到的内容，对各自的具體优化方法进行总结。
1. 通过“图片”进行速度优化
从重要性来看，图片是最高的。特别是在电商网站中，图片可能占整个页面的一半以上。减轻图片负载是最容易见效的优化方法。
1-1 将图片本身调整为显示尺寸
如果图片的实际尺寸与网页上的显示尺寸不一致，会导致数据容量白白增加。
1-2 在不影响画质的范围内减轻文件大小
若为了提升显示性能而对图片进行轻量化处理，希望在不影响画质的范围内进行。为此，可以采用“删除元数据”或“优化”等方法。
"元数据"是指除了图像主体之外，作为附加信息保存的数据，如拍摄日期、地点以及预览图像等。即使从图像文件中删除这些元数据，也不会对网站上的显示产生任何影响，有时还可以实现轻量化。
"优化"是一种在大多数人类无法察觉的范围内优化图像数据以减少文件大小的方法。例如，只需将图像拖放到 "JPEGmini" 等工具上，就可以在不明显改变图像外观的情况下实现轻量化。
1-3 选择合适的图像格式
网站上存在多种图像格式。
- JPG……商品写真或渐变图像等色彩丰富的图片适合使用。
- PNG……由于支持背景透明，常用于裁剪图像。
- SVG……放大后不会出现锯齿，常用于标志等设计。
每种格式都有其特点，根据目的加以区分使用，可以避免出现“数据容量过大”的情况。
1-4 也值得关注 WebP（韦皮）。
由 Google 开发的图像格式“WebP”数据容量小，且能实现 JPG 无法做到的背景透明功能，国内大型网站也已采用。可通过 Photoshop 插件或“Squoosh”等在线转换工具进行转换。
1-5 执行延迟加载和异步处理
"延迟加载"是指在初始阶段不加载首屏下方不可见区域的图像的处理方式。只需在图像的 HTML 标签中添加 `loading='lazy'`，即可快速完成页面显示。当用户滚动到图像附近时，系统会自动加载该图像。
"异步处理"是指将图像文件读取的数据还原为人眼可见图像状态的处理，与用于页面显示的其他处理并行进行。只需在图像的 HTML 标签中添加 `decoding="async"`，即可实现异步处理，从而稍微加快页面的显示速度。
1-6 注明 "width" 和 "height"
如果图像的 HTML 标签中没有注明图像的宽度（width 属性）和高度（height 属性），会导致页面显示出现错位。这是因为浏览器在布局页面内容并显示正文等内容后，只有在读取图像数据阶段才会确保显示图像的位置，从而导致显示错位。
"Core Web Vitals" 中有一个名为 "CLS" 的关于布局错位的指标，但如果正确指定了图像 HTML 标签中的 width 属性和 height 属性，就可以减轻 CLS 的恶化。
2. 通过“JavaScript”提升速度
JavaScript被广泛用于实现“返回页面顶部”或“主视觉图滑动”等多种功能，是影响用户能够操作页面所需时间的关键因素。据称，通过以下改进措施，有望大幅提升评分。
2-1 务必在CSS之后编写
如果JavaScript代码位于HTML中间，页面的加载过程会被暂时中断。因此，用于计量的JavaScript等代码应统一放置在HTML末尾。
2-2 进行异步处理
与图片类似，通过对JavaScript也进行异步处理可以进一步提速。通过在合适的时机以恰当的方式加载处理程序，可以消除延迟。
2-3 不加载页面中未使用的文件
对于仅在首页使用的轮播图等组件，应尽可能删除该页面未使用的JavaScript代码，并对必要的JavaScript进行优化。
2-4 利用CDN
许多网站将“jQuery（JQuery）”作为汉堡菜单和图片滚动等各种JavaScript库来使用，但如果将其放置在自己的网站服务器上，会增加请求次数从而导致延迟。使用CDN（Content Delivery Network/内容分发网络）可以提高效率。
3. 通过“CSS”提升速度
CSS是向用户展示期望布局所不可或缺的元素。通过审查和优化CSS，有望加快首屏内容的显示速度。
3-1 CSS选择器应尽量精简至必要最小限度
上述 CSS 代码均为更改数字“0001”背景色的描述，但“子选择器”指定与“类选择器”指定在处理时间上有所不同。具体而言，在“子选择器”这类复杂指定的情况下，处理时间比“类选择器”这类 简单指定要长约 2.5 倍。因此，CSS 的定义应尽量简洁。
3-2 尽量合并为一个文件
请求数量增多会导致显示时间变长。在开发阶段将CSS文件分开是没有问题的，但在上传到网站时，最好将它们合并为一个CSS文件。这样做可以让浏览器只需进行一次获取CSS的网络处理，从而减轻页面显示的延迟。
今日词汇
大伴氏
网站每次新增内容时都会逐渐出现问题，需要定期审查并持续改进。应以“为用户提供有益的网站内容”为核心，保持平衡以健康运营。
本次，我们获知了一种让网站成为用户无压力、便捷购买平台的方法。我一直认为网站经过不断打磨会越来越好，但对方提到，如果处理方式不当，每次修改反而可能导致网站出现问题，这一观点令我印象深刻。
起初我担心自己能否跟上讲解的节奏，但今后我将以内容创作为基础，综合考虑Google的评估要点以及用户的易用性，持续进行网站优化。
