PWA 项目中如何利用 Lighthouse 优化页面

阅读时长 7 分钟读完

PWA（Progressive Web Apps）是一种新兴的 Web 应用程序开发方式，可以为用户提供与原生应用程序类似的体验，而无需安装或下载应用程序。PWA 已经被越来越多的企业和开发者采用，同时也需要优化及提升用户体验。本文将介绍如何利用 Google 的 Lighthouse 工具优化 PWA 项目的页面，让您的页面速度更快、响应更快且交互更流畅。

Lighthouse 是什么？

Lighthouse 是 Google 推出的一款开源工具，可以帮助开发者检查网站性能、可访问性等方面的问题，并提供改进建议。Lighthouse 使用 Chrome DevTools 进行网站评估，并生成一个 Lighthouse 报告，其中包含一些关于网站性能和开发建议的指标。利用 Lighthouse 工具可以快速识别和解决前端项目的性能优化问题，从而提升用户体验，减低跳出率，增加转化率。

PWA 项目中的 Lighthouse 评估指标

要了解如何利用 Lighthouse 工具优化 PWA 项目页面，首先需要了解 Lighthouse 的一些评估指标。以下是应注意的一些最重要的指标：

  • Performance：网站性能
  • Accessibility：可访问性
  • Best Practices：最佳实践
  • Progressive Web App：渐进式 Web 应用

Performance

性能是用户体验最主要的因素之一，因此，提高网站性能至关重要。Lighthouse 在性能方面提供了以下指标：

  • First Contentful Paint（FCP）：页面的第一个内容位于屏幕上的时间（在未格式化的文本或图像先出现在屏幕上之前）。
  • Largest Contentful Paint（LCP）：在页面主视口中可见的最大内容块的呈现时间（一个内容块是一个元素，如文字或图片）。
  • Speed Index（SI）：在页面生命周期中，呈现出可视化的内容速度。
  • Time to Interactive（TTI）：在页面完全加载和呈现之前，用户可以在页面上交互的时间。
  • Total Blocking Time（TBT）：从交互开始时到页面完全响应为止，视口内的长任务总数。

Accessibility

可访问性是指网站可以被所有用户访问，而不受他们的能力或环境的影响。 Lighthouse 使用以下准则来评估可访问性：

  • ARIA：ARIA 属性是否正确地描述了网页的结构和组件；?
  • Color Contrast：元素文字与背景颜色是否有足够的对比度；
  • Semantics：HTML 的语义是否准确描述了内容和组件的结构和功能；
  • Language of Page：页面代码是否正确配置为所使用的语言。

Best Practices

最佳实践表示我们建议的通用技术，有助于改进网站性能，并保持规范性和可靠性。以下是 Lighthouse 可与之相关的最佳实践：

  • User Experience：是否启用了用户体验的最佳实践；
  • Security：网站是否经过安全性检查，以确保数据收集和传输的安全性；
  • Images：是否正确优化了图片文件；
  • Links：链接是否有效，且指向正确的目标。

Progressive Web App

Lighthouse 还为渐进式 Web 应用提供了评估指标，包括以下几个方面：

  • Load Time Progression：标识应用程序中最耗时的缓存项；
  • Offline Support：测量应用程序中的离线支持；
  • Web Application Manifest：检查 Web 应用程序清单的完整性和正确性；
  • Service Worker：评估网页能否利用服务工作线程缓存内容和实现离线功能。

如何使用 Lighthouse 评估页面性能

现在我们已经了解了 Lighthouse 工具在 PWA 项目中的评估指标，那么，我们可以轻松使用 Lighthouse 工具来检查我们的页面性能。

1. 安装 Lighthouse

Lighthouse 可以通过 Chrome DevTools 和 command line（CLI）来使用。要使用 Lighthouse，请确保先安装 Chrome 浏览器。

命令行使用：

2. 执行 Lighthouse 任务

将 Lighthouse 添加为浏览器的扩展程序后，我们只需点击浏览器地址栏中的扩展程序图标，然后单击“Generate Report”。

此操作将生成整个网站的 Lighthouse 报告。点击每个分类，以查看该分类的详细数据和相应的建议。

3. 解读 Lighthouse 报告

Lighthouse 报告显示了在每个分类中针对页面执行的实用指南。以下是您需要重点关注的指南：

  • Opportunities for Improvement：这是您应该优化的首要任务列表。在这里，您将找到相应的建议以提高页面性能。
  • Diagnostics：这些是潜在的问题（注意：所有项目都不一定是问题）以及您可以进行的建议，而不是机会。这是一些提示，可以帮助您理解评估中可能出现的麻烦（如缺少 WebP 版本图像）。
  • Informational：这些是其他信息条目，可能对您的 PWA 有用，但不一定会对过程产生影响。例如，报告可能会指出应用程序已在本地安装。

4. 实践

下面是利用 Lighthouse 和下列代码实现快速网站访问速度的示例：

-- -------------------- ---- -------
--------- -----
------
  ------
    ----- --------------- --
    ----------------- ----- -------------
    ------- --------------------------
  -------
  ------
    -------------- ----- ----------
    --------- ---------- ------
    ------- -----------------------
    --------
      -------------------------------------------------------- -- -- -
        ------------------------------ - ---------------------------- - -----------
      ---
    ---------
  -------
-------

这个 PWA 项目中包含了该页面所有必要的功能，如离线时的缓存机制、快速响应和还原、可访问性和可用性等，同时，该项目还包含符合 PWA 标准的离线体验和应用程序清单。

下面是使用 Lighthouse 工具检测该 PWA 项目的报告实例。该报告显示出该项目在各个方面的性能和可访问性，以及有关如何进一步优化该项目的建议：

该 Lighthouse 报告告诉我们：

  1. Performance 得分为 99。
  2. Accessibility 得分为 100。
  3. Best Practices 得分为 100。
  4. Progressive Web App 得分为 90。

该报告反馈系统告知我们，该项目在性能、可访问性和最佳实践方面的成绩非常出色。不过，在“渐进式 Web 应用”方面，还有改进的余地，可以采取一些建议以进一步提高该项目的 PWA 分数。

结论

通过利用 Lighthouse 工具评估 PWA 项目，可以发现并解决您项目中的性能和可访问性问题，从而实现更好的用户体验。 我们向您展示了如何利用 Lighthouse 来评估您的 PWA 项目，以及如何解释报告以实现更好的清晰性并优化您的网站性能。 此外，我们展示了一个简单的 PWA 项目示例，可以用来实践执行 Lighthouse 建议并进行开发。 开始使用此工具吧，您将提高 PWA 项目的性能，体验更优质，做出更多的贡献并让广大用户受益！

来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6719dfea9b4aadf9e006629c

纠错
反馈
相关推荐
精选内容