1、Perfomance
可能会报如下错误,未启用gzip文本压缩,
Serve images that are appropriately-sized to save cellular data and improve load time.
提供适当大小的图像,以保存蜂窝数据并缩短加载时间。
解决:这个问题是因为图片的尺寸和屏幕显示的尺寸不一致导致,比如数据图片是很大的一张图片,但在网页显示却占很小的像素。要用到img的srcset属性显示不同尺寸的图片。但是我们首页都是用的上传的图片,不知道图片的尺寸。所以只能压缩上传的图片,以提高分数。可以使用rue-image-compressor插件,也可以看看我之前写的压缩图片的方法
Text-based resources should be served with compression (gzip, deflate or brotli) to minimize total network bytes.
基于文本的资源应该使用压缩(gzip、deflate或brotli),以最大限度地减少网络总字节数。
解决:npm i vite-plugin-compression -D
在vite.config.ts文件中配置
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import viteCompression from 'vite-plugin-compression'
export default defineConfig({
plugins: [
vue(),
viteCompression({
verbose: true, // 默认即可
disable: false, //开启压缩(不禁用),默认即可
deleteOriginFile: false, //删除源文件
algorithm: 'gzip', //压缩算法
ext: '.gz', //文件类型
threshold: 1024 // 对大于 1kb 的文件进行压缩
})],
})
Reduce unused JavaScript and defer loading scripts until they are required to decrease bytes consumed by network activity.
减少未使用的JavaScript,并推迟加载脚本,直到需要它们来减少网络活动所消耗的字节数。
减 JavaScript 文件的大小
npm i terser
在vite.config.ts文件中配置
build: { minify: "terser", terserOptions: { compress: { drop_console: true, drop_debugger: true, }, } },
2、Accessibility
Elements with an ARIA [role] that require children to contain a specific [role] are missing some or all of those required children.
具有ARIA[角色]且要求子项包含特定[角色]的元素缺少部分或全部所需子项。
比如:el-menu的子项必须是el-menu-item
When an element doesn't have an accessible name, screen readers announce it with a generic name, making it unusable for users who rely on screen readers
当一个元素没有可访问的名称时,屏幕阅读器会用通用名称宣布它,这使得依赖屏幕阅读器的用户无法使用它
解决:加一个aria-label属性
When a button doesn't have an accessible name, screen readers announce it as "button", making it unusable for users who rely on screen readers.
当按钮没有可访问的名称时,屏幕阅读器会将其宣布为“按钮”,这使得依赖屏幕阅读器的用户无法使用该按钮。
解决:加一个aria-label属性,elementui的走马灯的分页下标按钮是个空按钮
nextTick(()=>{ const list = document.getElementsByClassName('el-carousel__button') for(let i=0;i<list.length;i++){ list[i].setAttribute('aria-label','Button') } })
Informative elements should aim for short, descriptive alternate text. Decorative elements can be ignored with an empty alt attribute.
信息元素应针对简短的描述性替代文本。装饰元素可以使用空的alt属性忽略。
解决:img加alt=''
Link text (and alternate text for images, when used as links) that is discernible, unique, and focusable improves the navigation experience for screen reader users.
可辨别、独特和可聚焦的链接文本(以及用作链接时的图像替代文本)改善了屏幕阅读器用户的导航体验。
解决a链接加aria-label属性
4、SEO
Meta descriptions may be included in search results to concisely summarize page content.
元描述可以包括在搜索结果中以简明地总结页面内容。
解决:<meta name="description" content="描述">
还有些问题比如显示的图片要清晰,图片fit='cover'等,Lighthouse里面都要不合格的原因,和怎么解决,可以点链接进去看看,不过有的需要访问外网才能进。