PWA 工具 Lighthouse 测评优化实践
随着移动互联网的普及以及用户需求的不断提高，PWA（渐进式 Web 应用程序）成为了一种受欢迎的解决方案。为了让 PWA 应用更好地服务于用户，Lighthouse 作为 PWA 应用的常用工具之一，可以帮助开发者评估和优化 PWA 应用的性能、可访问性、SEO、可维护性等方面，提升用户体验。
本篇文章将探讨 Lighthouse 的使用以及优化实践，并结合实例代码，帮助开发者更好的运用这一工具。
Lighthouse 工具简介
Lighthouse 是 Google 开发的基于 Chrome 开发者工具的开放源代码项目，旨在评估 PWA 应用的性能、可访问性、SEO、可维护性等方面，可以帮助开发者轻松识别和解决网页缺陷。Lighthouse 可以直接作为 Chrome 开发者工具的一部分使用，也可以通过 Web 版本（https://web.dev/measure/）进行评估。
Lighthouse 的评测模块包括以下几个方面：
- 性能：评估网页加载速度、资源大小、运行时性能等方面，提供详细的优化建议；
- 可访问性：评估网页是否易于使用，如网站是否易于导航、是否符合无障碍标准等；
- 最佳实践：评估网页是否采用了最新的 Web 技术和最佳实践；
- SEO：评估网页在搜索引擎中的排名和可见性；
- 渐进式 Web 应用：评估网页是否具有 PWA 的特性，如离线访问、添加到主屏幕等。
除了 Lighthouse，还可以使用 Web.dev，这是一个网络技术学习平台，提供了很多不同方面的课程（如：Velocity，Network等等），供开发者学习使用。还包括了一个 Lighthouse 的仪表板工具，它们有几种常用的仪表板可供开发人员参考，在这里也可以快速运行 Lighthouse 测评。
Lighthouse 使用
在使用 Lighthouse 进行评测的时候，首先需要使用 Chrome 浏览器中的开发者工具，点击工具菜单后，选择“Audit"选项，即可开始评测。
评测过程中，需要保证主要的检测项都通过。我们可以通过分数来评估网页优化的程度。分数从 0 到 100 分，分数越高，说明网页优化程度越好。如果分数不是很理想，那么可以根据评测结果来查找非常详尽的优化建议，帮助我们优化网站。需要注意的是，即使分数较高，我们也需要认真查看评测结果，解决可能存在的问题。
优化实践
通过 Lighthouse 的评测分析，我们可以考虑进行以下实践操作：
- 提高网页加载速度
我们可以在前端开发中，采用合理的代码和请求优化等方式，确保网页能够快速地加载。
（1）Lazy Loading
Lazy Loading 是一种让网页上的图片在用户滚动到它们时再加载的技术，这可以大大加快网页的加载速度。该技术可以通过以下代码实现：
-- -------------------- ---- -------
---- ---------------------- ------------------------- --
--------
--------------------------------------------- ---------- -
--- -------------- - -------------------------------------------
------------------------------------ -
----------------------- ------------------------------
---------- - ---------- -
--------------------------------
--
---
---
---------（2）CDN 加速
使用 Content Delivery Network (CDN) 可以帮助加速网站的访问速度，从而提高用户的体验。
一些常用的 CDN 服务提供商包括：Akamai、CDN.net、Cloudflare、Fastly、KeyCDN 等。
- 提升可访问性
（1）关键功能的快捷键
我们可以为网站的关键功能添加键盘快捷键，使得对于需要频繁使用网站的用户来说，操作更为方便。这可以通过在 HTML 中添加 accesskey 属性来实现。
例如：
<a href="https://example.com" accesskey="c">主页</a>
- 采用渐进式 Web 应用
渐进式 Web 应用(PWA) 使得网站可以在离线情况下正常访问，同时也可以在移动端添加到主屏幕，可以提高网站的用户参与度。
（1）离线缓存
可以使用 Service Workers 技术缓存网页内容并在离线情况下正常访问。
-- -------------------- ---- -------
----- ------------ - -----
----- --------- - --------- - -------------
----- ----------- - -
----
-----------------
-------------
---------------
--
-- ------
-------------------------------- ----- -- -
----------------
------
----------------
----------- -- --------------------------
-------------------------
--
---
-- --------
------------------------------ ----- -- -
------------------
----------------------------------------- -- -
------ -------- -- ---------------------
--
--
---（2）添加到主屏幕
可以使用 Web App Manifest 或者自定义按钮等方式，使得网站可以被添加到 Android 或 iOS 的主屏幕上，在用户低你之间，可以增加用户的浏览的持续时间。
下面内容为 Manifest.json
-- -------------------- ---- -------
-
------- ---- ----------- ------
------------- ---- ------
-------- ----
------------ ----
---------- -------------
-------------- -----------
------------------- ----------
-------------- ----------
-------------- ----- -- - --- -------
-------- -
-
------ -----------------------
-------- --------
------- -----------
--
-
------ -----------------------
-------- --------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
--
-
------ -------------------------
-------- ----------
------- -----------
-
-
-总结
本文介绍了 PWA 工具 Lighthouse 的测评和优化实践。相信通过 Lighthouse 的评测，可以提高网页性能、可访问性、可维护性等方面的优化。同时，渐进式 Web 应用也成为 PWA 开发中的必备技能之一，能够提高网站的用户参与度和用户体验，为开发者的工作提供了更多的可能性。通过优化实践，我们可以让我们的网站更快、更好地服务于用户。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6485335648841e989441b5a9