热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

网站性能优化

Lighthouse性能分析 1、Lighthouse Performance与“指标”和“诊断结果”之间的关系指标对LighthousePerformance有直接关系,而优化诊

Lighthouse 性能分析

 

1、Lighthouse Performance与“指标”和“诊断结果”之间的关系

指标对 Lighthouse Performance 有直接关系,而优化诊断结果和建议可能会改善指标值,因此与Lighthouse Performance 存在间接关系。

 

 

2、Lighthouse Performance 如何加权

 

 

V8:

 

Total Blocking Time:30%           First Contentful Paint: 10%

 

Largest Contentful Paint:25%       Speed Index:10%  

 

Cumulative Layout Shift:15%        Time to Interactive:10%

 

各项指标介绍和达标范围:

 

 

 

 

 

 

各项指标详解和解决方案:

 

TBT: 总阻塞时间(xx-50ms) FCP 和 TTI 之间发生的每个长任务的阻塞时间总和。

 

长任务:主线程运行超过50ms的任务视为长任务,主线程被视为“阻塞状态”

 

 

 

 

 

 

导致长任务原因:

 

1、 不必要的 Javascript 加载、解析或执行

2、低效的JS语句

 

如何改进:

 

A、 减少第三方代码影响 (总阻塞时间 <250ms)

 

1、 移除不必要的第三方脚本

 

2、async 和 defer 属性应用

 

  a)      async属性:脚本网络请求是异步的,不会阻塞浏览器解析HTML, 下载完成后,如此时HTML还没解析完,暂停HTML解析,执行该脚本,再后续解析HTML。(可能会阻塞HTML解析)

  

  b)     defer属性:脚本网络请求时异步的,并在HTML解析完成之后即DomContentLoad事件之前执行。(不会阻塞HTML解析)

 

    

3、 Intersection Observer 实现对其进行延迟加载

 

 

B、 减少Javascript 执行时间 ( <2s ) 

  1、 代码拆分,按需加载

  2、 压缩代码

  3、 删除未使用的代码

 

C、 最小化主线程工作   (js解析引擎机制:https://www.kancloud.cn/xiaoyulive/system/598718)

  优化图像:

  选择正确的图像格式

  使用Imagemin压缩图片

  提供响应式图像

  提供具有正确尺寸的图像

  使用 WebP 图像

  使用图片 CDN 优化图片

  延迟加载图片和视频:

  使用延迟加载提高加载速度

  延迟加载图片

  延迟加载视频

  优化Javascript:

  通过代码拆分减少 Javascript 负载

  删除未使用的代码

  缩小和压缩网络负载

  CommonJS 如何让你的包变得更大 (https://web.dev/commonjs-larger-bundles/)

 

  优化CSS:

  推迟非关键 CSS

  缩小 CSS

  提取关键 CSS

  使用媒体查询优化 CSS 背景图像

 

  优化第三方资源:

  第三方 Javascript 性能

  识别缓慢的第三方 Javascript

  高效加载第三方 Javascript

  优化WebFonts:

  在字体加载期间避免不可见的文本(font-display)

  优化 WebFont 加载和渲染

  减小网页字体大小

 

其他细节:

 

a)     去抖动输入处理程序(scroll、touch) 

 

b) Web Woker 处理耗时任务

 

c)     减少样式计算的范围和复杂性、避免强制同步布局和布局抖动

 

 

 

避免强制同步布局:(强制浏览器在传输到显示器的过程中先执行布局,导致在渲染过程中重复步骤。)

 

 

 

布局抖动:(一个使浏览器进入读 - 写 - 读 - 写循环周期,迫使浏览器一遍又一遍的重新计算布局。)

 

 

 

d)尽量使用合成属性, 精准、GPU上合成图像(transform、opacity) ,用willchange / transform 提升图层

 

 

 

FCP:首次内容绘制 (FCP) 指标测量页面从开始加载到页面内容的任何部分在屏幕上完成渲染的时间。

 

A、 消除渲染阻塞资源 (识别关键CSS 内联到HTML中,异步加载非关键CSS)

 

B、 缩小CSS

 

C、 字体加载期间避免不可见文本

 

D、 采用高效的缓存策略

 

E、 避免DOM规模过大 (总共超过1500个节点,具有大于32个节点的深度,有超过60个子节点的父节点)

 

F:避免链接关键请求 (延迟加载处理)

 

 

TTI: ( <5s,TBT是TTI一个量化指标,阻塞时间越短,TTI 越小)

TTI计算方法:

1、先进行First Contentful Paint 首次内容绘制 (FCP)。

2、沿时间轴正向搜索时长至少为 5 秒的安静窗口,其中,安静窗口的定义为:没有长任务且不超过两个正在处理的网络 GET 请求。

3、沿时间轴反向搜索安静窗口之前的最后一个长任务,如果没有找到长任务,则在 FCP 步骤停止执行。

4、TTI 是安静窗口之前最后一个长任务的结束时间(如果没有找到长任务,则与 FCP 值相同)。

 

 

 

LCP:

 

 

哪些元素会在考量范围内:

 

Img元素

内嵌在SVG里面的Image元素

Video元素

块元素

 

最大内容区报告规则:

 

元素完成渲染并且对用户可见后的最大内容元素,但一旦更大的元素完成渲染,就会通过另一个PerformanceEntry对象进行报告。

 

 

 

图一:是随着新内容DOM的添加,导致最大内容区的改变

图二:最大内容区从可视区被移除

 

 

CLS: 只要可视区域中可见元素的起始位置(例如,元素在默认书写模式下的顶部和左侧位置)在两帧之间发生了变更,该 API 就会报告layout-shift条目。这样的元素被视为不稳定元素。

 

 

 

造成CLS偏高的原因:

 

1、无尺寸的图像,设置好width,height属性,浏览器会自动计算宽高比

2、无尺寸的广告、嵌入和 iframe,需要预留广告位

3、动态注入的内容 (留出预留空间)

4、导致不可见文本闪烁 (FOIT)/无样式文本闪烁 (FOUT) 的网络字体

 



推荐阅读
  • Node.js 教程第五讲:深入解析 EventEmitter(事件监听与发射机制)
    本文将深入探讨 Node.js 中的 EventEmitter 模块,详细介绍其在事件监听与发射机制中的应用。内容涵盖事件驱动的基本概念、如何在 Node.js 中注册和触发自定义事件,以及 EventEmitter 的核心 API 和使用方法。通过本教程,读者将能够全面理解并熟练运用 EventEmitter 进行高效的事件处理。 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • 在处理大规模数据数组时,优化分页组件对于提高页面加载速度和用户体验至关重要。本文探讨了如何通过高效的分页策略,减少数据渲染的负担,提升应用性能。具体方法包括懒加载、虚拟滚动和数据预取等技术,这些技术能够显著降低内存占用和提升响应速度。通过实际案例分析,展示了这些优化措施的有效性和可行性。 ... [详细]
  • 为了确保iOS应用能够安全地访问网站数据,本文介绍了如何在Nginx服务器上轻松配置CertBot以实现SSL证书的自动化管理。通过这一过程,可以确保应用始终使用HTTPS协议,从而提升数据传输的安全性和可靠性。文章详细阐述了配置步骤和常见问题的解决方法,帮助读者快速上手并成功部署SSL证书。 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 线程能否先以安全方式获取对象,再进行非安全发布? ... [详细]
  • Java测试服务器调试指南详细介绍了如何进行远程调试,并深入解析了Java Xdebug参数的使用方法。本文首先概述了Java内置的调试功能,重点介绍了JDB这一类似于GDB的强大调试工具。通过实例演示,读者可以掌握在测试环境中高效调试Java应用程序的技巧,包括配置远程调试环境和优化调试参数,以提高开发效率和代码质量。 ... [详细]
  • 在 Angular Google Maps 中实现图片嵌入信息窗口的功能,可以通过使用 `@agm/core` 库来实现。该库提供了丰富的 API 和组件,使得开发者可以轻松地在地图上的信息窗口中嵌入图片。本文将详细介绍如何配置和使用这些组件,以实现动态加载和显示图片的功能。此外,还将探讨一些常见的问题和解决方案,帮助开发者更好地集成这一功能。 ... [详细]
  • 本文详细介绍了 jQuery 的入门知识与实战应用,首先讲解了如何引入 jQuery 库及入口函数的使用方法,为初学者提供了清晰的操作指南。此外,还深入探讨了 jQuery 在实际项目中的多种应用场景,包括 DOM 操作、事件处理和 AJAX 请求等,帮助读者全面掌握 jQuery 的核心功能与技巧。 ... [详细]
  • MicrosoftDeploymentToolkit2010部署培训实验手册V1.0目录实验环境说明3实验环境虚拟机使用信息3注意:4实验手册正文说 ... [详细]
  • 本文介绍了在使用 video.js 进行视频切换时遇到的播放错误,并提供了详细的解决方案。 ... [详细]
  • 解决Bootstrap DataTable Ajax请求重复问题
    在最近的一个项目中,我们使用了JQuery DataTable进行数据展示,虽然使用起来非常方便,但在测试过程中发现了一个问题:当查询条件改变时,有时查询结果的数据不正确。通过FireBug调试发现,点击搜索按钮时,会发送两次Ajax请求,一次是原条件的请求,一次是新条件的请求。 ... [详细]
  • 在探讨C语言编程文本编辑器的最佳选择与专业推荐时,本文将引导读者构建一个基础的文本编辑器程序。该程序不仅能够打开并显示文本文件的内容及其路径,还集成了菜单和工具栏功能,为用户提供更加便捷的操作体验。通过本案例的学习,读者可以深入了解文本编辑器的核心实现机制。 ... [详细]
  • 本文介绍了如何通过掌握 IScroll 技巧来实现流畅的上拉加载和下拉刷新功能。首先,需要按正确的顺序引入相关文件:1. Zepto;2. iScroll.js;3. scroll-probe.js。此外,还提供了完整的代码示例,可在 GitHub 仓库中查看。通过这些步骤,开发者可以轻松实现高效、流畅的滚动效果,提升用户体验。 ... [详细]
  • 探讨 `org.openide.windows.TopComponent.componentOpened()` 方法的应用及其代码实例分析 ... [详细]
author-avatar
詹建红_335
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有