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

AI 编程助手,豆包旗下的编程助手,提供智能补全、智能预测、智能问答等能力,节省开发时间,释放脑海中的创造力,支持 VSCode,点击体验 AI

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


猜你喜欢

  • CSS Grid 中实现列表排版的三种方法

    CSS Grid 是一种强大的布局系统,可以用来排版各种类型的内容,包括列表。在本文中,我们将介绍三种使用 CSS Grid 实现列表排版的方法,包括: 基本网格布局 自适应网格布局 网格模板布局 ...

    16 天前
  • 如何在 Express.js 中使用 Sequelize 实现事务处理

    在编写应用程序时,事务处理是必须考虑的问题。特别是当需要在应用程序中进行复杂操作,例如涉及数据库事务处理时,事务处理就显得尤为重要。Express.js 是一款流行的 web 框架,而 Sequeli...

    16 天前
  • Hapi.js 中的文件上传与下载

    随着互联网技术的发展,文件上传与下载已经成为了一个很常见的需求。作为一名前端开发工程师,我们需要学习如何使用 Hapi.js 实现文件上传与下载的功能。无论是上传图片、音频、视频等等,Hapi.js ...

    16 天前
  • Redux 开发技术及实用技巧全分析

    前言 在 Web 应用程序开发中,管理状态是一项非常重要的任务。许多前端开发人员使用 Redux 来管理应用程序中的状态。Redux 是一个 JavaScript 应用程序状态容器,可存储应用程序状态...

    16 天前
  • Sequelize 如何实现数据库的软删除?

    在前端 web 开发中,使用 Sequelize 是一个相对常见的数据库 ORM 库。Sequelize 除了提供了基本的增删改查外,还可以实现数据库的软删除,即将记录的状态标记为已删除,而不是真正的...

    16 天前
  • Node.js 如何使用 Pug 模板引擎实现 HTML 渲染

    在 Web 开发中,HTML 是最常用的标记语言。虽然 HTML 的标签语义丰富,但它存在一些缺陷,比如 HTML 的语法比较臃肿,不便于开发者阅读和维护,而且 HTML 的渲染速度相对较慢。

    16 天前
  • 通过 NPM 安装和使用 Socket.io 库

    前言 在现代的 Web 应用中,实时的双向通讯已经变得越来越普遍了。这种即时通讯一般是通过 WebSocket 或者轮训实现的。而 Socket.io 库则是一个广泛使用的实现 WebSocket 的...

    16 天前
  • Promise.all 无响应情况处理

    Promise.all 无响应情况处理 当前前端开发中,异步编程已经成为了必不可少的一部分。而 Promise.all 作为一个能够在多个异步操作完成后返回的 promise 对象,是我们开发中非常常...

    16 天前
  • Server-Sent Events 超时时间的设置方法

    Server-Sent Events (SSE) 是一种从服务器向客户端单向传输数据流的技术,它可以实现实时更新和通知等功能。SSE 提供了许多有用的特性,其中包括设置超时时间,可以帮助开发人员更好地...

    16 天前
  • ES7 中的 String.prototype.padStart/padEnd 方法在数字格式化中的应用

    ES7 中的 String.prototype.padStart/padEnd 方法在数字格式化中的应用 ES7 (ECMAScript2016)中的 String.prototype.padStar...

    16 天前
  • 在 GraphQL 中处理大量数据的技巧

    GraphQL 是一种用于 API 的查询语言,它可以让应用程序只获取需要的数据,避免了传统 RESTful API 在获取数据时的浪费和冗余,从而提高了数据传输的效率和速度。

    16 天前
  • 如何根据运行环境使用 NPM 软件包来构建 Serverless 应用程序

    介绍 Serverless 是一种开发模式,它使得开发者可以编写代码并将其直接部署到云端环境中,而不需要关注服务器的管理和维护。开发者使用的是函数作为服务器,而不是传统的应用服务器,这些函数可以根据需...

    16 天前
  • CSS Reset 实战技巧分享:如何规范化网页结构

    前言 写前端的同学都知道,不同浏览器对 CSS 和 HTML 的解析方式存在差异,这会造成同一份代码在不同的浏览器中呈现出不同的样式。为了解决这个问题,就需要使用 CSS Reset。

    16 天前
  • 性能优化指南:如何提升应用程序的性能?

    随着互联网的高速发展,用户对于应用程序的性能也越发苛刻,任何让用户感到不舒服的延迟都可能导致用户流失。因此,前端性能优化一直都是前端工程师需要面临的巨大挑战。 前端性能优化可以提高页面的加载速度、响应...

    16 天前
  • 为什么我的 ESLint 不生效?

    如果你是一位前端开发者,那么你可能会遇到 ESLint 不生效的问题。这是一个常见的困扰,因为 ESLint 可以帮助我们提高代码质量、避免潜在的错误,并统一代码风格。

    16 天前
  • Koa2 生态圈之 koa-router

    在现代 Web 应用程序中,路由是必不可少的组成部分之一。Koa2 生态圈中最常用的路由工具之一就是 koa-router。本文将深入探究 koa-router 的功能和使用,以及如何在 Koa2 应...

    16 天前
  • 常见 Material Design 组件实现中遇到的错误及解决方案

    Material Design 是 Google 推出的视觉设计语言,已经成为了前端界面设计的重要参考标准。在实现 Material Design 组件时,我们通常会遇到一些常见的错误。

    16 天前
  • MongoDB 并发控制机制及应用

    MongoDB 是一个基于文档的分布式数据库系统,采用 NoSQL 非关系型数据库的方式进行存储。由于其分布式特点,MongoDB 在并发访问时需要进行有效的并发控制,避免数据的不一致性及脏读等问题。

    16 天前
  • 使用 ES9 的 New Features for Regular Expressions 提高正则表达式效率

    正则表达式是前端开发中常用的工具之一,它能够帮助我们快速地匹配、搜索、替换字符。ES9(即 ECMAScript 2018)为正则表达式引入了一些新的功能,以进一步提高正则表达式的效率。

    16 天前
  • 解决 Headless CMS 对图片资源的处理问题

    前言 随着 Headless CMS 在 web 开发中的应用逐渐广泛,对其在操作图片资源方面需要更深入的了解。 本文将详细介绍 Headless CMS 在图片处理方面所存在的问题,并提供一些解决方...

    16 天前

相关推荐

    暂无文章