爆速100分！高速环境下的网页无障碍！Lighthouse绽放烟火！

掌握网页无障碍！

「前端有S级高手，标记语言也是，我们甚至还在做营销自动化工具的UI设计，所以无障碍对我们来说根本不算事儿！」就带着这样天真的想法，Liberogic开启了网页无障碍项目……结果实际上是一场激烈的战役的开幕。由于立下了WCAG 2.2完全合规这样的远大目标，随之而来的是多年来持续不断的学习会和永无休止的讨论……我们真切地意识到，之前太轻视这个问题了。

回想起几年前项目初期的无障碍学习会。
「WCAG和JIS X 8341-3:2016有什么区别？」
「WCAG2.0和JIS X 8341-3:2016是一样的！」
就从这样基础的对话开始了漫长的征程。
「这个合规标准的理解是这样吗？」
「不对，那是另一个标准」
重复着无尽的讨论和修改，终于建立了以WCAG2.2 A级合规为目标的体制。

重建自己的网站吧！

「我们的网站，是不是和我们的业务不太匹配？」
就这一句话，启动了自建网站的改版项目。
「既然要做，不如把无障碍、SEO这些全力投入！」
面对这样的期待，平时再忙也很出色的员工们（大概）欣然接手了这项工作。

「这个颜色的对比度不符合要求！」
「可是从设计角度看效果很好啊……」
「能在规范范围内调整吗？」
就这样，在设计和无障碍之间摸索试验。
标记语言方面，则逐一清晰地通过了严苛的测试项清单。

终于完成了！
虽然比最初的计划大幅延期，但我们切实感受到了技术进步的手感。

在 Lighthouse 中获得 100 分！并且在 PageSpeed Insights 中也获得高分！

我们公司采用 Astro + microCMS + Cloudflare 构建的网站在 Lighthouse 中获得高分，这是我们预期之中的事。accessibility 方面当然完美无缺！Lighthouse 的 accessibility 测试采用了高度可靠的 axe-core，因此 WCAG 合规性工作得到了相当直观的评估。

关于性能问题，由于页面中有大量图像，且各种动画效果众多，最初的成绩略显不理想。但通过逐一优化 Web 字体的加载方式、调整图像压缩率和格式、精细调整资源加载优先级等一系列扎实的微调工作，最终那一刻终于到来了！

＼ 100分！ ／

PC版Lighthouse的所有项目都满分！而且，那个传言是真的。"哇哦！在Lighthouse中取得全部100分时，Google竟然会为你放烟火庆祝！"

哇，真的吗！？之前的网站才勉强达到80～90分，现在竟然这么高？虽然也得感谢Astro，但这真是太厉害了！

谷歌提供的网站性能测量工具 PageSpeed Insights 也毫无悬念地给出了满分 100 分。

但是 PageSpeed Insights 没有任何特殊的庆祝效果（比如烟火）。由于经历过这边 99 分、那边 100 分的情况，我希望 Google 能够添加一些欢庆的演出效果。🎇

顺便说一下，Lighthouse 和 PageSpeed Insights 的得分会因为测量执行时的网络环境、服务器状态、浏览器情况等而波动，所以即使达到了 100 分，也不一定能始终保持该得分，需要注意这一点。

在移动设备上获得满分性能真的不可能吗？...大概就是这样。（↑当时没有截图，所以这是最近拍的）

真正的目标在分数之外

"不过，从用户的角度来看，这样的结果不是理所当然吗…？"

与其追求分数，不如彻底贯彻为所有使用网站的人而设计的理念，这样的结果自然会获得最高的评价。「满分100」只是一个中途站。真正的目标是创建对任何人都舒适、易用的网站！！

目前，为了确认业务的可行性，我们正在实施各种实验性功能，Lighthouse的分数相比当时有所下降。我天真地「为什么呢～？」反复追问，但对大家来说，业务可行性的确认显然比我的任性更重要。

就这样，我们永不止息的探索之旅还在继续。